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.
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.
So far, some of the examples of the drawing capabilities of Degrafa have been relatively simple in order to stress key concepts and features. We think it’s important that users of the framework are in no way limited in what they can create and as we progress with Degrafa we will try to put together complex examples of the capabilities when ever possible.
In this case we’ve taken an SVG from here and ported it over to Degrafa in under 1900 lines of MXML (minus some line breaks). Also, we added the ability to change the color of the tiger’s eyes just as a quick example of affecting the graphic dynamically. Here’s the sample:
This tiger is drawn using shorthand path data that maps directly to SVG path data in that they are the same. However, you are not limited to that drawing method. The SVG path data for this example was copied and pasted into the Degrafa markup. Here’s an example of how one whisker is drawn, including Fills and Strokes:
Each shape is drawn as a Path and uses short hand markup for moveTo, cubicBezierTo and positioning. With this method you can create objects similar to the way SVGs are drawn and you can get very detailed. Once the objects are drawn, you are free to manipulate them as you see fit.
In the short term we’d like to integrate the ability for someone to create artwork in Illustrator, export it as an SVG, and then bring it right into Flex via Degrafa to leverage the benefits of having a dynamic graphic versus a static one.
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.
