INTERACTIVE DESIGN LESSONS

FALL 2009

A n i m ati o n 1
Interactive Design Lesson

FLASH
OVERVIEW
In 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 Animation 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 Document. 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 your
Property Inspector, Color
Palettes, Library, and Tools
visible. They are located in the
window option on the Main
Menu bar at the top,

CRISAFULLI LESSONS: INTERACTIVE DESIGN

INTERACTIVE DESIGN LESSONS

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.

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 3
Check to See if the Symbol is
located in your Library.
Check to make sure you are in
the Graphic Symbol development window.

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

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

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

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

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 9
Go to your Library and Duplicate the Bird with Wings Up
Symbol twice and rename
each accordingly.
Bird with Wings MIdway
Bird with Wings Down

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

Click here to access menu. Duplicate is located here,

INTERACTIVE DESIGN LESSONS

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 10
Select Insert on main menu
and then Select New Symbol.

STEP 11
Name the Symbol fly and
then Select: Type Movie Clip.
Select OK

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 12
Check to see that you are now
in the Movie Clip window.

STEP 13
Select Bird with Wings Up
from the Library and drag it
onto the stage of Movie Clip
fly.

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 14
Select frame 4 of the Time Line
and press F6.

STEP 15
Click on the Symbol Bird with
Wings Up that is on the stage.
(Make sure that Frame 4 is selected.)
Go to your Property Inspector
and Select Swap

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 16
Select the Symbol Bird with
Wings Midway.
Press OK

STEP 17
Notice 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.

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 18
Select frame 7 of the Time Line
and press F6.

STEP 19
Click on the Symbol Bird with
Wings Midway that is on the
stage. (Make sure that Frame 7 is
selected.)
Go to your Property Inspector
and Select Swap

STEP 20
Select the Symbol Bird with
Wings Down
Press OK

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 21
Select frame 10 of the Time Line
and press F6.

STEP 22
Click on the Symbol Bird with
Wings Down that is on the
stage. (Make sure that Frame 10
is selected.)
Go to your Property Inspector
and Select Swap

STEP 23
Select the Symbol Bird with
Wings Midway.
Press OK

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 24
Select Frame 12 and press F5.
Notice that this time we selected F5 rather than F6. F6 would
have worked as well but since
we did not need another Key
Frame we used F5 to cap the
animation cycle.

STEP 25
Turn to the Main Scene by clicking 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.

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 26
Test Animation by Selecting

STEP 27
A 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.

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

MAKING THE BIRD FLY

ACROSS THE STAGE.
STEP 28
Make another Movie Clip Symbol and name it Fly Across.
This will allow the bird to enter
the viewable (stage) area and
exit the stage during the animation loop.
Drag the fly Movie Clip for the
Library onto the First Frame

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 29
Select 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 30
Select the First KeyFrame of the
Time Line.

STEP 31
Go to your Property Inspector
and Select Tweening > Motion

STEP 32
Notice 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.

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

STEP 33
Select Frame 48 and move the
Bird to the right of the Stage.

STEP 34
Return 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 built
you could put it on any Key
frame.
Test Movie,
WOW it works!

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009

INTERACTIVE DESIGN LESSONS

TIP:

You can use Symbols from on

Flash Movie to another by having
both opened at once and
Switching Libraries within the
Library Palette.

CRISAFULLI LESSONS: INTERACTIVE DESIGN

FALL 2009