Flex

Back in November 2006, I made a step-by-step post of how to locate, copy and adapt the ApplicationBackground class from the Flex SDK, in order to tile an image across that background.

This is simply an update to that post, this time with source-code and the addition a sample of a tile image within a Canvas. You are free to take and re-use this code as you see fit.

The following examples use a programmatic skin approach, and rely on the image being embedded at compile time. This is a quick and dirty method. For more information on programmatic skins, please refer to Aral Balkin’s Quick-Start on the Adobe site.

You can get your hands on the source with a right-click (control-click on a Mac) on the following examples.

Application tile background

In this sample we have created our own ApplicationBackground class and and applied it within the Application tag. You can change the repeat policy by uncommenting the appropriate line within uk.co.creacog.skins.ApplicationBackground . Choose this link if you wish to view example 1 in a new window.

You need JavaScript and Flash plug-in 9 to view this sample.

Canvas tile background

The key thing to be aware of is that the component background is actually controled by the a decorator class primarily designed to control the component border. So in this example we are applying our uk.co.creacog.skins.CanvasBackground to the borderSkin of the Canvas component. I added a slider to control the corner radius to demonstrate that we can have both rounded corners and a tile background. Note: that the borderStyle of the the Canvas need to be set to “solid” in order for the borderSkin to be invoked. In addition the onus is upon us as the programmer of the skin to respond to the cornerRadius values. In this case by calling drawRoundRectComplex.

Should we need a drop-shadow, again the onus is upon us to implement it within our custom skin. I did not take the example that far. The information you need to do so is in Aral’s article.

Again, choose this link if you wish to view example 2 in a new window.

You need JavaScript and Flash plug-in 9 to view this sample.

Other ways

Other authors have documented approaches with variations which might suit you better. You may find the following useful…

• d.CAT
  
• Maikel Sibbald

If you know of better ways, please do add links to the comments.

I haven’t got my hands on the Flex 3 beta yet. I have my finger’s crossed that these approaches might become obsolete with the new framework?

It was pretty good to see some of the new stuff coming in Flex 3 during the developer day this week at Adobe Live London. We were a tough audience and didn’t give much of a WOW feedback – sorry! Largely I think because much of the new stuff demonstrated I think we might have claimed a right to expect – such as re-factoring support and improved work-flow with the rest of CS3.

Not covered on the day, but would have got a WOW from me is ‘Framework caching’, described by Ted on Flex today.

To me this was not expected, however I tend to think it has been a long-time coming and is one of the most significant improvements within Flash Platform in a long time. I came to Flash very late (MX2004) and primarily worked with components. (I came to Flex even later – V2.) It always struck me as a little odd that Adobe/Macromedia placed such great emphasis on keeping the plugin download small which then had the knock-on of vast quatities of band-width wasted as the same component code is transmitted time after time and where you least desire it -hitting the load time of your SWF. However now being able to cache the framework now means only the code specific to the application need be transmitted. Much more net-friendly. I can’t wait!