degrafa

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.

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.