In this tutorial, we will be creating a movie with multiple animations controlled by ActionScripted buttons. You can click HERE to download an example .fla.

SECTION A: WHAT YOU WILL NEED

1. At LEAST 6 small, animated GIF and/or SWF files

2. A number of button graphics equal to the number of animated clips you have

3. A 550 x 400 image to use as a background

SECTION B: SETTING UP THE FLASH FILE

1. Go to File -> New. With Flash File (Actionscript 3.0) selected, click OK.

2. Create 4 layers: Actions, Animations, Buttons and Background.

3. Import all your graphical assets (buttons, animations, etc.) to your library by clicking on File -> Import -> Import to Library

4. With the Background layer selected, drag your 550 x 400 background from your library to the stage.

SECTION C: SETTING UP THE BUTTONS

1. Looking at the library, you’ll notice that for every image you imported, Flash created a symbol version of it as well. If that is not the case, continue to Step 2 of this section. If Flash has indeed done this, skip down to Step 5.

2. To create a new symbol, click on Insert -> New Symbol. Give the symbol a name relevant to what it will contain, making sure the type is set to Movie Clip, and click OK.

3. You will now be inside your new symbol. One way to tell is that there will be a little blue arrow towards the top left corner of the stage window.

4. Drag one of your animations from the library to the stage and hit that blue arrow. You have now created a symbol of your animation that Flash can manipulate with ease.

5. On the Buttons layer, place your button symbols in their desired location by dragging them from the Library. In the case of the provided example, the actual “buttons” are part of the background image, and the Buttons layer just contains some low-opacity symbols placed over them.

6. Click on one of your button symbols and open the Properties window. In the Instance Name field, give the button a name. This name will be used to identify the button in ActionScript. Repeat this process for all of your buttons, taking care not to use the same name twice.

SECTION D: SETTING UP THE ANIMATIONS

1. On the Animations layer, place one of your animation symbols on the stage by dragging it from the library (if your animations haven’t been converted to symbols, do so by following Steps C2-C4).

2. For every animation symbol you have, create a blank keyframe on the Animations layer.

3. Place one of your animations on every keyframe.

SECTION E: ACTIONSCRIPT, THE GOOD STUFF

1. Right-click the first frame of your Acions layers and click on Actions.

2. If you were to test your movie right now, chances are you wouldn’t see much. Your movie clip is only a handful of frames, and Flash will speed through them by default. In order to stop this behavior, type in stop(); on the first line of the Actions window.

3. Next, we will create our functions. Functions are the basic units of code that can be invoked in ActionScript. A lot of what you’ll type in ActionScript will either be a function, or call a function. On a new line, start by typing function, a space, then the name of your function. You can name a function just about whatever you want, but it’s best to keep it short and relevant to what the function does. Basically, if it shows an animation of a butterfly, call it butterfly. After naming your function, type in (event:MouseEvent) {gotoAndStop (1);}. Assuming you named your function butterfly, your line should look like this:

function butterfly(event:MouseEvent) {gotoAndStop (1);}

The (event:MouseEvent) lets Flash know to execute the butterfly function when the user’s mouse performs a certain function. The {gotoAndStop (1);} portion are the actual instructions of the function. In this case, the butterfly function will advance the movie to the first ((1)) frame on the timeline and stop the movie.

4. On the next line, write another function for your next animations, giving it a unique name relative to the animation you have in your second frame and changing the 1 towards the end to a 2. This means the function will advance the movie clip to the second frame instead of the first. Repeat this pattern for the remainder of your animations.

5. Next, we need to add Event Listeners to our buttons. Event Listeners tell Flash what to do when something happens, like a mouse click or a keystroke. Starting on a new line, type in the Instance Name of your first button (in the case of the example, joystick). Follow this with .addEventListener (MouseEvent.Click, Function); where the word “Function” is replaced by the name of one of the functions you created earlier. If the Instance Name of your button is joystick, and you want to make it call the butterly function when it’s clicked, your line of code would look like this:

joystick.addEventListener (MouseEvent.CLICK, butterfly);

6. Repeat this process, assigning an animation to each one of your buttons.

You can click HERE to download an example .fla.  The assignment has changed entirely from the handout I gave you on Tuesday… so feel free to toss that.

3. A 550 x 400 image to use as a background

1. Go to File -> New. With Flash File (Actionscript 3.0) selected, click OK.

2. Create 4 layers: Actions, Animations, Buttons and Background.

3. Import all your graphical assets (buttons, animations, etc.) to your library by clicking on File -> Import -> Import to Library

4. With the Background layer selected, drag your 550 x 400 background from your library to the stage.

1. Looking at the library, you’ll notice that for every image you imported, Flash created a symbol version of it as well. If that is not the case, continue to Step 2 of this section. If Flash has indeed done this, skip down to Step 5.

2. To create a new symbol, click on Insert -> New Symbol. Give the symbol a name relevant to what it will contain, making sure the type is set to Movie Clip, and click OK.

3. You will now be inside your new symbol. One way to tell is that there will be a little blue arrow towards the top left corner of the stage window.

4. Drag one of your animations from the library to the stage and hit that blue arrow. You have now created a symbol of your animation that Flash can manipulate with ease.

5. On the Buttons layer, place your button symbols in their desired location by dragging them from the Library. In the case of the provided example, the actual “buttons” are part of the background image, and the Buttons layer just contains some low-opacity symbols placed over them.

6. Click on one of your button symbols and open the Properties window. In the Instance Name field, give the button a name. This name will be used to identify the button in ActionScript. Repeat this process for all of your buttons, taking care not to use the same name twice.

1. On the Animations layer, place one of your animation symbols on the stage by dragging it from the library (if your animations haven’t been converted to symbols, do so by following Steps C2-C4).

2. For every animation symbol you have, create a blank keyframe on the Animations layer.

3. Place one of your animations on every keyframe.

1. Right-click the first frame of your Acions layers and click on Actions.

2. If you were to test your movie right now, chances are you wouldn’t see much. Your movie clip is only a handful of frames, and Flash will speed through them by default. In order to stop this behavior, type in stop(); on the first line of the Actions window.

3. Next, we will create our functions. Functions are the basic units of code that can be invoked in ActionScript. A lot of what you’ll type in ActionScript will either be a function, or call a function. On a new line, start by typing function, a space, then the name of your function. You can name a function just about whatever you want, but it’s best to keep it short and relevant to what the function does. Basically, if it shows an animation of a butterfly, call it butterfly. After naming your function, type in (event:MouseEvent) {gotoAndStop (1);}. Assuming you named your function butterfly, your line should look like this:

The (event:MouseEvent) lets Flash know to execute the butterfly function when the user’s mouse performs a certain function. The {gotoAndStop (1);} portion are the actual instructions of the function. In this case, the butterfly function will advance the movie to the first ((1)) frame on the timeline and stop the movie.

4. On the next line, write another function for your next animations, giving it a unique name relative to the animation you have in your second frame and changing the 1 towards the end to a 2. This means the function will advance the movie clip to the second frame instead of the first. Repeat this pattern for the remainder of your animations.

5. Next, we need to add Event Listeners to our buttons. Event Listeners tell Flash what to do when something happens, like a mouse click or a keystroke. Starting on a new line, type in the Instance Name of your first button (in the case of the example, joystick). Follow this with .addEventListener (MouseEvent.CLICK, Function); where the word “Function” is replaced by the name of one of the functions you created earlier. If the Instance Name of your button is joystick, and you want to make it call the butterly function when it’s clicked, your line of code would look like this:

6. Repeat this process, assigning an animation to each one of your buttons.

1. To publish your finished movie, go to File  -> Export -> Export Movie. If everything worked out, it’s because I’m brilliant. If not, you probably did something wrong. Good luck!