The New Site

First off, let’s talk about what we’ve done to the site. We’re moving the Degrafa site from degrafa.com to degrafa.org. Pretty soon we’ll be forwarding the dot com site to the dot org site.

We’ve now moved all Degrafa content under a single domain, so no more sub-domains, although those will forward as well. Things like the ASDocs, samples and blog are still there, but we’ve begun adding things like screencasts, presentations and articles in a “Learning” section. We’re looking to get these areas set up to allow people to contribute or let us know when they have content to share.

The goal for the site was to make information much more accessible and easy to find without having to scour the internet.

Degrafa Beta 3

More importantly than the site, we’re releasing the next version of Degrafa; Beta 3. This is the biggest release of Degrafa yet and it’s taken the longest to get out, but rightfully so. We’re calling it Beta 3, but it’s more like Degrafa 2.01.

We’ve added a ton of new features that will not only help you push the boundaries of what you thought might be possible with Degrafa, but also made other things, like skinning, a lot easier. I won’t get in to the entire feature list here, but you can check out the long list on the new Degrafa.org “Code” page, along with grabbing the source yourself. The documentation has also been updated.

We all worked really hard to get this release out, but Jason Hawryluk and Greg Dove put a lot of hours into getting this out. Thanks guys!

Note: We’re still working on updating the docs, but will have them updated by next week.

What’s Next?!?

So, where are we going next? Well, we definitely have plans. Plans for new features, optimization and focussing more on community as we move closer to Degrafa 1.0.

Here’s where we’d like to focus:

• Optimization and bug fixes
• Making things like properties and naming consistent, as well as making things a bit more “user-friendly”
• Finishing up splines
• Adding text on a path
• Introducing VectorText, allowing you to add things like gradients to text
• Adding a mechanism to transcode SWFs to Degrafa markup
• Adding the ability to join, punch out, intersect, etc. geometry
• Supporting the community more with screencasts, tutorials, etc.

Those are our initial thoughts, but we always like to hear from others in the community regarding the direction we should go.

Please keep in mind this is all beta and we’ll be making additional refinements in the next week or so. Let us know what pops up so we can fix things as soon as we can. Also, expect to see more samples from the talk that was given at Adobe MAX and, like always, let us know about anything you create.

There’s also going to be a Birds of a Feather talk Monday night at 9:30pm. We’ll be talking about all things Degrafa, have people show off some of the projects they’ve created using the framework and talk about some future stuffs.

Tom Gonzalez and Juan Sanchez will be at MAX, so be sure to stop and ask them any questions you might have. If you’re going to MAX Europe, Juan and Jason Hawryluk will be there. There is no Degrafa talk scheduled for MAX Europe, but if there’s enough interest we may be able to figure something out.

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.

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.

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.

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.

Michigan Flex Camp Info

It’s great seeing people going out and speaking to the community about Degrafa. This is really helping us out to spread the word and get even more excited about future features. Here’s some links to other Degrafa presos people have given:

Flex Meetup / Speaker: John Mason

Rocky Mountain Adobe User Group / Speaker: Juan Sanchez

Potential Presenters

If your thinking about presenting on Degrafa be sure to let us know at info [at] degrafa [dot] com. We have slide decks, samples, and a willingness to help you make Degrafa look rockin’.

In some cases it’s hard to help because the version in question just doesn’t support what the person is asking about. When these scenarios come up we take notes and add it to our “to do” list to see if we can provide a solution in a way that elegantly fits into the roadmap for Degrafa.

One scenario that came up was the ability to load a bitmap from an external URL to be used in a Degrafa Fill. Currently you have to embed a bitmap to use it in a fill. However, Degrafa Beta 3 will allow to specify any external bitmap source to be used in a Fill. This will be no real effort to achieve this if loading images from the same domain as your application, but you’ll also be able to use images from an external domain that provides a permissive crossdomain.xml file, like Flickr.

Another recent addition to the existing COLOURlovers API, was support for runtime ‘pattern’ loading via crossdomain permissions, from COLOURlovers.com. The way we’re implementing this makes it pretty easy for users to take advantage of.

Below is a simple example using the ColourLovers API and runtime loaded random ‘patterns’ used as BitmapFills. That’s to give you an idea of what’s possible. After that a quick explanation of how easy it will be to use runtime loaded images in your BitmapFills.

View Sample

Loading BitmapFill images from your own domain

If you are loading images from the same domain as your Flex application, no access permissions are needed, and using a runtime loaded BitmapFill is very easy*.

If you have your images in an images directory within the same directory as your main application swf, then you would normally specify the source as follows:

1
2
3
4

<BitmapFill
      id="localExternalBitmapFill"
      source="images/myImage.png"
      angle="45" />

That’s basically all there is to it! When the image has loaded the fill will appear, for the Geometry item(s) that use(s) it. The additional delay is an indeterminate time after your Flex application has initialized, simply because your image is not embedded and it takes a little time to load. If you use the same source url assigned to multiple BitmapFills (you may for example use the same external image, but have different settings applied in another BitmapFill), then the external image file is only loaded once, and only one set of BitmapData is generated for all the BitmapFills that use it.

Loading BitmapFill images from External Domains

These examples relate to using a Flickr source:

a) A simple, one-off example:

1
2
3
4
5

<BitmapFill
      id="bitmapFill"
      source="http://static.flickr.com/15/88928122_0f06ac7417.jpg"
      rotation="45"
      smooth="true" />

The above works as is, because flickr has the crossdomain permission policy file in the default location expected by the flash player at http://static.flickr.com/crossdomain.xml. This example can be expressed in another way as a separation of basePath and relative url as in the following example.

b) Loading multiple images from a single external location, managed with a LoadingLocation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<utilities:LoadingLocation
      id="flickr"
      basePath="http://static.flickr.com/"
      policyFile="http://static.flickr.com/crossdomain.xml" />
<paint:BitmapFill
      id="bitmapFill"
      loadingLocation="{flickr}"
      source="15/88928122_0f06ac7417.jpg"
      rotation="45"
      smooth="true" />
<paint:BitmapFill
      id="bitmapFill2"
      loadingLocation="{flickr}"
      source="142/325447236_ac4c1b9b3a.jpg"
      rotation="30"
      smooth="true" />

The above is likely to be suited to applications which have collections of external assets hosted externally, and where the location of the assets (domain) may change at some point in time. By setting up a single LoadingLocation to reference a basePath and policyFile (particularly if the policy file granting access is not using the default name and/or in the default location) you can make code maintenance easier if/when the external location of the assets changes.

As you can see the use of external images from within mxml is quick and easy. Watch out for more additions in the Degrafa Fills arena coming up before too long in another beta3 preview post.

*However you should also be aware that if your domain is accessed with both http://www.mydomain.com and http://mydomain.com then you may still need a crossdomain.xml file that grants permission to both, if you specify absolute urls for the local domain image files. The reason for this is that if you specify a url for the image that is on a different subdomain than that under which the application swf has been accessed, flash player security rules come into play and the flash player will seek permission via a policy file - which will fail to be granted it doesn’t exist. You should be ok using relative urls.

We know not everyone has the time to go to such lengthy efforts to get the word out there. Heck, we have to squeak hours in here and there to keep development moving forward. So, if you wanna do something quick to help the Degrafa user-base grow, feel free to slap the banners and icons below wherever you see fit. You might remember the “I [ Degrafa ] Fx” design from the shirts we handed out at the last 360|Flex.

Thanks to everyone for their continued support and comments to continually push Degrafa forward. We’re also looking for success stories to share, so if you have a story to tell email us at info [ at ] degrafa [ dot ] com.

Banners Click images for the link