Archive for December, 2009

Changing AS3 Component Styles with As

Tuesday, December 15th, 2009

An often reoccurring question is how to change the appearance of Flash components. This appeared easy to do with AS2 components. But actually it is much easier with AS3 components, where you have access to all skins and not only by just clicking on the component but also by using Actionscript. As an example we look at the ComboBox and I will show two ways to change the look of individual instances.

The first way is to just use the colorTransform method as shown in this movie. You will see two ComboBoxes, cb1 and cb2. cb1 was changed using different parameters. First of all the color was changed using colorTransform. We also change the alpha value of the BaseButton, which is part of the ComboBox and which is the first child: cb1.getChildAt(0). The second child is the TextInput component, which we can get by using instance.textField. The script for the movie you just saw is here. We just put two components on the stage.

import fl.controls.ComboBox;
import flash.geom.ColorTransform;
//
var _color:ColorTransform = new ColorTransform();
_color.color = 0x3399CC;
cb1.transform.colorTransform = _color;
cb1.getChildAt(0).alpha = 0.5;
//
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.font = "Impact";
myTextFormat.color = 0x000000;
myTextFormat.size = 14;
cb1.textField.setStyle ("textFormat",myTextFormat);
//
cb1.addItem ({label:"Apples"});
cb1.addItem ({label:"Oranges"});
cb1.addItem ({label:"Banana"});
cb2.addItem ({label:"Spinach"});
cb2.addItem ({label:"Salad"});
cb2.addItem ({label:"Cucumber"});


We also change the TextFormat of the TextInput of cb1 as you can see.

While this is one simple way of individualizing a component instance there is a much more elegant way. If you open the library of a movie, which has a ComboBox you will see a folder with the Component assets. Open the folder and you will see several folders, one of them named ComboBoxSkins. For our next exercise copy the MovieClip for ComboBox_upSkin, ComboBox_overSkin and ComboBox_downSkin. Give them new names, UpSkinBlue, OverSkinBlue and DownSkinRed. Fill out the form as shown here.Then change the color of the MovieClip as you like. I already did it, if you look at this final movie. To change the style of a ComboBox instance we use the setStyle() method. But how do we know the parameters. It is very simple. Check the Language Reference for the ComboboBox and scroll down to Styles. If it is not open, open it and you see a large number of references. One of them is upSkin, which is the skin for the default ComboBox. Now let’s change the skins using Actionscript.

import fl.controls.ComboBox;
//
var myTextFormat:TextFormat = new TextFormat();
myTextFormat.font = "Impact";
myTextFormat.color = 0x003399;
myTextFormat.size = 14;
//
cb1.setStyle("upSkin","UpSkinBlue");
cb1.setStyle("overSkin", "OverSkinBlue");
cb1.setStyle("downSkin", "DownSkinRed");
cb1.textField.setStyle ("textFormat",myTextFormat);
//
cb1.addItem({label:"Apples"});
cb1.addItem({label:"Oranges"});
cb1.addItem({label:"Banana"});
cb2.addItem({label:"Spinach"});
cb2.addItem({label:"Salad"});
cb2.addItem({label:"Cucumber"});


The script is very similar to the one of the former movie except that we are setting styles. The first parameter is the Style parameter, for instance upSkin. The second parameter is the style we want to apply, in our case the style of the MovieClip UpSkinBlue. Therefore, we add the class name of the MovieClip, which should be the same as the id. And that is all we need to do. If we want to change all instances of the ComboBox then we use the StyleManager class:

StyleManager.setComponentStyle(ComboBox, "upSkin","UpSkinBlue");


And that concludes this tutorial. Download the files here.