Article published by Pascal
November 15, 2010
You want to use bitmap graphics to easily customizing all buttons in your application.
skin property to apply a
ButtonSkin instance to a button.
There are many ways to set a graphical appearance to an object in SPAS 3.0. With the "skinnable" mechanism, we tried to be as close as possible to the logical workflow between flash and graphical design tools (including Photoshop).
To set a
ButtonSkin instance, you must define the three bitmaps that you are going to use for each button state: "up", "over" and "down". But you have to use a
scale9Grid rectangle to tell the button how to resize these bitmaps.
ButtonSkin scale9Gridrectangle works the same as the
In the following example we have imported the three PNG files in the flash library. To use them directly from ActionScript code, they must be shared for runtime:
- Select Window > Library:
- Select a bitmap, and select Linkage from the Library Panel menu.
- Select Export For Runtime Sharing to make the asset available for linking to the destination document.
- Enter an identifier for the symbol. This is the name we will use to identify the bitmap when linking to the
The parent class for the new shared file will automatically be set to
BitmapData constructor function needs two parameters to define its size. When we will create new instances of the bitmap skins we simply use
0 for each of these parameters.
The linkage names we use in this example are "UpSkin", "OverSkin" and "DownSkin":
var btnSkin:ButtonSkin = new ButtonSkin(); btnSkin.scale9Grid = new Rectangle(9,7,104,20); btnSkin.upSkin = new upSkin(0, 0); btnSkin.overSkin = new overSkin(0, 0); btnSkin.downSkin = new downSkin(0, 0);
Please note that the
scale9Gridrectangle only depends on the bitmap you use to skin your button.
As we are coding from the main timeline, we must initialize the SPAS framework before creating a new control:
import org.flashapi.swing.*; import org.flashapi.swing.skin.*; UIManager.initialize(this);
So now, we can create the button and display it, using the skin we have defined before:
var btn:Button = new Button("Skinned Button"); btn.height = 35; btn.skin = btnSkin; btn.display(50, 50);
How to use skin objects
Each button stores is a reference to its own copy of a skin object ; this reference continues to be available within the component even if the original skin object has been deleted. (To definitely remove an internal skin reference, you have to set the
UIObject.skin parameter to
It means that you can use the same skin object to define skins for several Button instances, as shown below:
import org.flashapi.swing.*; import org.flashapi.swing.skin.*; UIManager.initialize(this); var btnSkin:ButtonSkin = new ButtonSkin(); btnSkin.scale9Grid = new Rectangle(9,7,104,20); btnSkin.upSkin = new upSkin(0,0); btnSkin.overSkin = new overSkin(0,0); btnSkin.downSkin = new downSkin(0,0); var skinBtn1:Button = new Button("Skinned button 1"); var skinBtn2:Button = new Button("Skinned button 2"); var skinBtn3:Button = new Button("Skinned button 3"); skinBtn1.height = skinBtn2.height = skinBtn3.height = 35; skinBtn1.skin = skinBtn2.skin = skinBtn3.skin = btnSkin; skinBtn1.display(50, 50); skinBtn2.display(50, 90); skinBtn3.display(50, 130); btnSkin.finalize(); btnSkin = null;
Share this article:
There are no comments yet for this article.