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

In the last post we previewed the revamped Repeaters in Degrafa Beta 3. Another feature we’re excited about is transforms, which will include Scale, Skew, Translate, Rotate and Matrix. Transforms will allow you to further manipulate the graphics you create with Degrafa and with bindable properties Transforms can change graphics “on the fly” and bring things closer to cleanly converting SVG (and other formats) to Degrafa.

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.

There is an article up on InsideRIA that introduces some of the theory and features of Degrafa. I also put together a couple walkthroughs to get you started, but they just barely scratch the surface of what is possible. Definitely check it out if you’re looking for a quick shot of some beginning Degrafa knowledge.

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.

Andrew Trice had a post over on InsideRIA about using Degrafa as an item renderer within a Data Grid to create a bar chart like effect. His post really helped show just how simple it can be to use Degrafa for visualizing data. In his example he used some RegularRectangles and bound them to the data that was being pulled into a single column to change the width of the rectangle. This was a very simple, yet effective approach and much nicer than looking at a long list of values.

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.

One of the benefits Degrafa offers as part of the framework is the ability to repurpose code to no end. This may be obvious for things like geometry, but if you find yourself writing redundant code for fills and strokes, this tip should help.

Rather than specifying the same common fills and strokes in every MXML file where you’re doing your drawing, you can separate fills and strokes in to their own MXML files. Then, whenever you need to access a fill or stroke, you can add that component to your MXML file and easily access them when appropriate. By doing this, you also have the advantage of code hinting, which makes for quick and easy coding.

As an example, I could make a Fills.mxml file where I specify a fill, like this:

Then, I can reference that MXML file wherever I’m drawing with Degrafa. For example, the following Circle.mxml code would reference the Fills.mxml:

Those two code samples represent some of the basic methods for cutting down on the amount of code you need to write. I could reference that Fills.mxml in any other component and use the fills defined in that file. You could do the same for strokes as well or make separate MXML files for each type of stroke or fill. It’s up to you. I put together a more evolved example than what was shown above and you can view it here:

View External Fills and Strokes Example
(View Source enabled. Also available on Degrafa Samples page)

Taking This Further

You can expand on this example by making separate Fills and Strokes files for different parts of an application, share those files with other Degrafa users, adjust the structure for what makes most sense for you, etc. One thing that would be interesting is to make a separate Colors class that you can reference from the Fills and Strokes files. Then, when you change the color values in the Colors class the whole scheme of the app could change. Hook that Color class up to a color API like Kuler or COLOURlovers and you could get some really unique opportunities for custom UIs, data visualization, compositions, etc.

We’ve been thinking about a way to grab a color palette using a color API, present a user with a bunch of variations of Fills and Strokes based on that selected palette, allow for selection of which Fills and Strokes the user wants, then write out MXML files with those selections in it. The user could then drop those MXML files into their Flex project and they’re ready to go. It could work the other way too where a user could read an MXML file and be presented with Fill and Stroke swatches of which they can edit and write out a new MXML file.

The more we keep plugging away on Degrafa it seems there are more and more opportunities for creating some really unique tools. Imagine a Fills and Strokes palette that uses the Fills and Strokes MXML files as the model. Who knows what other kinds of things people will come up with as the framework progresses. Any suggestions?

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