Lately we’ve been posting about new features coming in Degrafa Beta 3.2, but some of these have been in the development branch codebase for a while. One of those features is masks, which have been in the codebase in various forms since late last year and were extended to cover 4 main masking modes mid-year.

Some of the features of masks in Degrafa go beyond what is offered as regular masking support in the Flash Player. With masks in Degrafa you can define a shape via Degrafa MXML and mask another Degrafa object with a few interesting mask types:

svgMask – Luminosity+Alpha: Takes into account the color, alpha and shape of the mask shape to define the mask.

alpha – Uses the alpha of the mask shape to define the mask. This is equivalent to Flash Player native alpha masking

svgClip –  Uses the defined path of a shape of a mask shape to define the mask. Does not take into account things like strokes.

clip – this takes into account the filled region of the mask only to clip the maskee and is equivalent to the flash player native clipping mask

unMask – Removes any applied masks to show the mask fully rendered

You can see a simple example of Degrafa mask here. This feature will also be packaged as part of the Beta 3.2 release of Degrafa.

Greg Dove, a Degrafa core team member, and the creator of Degrafa’s VectorFill, has broken new ground with another new Degrafa paint object, VideoFill.

There have been a couple of sneak previews of VideoFill over the past few months; Juan showed a quick preview at 360|Flex earlier this year and Greg showed a quick demo at FlashCamp in New Zealand as recently as September. Well, no more ’sneaks’ (apart from this one!), it’s finally going to be available from beta 3.2.

You won’t believe all the things you can do with this, suffice to say that it makes some video effects that could be difficult to achieve – even in the Flash authoring tool – very easy to code in Flex with Degrafa.

To be honest, we don’t know what you will do with VideoFill. We can see it being used in creating custom players for specific video content or for specific vector/clipping effects for video -this is quite practical and quick to do with VideoFill. And yes…it can be used for skinning if absolutely required (’absolutely’? yeah we can’t think of when that would be either….but hey, we’ll let someone else tell you not to do it!).

A screen capture from the Avatar trailer being used as a VideoFill

Under the hood, to make VideoFill work, a complete new custom video player class was written from the ground up, designed for the purpose of supporting the way that VideoFill does its magic internally within Degrafa. VideoFill does require data access permission to work with the bitmapData of the video, but that is quite straightforward if you load from a domain under your control. It handles both progressive download video and also has support for rtmp streaming video content. Greg is also planning to add in support for the Camera object to round things out in terms of capabilities/support so that it’s easy to add live webcam content as a fill.

Back in the realm of regular paint classes in Degrafa, VideoFill is an ITransformablePaint object, which means you can spin, skew, scale and move a VideoFilll inside its target Geometry object using Degrafa’s Transforms…all while the video is happily playing! Watch out for more VideoFill information and tutorials after additional exciting beta 3.2 announcements in the coming days. We’ll add an official VideoFill sample to the Degrafa samples page as soon as beta 3.2 is released…for now you can whet your appetite on this one.

During the Degrafa presentation at 360|Flex Indianapolis, there were a number of things demoed that really seemed to peek people’s attention. One of those things was a new type of geometry called SuperShape2D.

In a sense, SuperShape2D is kind of like an AutoShape (like a Gear, Star, etc.) with properties specific to this geometry. However, behind the scenes each property is tied to some pretty complex math. The results of what you can accomplish by specifying a few values for each of these properties will give you a sense in why this geometry is called SuperShape2D. You can do some pretty wild stuff. Click the image to see the example.

With this new geometry you can now make a variety of interesting shapes, but that’s just part of the utility. You can also “morph” between shapes. This functionality was something Tom Gonzalez demoed as a part of his Axiis presentation at 360|Flex as a way to move from a plot chart to a bar chart. The crowd seemed to like that  Click the image to see the example.

So, how is all this possible? Well, it’s based on the way Degrafa geometry is drawn. In this case the base geometry is broken into a series of segments, which you can control. With more segments, the more detail you have to work with. Morphing shapes is achieved by gradually manipulating each segment that makes up the shape.

Progress is being made to wrap up the SuperShape2D and make it available for people to use. Who knows, we may even see a SuperShape3D.

People may or may not not know that the concept for Degrafa originated with something Jason Hawryluk created in Flex 2 called the Primitive Explorer. It basically allowed you to explore different primitive shapes and download the classes to be used in a project via MXML markup and CSS.

Well, nearly 2 years later Degrafa has come full circle to now add these shapes (along with a ton of others) to the framework to be accessed via MXML markup. We’re calling these new sets of classes “Auto Shapes”. You might be familiar with the term if you use Fireworks.

Each of the Auto Shapes is unique geometry that has it’s own set of properties, just like the base Degrafa geometry. For example, there is a DonutAutoShape and you can set both the inner and outer radius (along with other properties).

The nice thing about Auto Shapes is it cuts a lot of the work out of trying to compose multiple shapes together to get the desired final shape. Also, if you were to composite shapes together you wouldn’t have access to the properties that are unique to the shape.

Below is an example of some of these Auto Shapes, including a BurstAutoShape. On the BurstAutoShape ,the number of points has been specified, the size and it’s set to invert, giving the appearance of a flower. And, just like any other geometry in Degrafa, you can apply fills, strokes, transforms, decorators, etc. to make all kinds of cool stuff with very minimal code.

For now, you can access the first group of AutoShapes in the Origin branch of the Degrafa SVN. We will be continually adding more and encourage others to create and contribute their own. For those who end up using them, we’re open to any feedback you might have.

Here’s a quick demo showing how you can use SVG path data to draw shapes in Flex via Degrafa. I know it’s a bit hard to see the code because of the video size, but you can at least get a general sense of what’s going on.

What I’m going through here is a pretty manual process that were going to try to eliminate with some import/export and visual tool sets. You can see a slightly larger video here.

A couple of the principle goals for Degrafa is reusability, and minimizing the code required to draw visuals. There are a lot of different ways to achieve this in Degrafa, but here’s one that’s particularly fun and interesting. In a former post we mentioned a Repeater as a means to reuse an object in a structured manner. Let’s take a look at the Repeater in closer detail.

The Repeater

Working with Degrafa, each geometry object can have a Repeater associated with it. The Repeater allows you to repeat the geometry using offsets you specify. These offsets are incremented progressively for the repeat count. It draws into the parent geometry objects graphics surface so the ensemble is considered one object.

Using a Repeater

Let’s start by specifying a stroke with an id of OrangeStroke.

Next, a simple line is defined with the Stroke bound to the above Stroke Object.

To repeat this Line object lets add a Repeater. After doing so, our Line object will look like this:

The above Line object will be drawn 11 times with the offsets we specified.

So now we have 11 vertical lines. We can easily turn this into a grid by defining another Line geometry object similar to the one above but on the horizontal axis.

Here is the second Line object that draws 11 lines on the horizontal axis.

A perfect reusable grid in just a few lines of MXML mark-up. No action script required, no math, no loops, no need to define any classes, and it’s readable to anyone.

More Samples

With the Repeater you can do some pretty interesting things. Here’s some quick examples made with Circles and Arcs:


Among other things that will be added to the Repeater are variations of objects that are repeated. For example, repeating lines that are different colors, heights, widths, random, etc.

As Degrafa evolves, Jason and I are trying to make sure we can account for a number of features someone may find important when creating graphics with the framework. Fills and Strokes are very important because they literally make up the shapes that get drawn.

Without a strong solution for those two things you’re left with a something somewhat lackluster. Here’s an example of where things are at so far with Fills and Strokes:

Fills

Fills are created outside and independent of any shape to make sure they can be repurposed. Each type of fill is declared in between a tag, so the MXML for all these fills together would look like this:

Bitmap Fills

Let’s take a look at each Fill separately. The top-left circle is an example of using a Bitmap Fill and the Fill is created like this:

The imageSource variable name points to an embedded image, repeat allows you to specify if you’d like the image to repeat, rotation allows you to rotate the bitmap fill and smooth allows you to smooth out the bitmap fill. Smooth was helpful in this example where without it the edges of the repeated image were jagged.

Gradient Fills

Gradient fills allow you to create linear and radial gradient fills with multiple color, alpha, and ratio specifications. The top-middle circle is an example of a Gradient Fill. The MXML looks like this:

This creates a 3 color gradient fill with various ratios and alphas.

Solid Fills

Solid fills are pretty straight forward, it supports color and alpha. The MXML looks like this:

Working with Strokes

Just like Fills, Strokes are specified independent from any shape or object. Gradient Strokes, both linear and radial, and Solid Strokes are part of Degrafa. You can also specify things like joints, caps, spreadMethod, angle, miterLimit, scaleMode, pixelHinting and more. The MXML for a group of Strokes would look like this:

As things progress, the ability to created different stroke styles like dashed, dotted, random, etc. will be added as well as the ability to add start/end caps like arrow heads, shapes, images, etc. Here’s an example of some strokes:

Gradient Strokes

As mentioned above, Radial and Linear Gradient strokes can be created using Degrafa. The code for the top-left example looks like this:

The MXML for the radial stroke example to the top-right has square caps and bevel joints and looks like this:

Solid Strokes

Solid Strokes can have caps, joints, color, miterLimit, scaleMode, pixelHinting, etc. specified. The MXML:

Another thing worth mentioning is that we’re looking to allow the ability to specify Fills and Strokes properties through CSS, so there’s a way to maintain consistency throughout an app without code redundancy.