Greg Dove, a Degrafa core team member, and the creator of Degrafa’s VectorFill, has broken new ground with another new Degrafa paint object, VideoFill.

There have been a couple of sneak previews of VideoFill over the past few months; Juan showed a quick preview at 360|Flex earlier this year and Greg showed a quick demo at FlashCamp in New Zealand as recently as September. Well, no more ’sneaks’ (apart from this one!), it’s finally going to be available from beta 3.2.

You won’t believe all the things you can do with this, suffice to say that it makes some video effects that could be difficult to achieve – even in the Flash authoring tool – very easy to code in Flex with Degrafa.

To be honest, we don’t know what you will do with VideoFill. We can see it being used in creating custom players for specific video content or for specific vector/clipping effects for video -this is quite practical and quick to do with VideoFill. And yes…it can be used for skinning if absolutely required (’absolutely’? yeah we can’t think of when that would be either….but hey, we’ll let someone else tell you not to do it!).

A screen capture from the Avatar trailer being used as a VideoFill

Under the hood, to make VideoFill work, a complete new custom video player class was written from the ground up, designed for the purpose of supporting the way that VideoFill does its magic internally within Degrafa. VideoFill does require data access permission to work with the bitmapData of the video, but that is quite straightforward if you load from a domain under your control. It handles both progressive download video and also has support for rtmp streaming video content. Greg is also planning to add in support for the Camera object to round things out in terms of capabilities/support so that it’s easy to add live webcam content as a fill.

Back in the realm of regular paint classes in Degrafa, VideoFill is an ITransformablePaint object, which means you can spin, skew, scale and move a VideoFilll inside its target Geometry object using Degrafa’s Transforms…all while the video is happily playing! Watch out for more VideoFill information and tutorials after additional exciting beta 3.2 announcements in the coming days. We’ll add an official VideoFill sample to the Degrafa samples page as soon as beta 3.2 is released…for now you can whet your appetite on this one.

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

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.

One of the most influencing factors behind the new features we add to Degrafa comes from the community. As Degrafa has progressed we make sure to follow the Degrafa Group as much as possible to help guide people on how to use it and answer questions.

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.

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

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.

Degrafa not only gives you the ability to draw graphical shapes and objects, but it also allows you to use anything you can create with it as a skin for any component in Flex. Here’s is a simple example of a Button using graphics drawn with Degrafa as skins:

Like the basic shape example, these skins are comprised of shapes, fills and strokes. The only difference is that separate MXML files have been created for the different skin states of the Button. For example, the code for the UpSkin.mxml file used in this example looks like this (not including MXML for Fills and Strokes):

After a skin is created for each Button state we can assign the skins to a Button inside an Application just like any other skin, like this:

This simple example offers a small glimpse at what is possible and as the framework continues to grow, skinning will definitely be one of our focuses.