May 14 2008
Aspire UI Preview: Skinning
Yesterday, I showed two different skins in the preview demo. I post the demo here again for easy reference:
Both embeds above point to the same SWF, with the second one having a flashVars “theme” property set to “classic”.
In Aspire, component skins are all based on PNG bitmap images. To simplify matters, this has been made mandatory – there is no option to use vector graphics or code-based skin classes for skinning. However, you have the option to either let Aspire load from external PNG files (preferred), or have the PNG bitmap images embedded inside the SWF.
Advantages
Personally, I prefer loading from external PNG files for various reasons. For one, I don’t need to recompile the SWF everytime I change the PNG images. Second, I can allow end-users to change the skins (for example, if I have a Flash application running from the desktop and I have exposed the theme folder for modifications). Also, if running from a browser, the PNG files can be cached (can be a double-edged sword though if you keep changing the PNG files in which case you should make sure the end-user clears the browser cache, or the location of the skin assets is changed so they get reloaded).
The use of PNG bitmap images makes it possible to completely separate code from the skins. Graphic designers only have to be responsible for supplying the bitmap images, without having to dabble in Flash at all.
The “skin” property
Some components (eg. uiButton, uiCheckBox, uiTextInput, etc.) use one single PNG bitmap image for skinning, while others (eg. uiScrollBar, uiSlider, etc.) use multiple images. In all cases, one component property “skin” determines the bitmap image(s) to use. For example, in the case of uiVScrollBar (vertical scrollbar), setting the “skin” property to “VScrollBar” uses the VScrollBar.png for its track, VScrollBarThumb.png for its thumb, VScrollBarDown.png for its down arrow button, and VScrollBarUp.png for its up arrow button (notice that the suffix “VScrollBar”, which is the “skin” property value, is used to identify which files to use).
rules.xml
All skin assets are stored inside a theme folder. In this folder, there is a rules.xml file. Let’s take a look at the rules.xml file (truncated here) stored in the “classic” theme folder:
. . <ComboBoxButton midX="9" midY="7" slices="up,over,down,disabled" /> . . <FocusRect edge="1" repeat="xy" /> . . <VSliderThumb edge="6,4,5,7" slices="up,over,down,disabled" />
The rules.xml file specifies what to do with the images once we load them. In the XML, each node contains information pertaining to a specific skin image. Notice that each image (node) has a “slices” attribute. This attribute must be defined for each image because it tells Aspire to slice up the loaded image into the specified (equal) slices. Take a look at the Button.png image (I know, not the prettiest skin to look at, but simple for demo purposes):
The above Button.png image will be sliced equally, and stored and cached according to the “slices” attribute.
The “edge” attribute determines the non-scaling sides of the skin. When undefined, the edge is assumed to be 3 pixels for each side. This property is defined in the same way that the padding and margin properties of Aspire components are defined, which follows the rule that if you specify one value, that value is applied to all sides; if you supply two values, the first is applied to top and bottom, the second applied to left and right; if you supply three values, the first is applied to top, second to left and right, third to bottom; if you supply four, each side takes their respective values. This property is similar to the native DisplayObject’s scale9grid property, but instead of defining a Rectangle, you define the values for each side (which are intended to stay constant when the skin is resized).
The “midX” attribute specifies the middle horizontal portion that should not be scaled. The “midY” attribute specifies the middle vertical portion that should not be scaled. For example, in the “xp” theme, the VScrollBarThumb has midX and midY defined, because the thumb has a middle portion that is not intended to scale.
The “repeat” arttibute specifies whether the scaling portion should be repeated (across x/y axis) instead of being scaled. For example, in the “classic” theme, the ScrollBar image, which is used for the track, has repeat set to “xy” – which means it should repeat across x and y axis without scaling. The “edge” for this skin is set to zero which means there are no non-scaling sides. The image is taken “as-is” and then repeated across the x and y axis.
So that is all the graphic designer needs to do – create the PNG images and specify the scaling rules in the rules.xml file. Typically, we would store the skin assets in “theme folders” and let the application pick up its choice of skins.
uiSkins
The uiSkins class is responsible for loading, caching and managing the skin assets. It is a singleton class that can be accessed via uiSkins.manager. The following shows the code that is used to initialize the manager in the demo SWF above:
uiSkins.initialize("/aspireui/swf/assets/skins/demo/"+((loaderInfo.parameters.theme==null) ? "xp" : loaderInfo.parameters.theme)); uiSkins.manager.onPreload = main; uiSkins.manager.autoPreload();
The uiSkins.initialize() method allows you to specify where to find the skin assets.
The uiSkins.manager.onPreload property specifies the function/method to call when preloading has completed. In the above case, main() will be called.
The uiSkins.manager.autoPreload() method activates automatic preloading – what this does is to look at the rules.xml file and preloads all those images specified in the XML.
No support for runtime theming
There is no support for changing the theme during runtime. Once it is set, the same theme folder is to be used for the duration of the application. There is no intention to implement runtime theming. Although it is “cool” to do so, unless you are creating an operating system, this should not be a necessary thing to do. It is always recommended to ask end-users to restart an application if the theme has changed (as most desktop applications do) or to inform them that the change will take effect only next time the application is booted up.
Cheers!
UPDATE
In the final release of Aspire, preloading of skin assets has been made automatic and compulsory, therefore the above example code with the autoPreload() method is no longer applicable.
You may experiment with the various features of the Actionscript 3.0 (AS3) Aspire UI Components by downloading the trial version at http://ghostwire.com/aspireui/download/
* Adobe Flash CS3 is required
Really lovely components. Are they available for download?