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.

ShapeStrokeDecorator achieves results similar to advanced path tools in a vector editor that allow placement of items along a path.

This decoration will be part of beta 3.2 due out this week. Here it is in action.

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.

… a creative coding framework built on top of ActionScript 3. A major goal of HYPE is to allow newcomers to Flash and ActionScript to creatively play and express themselves while they are learning how to program.

After seeing Joshua Davis give a talk at Adobe MAX I was excited to start playing around with the framework. Well, that and seeing how Degrafa AS3 and HYPE might work together.

Below is a basic example I put together that takes some of what Branden Hall walked through in a demo and some of what was demoed at 360|Flex Indy. The example uses one of Degrafa’s Gear AutoShapes, which is drawn to a MovieClip and manipulated with the HYPE framework.

As I have more time I’d like put together some more complex examples. In the mean time, if anyone else has an example of Degrafa + HYPE, we’d love to see it.

Download the Source

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.

A few days ago, with the help of Ryan Campbell, we were able to demo using Degrafa in an AS3-only project created from Flash CS4 at 360|Flex. Things are still being ironed out, but people seemed interested in taking a look at the simple example. You can download the example below.

Our plans are to make 2 separate branches of Degrafa, one for Flex and one for AS3-only. Eventually, we hope to see the 2 branches become one. Hopefully this will allow even more people to take advantage of all the hard work that’s already been put into Degrafa.

Stay tuned for more details as things get a little more formalized around Degrafa in AS3-only projects.

Download the Degrafa AS3-only Flash Sample

Great progress is being made on the framework, so we’re excited to have a presentation slot for Degrafa at 360|Flex, this time in Indianapolis. Things we hope to cover are: the current status of the framework, demoing some great apps that heavily use Degrafa, talking about future features and Degrafa 1.0, walking through code, as well as discussing some very interesting new developments that may be on the horizon. We also hope to address any questions regarding Flex Graphics/FXG and Degrafa.

So, if you’re interested in Degrafa, the session is on Monday the 18th at 1pm. See you at 360|Flex!

We chose this as the outline for the presentation because of the 40 minute time slot. Even still, we ran over in time and were able to take some of the lunch time to finish the presentation.

Flex Camp Orange County was a great event and are happy we had a slot to present Degrafa to the community.

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.