Flash Games Studio

Flash Math Creativity

more

Simply Flashing Christopher B. Contois 2cinteractive.com

Objective:
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.

Concept:
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.

Instructions:
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

Step 1.
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.

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
//
//btn=button
//mc=movie clip
//i=image
//txt=editable text
//-------------------------------
--------------------------

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.

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.

Step 2:
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" layer.

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.

Step 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.

-----------
stop();
-----------------

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.

-Christopher
email: ccontois@2cinteractive.com
url: www.2cinteractive.com