Introduction to Skinning

The process of customizing the graphical appearance of UI components is termed as skinning.

In Aspire UI, a component may be rendered using one or more external PNG bitmap files. These PNG bitmap files are termed as skins¹⁾. A basic component such as the uiButton would use only a single skin asset, while composite components such as the uiScrollBar would use multiple skin assets.

A skin asset is a PNG bitmap file, plain and simple as that. You can create or edit a skin asset using Adobe Fireworks or any other image editor that supports the PNG format. You do not edit any symbol in Adobe Flash CS3 or write any code to customize the graphical appearance of Aspire UI components - the skinning is all done via external PNG bitmap files.

The skin property identifies the skin asset(s) a uiComponent instance will use. The property has a String value and the default value is usually the class name of the component without the ui prefix. For example, the default skin property value of uiButton is “Button”, for uiScrollBar it is “ScrollBar”, and so on²⁾. This String value indicates the external PNG bitmap file(s) to use for rendering. In the case of uiButton, the “Button.png” file will be used. In the case of uiScrollBar, the “ScrollBar.png”, “ScrollBarDown.png”, “ScrollBarThumb.png” and “ScrollBarUp.png” files will be used. Notice that the prefix of the skin assets corresponds with the skin property value. This naming convention allows us to use just a single property to define the multiple skin assets to use for composite components.

You do not normally need to set this property since the default value should be used most of the time.

If you want to use different looks for different instances of the same component (in the same application), you must set the skin property of the instance(s) accordingly. For example, you may create an alternative skin “CloseButton.png” for the uiButton class. To use this skin, you would write the following code:

var closeBtn:uiButton = new uiButton();
closeBtn.skin = "CloseButton"; // ** remember to omit the .png file extension **

Note that some components are not intended to be skinnable and therefore skinning does not apply to these components. For example, the uiBox and uiPane containers cannot be skinned³⁾. These components have their skin property set to null⁴⁾.

A component instance with its skin property set to null will not use any skin.

Unlike components in the Adobe Flash CS3 or Flex frameworks, Aspire UI components are rendered using run-time skin assets. The external PNG bitmap files are not compiled into the SWF, but are loaded during run-time instead.

This has several advantages over the traditional method of skinning, such as

• the file size of the compiled SWF itself will be smaller and compiling is faster;
• skin assets can be modified without having to re-compile the Flash application;
• skin assets can be shared among different Flash applications and/or distributed as themes;
• for online applications, skin assets can be cached by the browser; and
• for offline applications, it is possible for end-users to create their own skins/themes.

However, this also means that the “assets” folder must be deployed alongside the Flash application so that the external files can be loaded during run-time.

See also: The "deploy" folder