… 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

Right now we’re finally at a point where we can start moving beyond creating basic shapes, fills, etc. and moving into a realm of really powerful stuff, all of which we’re hoping will extend FXG. With inspiration coming from things like Processing, we’re really focussing on allowing people to do some typically difficult things very easy.

We’ve discussed how you might use Degrafa for various types of data visualization, but with things we’re implementing in Beta 3 you’ll be able to completely change the way you think about charting in Flex. Some people are already taking advantage of the in progress version of Beta 3 to do some really great stuff.

Joe Johnston of Universal Mind created a slick looking chart that mirrors the look you might find on the Nike+ site. Doesn’t look like a typical Flex Charting component does it?

If you were at 360|Flex you may have seen Tom Gonzalez present some of his latest works that use Degrafa. He’s contributed a lot to opening up new possibilities for Degrafa in the data visualization arena. Below is his Google Finance “dashboard” that uses Degrafa for charting, complete with “micro-charts” created using the newly revamped Geometry Repeaters.

Ryan Campbell has also taken a liking to the new Geometry Repeaters and what is possible just using Property Modifiers with them. He combined Degrafa and OpenFlux to create what he’s calling FluxCharts. Definitely cool.

It’s really great to see people start jumping into the next release of Degrafa when it’s still a work in progress. Even better, all these samples have source available.

All this is similar to what you might expect from a graphics editing tool like Illustrator. What’s cool is in Degrafa the children inherit the parent transform but each can also have their own individual transform as well (without incurring the overhead and provides a more compact markup). Also, transforms are applied at render time and are none destructive (i.e. do not actually modify the geometry properties).

In most cases a single Transform may suit your needs for multiple transform types. If not, you can use a TransformGroup to create your own sequence in which the transforms will be applied, so you have complete flexibility. We also allow you to specify a registration point beyond top-left to include center, top-center, bottom-right, etc., as well as centerX and centerY providing additional control. This saves you from having to come up the math to set the registration point on your own.

Below is a basic example of a RegularRectangle with the following transforms applied to it from left to right: Scale, Skew, Rotate. (Matrix and Translate not shown).

Click to View and View Source

As you might expect Degrafa Transforms will work on any geometry drawn using Degrafa. However, there’s a bit more to it than that. You can also apply transforms to Fills (like a bitmap fill and any gradient fill) and Gradient-based Strokes. For example, below is a basic sample of a BitmapFill with a Scale, Skew and Rotate transform applied (images from COLOURlovers).

Click to View and View Source

Transforms allow you to manipulate geometry very easily rather than having to manually change properties or points. However, the real power comes from using Transforms with other features of Degrafa. Below are several examples of using a Repeater with different transforms. The one with the orange, white and grey “tick marks” actually has a transform applied to a Repeater with a transform on its children (mind-boggling, right?). This also shows that transforms are propagated to the children and that the parent can have a transform that also gets applied to the children, yet each child could add to their final transform with a transform of their own.

Click to View and View Source

When you start thinking about all the unique combinations of using transforms you can begin to see just how powerful they can be. As we preview more features of Degrafa Beta 3 you’ll be able to see how adding a single transform can drastically change graphics drawn with Degrafa to create very unique and interesting visuals.

One of the things we’re beginning to focus on is putting together more tutorials, samples and screencasts that really show off what you can do with Degrafa. This article is part of that initiative. With a new version of Degrafa on the horizon, it will be more important than ever to make sure we share the knowledge.

Read An Introduction to Degrafa

Ok, I couldn’t resist using the title. Tom Gonzalez put together a really nice example of a gauge built using Degrafa. He also did a lot more than that. For some of the custom items like the tick marks, he made his own ArcLineRepeater based on Degrafa’s LineRepeater so that it rotated around a central point. Based on what Tom said, it sounds like it was pretty easy for him to do.

This example also allows you to apply different skins like you would any other Flex component, but instead of having to go to an external application like Fireworks or Flash you can do all your skinning for the gauge right in Flex and assign them through CSS. Tom’s example has 2 skins you can choose from and you can change properties like colors, angle, tick alpha and more very easily.

I think the coolest thing about this example is that Tom already had this gauge built before, but realized it had much more potential if he converted to use Degrafa. The result seems to be a much more flexible solution that can be extended quite easily to take on a number of different appearances. Good stuff!

Check out Tom’s blog post about the gauge and don’t forget to view the source.

We extended Andrew’s example a bit into another Data Grid example that uses an item renderer with a split bar visualization and optimized the example a little. This example could be extended even further by using Bitmap or Complex fills based on the data, or changing the shape used for the visual. Here’s what it looks like:

While syncing in iTunes I was looking at the indication of how my media was distributed across my iPhone and realized that same visualization could be duplicated using Degrafa. I used a series of different colored RegularRectangles, some VerticalLineRepeaters for the inset markings that dynamically change count depending on the size, some other Rectangles for highlights and shadows, and a RoundedRectangle to mask the area. I also through in a ComplexFill composed of a Solid, Bitmap and Blend fill to create the colored plaid effect. This was really easy to do with binding to change the width, capacity bars, inset marks and colors. Here’s what the example looks like:

UPDATE: Here’s another example that expands upon the bar charts above to create some shape based renderers and a pie chart renderer. The shape renderers were easy to do. They’re masks created with Repeaters. The stars are Polygon Repeaters, the circles are Circle Repeaters, and the squares are Rounded Rectangle Repeaters. The pie chart renderer is just a couple of Elliptical Arcs. See below:

These examples are available on the Degrafa Samples page with View Source enabled.

There’s so much data flying around out there that would be kinda neat to create unique visualizations for using Degrafa. I’ve been checking out COLOURlovers, Echo Nest, FriendFeed and more that would be cool to try and visualize or use in a visualization. Better yet, you could make certain properties accesible to a designer for them to make the visualizations customized to their specifications.

A lot of people we’ve talked to have been interested in using Degrafa for mapping. Of particular interest was drawing states or regions that incorporate events and data. We put together a proof of concept a while back for EffectiveUI and we’re now making the source available after some clean up and updates to the latest beta release. The sample uses Degrafa to draw the states and for some custom skinning.

There were a number of people on the Degrafa Group asking for the source, so we’ve enable “View Source” on the application. This sample is also available on the Degrafa Samples page.

View The Degrafa Map Sample

• Skinning a VSlider to look like a thermometer
• Advanced skinning using Tweener, cursor position, color tweening, skin states, etc.
• Using the derive property
• Reusing compositions created in external MXML files
• Random art with Degrafa and Tweener
• Creating and using libraries

Visit the Degrafa Samples page and enjoy!

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

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