How to Use Frame Labels With Macromedia Flash

Flash Frame Labels

Interactivity in Flash involves clicking a button and displaying something new to the viewer. This is achieved by use of buttons and frame labels. Frame labels are names given to frames on a flash timeline. These labels can then be referenced right inside the flash actionscript code( the programming language used in Flash) and pinned to a button, allowing a viewer to navigate to the frame. Using frame labels over frame numbers has the advantage of having the ActionScript code always pointing to that frame even if the frame is moved around. Adding frames before or after the frame label will not require changing the ActionScript.

Instructions

Flash Labels

1. Fire up your Flash application program.

2. Insert 3 layers on the timeline and label them "Actions", "Home", "About", "Products." Each of these layers will hold a Web page frame that we will use to provide frame labels.

3. Click on frame 1 on the "Home" layer and draw a button symbol labeled "Home."

4. Click on frame 1 on the "About" layer and draw a button symbol labeled "About."

5. Click on frame 1 on the "Products" layer and draw a button symbol labeled "Products."

6. Click frame 10 of the "Home' layer and insert a keyframe (F6). Do the same for the "About" and "Products" layers at 10 frame interviews.

7. Go back to the "Home" layer and click on frame 10, which is now a keyframe. Locate the "Frame" text box at the bottom and type "Home". A red flag on the timeline appears indicating a frame label identifying that frame. Do the same for all the other keyframes on the other layers that you inserted.

8. Click on frame 1 of the "Actions" layer and type the following code:

   Stop();

   Home_btn.onRelease = function () {
   gotoAndStop ( "Home");
   }

   About_btn.onRelease = function () {
   gotoAndStop ("About");
   }

   Products_btn.onRelease = function () {
   gotoAndStop ("Products");
   }

   Click on "Ctrl + Enter" to test.

Tips & Warnings

• To draw a button symbol, select the rectangle tool and sketch a rectangle on the main stage. Fill it with color. Select the text tool and select a bright color contrasting the rectangle color. Click inside the rectangle and type inside the text box that appears. Ensure it is visible inside the rectangle. Select the rectangle together with the text and press F8. Give the button symbol a name and select "Button Type" to convert to a button.

• For each button symbol, give it a name under the "Properties" "Button". For each button symbol, click on it and give it a name as follows:

• Button_btn

• About_btn

• Products_btn

References

• Learn Flash Videos: Creating a Basic Website

Resources

• AS Gamer: Using Frame Labels and Art Tweening