You are here: Home > Resources > CookBook > Skinning buttons

Skinning buttons

Difficulty: Beginner
Skinning buttons


You want to use bitmap graphics to easily customizing all buttons in your application.


Use the UIObject 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.

The ButtonSkin scale9Grid rectangle works the same as the MovieClip scale9Grid property.

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 ButtonSkin instance.

The parent class for the new shared file will automatically be set to flash.display.BitmapData. The 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 scale9Grid rectangle 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.*;


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; = btnSkin;
btn.display(50, 50);

Get Adobe Flash player

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 parameter to null).

It means that you can use the same skin object to define skins for several Button instances, as shown below:

import org.flashapi.swing.*;


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; = = = btnSkin;

skinBtn1.display(50, 50);
skinBtn2.display(50, 90);
skinBtn3.display(50, 130);

btnSkin = null;


Get Adobe Flash player

Share this article:


There are no comments yet for this article.

Leave a reply

Your email is required but will not be displayed.

To prevent abusive emails, please enter the numbers you see in the image below:

Security code