INFO 424 SCHEDULE

Drug Animation, Phase 2 (Animate man)

source: http://www.nicolasrapp.com/pharmawater_update/

In this lab you'll learn how to do frame-by-frame animation and how to place animations within animations to get certain effects

Phase 2: Import to Flash

Step 1: Import the image into Flash

a. Open Flash and create a new ActionScript 3.0 file.

b. import DrugAnimation_Man.ai to the Stage. Make the stage the same size as the imported file. You should see something like this:

imported file

c. Name the file DrugAnimation_Man.fla

d. Set the frame rate to 12 fps (we don't need a high frame rate since this animation is so simple). To do this, right click on the stage and choose "Document Properties". You'll see where you can change the frame rate:

change frame rate

Step 2: Create the scene-to-scene animation

There are 2 types of timeline animations. This video uses both:

The first animation (the one involving the man popping a pill and using the toilet), is a frame-by-frame animation. The strategy you'll use to is to start by putting every element on every frame and then removing elements as needed...

First you need to figure out how many frames you'll need. Since the entire animation takes about 10 seconds and you've set the speed to show 12 frames every second, the animation will use 120 frames (10 seconds x 12 frames per second = 120 frames).

a. So create a keyframe at frame 120 for all 6 layers (you can do this for all 6 layers at once by dragging your cursor to select frame 120 for all layers, then right click and choose "insert keyframe" or go to Insert -> Timeline -> Keyframe). This creates a copy of everything that was in the previous keyframe (which was frame 1).

b. Hide all of the layers except for the "house toilet table" layer. You can see that the elements on that layer are elements that are present for the entire 10 seconds, so go ahead and lock and hide that layer.

c. Reveal the "wall" layer to remind yourself what's there.

d. Watch the video again and count the seconds to see when the wall appears and when it disappers.

e. Insert keyframes in the "wall" layer at these points where it appears and disappers (e.g. if it appears at second #2, then put a keyframe at 2 x 12 = 24, then do the same for the frame where it needs to disappear).

Pause and think about what you just did....actually nothing in terms of the movie. Right now, if you run the movie you won't see any action because what's happening is the movie is running in a loop that is 120 frames long. And every frame has all of the content. But adding those key frames has set you up for the next step...

f. Click on the first frame of the "wall" layer then click on the wall object there on the stage and delete it. Now there is nothing on that layer in frame one, so it should have an empty circle in it...and the frames following it should all be white until....you get to the keyframe you added - which has a filled in circle showing you that it has the wall in it.

g. Run the movie to verify this. The movie should start like this:

wall visible

And then switch to this:

wall visible

Count the seconds to see if the wall appears where you wanted it to appear (if it doesn't, you can create a new keyframe in the correct spot and copy the content from the current keyframe to this new spot, paste it in, then remove the incorrect keyframe).

h. Lock the "wall" layer and hide it.

i. Unlock the next layer you want to work with and go through the same process (i.e. watch the video to see when they appear/disapper, then create keyframes at each of these points and delete the elements on frames when they should be invisible).

j. Do the same for the other element

Your final result will look something like this:

FINAL PRODUCT: DrugAnimation_Man.fla

SUMMARY:

Frame-by-frame animation (change the image from frame to frame)

Tween-based animation (change the image by tweening between frames)