Wow, does time fly. The deadline for Degrafa Derby submissions is rapidly approaching with one week left on the board. We’ve seen a mix of uses of Degrafa and even more talks of ideas for submissions, so keep it going.

We know some people are waiting until the last minute to submit, which is fine. The submission cut off is February 22nd and since we’re scattered across the globe, you don’t have to worry about adhering to a particular time zone.

We’ll take late submissions, but we can’t guarantee it’ll get into judging. The more time we have to spend with a submission the better, and since a majority of the “judges” will be heading off to 360|Flex, we have a window of time to get all the judging in. Also, submissions from any country are accepted.

Send your Degrafa Derby submission to derby [at] degrafa [dot] com with:

• Your Submission: source files or a URL
• Title of Submission
• Name(s) of Developers
• Description
• Any unique challenges, approaches, etc.
• Contact Email
• Proof that submission uses Degrafa. We basically need to know you used Degrafa. This can be source files, a secret link to a submission with view source enabled, or an “I swear it’s Degrafa” statement.

Any questions, email derby [at] degrafa [dot] com.

The other day I came across Chad Udell’s post about his KulerCreator and it got me thinking. Degrafa could easily be used to create random generated art, especially since so many of the Degrafa object properties are bindable. I grabbed Tweener (which I had never used before) and applied it to a few different shapes and their properties.

I used two circles and set tweens on their size dimensions, as well as some of the gradient fill properties, which creates some interesting effects. There’s a polygon in there and I set tweens to each one of it’s four points. Finally, I threw a bird shape in there drawn with SVG path data. It took no time at all to put this together and the results are interesting. Most importantly, it was easy and was done using MXML markup.

Things could get really interesting with some physics, random colors, filters, easing, etc.

See the results

Just wanted to do a quick post to let everyone who’s interested know that the Degrafa source code is now available on Google Code. Go grab it, use it, critique it, add to it or whatever you want. Ignore the typos and rough documentation .

Be sure to log any issues you might have along the way. You can do that on the Issue Tracking page on Google Code.

Get the Degrafa Source Code

It’s hard to believe that what started as a casual email exchange between fellow developers would evolve into what we’re releasing today. That’s right, the Degrafa beta is finally here! We’re calling this initial beta Degrafa Origin (for obvious reasons) and we hope it will be the first in a series. There’s a huge amount of features that we want to add, but we opted to get something out there before 2010 and get some feedback.

Release Notes

• You can get the SWC from Google Code. We’ll be making the source available in the next couple days. We were pushing to get it out today, but with the holiday schedule it wasn’t happening.
• Check out the documentation at docs.degrafa.com. We’ll be updating the documentation throughout the week.
• View samples at samples.degrafa.com. We’ll be adding more samples in the next few days/weeks.
• Get in on the discussions on the Degrafa Google Group.

We’ll continue to add to all these areas in the coming days and weeks. We welcome any feedback, feature requests, “what the hell” inquiries and the like. It’ll only make the framework better.

Some parts of the framework are still rough around the edges and we hope to smooth those out over the next few weeks. ï¾ Here are some items we hope to release/complete in the coming weeks/months:

• Transformations
• Tons of skinning improvements
• Layout management
• Improved and complete documentation
• Many, many more great examples to get you up and running
• An SVG to Degrafa conversion tool and all round better SVG support
• Optimization improvements
• Several other features that will make Degrafa more valuable

ï¾ 

Stay tuned for more to come and be sure to hone your Degrafa skills, as they may come in handy very soon.

Special Thanks

The Degrafa team would like to extend a huge thank you to the folks over at Effective UI for graciously providing Degrafa a welcome home during it’s inception. We would also like to thank the beta testers: Dirk, Dominique, Ken, and Nahuel.

ï¾ 

Also, we’d like to thank people at Adobe, including Ely Greenfield, Glenn Ruehle and Ted Patrick for sharing their thoughts with us along the way. We look forward to the further advancements of graphics related work within the Flex framework and hope to be a part of efforts in this area.

ï¾ 

We are diligently working on getting things ready for the Degrafa beta release. Things like documentation, samples, getting set up on Google Code and Google Groups, etc. are all being worked out as I write this.

Of course, with New Year’s celebration and the team being distributed all over the world, the roll out of all the components (documentation, samples, etc.) will probably be distributed throughout the day of the 1st. Then more will be added as the days go by. The main thing we want to get out there is the framework itself, so people can start playing. So stay tuned…

By the way, information will be distributed across these URLs:

• code.degrafa.com : Points to the Degrafa Google Code page.
• group.degrafa.com : Points to the Degrafa Google Group.
• samples.degrafa.com : This is where links to samples in the documentation will point to.
• docs.degrafa.com : This is where the Degrafa documentation will go.

This is all subject to change, but we’ll let you know if it does.

Flex has always supported some level of CSS, which allows you to externalize styling elements and repurpose them throughout an application. However a few features have always been lacking from the standard Flex skins. With the public beta release of Degrafa on January 1st, we’re going to be raising the bar for CSS support in Rich Internet Applications, and the features we’re showing today are only the beginning. Degrafa isn’t just MXML and ActionScript anymore!

Want to see this example in action? Try it out for yourself: Degrafa CSS Example

It’s about time, right? So, what’s taking so long? Well, our team grew a bit and we’ve spent the time to integrate some extra features that we felt would be important to have in the first release. When we set out to create this framework we definitely had some feature sets in mind, but in many cases the first beta will exceed them.

The public beta will finally be available January 1st under the MIT License. What a great way to start off 2008, right? For the public release, Degrafa will be available on Google Code, which will also provide a bug management system and integration with our new Google Group.

UPDATE: We moved our Google Group here. So if you signed up for the other one that was listed you’ll need to sign up for the new one to get current info. Sorry for the inconvenience.

As we work to polish things off, here’s a feature summary of what will be available in Beta 1. Keep in mind these are all accessible via MXML.

Stay tuned for more info and examples as we get closer to the date.

Shapes

Degrafa has a number of predefined shapes that can be used to create your graphics compositions:
ï¾ 

• Rectangles
• Circles
• Ellipses
• Lines
• Polygons
• etc.

ï¾ 

Freeform

If the Degrafa shapes aren’t flexible enough you can create your own using the following, including using SVG path data:

• Arcs (elliptical)
• Bezier Curves (cubic and quadratic)
• Paths
• etc.

or download from an ever growing library.

ï¾ 

Segments

Draw using segments:

• ï¾ MoveTo
• LineTo
• ArcTo
• Bezier To
• etc.

ï¾ 

Repeaters

Repeat an object to create advanced visuals.ï¾ 

Paint

Add fills or strokes using the following:

• Solid Fill and Stroke
• Gradient Fills and Strokes
• Bitmap Fill (position and repeat)
• Complex Fill (layer and blend fills)
• etc.

Binding & API Access

Degrafa supports the full MXML binding mechanism with runtime access, API access, collection support, etc.

Skins

Degrafa can be used for all your skinning needs. No more ActionScript and/or extending complex classes.

CSS

You may never create a skin again. Do more with CSS:

• background color (solid and gradients)
• background images (position, repeat, layer, and blend)
• border widths (left, top, right, and bottom independently)
• border colors (left, top, right, and bottom independently)
• border radii (left, top, right, and bottom independently)
• etc.

ï¾ 

Here is a Flex dashboard prototype demo that was put together for EffectiveUI as a proof-of-concept. It provides a good perspective on how Degrafa could be utilized in a real-world scenario. The map, map legend and linear gauge skins were all done using Degrafa markup.

The map started as an SVG file, which was then brought into Degrafa. Each state was built up as an MXML component by extending Degrafa’s GeometryGroup. The color of each state are applied at runtime depending on a product selection and the value for the selected state.

As Degrafa get’s closer to a beta release, we hope to continue to provide additional examples of more advanced applications of the framework.

View the Example

Here’s a quick demo showing how you can use SVG path data to draw shapes in Flex via Degrafa. I know it’s a bit hard to see the code because of the video size, but you can at least get a general sense of what’s going on.

What I’m going through here is a pretty manual process that were going to try to eliminate with some import/export and visual tool sets. You can see a slightly larger video here.

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:

Click here to open this example in a larger window.

Drawing with SVG Path Data

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.