Programmatic skinning

Programmatic skinning is the process of using ActionScript 3.0 to assign a movie clip's assets as a skin to a component instance, as opposed to manually editing the skin states for a particular component, as I reviewed in the previous section.

Manually generating a class

So roll up your sleeves and see how this works. Start by creating a new ActionScript 3.0 FLA file. After you save the file, drag two ComboBox component instances to the Stage. Name one instance style1_cb and name the other instance style2_cb by entering the names in the Instance Name field in the Property inspector.

Next, add a new layer to the Timeline and name the layer actionscript. Open the Actions panel (Window > Actions) and add the following lines of code in the Script window:

style1_cb.setStyle("upSkin", CBUpSkin1);
style2_cb.setStyle("upSkin", CBUpSkin2);

These two lines of code specify a class for the upSkin property of your two ComboBox instances. The ComboBox with the instance name style1_cb is assigned the CBUpSkin1 class, while the ComboBox named style2_cb is assigned the CBUpSkin2 class.

Don't worry. Just because you are specifying classes doesn't necessarily mean you have to write complex ActionScript 3.0 code. Flash CS3 actually does most of the heavy lifting for you behind the scenes.

Make an Up skin for your first ComboBox instance. Simply create a new movie clip (Insert > New Symbol) and choose the type Movie clip. Name the symbol UpSkin1. In the advanced section, select the option to Export for ActionScript and leave the option Export in First Frame checked (see Figure 6).

Figure 6. Creating a new movie clip that will be used as a skin asset

Finally, update the Class field with the name CBUpSkin1 as shown in Figure 6. Click OK.

It's interesting to note that although we've specified the class name CBUpSkin1, a class of that name doesn't actually exist yet. You'll get to that in a moment.

After you click OK, the message in Figure 7 will appear.

Figure 7. Alert warning you that a definition for the class will be automatically generated after you've created a new movie clip and assigned it a class name that doesn't yet exist

Essentially this message states that because Flash did not locate the specified class, it will create a new class of the same name for you, so that it will be available in the future and you can reference it. This is all happening behind the scenes in the Flash authoring interface.

By adding the reference to the CBUpSkin1 class, and then creating a new empty movie clip that references the same class, you've prompted Flash to use the movie clip you just created as the Up skin for the ComboBox instance named style1_cb. Now all that's left to do is edit the movie clip to change the look and feel of the skins as desired. Use the tools in the Tools panel to graphically change the movie clip so it matches your project's design.

After you've updated the movie clip, test the movie (Control > Test Movie). The first ComboBox instance will appear with the updated elements in all its skinned glory but the second instance will cause an error message to occur. It makes sense that the CBUpSkin2 class is not found, and that the Up skin is missing, because that class doesn't actually exist yet.

Dynamically generating a class

Rather than repeating the steps outlined above, take a different approach for creating the second instance's skin. This time, use ActionScript 3.0 to dynamically generate the class. This strategy is built on the concept that it is not necessary to design the component skins manually in Flash CS3. For example, you can use the graphics API or load an external bitmap or SWF assets to generate a skin.

To do this programmatically, you need to create your own ActionScript 3.0 class. Create a new ActionScript 3.0 class file named CBUpSkin2.as. Select File > New > ActionScript File. After you've created and saved the file, add the following code:

package {
  import flash.display.Sprite;
  public class CBUpSkin2 extends Sprite {
    private var _rectangle:Sprite;
    public function CBUpSkin2() {
      _rectangle = new Sprite();
     _rectangle.graphics.beginFill(0xCC0000,1);
     _rectangle.graphics.drawRect(0, 0, 100, 20);
     _rectangle.graphics.endFill();
     addChild(_rectangle);
    }
  }
}

That's not too scary, is it? This code specifies your CBUpSkin2 class and then creates a Sprite instance inside the class and uses the graphics API to draw a red rectangle with a width of 100 pixels and a height of 20 pixels.

From here on, the steps to follow are identical to the steps outlined in the previous programmatic skinning example. Simply create a new movie clip and specify CBUpSkin2 as the movie clip's Class.

If you test the movie again (Control > Test Movie), you'll see two instances of the ComboBox instance, each with a different skin. The first ComboBox instance uses the movie clip prepared in Flash CS3 to prompt an auto generation of the class for its skin, while the second instance uses the code in the .as file to skin the component.

Obviously we are just scratching the surface here. You can use ActionScript 3.0 to implement much more complex skinning operations than merely drawing a simple rectangle, but for the sake of simplicity this example shows you all the basic steps for programmatically skinning components.

Page 3 of 4

Previous Page

Next Page