Controlling the Timeline with ActionScript 3

Flash CS3 allows you to create either an ActionScript 2 or ActionScript 3 document. There are a number of ways ActionScript 3 is different from version 2. One of the first changes designers is no longer being able to attach a script to a button instance. In the following steps you’ll learn how to control buttons using ActionScript 3 while creating a guide for selecting perennials.

Step 1. Create a Flash Document

Launch Flash. On the welcome screen click Flash File (ActionScript 3.0). It’s located under the Create New column. Choose Window > Workspace > Default to open the panels you’ll be using. In the Properties panel enter 15 in the Frame Rate field. Click the Background color swatch and select black for the background color.

Step 2. Setting up the Timeline

Insert two layers in the Timeline by clicking the Insert Layer button. Starting with the top layer, name the layers: actions, flowers, and text. Extend the Timeline by selecting Frame 25 in all of the layers and pressing F5.

In the actions layer insert a Keyframe (F6) in Frames 2, 5, 12, and 20. Next, starting with Frame 2, label each frame respectively: hut, lily, paradise, and cone. To label a frame first select it. In the Properties panel enter the name of the label in the Frame Label field.

Step 3. Creating Symbols

The flower and hut images were created using the built-in symbols from Illustrator CS3. You can draw your own images in Flash or import them from another program. If you choose to import images, select the flowers layer and choose File > Import to Stage. If you choose to draw your images select the flowers layer before you start drawing. Draw a hut or building and three different flowers. The flowers used in the tutorial are cone, lily, and paradise.

Next, convert all of the images to a Button symbol. Start by selecting a flower and pressing F8 to open the Convert to Symbol dialog. Enter cone in the Name field, select Button for the type and click OK. Double-click the symbol to edit its Timeline. Insert a Keyframe (F6) in the Hit frame. Using the Rectangle tool (R) specify the hit area by drawing a filled rectangle over the flower. Return to the Main Timeline by clicking the Scene 1 button. Repeat this process to convert the rest of the images to buttons.

Step 4. Naming Button Instances

An Instance must have a name before Actionscript can be used to control it. The Instance names for the flowers are cone, lily, and paradise. If you choose to use different names, you’ll need to use the Instance names you assigned when you add Actionscript.

On the Stage select the coneflower button. In the Properties panel enter “cone” in the Instance name field. Select the paradise flower button and enter “paradise” in the Instance name field. Repeat the process for the lily and hut buttons. Arrange the buttons on the Stage as seen in Step 2’s graphic.

Step 5. Adding Text

Move the Playback head to Frame 1. Click the text layer to select it. Use the Text tool (T) and select a font and color from the Properties panel. Using the font and color of your choice type the name of your garden center and suggest the user try some perennials.

Step 6. Arranging the Screens

Move the Playback head to Frame 5 (lily). Select both the flowers and text layers and insert a Keyframe(F6) Arrange the buttons on the Stage as shown in the graphic. Rewrite the text on the text layer to describe the lily. Place an Instance of the lily button on the right side of the screen. With button still selected choose Graphic from the dropdown menu in the Properties panel.

Repeat this procedure to change the contents in Frame 12 (paradise) and frame 20 (cone). Warning, if you forget to change the behavior from button to graphic your movie will not work as expected after you’ve added the ActionScript. Flash will also display a warning and error description in the Output panel.

The movie should stay on the first frame until the viewer clicks a flower. However, without a stop action in the first frame of the Timeline the movie automatically plays. We’ll fix this now.

Select the first Keyframe of the actions layer. Choose Window > Actions or press F9 to open the Actions panel. Make sure the Script Assist is turned off. In the Script pane, type stop();

Step 7. Adding ActionScript

Select Frame 1 of the actions layer. In the Script pane add the following: (You should already have stop(); in the pane.)

Test your movie by choosing Control > Test Movie.

In ActionScript 3 event listeners and handlers are used to control interactions. In our movie we created a function, event listeners to listen for when the user clicks the mouse and an event handler to perform an action when the mouse is clicked.

Visitor Comments

Leave us a comment

Your Message: Name: * Email: * Post it!

• Digg This!
• Del.icio.us
• Blinklist
• Back to Top