Flash Animation1

7/24/2019 Flash Animation1

1/19

INTERACTIVE DESIGN LESSONS FALL 2009

Animation 1

Interactive Design Lesson

CRISAFULLILESSONS: INTERACTIVEDESIGN

FLASH

OVERVIEWIn this lesson we will learn how

to animate in Flash. Their are two

types of animation that a beginner

can easily master with in a few

session - they are Motion Anima-

tion and Shape Animation. In this

lesson we will be learning motion

animation,

You should already be familiar

with the three types of Symbols -

Movie Symbols, Button Symbols

and Graphic Symbols.

OPEN DOCUMENT

Open up a new Flash Docu-

ment. If you have a recent copy

of the software then you will

want to choose action script

2. If you have an older version

of the software dont worry

about this as you do not have

that option.

You will need to have yourProperty Inspector, Color

Palettes, Library, and Tools

visible. They are located in the

window option on the Main

Menu bar at the top,


2/19



STEP 1

Select Insert on the main

menu bar and choose New

Symbol...

STEP 2 A new window will

appear.

Title it Birds with Wings Up.

Select the Graphic Button.

Select OK.


3/19



STEP 3

Check to See if the Symbol is

located in your Library.

Check to make sure you are in

the Graphic Symbol develop-

ment window.


4/19



STEP 4

Make 2 Layers.

Name the bottom layer Body.

Name the top layer Wings.

Lock the Wings Layer.

Click on the first frame of the

Body Layer.

STEP 5

Draw the Birds Body on the

Body Layer.

STEP 6

Lock the Body Layer.

Unlock the Wings Layer

Select the First KeyFrame of

the Wings Layer


5/19



STEP 7

Draw Wings

STEP 8

Create a new layer and name it

details.

Lock off other layers.

Select the First frame of the

Details Layer

Add details on to the bird.

Save


6/19



STEP 9

Go to your Library and Dupli-

cate the Bird with Wings Up

Symbol twice and rename

each accordingly.

Bird with Wings MIdway

Bird with Wings Down

Click here to access menu. Duplicate is located here,


7/19




8/19



STEP 10Select Insert on main menu

and then Select New Symbol.

STEP 11Name the Symbol fly and

then Select: Type Movie Clip.

Select OK


9/19



STEP 12Check to see that you are now

in the Movie Clip window.

STEP 13Select Bird with Wings Up

from the Library and drag it

onto the stage of Movie Clip

fly.


10/19



STEP 14Select frame 4 of the Time Line

and press F6.

STEP 15Click on the Symbol Bird with

Wings Up that is on the stage.

(Make sure that Frame 4 is se-

lected.)

Go to your Property Inspector

and Select Swap


11/19



STEP 16Select the Symbol Bird with

Wings Midway.

Press OK

STEP 17Notice that Frame 4 now holds

the Graphic Symbol Bird with

Wings Midway. while Frames 1

through 3 hold the Graphic

Symbol Bird with Wings Up.


12/19




and press F6.


Wings Midway that is on the

stage. (Make sure that Frame 7 is

selected.)


and Select Swap


Wings Down

Press OK


13/19




and press F6.


Wings Down that is on the

stage. (Make sure that Frame 10

is selected.)


and Select Swap


Wings Midway.

Press OK


14/19



STEP 24Select Frame 12 and press F5.

Notice that this time we select-

ed F5 rather than F6. F6 would

have worked as well but sincewe did not need another Key

Frame we used F5 to cap the

animation cycle.

STEP 25Turn to the Main Scene by click-

ing the Scene Icon.

Drag the Movie Clip Symbol that

you named fly onto the Stage

of the Main Scene.

Rename Layer 1 to Bird in

Flight.


15/19



STEP 26Test Animation by Selecting

STEP 27A window will pop-up playing

your animation. It will be a .swf

file.

After you test the Movie you

need to Delete it from the first

frame of the Time Line.

Im going to show you a trick.


16/19



MAKING THE BIRD FLY

ACROSS THE STAGE.

STEP 28

Make another Movie Clip Sym-bol and name it Fly Across.

This will allow the bird to enter

the viewable (stage) area and

exit the stage during the anima-

tion loop.

Drag the fly Movie Clip for the

Library onto the First Frame


17/19



STEP 29Select Frame 48 on the Time

Line and Press F6.

Since the Fly animation has 12

Frames and the Flash Player pays

12 Frames per Sec. I like to

choose a Frame that is Dividable

by 12. 12 goes into 48 four

times.

STEP 30Select the First KeyFrame of the

Time Line.

STEP 31Go to your Property Inspector

and Select Tweening > Motion

STEP 32Notice that you know have an

Arrow between Frames 1 and

48. This is a Motion Tween. This

will allow the program to adjust

each frame between 1 and 48 to

create the illusion that the bird

is moving across the Stage.


18/19



STEP 33Select Frame 48 and move the

Bird to the right of the Stage.

STEP 34Return to the Main Scene and

place the new Movie clip on a

Key Frame. I used the first Key

Frame but if you had a site builtyou could put it on any Key

frame.

Test Movie,

WOW it works!


19/19


TIP:

You can use Symbols from on

Flash Movie to another by having

both opened at once andSwitching Libraries within the

Library Palette.

Flash Animation1

Documents

Transcript of Flash Animation1