Creating the Button Symbol. Insert > New Symbol… Button OK

laborermaizeSoftware and s/w Development

Jul 4, 2012 (5 years and 1 month ago)

715 views

In this lesson you learn about creating button symbols and reusing them as instances in your
project. You will also be able to create a link using ActionScript.
1.
Creating the Button Symbol.
1.a.
From the main timeline select
Insert > New Symbol…
1.b.
In the symbol dialogue box, choose
Button
and name the button “submit_btn”.
1.c.
Click
OK
.
Notice that the timeline has changed to reflect the button states of Up, Over, Down,
and Hit. The current state of the button is “Up”, or the button as will appear with no
mouse action.
1.d.
Make sure the Up state is highlighted and using the Rectangle Tool, draw a button
shape on the stage.
1.e.
Using the Text Tool, type “submit” as the button label.
1.f.
Style the text and color of the button, as needed:
1.g.
Click on the Over frame and press
F6
to insert a keyframe.
1.h.
Change the color of the button and the label to how it will appear when a mouse
hovers over it.
The Down state refers to the button as it would appear at the moment the mouse
button is clicked. In this case there will be no change.
1.i.
The Hit state refers to the active area or the “hotspot” of the button symbol. It is the
entire button symbol. Click on the Hit frame and press
F6
.
1.j.
Click on Scene 1 in the status bar to return to the main timeline.
Flash — 4
Symbols and Instances: Buttons
© 2008, Cascadia Graphics & Publishing, LLC. All rights reserved.
1
1.k.
Note that
“submit_btn” is now in the library.
1.l.
If necessary, delete anything that is on the stage and make sure that you have
highlighted frame 1.
1.m.
Drag an instance of the submit_btn symbol onto the stage.
1.n.
Test the button ( [CONTROL + ENTER] ).
We will use ActionScript to control the button action when clicked. It will be linked to an external
web site.
2.
More Beginning ActionScript.
2.a.

Switch back to the main timeline by clicking on
Scene 1
in the status bar.
2.b.
Click once on the button symbol to make it active and select
Window > Actions

from the main menu.
2.c.
Starting with line 1 type:
on
(
release
) {

getURL
("
http://www.cascadiagraphics.com
", "
_parent
");
}
This is the syntax for adding a link. The portion in green can be any URL.
2.d.
Test the button ( [CONTROL + ENTER] ).
Note:
The ActionScript above is written in ActionScript 2.0 syntax. ActionScript 3.0 is available as of
Flash CS3. The correct syntax for the same action in ActionScript 3.0 would be:
submit_btn.addEventListener(MouseEvent.CLICK,buttonClickHandler);
function buttonClickHandler(event:MouseEvent):void {
navigateToURL(new URLRequest("
http://www.xxx.com
"));
}
Flash — 4
Symbols and Instances: Buttons
© 2008, Cascadia Graphics & Publishing, LLC. All rights reserved.
2