Skin your Flex App Faster using Layers !
May 18, 2010
Skinning a Flex App using the Adobe Flex approved methods can take a lot of time !
You have to create image assets for every little control and widget you wish to use in your app and this can take quite the amount of time compared with the alternative.
What’s the alternative ?
Use Layers !
Yes, Layers !
What’s a Layer in Flex and how do I use it ?
We should all know about Layers in Flash Apps, right ? If you don’t know what a Layer is at-all then go and do some research because this article will make absolutely no sense to you whatsoever.
Canvas is a Layer in Flex !
The Canvas Object is a Layer !
Canvas objects when placed on the stage will stack one on top of the previous.
Place something on a Canvas that is behind another Canvas and you will begin to build Layers of Content.
Place your Skin as either a static image or a SWF in a Canvas behind your App and you will have skinned that page of content.
The Layers that appear on top of your skin can define button shapes and regions your users can click as-if they are buttons.
So How Does one Canvas get behind another ?
Simply put each Canvas you place on the stage forms a Layer.
Place Canvas objects of the same size on the stage and you have formed Layers.
Consider the following: (This is Flash Builder 4 code…)
minWidth=”384″ minHeight=”640″ maxWidth=”384″ maxHeight=”640″ width=”384″ height=”640″
<mx:Canvas id=”canvas” width=”100%” height=”100%” borderColor=”black” borderStyle=”outset” horizontalScrollPolicy=”off” verticalScrollPolicy=”off” creationComplete=”canvas_creationCompleteHandler(event)”/>
With the following code:
This code shows 2 Canvas objects with one placed behind another.
Notice the overlap between the Backdrop object (this is a Canvas) and the UIComponent. The Backdrop will appear behind the UIComponent.
You can place any visual element behind another.
Canvas objects are translucent by default.
Translucent or see-through until something is drawn or some other visual element is shown.
Your backdrops can be dynamically loaded at runtime across the Internet or embedded into your App !
Your backdrops can be Flash SWF files !
Your backdrops can be animated !
Mouse Events can be bubbled from your App into the Backdrop !
Keep in mind any SWF placed on the Flex stage integrates into the Stage and has access to the entire Stage !
Your backdrop SWF can walk around your Flex stage or just sit there and look pretty.
Play around this this and you too will see the value of using backdrops for your Flex Apps.
Skin your Flex Apps faster and easier or simply add some Flash to your Flex-based game Wireframes using very little effort.
The following is an image from the wireframe for this game that shows a backdrop from an image placed behind the playing board using the techniques shown above as a proof of concept.
Any visual elements can be placed behind any other visual elements using Flex or Flash for that matter. Flash makes it easier to separate visual elements into layers however Flex provides a slick method for handling layers also but only for those who know how to master the full capabilities of Flex.
The backdrop can be loaded from a URL or can be embedded into the SWF or can be a SWF or any number of SWF files.
This is simply a working demo and not the final game.