Toxiclab.org

Stop and Play the animation using the play and stop buttons

2.3.2009, 15:17
Submited in: Flash | Total Views: 14001

In this thoroughly explained, detailed lesson, I will show you how to create two buttons (play and stop)  that will run and stop animation. You can use this action script lesson when you want to have complete control of an animation. Using this lesson, you will also learn how to import any image into a flash stage, how to convert it into a Movie Clip Symbol, how to animate it and much much more! Let's start!



Step 1

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select any color as background color. Set your Flash movie's frame rate to 28 and click ok.



Step 2


Choose now File > Import > Import to stage (Ctrl+R) and import any image into a flash stage.

Step 3

While the image is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 4

Click now on frame 20 and 40 and press F6 key.

Step 5

While you're still on frame 40, go to the Action Script Panel (F9) and enter this code inside the actions panel:

gotoAndStop("1");

Step 6

Go back now on the first frame and go again to the action script panel (F9). Then, enter this code inside the actions panel:

stop();

Step 7

Select now frame 20, take the Selection Tool (V) and click once on the image to select it. After that, go to the Properties Panel (Ctrl+F3) below the stage. On the right, you will see the Color menu. Select Advanced in it, click on Settings button and make the adjustments as follow:



Step 8

Right-click anywhere on the gray area between frame 1 and 20 and frame 20 and 40 on the timeline and choose Create Motion Tween from the menu that appears.



Step 9

Call the current layer image. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 10

Create now a new layer and name it play and stop buttons. After that, place that layer below the layer image. See the picture below!



Step 11

Select now layer play and stop buttons and create it like it is shown on the picture below!







Step 12

Select the Selection Tool (V) and click once on the stop button to select it. After that, go to the Action Script Panel (F9) and enter this code inside the actions panel:

on (press) {
stop();
}

Step 13

Select again the Selection Tool (V) and click once on the play button to select it. After that, go to the Action Script Panel (F9) and enter this code insidethe actions panel:

on (press) {
play();
}

Step 14

Click now on the first frame of layer play and stop buttons and go again to the action scripts panel. Then, enter this code inside the actions panel:

stop();

Step 15

Select now frame 40 and press F6 key. While you're still on frame 40, enter this code inside tha action panel:

GotoAndstop("1");

We're done!

Test your Movie and enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials


Resources Worth visiting


Friends