Controlling the Timeline with ActionScript 3

CATEGORIES: Flash, Tutorials | Cyndy Cashman | March 17, 2008

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.

Share This

Visitor Comments »

Enabling the buttons is unnecessary, unless they were disabled elsewhere.

Comment by Al | March 18, 2008 @ 8:12 am

event.target.enabled = false is also unnecessary.

Comment by Al | March 18, 2008 @ 8:17 am

I think that I could do that but how would you make this page??
http://www.procreo.jp/labo/flower_garden.swf

thanks, Judi

Comment by Judi J | April 3, 2008 @ 1:21 pm

Actually, enabling the buttons allows the pointer to be seen. Without this step, the pointer would not show there was a button on the screen.

Comment by AM | April 3, 2008 @ 2:04 pm

nice one, i like it very much. I m willing to learn flash.. u to help me plz.

Comment by jeeva | April 7, 2008 @ 1:44 am

OSOM is the word….thanks

Comment by santanu | April 7, 2008 @ 6:27 am

Hi there
Good tutorial. But isn’t it worth having the code (eg. in step 7) as text so users can copy and paste. I know I’m lazy, but kirupa.com does this and it makes tutorials more user friendly.

Comment by parkster | April 28, 2008 @ 5:28 am

on mine it says there is a problem with the first line in the actionscript:
stop():

and even if i change the : to a ;, there are more problems…im well confused!!

Comment by rach | May 13, 2008 @ 7:05 pm

hi there

in the first frame i’m preparing a collection of items for combobox which is in second frame. how can i do it?

Comment by rizasirman | June 24, 2008 @ 8:51 am

So I’ve already written to everyone once but the comment didn’t post. Here’s the summary version.

Al, technically you’re right, but include them anyway. You and your users will thank you later when you get to more complex projects.

Judi, it’s easier than what you might be thinking. If you still visit this tutorial and are interested in how it’s done, visit my blog (blog.americanmonk.com) and I’ll put something together for you.

Jeeva, it’s generally not appropriate to ask that a periodical be your personal tutor, but there are plenty of other ways to educate yourself. I hope you have fun learning Flash.

parkster,

stop();
function buttonClick(event:MouseEvent):void{
gotoAndStop(event.target.name);

hut.enabled = true;
lily.enabled = true;
paradise.enabled = true;
cone.enabled = true;

event.target.enabled = false;
}
hut.addEventListener(MouseEvent.CLICK, buttonClick);
lily.addEventListener(MouseEvent.CLICK, buttonClick);
paradise.addEventListener(MouseEvent.CLICK, buttonClick);
cone.addEventListener(MouseEvent.CLICK, buttonClick);

But it’s best not to rely on copying and pasting from a tutorial. They’re not perfect and you should make an attempt at learning the code. Copying and pasting turns you into a black box.

Rach, stop(); is the correct syntax. Please visit my blog (link above) if you’re still getting errors.

Anybody else, visit my blog!

Layers, love you guys! Thanks so much!

Comment by jonathon | July 7, 2008 @ 11:12 pm

Anybody knows of another website like the one mentioned above and listed below?

http://www.procreo.jp/labo/flower_garden.swf

Comment by kelly | July 20, 2008 @ 5:40 pm

Time waistage. No proper directions

Comment by Flash User | September 3, 2008 @ 11:45 am

Loved your tutorial. I am taking my first class in FLASH and feeling rather dense. I worked through your tutorial and did a copy/paste of your code as we are doing the 1 and 2 code the long way in class rather than writing code. Therefore, I missed something because my Flash movie just plays and plays. It isn’t directed by the buttons. I know there is something I don’t grasp, but working through this tutorial was fun and it gave me a better grasp of the concept. I love vector art and so I knew I would love FLASH.

Comment by Patricia Wiskur | October 13, 2008 @ 10:33 pm

Yeah cool tut.
I would just like an explanation of what the code means.
It sucks just typing it into the actions panel, without knowing what I’m doing.

Comment by Rudolf | November 18, 2008 @ 5:40 am

Leave us a comment

Featured Partner

From our Partners