Since the very start of Degrafa our goal was to make it easier and more intuitive to create graphics in Flex than working directly with the native Flash drawing API. By enabling people to work with graphics through an easy to understand compact markup syntax we believed it would open up new areas of innovation and would improve and streamline the designer/developer workflow. Since we started we’ve had over 8,000 downloads of Degrafa, which is really a testament to how important tackling a strong graphics markup really is.

Of course, we weren’t the only ones to recognize the need that Degrafa addresses. At MAX 2007 Adobe officially announced Thermo (their RIA design tool), and FXG (MXMLG) the graphics markup that would support it. We were excited to see this – not only from a markup standpoint, but from a tooling perspective that would help streamline user adoption. Some people said FXG was the answer and Degrafa wasn’t needed anymore; others asked about a potential collaboration and some were Degrafa die-hards. Well, we’ve always felt strongly about the solutions Degrafa enables and have always been receptive to potential collaborations with Adobe. We really just wanted to create an awesome graphics markup.

Over the past several months we have had many conversations with Adobe where both the Degrafa team and the Flex team shared insights into each others respective endeavors and looked at potential ways for both teams to collaborate. Today, we are very happy to announce that after further conversations and discussions, Adobe has asked if the Degrafa team would consider helping directly contribute to the Flex Graphics open source effort. Our response was a unanimous “Yes!”

Initially, Degrafa will be adapting its core graphic rendering engine directly into Flex Graphics, as the command stack pipeline approach envisioned by Jason over a year ago is very similar to the path Adobe was contemplating and lends itself perfectly to take advantage of the Flash Player 10 optimizations. Everyone on both the Degrafa and Adobe team is very excited by this opportunity to work together. In addition to adding the respective expertise of the Degrafa team to the Flex Graphics effort, we will also be testing the waters as the first direct external contributors to Flex. This is a big step for Adobe and a real indication of their commitment to open source and the community.

What does this mean for Degrafa? The most likely scenario we envision will have Degrafa becoming a superset of FXG, with Degrafa extending what will be possible in FXG. Part of of work with Adobe is helping to ensure that both FXG and Degrafa leverage the same graphics pipepline and command stack approach as mentioned above. This collaboration with Adobe will not only make Flex Graphics more powerful through the enhancements made by Degrafa, but it will also allow Degrafa to become more powerful and easily tooled and extended through Flex Graphics’ closer association and architectural design to Degrafa.

While the FXG syntax and the Flex Graphics classes primarily serve as the needed markup to support Thermo tooling and bridge the gap between the Designer and Developer workflow, we see Degrafa taking a different approach to the same problem. Instead of making a tooling constrained markup, we wanted Degrafa to be an extremely flexible and powerful design that could be directly used by both designers and developers alike, allowing them to push the boundaries of graphics innovation.

We are all looking forward to this opportunity to work together and help build upon each others respective success and strengths.

Mike Huntington took the time to put together a screencast walking through the process of creating custom skins using Degrafa. He shows you how to get set up with the Degrafa SWC and how easy it is to start creating via Degrafa MXML.

I’ve been following Mike’s blog for a while and it’s great to see what he’s doing with Degrafa. Keep up the screencasts Mike! We dig.

The focus of Degrafa beta 1 and 2 was to set up a solid core that would allow us to do really innovative things and make really complex things easy to do. We’re also chipping away at the need to have any external graphics referenced in your project. A new feature in Degrafa Beta 3 gets us even closer to meeting these goals.

This new feature is a new Fill type called VectorFill that is going to change the way you think about what’s possible visually in your applications. VectorFill allows you to compose any Degrafa geometry together and use it as a Fill for any other Degrafa geometry. As a simple example, imagine you wanted a background of diagonal lines. To achieve this with VectorFill all you need to do is draw one diagonal line using Degrafa, specify that Line as a source in a VectorFill, then apply that VectorFill to a Degrafa geometry object using the fill property.

Just like any other Degrafa object, you could edit that diagonal line, say change a color, and that change will dynamically get updated in the applied VectorFill. Also, when we say you can compose any Degrafa geometry together we mean shapes, transforms, fills, repeaters, strokes, and so on. You could move shapes with in VectorFill to create panning or use VectorFill with the Flex charting components to make really rich visuals. The possibilities are endless.

We’ve also added additional properties to VectorFill to allow for even more powerful ease of use. You get all the BitmapFill goodness of repeat, scale and angle etc. You also get the recently revealed fill transform features as well. And you also get filters, autosettings, background SolidFill and the ability to clip the fill source geometry based on a third geometry object (or even part of composition). Let’s take a look at some samples.

Below is an example of a VectorFill being used in a Circle. As you move your cursor over the eagle a zoomed view is shown. If you use your mouse wheel you can zoom in and out. This is not a mask, but a VectorFill with a clipSource setting (assigned to the magnifier’s lens) moving around and scaling in the Circle. To show a possible use, a second fill, a BitmapFill is used to take ’snapshots’.

Another example is using VectorFill to customize charting components. The example below uses a VectorFill to represent visually the sport for which the data pertains to. This opens a lot of doors for really custom-looking data visualization using existing charting components.

A more simple example is based on the scenario I outlined above; a diagonal line background. Most examples I’ve seen that use Degrafa always have one bitmap graphic in there for some kind of background. Well, now you can go completely vector. Below is a diagonal line background that uses a VectorFill and a Degrafa Line applied to a Rectangle. I’ve thrown in some other controls so you can see the live updates on the VectorFill.

We’re really excited about what will now be possible with this new VectorFill and some of the other new features we’ll be sharing soon.