Play and stop buttons with actionscript

Posted by admin | Published 2006-07-23 |

In this tutorial you will learn how to create buttons and add actionscript to them. This is a great tool to learn how buttons work and learning actionscript for your sound, movies and animation files.

Step 1 : Drawing and creating buttons

Create a new document and change the dimensions to 225 px by 225 px for better viewing.
Using the Rectangle Tool draw a square with no outline to make things easy. Select the square you made with the Selection Tool and change the property size to 30x30.
Right click the square you drew and then click "Convert to Symbol". Name this "Stop" and select the Button behavior.
Now draw another square exactly the same as the 1st square. We are going to transform this into a triangle.
Select the Subselection Tool (white arrow). Then click the top right corner (notice the little green box is filled and all the other corners on the square are not filled) and click delete on the keyboard.
Now select the bottom right corner and use the up arrow until you think it looks centered like a triangle.
Right click the triangle and convert to symbol like you did with the square. The name will be "Play" and select the Button behavior.

Step 2 : Managing layers

Name the current layer "Buttons". Select the grey area outside the stage and open your actions panel and type in stop(); Now your timeline should have a little a above the keyframe.
Go to frame 25 and add a new keyframe.
Add a new layer and call this "animation".
Do any simple animation such as a circle going from left to right. Don't know how to do a motion tween? Check out our motion tween tutorial here. Your flash file should now look similar to this.

Step 3 : Adding ActionScript

Select your stop button (the square) and copy the below actionscript into the actions text box.

on (release)
{
gotoAndStop(1);
}

Now select the play button (the triangle) and copy the below actionscript into the actions text box.

on (release)
{
gotoAndPlay(1);
}

Understanding the actionscript.
On (release) - This means after you release the left mouse button it triggers this event (either stop or play)
gotoAndStop(1); - This is telling flash to go to frame 1 and stop.
gotoAndPlay(1); - This is telling flash to go to frame 1 and play.
Now test your movie..that's it.

Download an example file here

Comments

{show_comment}