V22.0004 - Fall 2007
Assignment 8
Flash Animation


In this assignment, you are to create an interactive Flash project and post it to the web. The project should have at least three animations within the file. You should have at least one Shape Tween and one Animated Gif. You should also have one sound file (You may also include a Quicktime Movie into the project, but that is a bit of a challenge.)

The project should start with a single frame that has at least three buttons on it. When you press a button, a sound is heard, and one of your three animations plays. The project could be an advertisement for your Web Site, a "How-To" guide, a rudimentary guessing game, or anything else that has a single theme.

Note: When you start your project and choose to make it a Flash File (ActionScript 2.0) version.

You should post your assignment as assign8.html, and it should include your .swf file. You should also post and link to your original .fla file.


Here is a (modest) example that we created for class: TV Movie

You may download all of the files used to create the example Flash Animation: TV Movie Zipped

You may also download the finished .fla file and see how it works: TV Movie Revealed


ActionScript

Embedded in Flash is a very rich programming language called ActionScript. But with only a handful of commands, you can create very interesting interactive animations. Commands are typed (or dragged) into the Action window available under WINDOWS: ACTION. There are two places we can place our commands: On the Timeline within a Frame, and attached to a Button:

Timeline -

It is highly suggested that any commands for the Timeline be placed in a layer by themselves. While it is technically possible to mix images and commands on the same layer, it becomes confusing to say the least!

To apply a command, first select the frame and layer, then type or drag the command into the Action window.

stop();

Normally, Flash plays one frame after the next in sequential order. This command quite literally stops the playback on the present frame. Probably there is a button on the frame that will allow the playback to jump elsewhere in your movie.

gotoandplay(NNN);

After playing the current frame, Flash jumps to frame number NNN and continues playing the animation.

gotoandstop(NNN);

After playing the current frame, Flash jumps to frame number NNN and stops the playback, awaiting the press of a button.

Button -

To apply a command to a button, first select the button and then type or drag the command into the Action window.

on (release) {
     gotoAndPlay(NNN);
}

When the button is clicked, Flash jumps to frame number NNN and continues playing the animation.

on (release) {
     gotoAndStop(NNN);
}

When the button is clicked, Flash jumps to frame number NNN and stops the playback, awaiting the press of another button.


A Note on Importing

You will probably start your project by gathering your images, sounds and animated gifs and importing them into Flash using FILE: IMPORT. You will import your images and sounds into your library using FILE: IMPORT: IMPORT TO LIBRARY. That way, you can use them over and over again by dragging them from your library onto the stage or into the Timeline.

However, you may want to import animated gifs directly onto the stage using FILE: IMPORT: IMPORT TO STAGE. This has the added benefit of 'breaking apart' the animated gif and putting it frame by frame into the Timeline. (It also puts it into the library at the same time.)

If you want to reposition a long gif sequence to some other area of the stage, you will probably want to move all the images simultaneously to save time and so that they line up. You can select multiple frames using the aptly named "Select Multiple Frames Button".

Use this button to turn on and turn off Multiple Frame editing

 

Once in Multiple Frame mode, you use this expanding selector to
choose all of the animated gif frames. Make certain to click on the
animated gif in the correct layer before you move it. (The easiest
way is to choose EDIT: SELECT ALL since the images from the
animated gif are on a layer by themselves!)