Controlling the timeline with ActionScript

This tutorial shows how to control the timeline in a Flash movie. You will learn the essential commands: how to play a movie, how to stop it, how to jump to a particular frame on the timeline.

1. Open a new Flash document. Create a simple motion tween animation that consists of, let's say, 30 frames. If you are a beginner and don't know how to do this, I suggest you check the tutorial on creating a basic motion tween animation.

Test your movie, to see if your animation is working properly, before proceeding to the next step and ActionScript.

2. Lock the layer with the animation (you can call it animation or whatever you like). Create a new layer and call it actions. Your timeline should look like the image below.

Stopping the animation

3. The first thing we'll do is stop the movie from playing, right in the middle of it. Right click in frame 15 of layer actions and choose the Insert Keyframe option from the pop-up menu.

REMEMBER In a Flash movie, ActionScript can be placed in keyframes on the timeline, on movie clips, inside movie clips (on movie clip's own timeline) and on buttons. ActionScript cannot be placed inside a button!

Press F9 (ALT+F9 on a Mac) or choose Window > Actions and the Actions panel will appear. On top of the window, Actions - Frame should be written, indicating that you are entering the code in a keyframe. Click inside the area for code writing (the right side of the Actions panel) and type

stop();

Close the Actions panel. You should see a small letter "a" inside the frame 15 on the actions layer of your timeline. That is Flash's way of indicating that some ActionScript code is to be found on that frame.

Test your movie (Control > Test Movie) and you should see it stop right in the middle of animation. Close the movie test window. Now, there is no way of making the animation continue, unless we place something in our movie that will make it possible (or delete the ActionScript we just entered, which we don't want to do). So, let's place a button in our movie that will enable us to start the animation again.

Basic interactivity with a button

4. To save time, we will put a ready-made button on the scene. Create a new layer and call it button.

NOTE In a Flash movie, ActionScript can be placed in keyframes on the timeline, on movie clips, inside movie clips (on movie clip's own timeline) and on buttons. ActionScript cannot be placed inside a button!

Go to Window > Common Libraries > Buttons and you will see the Button Library appear. Choose a playback-type button and drag it onto the scene.

Be sure that the button is selected: lookm in the Properties panel below the scene and see if it says Button on its left side. If you are not sure if the button is selected, click somewhere on the scene, and then click the button (once). This is important, because if you don't select the button, you may accidentaly place the ActionScript code on the timeline, which will produce an error, because the ActionScript code intended for a button won't work on a keyframe in the timeline.

5. Press F9 (ALT+F9 on a Mac) or choose Window > Actions and the Actions panel will appear. On top of the window, Actions - Button should be written (be sure to check that), indicating that you are entering the code on a button. Click inside the area for code writing (the right side of the Actions panel) and type

on (release) {
play();
}

Close the Actions panel. Test your movie, you will see the animation, which will stop in the middle, when it reaches the frame where we put the ActionScript stop(); command. Now press the button, and it will continue, reach the end, start from the beginning and stop again.

The code we entered literally tells Flash: "When the mouse is pressed and released over this button, begin playing the movie from the current frame." Now, why did I say pressed and released? Well, position your mouse over the button, click it, but don't release it. Nothing will happen until you release it. If you want to know how to make the button work with different mouse clicks (click and drag, release outside, etc) I suggest you check the tutorial on Creating a flash ad banner from start to finish, where the different possibilities of interaction with the mouse are explained along with the notions of events and event handlers.

6. With the button still selected, open the Actions panel again, and replace the line with the stop(); command with the following (the modified code is shown in bold):

on (release) {
gotoAndPlay(20);
}

Test the movie. When the animation stops, click the button and you'll see the movie jump to the frame specified between the parenthesis (20 in our case) and start playing from that point on (all the frames in between are skipped). If you want the movie to jump to a certain frame and stop there, type the following code:

on (release) {
gotoAndStop(20);
}

If something isn't functioning properly, check that you typed the code correctly AND that you placed it on the button, NOT on the timeline. Also, you have to pay attention to the way you've written the commands: it has to be gotoAndStop(); because Flash is case-sensitive - you cannot write gotoandstop(); or GoToAndStop(); and expect it to work.

OK? Cool :) Now you've just made your first interactive Flash movie! If you want, put other buttons on the scene (you can put them on the same layer with the already present button, there aren't going to be any errors because the buttons aren't animated), and give different functionality to each button: play, stop, etc.

One last thing: if you wanted, say, make the animation loop between the first and the tenth keyframe, insert a keyframe (right-click and choose Insert Keyframe) in frame 10 in the actions layer. Open the Actions panel and write

gotoAndPlay(1);

in it. That's it. No on(release) command is necessary, because that kind of code is reserved for a button. Test your movie, and you will see it loop between the 1st and the 10th keyframe.

Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!