page 1

Flash Fundamentals
Packet 1

Objectives. By the end of this packet you will be able to:
identify the basic parts of the Flash interface.
use the timeline and keyframes to create frame-by-frame animations.
use layers to create more complex frame-by-frame animations.
create and use movie clip symbols.
describe the difference between the terms "instance" and "symbol."
use motion tweens to change/animate symbols.


1.1 The Stage. Open Flash. At the start-up screen, create a new Flash File (ActionScript 3.0)
Document. Your screen should look something like the one below. The large white rectangle in
is called the "Stage." You normally do all your drawing on the stage though you can also use the
gray area around the stage as well.



1.2 The Properties Panel. On the right of the screen is the properties panel. When the stage is
selected (as it should be now since there's nothing else to be selected), you can use the properties
panel to change the size of the stage and its background color. You can other things here but
some of that comes later.
Timeline
Stage
Properties
Panel
page 2
1.3 Drawing Tools. This is not an art class. You will not learn how to draw well in this
class though you should learn how the different draw tools work.

As we walk through some examples in class, here is the basic information that you
need to understand.

Shapes are composed of strokes and fills. The stroke generally refers to the
outline of a shape. The fill is the generally the interior of a shape.
Some shapes can be merged together if they are on the same layer.
The Rectangle Primitive and Oval Primitive tools are used to draw rectangles
and ovals that are considered single objects and will NOT merge with other
objects on the same layer.
The Rectangle, Oval, and PolyStar tools create shapes that can be merged
together.
There are three ways to select something on the stage: with the selection tool
(our usual way to select an entire shape), with the subselection tool (if we need
to edit the points that define the stroke, or with the lasso tool (if we want to
select all or part of a shape).
The Free Transform tool is very useful for resizing, rotating, and distorting
objects.
The Line, Pencil, Pen, and Brush tools can all be used to draw the outline of a
shape. In general, if you need straight lines use the Line or Pen tools.
Otherwise, use the Pencil or Brush tools.

The emphasis of this class is on learning how to code games so we will keep our
graphics very simple.




Exercise A. Draw the house.

To view the house as it would appear in a web
page, go to the Control menu and select Test
Movie or hit the Ctrl + Enter keys.













page 3
1.4 The Timeline and Keyframes. A fundamental part of Flash is its timeline and keyframes.
The timeline, which runs across the bottom of the screen determines what happens when during
an animation. The timeline is divided into frames. Keyframes are special frames that indicate that
something changed (or could change). The playhead, a red rectangle at the top, indicates where
in the timeline you are. Frames with a black circle or white circle are key frames.





The figure above shows a timeline with only two keyframes and the playhead is set to the fifth
frame. The frames are all a part of Layer 1 (we will cover layers soon). This animation will run
at 24 frames a second. It will last about 0.2 seconds ( 5 frames divided by 24 frames/second).


Exercise B. We will walk through a simple example of frame by frame animation.


Exercise C. Create an animation where a word appears to melt. Use the Pen Tool to draw the
letters in frame one and then use the sub-selection tool to edit the letters. The figures show an
example. You may have more than four key frames.

Key frame 1 Key frame 5 Key frame 10 Key frame 15



IMPORTANT. You can change the speed of a frame-by-frame animation by (1) changing the
frame rate and/or (2) spreading out the keyframes (which slows down the movement) or
squeezing them together (which speeds up the movement).





Playhead
24 frames per second
Keyframe Keyframe
Empty frames
page 4
1.5 Layers. So far our animations have consisted of a single layer. Layers can be used to
separate and organize different elements of the animation. Some examples should make this
clearer.

Exercise D. We will walk through a simple example together: a person hiding behind a tree.



IMPORTANT THINGS TO REMEMBER.
1. The topmost layer is in front of the other layers. The bottommost layer is behind the
others.
2. You may want to hide layers at times.
3. If you lock a layer, then you cannot draw on it (though you can still add frames).
4. It is a very good idea to lock all the layers except the one you're currently working on.



1.6 Symbols. We will discuss what a symbol is as we go through an exercise to demonstrate
how a symbol is created, used, and edited.

Create a new Flash document. Draw a
rectangle. Select the entire rectangle (by
either double-clicking on the fill). Then
go to the "Modify" menu and select
"Convert to Symbol." You should see the
figure to the right.

Change the name of symbol to "rect" and click "OK."

Click on the "Window" menu and select "Library." You should see a
panel on the right that looks like the figure to the right. Once you create
a symbol, you can make as many copies as you need by dragging
clicking on the icon in the library and dragging copies onto the stage.

The symbol in the library is a reusable object and every copy on the
stage is called an instance.

page 5
Exercise E. Create a new Flash document.
Draw one tree and convert it into a movie
clip. Then create a forest by making many
copies of that symbol. This exercise has
only one keyframe and nothing's moving.

There only needs to be two layers: one for
the background and one for the trees.
Notice that you can have many symbols
on one layer and they do not interfere with
each other.

Use the free transform tool to resize some
of the trees. You can also bring trees to the
front (or push others to the back) by right
clicking on a tree and selecting "Arrange.

1.7 Motion Tweening. Earlier you created animations by inserting keyframes and making
changes to the graphics at those keyframes. And sometimes you will still have to do that but
Flash provides a great mechanism to simplify many animation processes. We will do a brief
exercise to demonstrate motion tweening and then go over the main concepts that the
demonstration illustrates.

Create a new Flash document. Create an oval and turn it into a symbol. Name the symbol "oval."
Go to the timeline and insert a
frame into frame 20 (NOT a key
frame).

Right-click on any frame between
keyframe 1 and 20. Select "Create
Motion Tween." The space
between frames 1 and 20 should
turn blue.

Go to frame 20 and move the oval
to somewhere on the right. Your
screen should look something like
the one on the right.

Test the movie. You should see the
oval move smoothly from its
location in frame 1 to its location in
frame 20.

Important.
(1) You should only do motion tweening with a symbol.
(2) Tweening is short for "in between" and refers to filling in the frames between a keyframe and
up to, but not including, the next keyframe.

page 6
Exercise F. Create an
animation where a cloud moves
slowly over some hills. Use two
layers: one for the hills and one
for the cloud.

The cloud should start off the
stage, move across the stage
and exit the other side.

Remember to convert the cloud
to a movie clip before you add
motion tween.


Exercise G. Create an animation where there are two cars: one is moving left and one is moving
right.

You will need to use three layers:
one for the background
one for the car moving left
one for the car moving right

You might be thinking "Wait a
minute, didn't he say earlier that we
could have more than one symbol
on a layer?!?" Well, yes I did but
when you put in a motion tween,
you normally only want one symbol
on that layer. In this exercise we
will need two layers and two
tweens.

If you have time, try doing this
exercise with only one or two layers and you'll see that it doesn't
work.

Only create one movie clip of a car. Have two copies on the
stage and use the free transform tool on one of the symbols. You
can also change the color (sort of) of each instance by selecting
the symbol on the stage and then clicking on the Style property
and selecting Tint. Then you can change the RGB values that
will change the color of the clip. However, you're limited to
"tinting" the entire symbol - you cannot change the color of just
part of one of the car.



page 7
1.9 More On Motion Tweening. The phrase "motion tweening" is a little misleading because
you can also use it to make symbols change shape, color, and visibility (as well as move).

Create a new Flash document. Create an oval and turn it into a symbol. Name the symbol
"ellipse." Add a keyframe to frame 10. Do NOT move either oval (the one in frame 1 or the one
in frame 10). Add a motion tween between frame 1 and 10. If you hit "Enter," nothing will
happen because the ovals in keyframes 1 and 10 are identical.

Select frame 10 and click once on the oval. Go to the properties panel at the bottom of the
screen. You should see a drop-down list named "Color." Select "alpha" and set the alpha value to
0%. This makes the oval completely transparent (invisible). By default, the alpha value of the
oval in frame 1 is 100% (opaque or completely non-transparent). Hit "Enter" and watch the oval
gradually fade away.


Exercise H. Create a new Flash document. In this animation, one word will fade away while
another word fades in on top of the other. For example, if the two words are "Hello" and
"Goodbye," the table below shows a few screen shots from the animation.

first frame middle frame last frame



Here are some guidelines:
Use the text tool to create two separate words. Use static text; not dynamic text.
Convert both words into movie clips.
Use two layers. Put one word on one layer and the other word on the other layer. Position
the symbols on top of each other.
Use motion tweens for both layers; one to have a symbol fade out, another to have the
other symbol fade in.
You decide how long the animation lasts.


Exercise I. In this exercise, you pick the topic. Your program must have the following:
Three layers (can have more but doesnt have to)
One layer must use frame-by-frame animation using at least 4 key frames
One layer must user motion tweening.
The third layer could be a background or a layer that includes more animation.

You dont have a lot of time so keep it simple. Here are a couple of ideas:
Start with a persons face. They smile (frame-by-frame animation) and then slowly move
off the stage (motion tweening).
Plane flies by (motion tweening) with explosions in the background (frame-by-frame).
Plant grows (frame by frame) while the sun rises (motion tweening) and the background
gradually gets brighter (another layer that also uses motion tweening).