This section takes you through the steps
to create a simple ActionScript 3.0 application using Flash components
and the Flash authoring tool. The example is provided both as a
FLA file with the ActionScript code included on the Timeline and
also as an external ActionScript class file with a FLA file that
contains only the components in the library. In general, you will
want to develop larger application using external class files so
that you can share code between classes and applications and to
make your applications easier to maintain. For more information
on programming with ActionScript 3.0, see Programming ActionScript 3.0.
Design of the applicationOur first example of an ActionScript component application
is a variation of the standard “Hello World” application, so its
design is fairly simple:
The application will be called Greetings.
It uses a TextArea to display a greeting that is initially
Hello World.
It uses a ColorPicker that allows you to change the color
of the text.
It uses three RadioButtons that allow you to set the size
of the text to small, larger or largest.
It uses a ComboBox that allows you to select a different
greeting from a drop-down list.
The application uses components from the Components panel
and also creates application elements through ActionScript code.
With
that definition in place, you can start building the application.
Create the Greetings applicationThe following steps create the Greetings application
using the Flash authoring tool to create a FLA file, place components
on the Stage, and add ActionScript code to the Timeline.
Create the Greetings application in a FLA file:Select
File > New.
In the New Document dialog box, select Flash File (ActionScript
3.0), and click OK.
A new Flash window opens.
Select File > Save, name the Flash file Greetings.fla,
and click the Save button.
In the Flash Components panel, select a TextArea component
and drag it to the Stage.
In the Properties
window, with the TextArea selected on the Stage, type aTa for the
instance name, and enter the following information:
Enter 230 for the W value (width).
Enter 44 for the H value (height).
Enter 165 for the X value (horizontal position).
Enter 57 for the Y value (vertical position).
Enter Hello World! for the text parameter, on the
Parameters tab.
Drag a ColorPicker
component to the Stage, place it to the left of the TextArea and
give it an instance name of txtCp. Enter the following information
in the Property inspector:
Drag three RadioButton
components to the Stage, one at a time and give them instance names
of smallRb, largerRb, and largestRb. Enter
the following information for them in the Property inspector:
Enter 100 for the W value and 22 for the H
value for each of them.
Enter 155 for the X value.
Enter 120 for the Y value for smallRb, 148 for
largerRb, and 175 for largestRb.
Enter fontRbGrp for the groupName parameter for each
of them.
Enter labels for them on the Parameters tab of Small, Larger, Largest.
Drag a ComboBox
to the Stage and give it an instance name of msgCb. Enter the
following information for it in the Property inspector:
Enter 130 for the W value.
Enter 265 for the X value.
Enter 120 for the Y value.
On the Parameters tab, enter Greetings for the prompt
parameter.
Double-click the text field for the dataProvider parameter
to open the Values dialog box.
Click the plus sign and replace the label value with Hello World!
Repeat the preceding step to add the label values Have a nice day! and Top of the Morning!
Click OK to close the Values dialog box.
Save the file.
If it is not already open, open the Actions panel by hitting F9 or
selecting Actions from the Window menu. Click Frame 1 on the main
Timeline and enter the following code in the Actions panel:
import flash.events.Event;
import fl.events.ComponentEvent;
import fl.events.ColorPickerEvent;
import fl.controls.RadioButtonGroup;
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp");
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler);
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler);
msgCb.addEventListener(Event.CHANGE, cbHandler);
The
first three lines import the event classes that the application
uses. An event occurs when a user interacts with one of the components.
The next five lines register event handlers for the events that
the application wants to listen for. A click event
occurs for a RadioButton when a user clicks on it. A change event
occurs when a user selects a different color in the ColorPicker. A change event
occurs on the ComboBox when a user chooses a different greeting
from the drop-down list.
The fourth line imports the RadioButtonGroup
class so that the application can assign an event listener to the
group of RadioButtons, rather than assigning the listener to each
button individually.
Add the following line of code to the Actions panel to create
the tf TextFormat object, which the application
uses to change the size and color style
properties of the text in the TextArea.
var tf:TextFormat = new TextFormat();
Add the following code to create the rbHandler event
handling function. This function handles a click event
when a user clicks on one of the RadioButton components.
function rbHandler(event:MouseEvent):void {
switch(event.target.selection.name) {
case "smallRb":
tf.size = 14;
break;
case "largerRb":
tf.size = 18;
break;
case "largestRb":
tf.size = 24;
break;
}
aTa.setStyle("textFormat", tf);
}
This function uses a switch statement
to examine the target property of the event object
to determine which RadioButton triggered the event. The currentTarget property
contains the name of the object that triggered the event. Depending
on which RadioButton the user clicked, the application changes the
size of the text in the TextArea to 14, 18, or 24 points.
Add the following code to implement the cpHandler() function,
which handles a change to the value in the ColorPicker:
function cpHandler(event:ColorPickerEvent):void {
tf.color = event.target.selectedColor;
aTa.setStyle("textFormat", tf);
}
This function sets the color property
of the tf TextFormat object to the color selected
in the ColorPicker and then calls setStyle() to
apply it to the text in the aTa TextArea instance.
Add the following code to implement the cbHandler() function,
which handles a change to the selection in the ComboBox:
function cbHandler(event:Event):void {
aTa.text = event.target.selectedItem.label;
}
This function simply replaces the text in the TextArea
with the selected text in the ComboBox, event.target.selectedItem.label.
Select Control > Test Movie or press Control+Enter
to compile the code and test the Greetings application.
The following section shows you how to
build the same application with an external ActionScript class and
a FLA file that has only the required components in the library.
Create the Greetings2 application with an external class file:Select File > New.
In the New Document dialog box, select Flash File (ActionScript
3.0), and click OK.
A new Flash window opens.
Select File > Save, name the Flash file Greetings2.fla,
and click the Save button.
Drag each of the following components from the Components
panel to the library:
ColorPicker
ComboBox
RadioButton
TextArea
The
compiled SWF file will use each of these assets, so you need to
add them to the library. Drag the components to the bottom of the
Library panel. As you add these components to the library, other
assets (such as List, TextInput, and UIScrollBox) are added automatically.
In the Properties window, for the Document Class, type Greetings2.
If
Flash displays a warning, saying that “a definition for the document
class could not be found,” ignore it. You will define the Greetings2
class in the following steps. This class defines the main functionality
for the application.
Save the Greetings2.fla file.
Select File > New.
In the New Document dialog box, select ActionScript File,
and click OK.
A new script window opens.
Add the following code into the script window:
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextFormat;
import fl.events.ComponentEvent;
import fl.events.ColorPickerEvent;
import fl.controls.ColorPicker;
import fl.controls.ComboBox;
import fl.controls.RadioButtonGroup;
import fl.controls.RadioButton;
import fl.controls.TextArea;
public class Greetings2 extends Sprite {
private var aTa:TextArea;
private var msgCb:ComboBox;
private var smallRb:RadioButton;
private var largerRb:RadioButton;
private var largestRb:RadioButton;
private var rbGrp:RadioButtonGroup;
private var txtCp:ColorPicker;
private var tf:TextFormat = new TextFormat();
public function Greetings2() {
The script defines
an ActionScript 3.0 class, named Greetings2. The script does the
following:
It imports classes that we will use in
the file. Normally you would add these import statements
as you reference different classes in the code, but for the sake
of brevity, this example imports them all in this one step.
It declares variables that represent the different types
of component objects that we will add to the code. Another variable
creates the tf TextFormat object.
It defines a constructor function, Greetings2(),
for the class. We will add lines to this function, and add other
methods to the class in the following steps.
Select File > Save, name the file Greetings2.as,
and click the Save button.
Add the following lines of code to the Greeting2() function:
createUI();
setUpHandlers();
}
The function should now look like the following:
public function Greetings2() {
createUI();
setUpHandlers();
}
Add the following lines of code after the closing brace of
the Greeting2() method:
private function createUI() {
bldTxtArea();
bldColorPicker();
bldComboBox();
bldRadioButtons();
}
private function bldTxtArea() {
aTa = new TextArea();
aTa.setSize(230, 44);
aTa.text = "Hello World!";
aTa.move(165, 57);
addChild(aTa);
}
private function bldColorPicker() {
txtCp = new ColorPicker();
txtCp.move(96, 72);
addChild(txtCp);
}
private function bldComboBox() {
msgCb = new ComboBox();
msgCb.width = 130;
msgCb.move(265, 120);
msgCb.prompt = "Greetings";
msgCb.addItem({data:"Hello.", label:"English"});
msgCb.addItem({data:"Bonjour.", label:"Français"});
msgCb.addItem({data:"¡Hola!", label:"Español"});
addChild(msgCb);
}
private function bldRadioButtons() {
rbGrp = new RadioButtonGroup("fontRbGrp");
smallRb = new RadioButton();
smallRb.setSize(100, 22);
smallRb.move(155, 120);
smallRb.group = rbGrp; //"fontRbGrp";
smallRb.label = "Small";
smallRb.name = "smallRb";
addChild(smallRb);
largerRb = new RadioButton();
largerRb.setSize(100, 22);
largerRb.move(155, 148);
largerRb.group = rbGrp;
largerRb.label = "Larger";
largerRb.name = "largerRb";
addChild(largerRb);
largestRb = new RadioButton();
largestRb.setSize(100, 22);
largestRb.move(155, 175);
largestRb.group = rbGrp;
largestRb.label = "Largest";
largestRb.name = "largestRb";
addChild(largestRb);
}
These lines do the following:
Instantiate
the components used in the application.
Set each component’s size, position, and properties.
Add each component to the Stage, using the addChild() method.
After the closing brace of the bldRadioButtons() method,
add the following code for the setUpHandlers() method:
private function setUpHandlers():void {
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler);
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler);
msgCb.addEventListener(Event.CHANGE, cbHandler);
}
private function rbHandler(event:MouseEvent):void {
switch(event.target.selection.name) {
case "smallRb":
tf.size = 14;
break;
case "largerRb":
tf.size = 18;
break;
case "largestRb":
tf.size = 24;
break;
}
aTa.setStyle("textFormat", tf);
}
private function cpHandler(event:ColorPickerEvent):void {
tf.color = event.target.selectedColor;
aTa.setStyle("textFormat", tf);
}
private function cbHandler(event:Event):void {
aTa.text = event.target.selectedItem.data;
}
}
}
These functions define event listeners for the
components.
Select File > Save to save the file.
Select Control > Test Movie or press Control+Enter
to compile the code and test the Greetings2 application.
Develop and run subsequent examplesHaving developed and run the Greetings application,
you should have the basic knowledge you need to run the other code
examples presented in this book. The relevant ActionScript 3.0 code
in each example will be highlighted and discussed and you should
be able to cut and paste each of the examples in this book into
a FLA file, compile and run it.
|
|
|