- Creating a Button
Download .fla - 30k
To create 2 buttons. One which will go to a "page" with
a square and the other to a "page" with a circle on it.
Buttons are usually the first step to providing interactivity to
your flash piece. By showing how to allow the user to jump from
one location to another without following a linear timeline will
provide a more unique and dynamic experience for each user.
There are 3 steps to this demo.
1. Creation of the buttons
2. Creation of the "pages" they will be linked to
3. Script added to the button to make it work
Open a new file, save it, add a layer named "Actions",
and we will place a script in frame 1. To add a script to the frame,
click on the frame and then open your actions panel (ctrl+alt+a)
and add a comment which will include your objective for the file.
To insert a comment, double click the word comment under the "Actions"
drop down, then type in the field at the botton.
Tip: Comment Tag
A "//" will turn your text pink and will
allow you to write without it effecting your script.
If you are in "expert mode" you
can write "/*" before your comment and end
with "*/", this way you do not have to add
a slash before every line.
Feel free to add whatever info will help you in the future. My
comments usually include the following info:
// Title: score
// Author: Christopher Contois
// Date Modified: March 9, 2002
// Purpose: show how to create a button
Now that our file has been initiated, lets create a our first button.
Insert a new layer and name it "buttons". Draw a square
on the screen and type the word square next to it. Draw a bounding
box around the 2 objects and convert them to a button symbol (insert-convert
to symbol (f8)). Make sure you check button and I name the beginning
of all of my buttons with the letters "btn_". In this
case I named it "btn_square". Try give your images names
that make sense and will be easy to identify later.
Double click on your new button. You will see 4 button states -
Up, Over, Down, Hit.
The image the user will see when the mouse is not on the
The image the user will see when the mouse is rolled over
||The image the user will see when the mouse button is pushed
down while on the button
The area the user's mouse must be to activate the button.
If no area is defined the Up state will be the default.
In other words you can create a space away from your button
that will activate it.
Insert-Keyframe (F6) in the Over, Down and Hit states. You should
have 4 grey boxes with a black dots in them. Click on the over state
frame. (The grey box will turn black) and change the color of the
text and the box to black. Then click on the down state and transform
the text to be smaller (Modify-Tansform-Scale and Rotate (ctrl+alt+s)).
Lastly, in the hit area draw a box to cover the text and the box.
This is the area the mouse must be to activate the button.
Follow these steps again for the circle.
Insert a 2 new frames for all of the layers. This is easily accomplished
by clicking on the "1" above the layers and "insert-new
frame" (F5) 2 times. Additionally, add 3 more layers one named
"square", one named "circle" and one named "labels".
Place the "labels" layer directly below the "Actions"
On the square layer frame 2 draw a square. On the circle layer
frame 3 draw a circle.
We are going to add names to out frames. This is where we will
tell the buttons to go. You can have buttons go to frame numbers,
however if you move your frames then you will have to adjust your
scripts. By using frame labels you will avoid this problem. To add
a frame label select the frame (layer - label;
frame 2). Make sure your "frame's" panel is visible (window-panels-
frames (ctrl+F)), and type the in a name for your label (i.e. square).
Your layer's frame should now show a little red golf course-type
flag. Do the same for "circle" in frame 3.
Finally we need to add the scripts to our buttons, and a stop
command to our first frame. Double-click the "a" in frame
1. Below your comment insert the stop command.
This will prevent the playback head from advancing
to the other "pages". Next open the actions window (ctrl+alt+a)
if it is not already visible, then click on the button to go to
the square. Under your "Basic" drop-down select "Go
To". You will see a series of options on the bottom. Change
"Frame Number" to Frame Label" and then use the "Frame"
drop down to select your frame label (i.e. square). Finally, deselect
the Go to and Play.
Do the same for the circle button. Test your file and happy scripting.
If you have any questions feel free to email me.