Now that we know how ActionScript works, we’re going to start adding in some code that’s a little more useful. Having your animation stop whenever you want is OK, but what if we want to control the playback of our animation using buttons on the screen?

1. Open mousemaze.fla

2. On your main timeline, insert a new layer between your mouse layer and actions layer. Call your new layer buttons.

Note*** Because none of our buttons are animated, it’s ok to put them all on the same layer. If we were going to add tweening to them, they would each need to go on a separate layer.

3. Select Insert > New Symbol. Call this symbol playbutton, with a type Button.

4. Draw a play button for yourself, with the triangle play symbol on it. Although there are button assets available to you in Flash, for now, you need to take the time to draw the buttons for yourself.

5. Go back to your main timeline. Select the buttons layer, and drag the playbutton symbol from your library to the top-left of your stage.

So we have a play button on our stage, but nothing happens when we click it. That’s because we have to tell Flash what we want it to do when we click the button before it will do anything!

Note*** To control symbols using ActionScript, we must first give each individual symbol a unique instance name. This is important so that if we dragged 10 instances of a play button onto the stage, we would be able to tell them apart by their instance name.

To change a symbol’s instance name, select the symbol on your stage. In the property inspector, you can change the instance name to whatever you like (but be sure to follow the naming rules below!)

Important: When you are changing your instance names, there is a specific format that will make it very easy to use ActionScript later. The format is:

(name)_(symbol type)

So what this means is that in the name section you can give your symbol a name that will help you to identify it. So if you had an instance of a cloud on your stage, a good name for it might be cloud. The symbol type will be, in most cases, either a movie clip or a button.

Movie Clip: mc
Button: btn

So if our cloud symbol were a movie clip, the full name would be cloud_mc. If it were a button, the name would be cloud_btn.

6. Select your playbutton symbol on the stage. In the property inspector, change the name to play_btn.

7. Select the first frame of the actions layer. Open the Actions panel (Window > Actions if you haven’t already, you should dock this with the other panels in your WorkSpace.)

When we have symbols on the stage with instance names, we can call on them by name to change their properties or to do certain things. To do this, we have to type the instance name (upper and lower case matter, so always use lower case to be consistent) followed by a period (aka dot).

8. In the Actions panel, type: 

9. After onPress type: 

By putting in the dot, we are telling ActionScript that we want to do something to the symbol. In fact, as soon as you put the dot after the instance name, Flash automatically knows you want this instance of the symbol to do something. This is why a list of available actions appears automatically.

So your full code should appear as seen below:

There are a few things we need to know about this code:

First, we need to know about events. Events are things that happen in your animation, such as a mouse click, a button pressed on a keyboard, etc. In this case, onPress tells Flash that the event it should watch for is a mouse click on our play_btn instance.

Second, we are using something called a function. A function lets you group together one or more ActionScript commands, which will execute in the order they appear. For our code, this function will only run when our button is clicked by a mouse. When a function waits for an event to occur before executing, it is called an event handler.

Note*** Make sure you type the code exactly as it is here, or it won’t work! That means include both sets of brackets: () and {}, and to make sure everything is either capital or lowercase as it is shown here. If you miss either of these things, your code won’t work!

By inserting some ActionScript into our function, we can tell Flash exactly what it should do when this button is clicked.

10. Inside of the curly brackets {} in the function code, we can tell Flash what to do when the event occurs. Lets tell it to start playing, by typing inside the curly brackets.

So our code now should be:

If we translated this into English again, it would say: “Whenever a symbol named play_btn is clicked with a mouse, start playing the animation.” Test your movie to see what happens.

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asbutton2.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

So when we click the play button while the animation is running, nothing happens. That’s OK; if we tell Flash to play, and it is already playing, nothing should happen! If we click the button when the animation is stopped at the end, it starts playing again. That’s because when the animation starts playing at the end, it automatically loops back to the beginning again.

So we can start the animation playing if it’s stopped. What if we wanted to stop our animation if it is already playing? This will be done in a similar way.

Creating a Stop Button

11. Using the same method as we did to make the play button, insert a new symbol. Call this symbol stopbutton, and set the type to button. Make sure that your button has the square stop symbol on it.

12. Once this symbol is in your library, select the first frame of the buttons layer on your main timeline. Drag the stopbutton symbol onto the stage, beside the play button.

So now we have to add some ActionScript for this button to work; but before we do that, we need to give this button an instance name, so that Flash knows what object we’re trying to add code for.

13. Select the stopbutton symbol. In the property inspector, name it stop_btn.

14. Select the first frame of the actions layer. Open the Actions panel.

15. Below the code we already have, we are going to add some more code:

If we translated this into English, it would say “Whenever the symbol named stop_btn is clicked with a mouse, stop the animation.”

So now our full code should look like this:

Our animation now has both a play and a stop button:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asbutton4.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

So now that we know how to control whether our animation is playing or not, how do we tell Flash to go to a specific frame? What if we wanted to add in a rewind button?

Creating a Rewind Button (Go To Function)

Insert a new button symbol, and call it rewindbutton. It can either say “Rewind” on it or have the double triangles on it:

16. Drag your button onto your stage beside the other buttons. In the property inspector, give this button an instance name of rewind_btn.

17. Select the first frame of your actions layer. Open the Actions panel and create a new function for your rewind button:

The question is, what code do we put in the function section, so that our animation will rewind? To do this, we have to introduce two new commands: gotoAndPlay, and gotoAndStop.

Both of these do exactly what they sound like: either go to a specific frame and start playing, or go to a specific frame and stop playing. So how do we tell Flash what frame we want it to go to? This is where the brackets after certain commands comes in: we can give it a certain frame number to jump to.

18. Inside the curly brackets for the function, type:

What this tells Flash is: “I want you to go to the frame number one, and stop playing once you get there.” So for this function, our animation will go to frame 1, and stop playing.

Here’s what our full code looks like now:

Now our animation should run as seen below:

[kml_flashembed publishmethod=”static” fversion=”8.0.0″ movie=”http://www.cacourses.com/AN35S/flashfiles/asbutton5.swf” width=”400″ height=”300″ targetclass=”flashmovie”]

[/kml_flashembed]

Now that we know how to control our animation, we can tell Flash to start, stop, and jump to certain frames. Using gotoAndStop and gotoAndPlay, we can also create separate scenes, and navigate between them.

Save this flash animation as mousemaze.fla and move on to the next lesson.