Flash components received a major upgrade in Flash MX 2004. One of the areas that received a facelift is the skinning mechanism. Flash 8 introduces some changes to the workflow in the authoring environment and references to paths. If you have read the earlier version of this article on skinning the Flash MX 2004 component, this article will seem very familiar because I upgraded it to reflect the changes in Flash 8.
In this article, I cover skinning using the library and themes, and through code I explore skinning using the prototype method, subclassing a component class, and the initObject method. Armed with this knowledge, you will be able to take better control of your application’s look and feel and have a good understanding of how flexible the skinning architecture is in Flash 8.
What’s Different in Flash 8?
Although the architecture and approach to skinning has not changed since Flash MX 2004, some minor changes are important to mention for those already familiar with skinning components in Flash MX 2004.
The following has changed since Flash MX 2004:
* Flash 8 introduces the new FLVPlayback components. These components do not use the Version 2.0 component architecture. Hence, the way you approach skinning them is different from the standard user interface components that come with Flash 8. They will not be covered in this article. For more details, see Dan Carr’s article, Customizing the FLVPlayback Component.
*The location of some of the paths where you find FLA files and ActionScript classes provided by Macromedia has changed slightly. You can find the component FLA files now at the following locations:
o (Windows) C:\Program Files\Macromedia\Flash 8\\Configuration\ComponentFLA
o (Macintosh) Hard Drive/Users//Library/Application Support/Macromedia/Flash 8//Configuration/ComponentFLA
The classes can be found here:
o (Windows) C:\Program Files\Macromedia\Flash 8\en\First Run\Classes
o (Macintosh) Hard Drive/Applications/Flash 8/First Run/Classes
Note that the Classes folder structure has slightly changed. There still is the mx folder, which is of interest here, but you will also see FP7 and FP8 folders, which are specific to each player version that the authoring environment can target.
* The documentation has been improved to include better coverage of the components and skinning. This helps in identifying component properties more easily than before.
Benefits of the V2 Skinning Architecture
The Flash MX 2004 and Flash 8 components are based on the Version 2.0 component framework, the latest framework provided by Macromedia. One of the many changes the new framework required was a rethinking of how components support skinning. Previous versions of Flash didn’t have much of a formal system behind skinning. Component developers just made sure they had movie clips in the library for when a component needed to display something. In that way, users could easily edit a library symbol if they wanted to change the look of a component. This was very simple for users but also very limited.
As you might guess, a simple approach has many drawbacks. The biggest drawback was the ability to skin different instances of a component separately and have control over skinning through code. Because all instances shared the same library symbol, instance-level skinning wasn’t possible-at least not without much extra work. Furthermore, skinning required you to work with the library; it didn’t provide you with other options.
The new component framework gives users much more flexibility over how they can skin components. With this added flexibility, however, comes greater complexity, which requires a solid understanding of the many options to take best advantage of the skinning architecture.
Understanding the Skinning Architecture
You need to understand the way components use skins if you want to get a handle on the available options. It would be ideal if components supported only one method of skinning and if that method was exactly the one you wanted all the time. However, that is pretty tough to achieve without leaving out some users. I usually use the initObject method through code to skin components, as well as the subclassing method. However, that may not always work for your needs.
To begin, you must understand the basics of what ties everything together. In Flash, every component skin is a movie clip and is identified by a linkage identifier in the library that the component code uses to attach a skin at runtime. That linkage identifier is a unique identifier that a component will use to identify a skin-which usually translates to a specific state that the component is in.
For example, you have many states in a Button component. Each state can have its own skin, which the component uses. States can be any visual state the component has to represent-like Rollover, Press, and RollOut. Knowing the available skin properties for each component is important. You can find this information in the documentation as well as by looking through the component code (in the code, they are declared as private member variables).
In the component language reference section of the documentation, you will find for each component a section titled, “Customizing the [component name].” In that documentation entry you will find two main sections. One section is titled, “Using skins with the [component name].” That section lists the different skin (or component) properties and provides a brief description of each one.
Skinning Without Code
Visually skinning components usually involves modifying library symbols to represent what you want a component to look like. Many longtime Flash users were surprised that they couldn’t readily find component symbols in the library when they included a component in their projects.
The introduction of the SWC file format (a compiled form of a component that is used to package all component assets into one convenient file) in Flash MX 2004 enables you to package and distribute components easily, which is a great benefit. At the same time, however, the skins, which are required for each component, are also included in the SWC. Because you cannot edit the contents of an SWC file, you must add the library symbols to redefine those symbols.
By adding symbols to your library with the same linkage identifiers to which the skin property is set (usually the default value of the component), a component would use that symbol over the symbol included within the SWC file for its skin. You might be thinking this is a pretty tedious task-manually tracking down the linkage identifiers, creating each symbol, and making sure you don’t make mistakes along the way. Thankfully Macromedia has given us a starting point to help ease the process.
The StandardComponents.fla file is included with every installation of Flash. It is located here:
* (Windows) C:\Program Files\Macromedia\Flash 8\\Configuration\ComponentFLA
* (Macintosh) Hard Drive/Users//Library/Application Support/Macromedia/Flash 8//Configuration/ComponentFLA
A Few Notes About Themes
Themes are a collection of skins and styles that enable you to develop an overall look for a set of components. I will not go into how styles are implemented in themes because my main focus here is skinning. Themes work by having a symbol in the library with the same linkage identifier as existing symbols within the component’s SWC. To make use of themes, Macromedia distributes the collection of library symbols in an FLA file as a starting point from which to work.
The following steps explain how to include a theme:
1. Create a new FLA file.
2.Open the file HaloTheme.fla. You can find it here:
* (Windows) C:\Program Files\Macromedia\Flash 8\\Configuration\ComponentFLA
* (Macintosh) Hard Drive/Users//Configuration/ComponentFLA
3. Locate the main HaloTheme symbol in the library and drag it to the blank FLA file created in Step 1.
4.Select Themes > MMDefault > Window Assets to open the Window Assets symbol. Customize the different graphical items in the symbol to your liking (see Figure 1).
5. Drag a Window component onto the main Stage.
6. Select Control > Test Movie to view the results.
Typically you would customize all the different symbols in a theme and have the complete theme available so you can easily reskin an application. Note also that, at this time, theme files are not only made up of graphical assets in the library but can also be drawn through code, including default component style values, as I will show shortly.
To briefly see styles in themes, you can check the HaloTheme library. You will notice a symbol called Defaults when you select Flash UI Components 2 > Themes > MMDefault in the library. If you check the linkage properties of the symbol, you will find that the symbol is associated with a class. You can find that class file in the included Classes folder.
Open the Default.as file located here:
* (Windows) C:\Program Files\Macromedia\Flash 8\/\First Run\Classes\mx\skins\halo
* (Macintosh) Hard Drive/Applications/Flash 8/First Run/Classes/mx/skins/halo
You should know that the setThemeDefaults() method is responsible for setting these defaults. If you want to build a complete theme, you might find it beneficial to specify the default styles of components as well. You can do so easily by customizing the Default.as file. If you plan to do so, ensure you create a local copy for your application. The files located in the global classes folder should never be modified.
Finally, if you want to skin only one component rather than have a whole theme, you could delete all library item files not related to the component you are interested in skinning and then edit just the symbol you want instead.
A Few Notes About Skinning Without Code
Skinning components without any code can be very limiting. You can do several things to avoid writing code every time you want to skin a component. For example, explore the file SampleTheme.fla, which you can find here:
* (Windows) C:\Program Files\Macromedia\Flash 8\\Configuration\ComponentFLA
* (Macintosh) Hard Drive/Users//Library/Application Support/Macromedia/Flash 8//Configuration/ComponentFLA
This theme can be easier to skin because it uses less code to draw the skins as apposed to the HaloTheme.
Some components use the same values for multiple skin properties (component states) because they draw that skin using code. For those components, you won’t find a method of customizing the different states independently without having to write some code. The Button component is a good example of this.
Skinning with Code
In general, if you want more control over your skinning, you must use code. In some cases, this method also offers skinning options not available in the previously studied methods. Some methods are quite simple, while others can be quite involved.
Using the Prototype Method
The prototype method is the easiest coding method. It involves writing code that redefines the default value of skin properties.
Take the Button component, for example. If you wanted to set the four main values for skin properties (falseUpSkin, falseDownSkin, falseOverSkin, and falseDisabledSkin), you would do the following-the finished result can be found in the Prototype folder of the downloadable sample code:
1. Create a movie clip symbol for each state in your library.
Be sure the linkage identifier is set for each state. Usually it’s best to follow some standard naming convention. For this example, I use the BlueButtonUpSkin, BlueButtonDownSkin, BlueButtonOverSkin, and BlueButtonDisabledSkin identifiers.
Note that I didn’t set the symbol to export in the first frame. If you don’t mind exporting all your symbols on the first frame, you can leave the Export in First Frame option selected and skip to Step 5.
2. Create a new movie clip symbol and name it FirstFrameExporter. The symbol doesn’t need to have a linkage identifier. In the new movie clip symbol you will create two frames.
3. On the first frame you will need a stop() function call. Place the four symbols you created in Step 1 on the second frame.
4. Place a copy of that new symbol on the Stage. Notice that it ends up being just an empty item with the registration point visible. It’s usually easiest to place that symbol at the registration point 0,0.
5. Place the code that will set the values of the properties equal to the linkage identifiers. The easiest way is to open the FLA file, go to the main Timeline, and enter the following code:
mx.controls.Button.prototype.falseUpSkin = “BlueButtonUpSkin”;
mx.controls.Button.prototype.falseDownSkin = “BlueButtonDownSkin”;
mx.controls.Button.prototype.falseOverSkin = “BlueButtonOverSkin”;
mx.controls.Button.prototype.falseDisabledSkin = “BlueButtonDisabledSkin”;
6. Place a Button component on the Stage.
7.Select Control > Test Movie to view the result.
This method is the simplest method for skinning components through code. It has the benefit of enabling you to redefine the skin property values of all instances of a component in one place. With the previous example, all Button components you add to your project will use those new default values rather than the default values to which the component was originally set.
This method also has the advantage of enabling you to set skin property values for subcomponents of a component. A good example of this use is the ComboBox component, which uses a ListBox component. If you set the skin property values for a ListBox component using this method, the ComboBox ListBox component within the ListBox component will automatically use the new value.
However, this method has one downside, which may not affect you-the inability to skin a component on an instance basis. Many times this is not needed, but there are times when you want to set the skin property values of a component specifically for that instance. In that case, you can use one of the other methods that require code.
Passing in the Values with initObject
Another approach similar to the prototype method is passing in the new skin property values to the initObject object when attaching a component through code, rather than setting them through the prototype method. To achieve this method, you can follow these steps:
1. Open the FLA file you created in the previous example.
2. Remove the code you placed on the main Timeline and delete the instance of the Button component from the Stage. Make sure you don’t delete the instance in the library-you will need that to attach the
component through code.
3. On the main Timeline, create an initObject object with the properties and values of the skin properties and pass the object to the createClassObject() calls, using the following code:
var initObj:Object = new Object();
initObj.falseUpSkin = “BlueButtonSkin”;
initObj.falseDownSkin = “BlueDownSkin”;
initObj.falseOverSkin = “BlueOverSkin”;
initObj.falseDisabledSkin = “BlueDisabledSkin”;
createClassObject(mx.controls.Button,”myButton”,1,initObj);
Select Control > Test Movie to view the result.
Chafic Kazoun is the Founder and CTO of Atellis, a Washington, D.C.-based firm that specializes in developing Rich Internet Applications and Product. At Atellis Chafic manages, architects, and develops applications and components. Chafic has been actively involved in the Flash community, has delivered presentations at numerous conferences, and has contributed to published works. He is also a Team Macromedia Volunteer and maintains a weblogs at www.rewindlife.com.
