Flash CS4 ActionScript 3.0 Tutorial
How to Add Pre-Built Button Component to Your Flash File
Flash ships with several Components. Components are pre-packaged objects that allow you to quickly add elements, such as scroll bars, text boxes and buttons.
Components can be added to the stage using the drag and drop method from the Components panel or added with ActionScript. The Component parameters are altered with the Component Inspector or ActionScript.
This example shows how to add a Button Component using the drag and drop method and with ActionScript. It also describes changing the Component parameters with the Component Inspector and ActionScript. To talk to a Component with ActionScript, it must first be added to the Library.
Components are actually Movie Symbol objects regardless of the Component. If you are developing in ActionScript 2.0, you will see a different set of Components available.
For more information on the other Components, see topics, CheckBox Component, ColorPicker Component, ComboBox Component, DataGrid Component, Label Component, List Component, NumericStepper Component, ProgressBar Component, RadioButton Component, ScrollPane Component, Slider Component, TextArea Component, TextInput Component, TileList Component, UILoader Component and UIScrollBar Component.
Button Component with instance name button01_mc
Open a new Flash document and add a new layer.
Name the upper layer Actions and the lower one Content.
Select the first frame of the Content layer and open the Components panel (Window > Components).
Double-click the Button Component icon to a add a Button to the center of the stage. The Button and it's assets are also added to the Library.
With the Button selected open the Properties panel and change it's x and y settings to 100 and 100.
With the Button still selected, open the Component Inspector (Window > Component Inspector).
Click the word Label in the Value column and change the text to Button01 then press Enter. The label on the Button updates.
With the Button still selected, open the Properties panel and assign it an instance name of button01_mc.
Open the ActionScript panel for the only keyframe in the Actions layer by Option double-clicking (PC - Alt double-clicking) the keyframe.
Copy/Paste the following code in the ActionScript Panel:
var button02_mc:Button=new Button();
trace("You pressed Button01");
trace("You pressed Button02");
Click the Auto Format button to format the code
Test your movie by pressing Cmd/Return (PC - Ctrl/Enter). The two buttons appear on the stage. Whenever a button is clicked, a You pressed ButtonXX message appears in the Output panel.
Dissecting the Code
The first line of the code at Step Ten imports the code necessary to talk to the Button class. Line two establishes a new Button variable named button02_mc. This is the second button that we are adding to the stage with ActionScript. It's label value and location are set with the next few lines of code.
Line 6 adds the button02_mc to the stage.
Line 7 adds an event listener to button01_mc. Whenever the button is pressed, the function onClick01 is run. The function displays the You pressed Button01 text. This text can be replaced with numerous other commands.
The final block of code repeats the process for the second button.
More Component Options
In this example we showed how to change the button label. You can use this same method to change the other button values shown in the Component Inspector (i.e., emphasized, enabled, labelPlacement, selected, toggle and visible).