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.

We will be introducing a couple more simple yet sophisticated decorations into Degrafa Beta 3.2 in order to show the multitude of ways this feature can be used. One of these is ShapeStrokeDecorator. This is a different type of decoration compared to the the SVGDashLine example in that in MXML it “wraps” the geometry you wish to decorate rather than being a nested tag. Consider the order of composition reversed between the two types.

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.

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.

On Halloween Branden Hall and Joshua Davis released the HYPE framework into the wild. As they describe it, the Hype framework is:

… 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

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.

One of the most common things we get asked about in the community is if there’s a version of Degrafa for AS3-only projects, i.e. a way to use Degrafa without having to use Flex. This was definitely on our roadmap, but working on the actual framework itself was taking priority.

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

When John and Tom called people out for being late with their slides, well, that was me. If you went to find the slides for the Degrafa presentation on your USB thumb drive they weren’t there. So, here they are.

It’s been nearly 5 months since we released Degrafa 3.1 Beta and we’re steadily moving towards a 1.0 release. Since 3.1 we’ve seen the number of people using Degrafa drastically increase with download numbers at over 18,000 and that doesn’t include people using the SVN. We get daily emails from people using the framework, great questions on the Degrafa Group and more people eager to contribute. It’s an exciting thing to see!

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’re a little behind in posting these slides from Flex Camp Orange County. Tom Gonzalez and Juan Sanchez presented the “top 5″ features of Degrafa. Of course, these features are debatable and really we just wanted to point out some of the features that make Degrafa stand out.

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.

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.