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

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!

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.

Degrafa Beta 3.1 is now available. You can grab the new beta and read the new documentation.

Degrafa Beta 3 was a huge update from Beta 2 and took almost about 8 months to get done. The Beta 3 release as already received around 4,200 downloads and it seems more and more content is starting to float around, like screencasts, user group presentations, samples and tutorials. The response and encouragement from the community has been inspiring. It’s also great to hear how Degrafa has made it’s way into some of the biggest RIAs out there.

Now that the core features have been defined, we can move forward with things like updates to features, optimization, performance and bug fixes. We’re also on a more frequent release cycle on our way to Degrafa 1.0. In these releases we’ll also be including samples that display just how powerful Degrafa can be. So, be sure to keep an eye on the Degrafa Samples page.

Along with this release we gave a much needed update to the documentation. Hopefully exploring the documentation will offer some insight into all the additional goodies that comes with Beta 3 and the potential for future releases. We’ll also be updating the Degrafa Samples page with more great stuff.

If you’re using Degrafa Beta 2 or 3 you’ll probably want to update to this latest release. For SVN users, we’ve noticed some people have been unintentionally checking out old code via svn. If you are using the http://code.google.com/p/degrafa/source/browse/#svn/trunk/Degrafa for SVN you are still using the Beta 2. Beta 3 will remain in it’s original home located at http://code.google.com/p/degrafa/source/browse/#svn/branches/Origin/Degrafa . If you wish to use Beta 3 and take advantage of the ongoing work there you will need to use the Branches/Origin path for checking out from SVN in the second of those two links. Also, older downloads have been deprecated, but are still available on Google Code.

So, what exactly is in Degrafa Beta 3.1 and where are we going next? Here’s some notes:

Enhancements/Features

• RasterText now has support for regular Degrafa Fills
• Geometry now offers two mask modes
• Advanced math utilities added.
• A standard decorator package has been included, including two stroke decorators (for now)
• GeometryRepeater now provides easy access to the current iteration counter
• PropertyModifier offset property has been changed to modifier.

Bug Fixes

• Issue 64 addressed – Changes to inline MXML segments or points on path , polygon, and polyline will now properly update/draw with binding.
• BezierSpline will now properly auto close with the correct curvature.
• Issue 65 addressed – RasterText binding is now working as expected.
• RoundedRectangle and RoundedRectangleComplex now internally adapt their rendering to reduce a Flash Player rendering artifact under some circumstances. See this blog post

Known Issues

• Multiple decorator processing has not yet been implemented. Only one decorator will have an effect. Resolution planned for next update.
• TransformGroup processing of multiple registration points is not yet final. Review is underway. Resolution planned for next update.
• RasterText does not support alpha with a SolidFill. Resolution planned for next update.

The Framework

We will continue to evolve the framework in various areas.
Work has starting on optimization with focus on:

•     General Memory use and CPU
•     Object pooling and externalization of state. 
•     Opt in BitmapData cache

Initial memory and performance results are very promising.

The Degrafa Site

Look for new Degrafa code libraries and content based resources coming soon.

In Degrafa Beta 3 we introduced a new text object called RasterText. This object allows you to add text to your graphics compositions just like any other geometry. You can also have multiple text objects inside something that normally allows for one. For example, you could use RasterText to create 2 text items in a Button skin, rather than relying on the default single label of a Button, kinda like the example below. Click here to view the source.

RasterText is like other Degrafa geometry objects in the way it can be composed using fills, transforms, etc. RasterText renders as bitmap data, so things like Decorators and strokes around letters won’t work because there is not path defined. That’s what VectorText will take care of in the future.

Below is an example of several Degrafa fill types being applied to RasterText objects. As you can see, you’ll no longer be limited to solid-colored text. Click here to view the source

The ability to add these kinds of fills will be coming soon in Degrafa Beta 3.1 along with some other really great updates. Now that the core feature set is defined we’ll be looking to push out smaller updates more regularly. In the meantime you can still do some neat stuff just composing RasterText object together, like the CS4 Icon Previewer below. Click here to view the source

For those of you interested in learning more about Degrafa and all the new features in Beta 3, you’ll have a chance at Adobe MAX Europe. Jason Hawryluk and I (Juan Sanchez) will be giving a presentation on Tuesday during lunch in the Community Lounge. There will be a board with the exact time in the Community Lounge, so keep an eye out for it.

Jason and I are super excited to be giving this presentation. We’ve been working on Degrafa from the beginning for almost two years. It’ll be the first time we’ve met face to face, so if you’re attending MAX Europe you’ll be getting a presentation from the founders of Degrafa.

Degrafa has become super powerful, flexible and extensible for creating graphics for pretty much anything you can imagine, like mapping, graphics editing, dynamic graphics, rich UIs, artistic explorations and more. People at MAX North America got some awesome insight into Degrafa Beta 3, but it’s been a week and we’ve got even more to show. I think people will be amazed at what they can do with such minimal code.

This presentation is not to be missed and if you’ve got an example of how you’ve used Degrafa we’d love to see it. Also, be sure to grab other people at lunch and bring ‘em over. We hope to see you there.

This screencast walks through a couple basic examples of using the new GeometryRepeater class introduced in Degrafa Beta 3. GeometryRepeaters are a revamped form of the Repeaters introduced in Beta 2, but much more powerful and flexible. Be sure to check it out in HD.

The GeometryRepeater class allows you to repeat any geometry you compose with Degrafa and alter properties for every time the geometry is repeated. With GeometryRepeaters you can create things like bar charts, tick marks for a gauge, artistic explorations and a lot more.

In future screencasts we’ll explore using GeometryRepeaters mixed with other features of Beta 3 as well as different use cases and more complex examples. You can grab the latest release of Degrafa on the Degrafa Code page.