User Guide

28 Chapter 2: Creating Basic Components in Flash MX 2004
5. In the Create New Symbol dialog box, perform the following steps:
a Enter BlueButton in the Name field.
b Enter BlueButton in the Identifier field.
c Enter BlueButton in the AS2.0 Class field.
To access the Identifier and AS 2.0 Class field, you must select the Export for ActionScript
check box.
6. Click OK.
7. Save the FLA file as BlueButton.fla.
8. Open a text editor and create a file called BlueButton.as. Save the ActionScript file in the same
directory as the BlueButton.fla file. This should be a directory that is not in the web
application’s directory structure, since these are source files for your eventual component.
Furthermore, it cannot be the same directory into which you deploy the SWC file and the
MXML file.
9. Add the following code to the BlueButton.as file:
class BlueButton extends mx.controls.Button {
static var symbolName:String="BlueButton";
static var symbolOwner:Object = BlueButton;
var className:String = "BlueButton";
function BlueButton() {
}
function init() {
//Set the label text to blue.
setStyle("color", 0x6666CC);
super.init();
invalidate();
}
}
This script extends the mx.controls.Button class rather than the base classes (UIObject or
UIComponent). As a result, it inherits all the skins, styles, behaviors, and events of the Button
control.
It also calls the UIObject
setStyle() method and sets the values of the color property to a
hexadecimal equivalent of the color blue. When setting colors in
setStyle() method calls,
you must use the hexadecimal values for the value and surround the property name with
quotation marks.
10. Return to the Flash environment and enter Edit Symbols mode to edit the BlueButton symbol.
11. Rename the existing layer main.
12. Add the following line to the main layer’s first frame:
stop();
13. Add a new layer called assets.