So far we have learned how to create images and text in Flash, and how to tween these things in various ways. This is only half of what we need to make a really good Flash animation; right now, all we can do is watch our animation from beginning to end. What if we want to make our animation jump to different times, or if we wanted to make a game in Flash? To do this, we need to use something called ActionScript.

ActionScript is a scripting language (similar to other programming languages like Java) that allows you to control your animation in ways that would be otherwise impossible. It can be used to control the playback and add interactivity to your animations.

Start by creating a new Flash file. Use Action Script 2.0. Make sure the frame rate is at 20fps, the screen size is 550 x 400 and the canvas colour is set to white. Save this file as mousemaze.fla in your Drive or DropBox folder.

1. Change the name of your first layer on the main timeline to maze.

2. Select the rectangle tool, set the stroke to black, and the fill colour to red. Use this to create a simple maze.

Here is an example:

3. Lock the maze layer. Create a new layer called mouse.

4. Select Insert > New Symbol. Name it mouse, with a type of Movie Clip.

5. You should now be editing the mouse symbol. Create a mouse, if you were to see it from above.

Note*** Make sure your mouse is properly aligned:

not aligned properly	aligned properly

In addition, make sure your registration point is in the same spot as the crosshair. If your mouse is aligned so that the center is in the center of the entire mouse, including the tail, your mouse will look very strange when it turns corners. So when you are aligning it, make sure the center is in the center of the mouse’s body not including the tail!

6. Go back to your main timeline. Drag your mouse symbol from your library to the start of your maze.

7. Motion tween your mouse so that it moves through the maze and comes to its first corner. This should take about 20 frames. Make it stop just before it gets to the corner.

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

[/kml_flashembed]

8. To make the mouse turn the corner, motion tween it so that it moves all the way past the corner. Select the free transform tool and use it to rotate the mouse until it is facing in the right direction:

before turn	after turn

Your timeline should now look something like this:

9. Repeat these steps until the mouse makes it out of the maze. Lock your mouse layer when you are done.

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

[/kml_flashembed]

So now we have a mouse that runs through the maze. What if we want to change the way the movie plays? For example, what if we wanted to be able to tell Flash that we wanted the movie to stop at a specific frame? That’s where ActionScript comes in.

Inserting Action Script on the Timeline

ActionScript can be added to any keyframe of any layer on your timeline. When your animation encounters the ActionScript while your movie is playing, Flash will run whatever commands you have included.

THIS IS VERY IMPORTANT: ActionScript should only be on one layer of your animation! What this means is that you should always have a dedicated layer for ActionScript, and that nothing else should go in this layer.

This might not seem that important for our purposes, but imagine if we had 10,000 lines of ActionScript code in our project. If we had our ActionScript all in different places, it would take a long time to find where a specific action was!

10.  On your main timeline, insert a new layer. Call this layer actions.

This will be the only layer that we can put ActionScript in!

Note*** ActionScript can be included in any keyframe. Whenever your animation encounters the ActionScript in a keyframe, it will run whatever commands you have included.

11. On the actions layer, insert a keyframe on the last frame of the animation.

12. Click on the keyframe you’ve just created. If you haven’t already opened it, select Window > Actions to open the Actions panel for that keyframe. You should get a window that looks like this:

Note*** Make sure you have the correct frame selected before opening the Actions panel. If you have the wrong frame selected, or you have an object or symbol on the stage selected, your ActionScript will run in a place you don’t want it to!!!!!

The first command that we will learn is how to make a movie stop playing. This means that instead of having your movie keep looping once it gets to the end, we can tell it to stop ourselves!

We’ve used this command before, in exercise 2, but now let’s stop and understand how it works.

13. In the Actions panel, type stop();

There are a few things we need to know about ActionScript:

1. If your ActionScript turns blue, that means that you have entered code that Flash recognizes.
2. Most commands need brackets after them. The brackets may or may not have something inside of them; in this case, there is nothing inside of them. We will talk about when to put things inside of them later.
3. Every ActionScript command needs to end with a semi-colon. This tells Flash that the current command is ended, and to move on to a new command on the next line.

Once you have inserted ActionScript to the keyframe, your timeline will look something like this:

Notice the “a” that appeared on the actions layer. Whenever you see this on a keyframe, that means that there ActionScript code on that keyframe that will be executed when the animation gets to that frame.

Our movie should now look like this:

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

[/kml_flashembed]

So when the animation gets to the last keyframe, ActionScript tells it to stop playing. You could technically use this in any keyframe to stop an animation. It doesn not need to be used only at the end.

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