[ Not for Circulation ]

Working With Animation: Introduction to Flash

With Adobe Flash, you can create artwork and animations that add motion and visual
interest to your Web pages. Flash movies can be interactive users can click buttons or
rollover images to stop, start, or move to another segment of the movie. You can create
vector artwork using Flash or you can import graphics, music, and sounds into your Flash
movie. You animations are exported as Flash Player movies. These movies are compact,
which allows for faster downloads on the WWW.

The Process

Creating animation with Flash is similar to directing a movie. You first assemble your
actors [images, artwork, sound] on the Stage. You then block the scene and have your
actors move to their new position. When you are through filming the scene, you can edit
it, you can play it back, slow it down or speed it up, or move that scene to another part of
the movie. Your final product is a series of frames synchronized to a Timeline.

The Flash Interface

The Stage

You use the Stage to assemble your cast members for each frame in a movie. You can draw
objects using Flashs Toolbox, or you can import artwork from other applications.

Information Technology Services, UIS 1

 [ Not for Circulation ]

The Timeline

The Timeline determines the timing of the movie, controlling how fast or slow frames are
displayed over time. It is also where you create layers, which help you organize the various
elements on the Stage.

Note the Playhead. The red rectangle will move across the Timeline to show you the
current frame on the Stage.

The Panels

Panels let you view information on selected elements in your movie. You can then make
adjustments and change options for those selected items. For example, if you have selected
text on your Stage, you can go to the Character, Paragraph, or Text options on the
Properties panel to make changes to the text.

To view all the available panels, choose the Window menu item.

To hide all the Panels, choose Window > Hide Panels.

Information Technology Services, UIS 2

 [ Not for Circulation ]

The Controller

To play, rewind, or step through a movie, you can use the Flash Controller. To access the
Controller, choose Window > Toolbars > Controller.

The Tools Panel

With Flashs Tools panel, you can create artwork and text, as well as change views. The
Tools panel is divided into four sections: Tools, Views, Colors, and Options.

Tools for creating shapes,

paths, and lines.

Page views [Zoom]

and navigation.

Colors for
lines and fills.

Tool modifiers
for selected tools.

Information Technology Services, UIS 3

 [ Not for Circulation ]

Creating a Flash Movie

1. To create a new movie, choose File > New.

2. The New Document dialog box is displayed. Click OK.

Setting the Movie Properties

1. To set the movie properties, choose Modify > Document. The Document Properties
dialog box is displayed.

Dimensions: These options determine the stage size in pixels.

Match: You can match the size to the printing dimensions or to the content of
the movie.

Background color: This sets the background color for the movie.

Frame rate: This sets the number of frames played per second. Most WWW
movies use a frame rate between 8 and 12.

Ruler units: This sets the unit for the rulers along the top and side of the
application window.

2. When you have competed the settings, click on OK.

Information Technology Services UIS 4

 [ Not for Circulation ]

Saving a Flash File

1. To save the movie you are working on, choose File > Save. Select the folder you
wish to save the file and name the file. Flash will automatically add the .fla file
extension.

2. Click on Save.

NOTE: When you use the Save command, you can open up the Flash file and edit it. If you
Export the file as a Flash Player Movie for use on the WWW, the file is compressed and you
can no longer edit the file.

Information Technology Services UIS 5

 [ Not for Circulation ]

Drawing Rectangles and Squares

1. Select the Rectangle Tool from the Tools panel.

2. Set the Fill and Stroke color by clicking on the icon and selecting a color.

3. To set the transparency for a fill, choose Window > Color if the Color panel is not
already open. Set the Alpha value for transparency. Notice you can set fill and color
from the Color panel, and access the Web-safe color swatches from the Swatches
panel.

4. Set the thickness and style of the stroke from the Properties panel. You may also set
the color and characteristics of the fill from this panel.

5. Bring your cursor to the Stage. You will notice that the cursor icon becomes a
crosshair.

6. For the Rectangle tool, specify rounded corners by clicking the Round Rectangle
modifier and entering a corner radius value. A value of zero (0) creates square
corners.

7. Position the cursor where you want one corner of the shape to be and holding down
the mouse button, drag open the shape. To constrain the rectangle to a square, hold
down the shift key as you drag opens the shape.

Selecting Shapes

Unlike many drawing programs, Flash creates shapes that have the fills separate from the
strokes.

Select the Selection Tool from the Tools panel.

If you click on the middle of the rectangle, you will notice that only the fill is
selected. You can tell this by the dotted pattern that is now on the fill but not on the
stroke.

If you double-click inside the rectangle, you will notice that both the fill and the
stroke are selected.

If you click on any segment of the stoke, only that segment is selected. This only
applies to rectangles. When you click on any part of an ovals stroke, the entire
stroke is selected.

Information Technology Services, UIS 6

 [ Not for Circulation ]

If you double-click on any stroke segment, the entire stroke around the object is
selected.

Once you have selected the fill or the stroke segments, you can then change the color by
using the Fill and Stroke tools on the Tools panel.

Altering and Selecting

If you move the Arrow tool toward a shape or path, you will notice that the cursor
icon becomes an arrow and a curved line. This indicates that you can now drag the
path to change the size or shape of the curve on the path.

If you click directly on the line, your cursor becomes an arrow with a four-headed
arrow. This indicates that you can move the path without changing its shape.

If you position your cursor on a corner or on the end of the line, the cursor becomes
an arrow with a square corner.

Overlapping Shapes

When you draw or move one shape on top of the other, the portion underneath is deleted.

If two shapes are the same color, then they are merged into one shape.

Drawing Ovals and Circles

1. Select the Oval Tool.

2. Set the fill and stroke attributes by clicking the icon and selecting a color.

3. Position the cursor on the Stage. Your cursor icon will be displayed as a cross.

4. Holding down the mouse button, drag and open the shape.

To constrain the oval to a circle, hold down the shift key as you drag open the
shape.

Information Technology Services, UIS 7

 [ Not for Circulation ]

Drawing with the Line Tool

1. Select the Line Tool.

2. Drag the cursor across the Stage.

Hold down the shift key to constrain the line to 45 degrees.

Drawing with the Pencil Tool

1. Select the Pencil Tool.

2. Drag the cursor across the Stage to create the path.

3. There are three pencil Options that you can select:

Straighten draws a straight line. If you draw a freehand triangle, oval, circle,
rectangle, or square, this mode will convert your approximations into the actual
shape.

Smooth draws curved lines.

Ink draws freehand lines with no alternation.

Drawing with the Pen Tool

With the Pen tool, you can create straight lines and Bezier curves that are defined by their
endpoints. You choose where the curve begins and ends, and Flash fills in the curve. This
tool is used to make smooth curves as well as straight lines. This is the precision drawing
tool.

Creating a Straight Line

1. Position the cursor where you want the beginning of the line. Click once and let go
of the mouse button.

2. Move your cursor where you want the end of the line or line segment. Double-click.

Information Technology Services, UIS 8

 [ Not for Circulation ]

Creating Multi-Segment Lines and Polygons

1. Position the cursor where you want the beginning of the line. Click once and let go
of the mouse button.

2. Move your cursor where you want to end of the first segment and the start of the
second, and click.

3. To end a line, double-click.

4. To close a polygon, position on the beginning point. You will notice a circle next to
the Pen icon. When you see the circle, click once.

Creating Curves

1. Position your cursor at the start of the curve. Hold down the mouse button.

2. With the mouse button still held down, drag the mouse in the direction you want the
curve. You will see two tangent handles, which show you the height and angle of
the curve you are drawing.

3. When the tangent handle defines the curve you want, let go of the mouse.

4. Move the cursor where the curved segment will end and hold down the mouse
button. Drag the mouse so that the control points are properly defining the next
curve segment you will be drawing. Let go of the mouse.

5. To end the path, double-click.

Painting with the Brush Tool

1. Select the Brush Tool and choose a fill color.

2. Select a Brush Mode from Options. These options apply when all objects are on the
same layer.

Paint Normal paints on top of other fills and lines.

Paint Fills paint only fills and not strokes.
Paint Behind covers only blank areas on the Stage.
Paint Selection applies a new color to the selected area.
Paint Inside paints fills and does not allow you to go outside the lines.

3. Select a Brush size and shape.

4. Position the cursor on the stage and drag the Brush to paint.

Information Technology Services, UIS 9

 [ Not for Circulation ]

Using the Eraser Tool

1. Click on the Eraser Tool and simply drag it across the objects to delete.

To erase everything on the Stage, double-click the Eraser tool.

To erase only strokes or only fills, click on the Faucet modifier from Options,
then click on the stroke or fill.

Use the Mode modifiers to erase only fills, only lines, both, or only those fills that
are selected.

Layers
The layering feature in Flash gives you flexibility in designing your artwork and
animations. With layering, you can lock parts of your image into place, hide portions of
your artwork, and specify layers to animate.

Show/Hide Lock/Unlock

Show as Outlines
Layer Name

Insert Layer Delete Layer

Adding and Naming Layers

To show the layer features, we will create two layers, for a total of three layers. We will add
a shape to each layer.

1. We will start by drawing a red circle on the first layer.

2. Select both the fill and stroke. Choose Modify > Group.

Information Technology Services, UIS 10

 [ Not for Circulation ]

3. To rename the layer, double-click on Layer 1 and type in the new name. We will call
this layer red.

4. To add the next layer, click on the Insert Layer icon.

5. Name this layer blue and draw a blue circle on the Stage. Group the fill and
stroke.

6. Add a third layer and call the layer white and draw a white circle on the Stage.
Group the fill and stroke.

Showing and Hiding Layers

1. To hide a layer, go to the layer on the layer listing and click on the black dot that is
under the eye icon. Note the red X that appears when you click.

2. To show the layer again, click on the red X.

Locking and Unlocking Layers

1. To protect your artwork from being accidentally altered as you are working on other
shapes or paths around it, you can place the art on its own layer, and then lock it.
For example, in our example, we will lock the red layer by clicking on the black dot
under the lock icon. A lock appears. Also, note that the Layer Name pencil is
crossed out.

2. To unlock the layer, click on the lock icon.

Reordering Layers

1. The order of the layers in the layer information box determines the stacking order of
the artwork on the Stage. For example, we could move the blue circle over the red
circle, and because the blue circle layer is on top of the red, the blue circle will
always be on top of the red circle.

2. If we want the red circle to appear on the top, we must reorder the layers in the layer
information box.

Information Technology Services, UIS 11

 [ Not for Circulation ]

Animation
Although there are several ways of creating animation in Flash, all animation is based on the
concept of changing content over time. In this workshop, we will look at Tweening, which
is the simplest way of animating graphics of any type.

Timeline

The Timeline determines the timing of the movie, controlling how fast or slow frames are
displayed over time. It is also where you create layers, which help you organize the various
elements on stage.

Keyframe

A keyframe is a frame in which you define a change to an objects properties for an

animation or include ActionScript code to control some aspect of your document. Within
the Timeline, there are numbered frames. When you want to change the content, you insert
a keyframe. The keyframe indicates a change.

Frame Types in Flash

Term Definition
Empty/Blank Keyframe F7 An empty keyframe has no visual representation. It
means that there is no artwork on the stage on that frame.
By placing artwork on the stage, you will fill an empty
keyframe. The Flash Timeline, by default, opens with an
empty keyframe. As soon as you put content on the
stage, the empty keyframe will change to a keyframe.

Information Technology Services, UIS 12

 [ Not for Circulation ]

Keyframe F6 A solid circle represents a keyframe that contains content.

A keyframe can also contain actions or sounds and is
represented by a hollow circle. By default, adding a
keyframe in Flash copies the content from the previous
keyframe.
Frame F5 The timeline in Flash looks like it has many frames in
each layer, which can be a bit deceiving. While it has the
slots for frames, you have to specifically define them as
frames.

Frame Rate

The frame rate indicates the speed of the movie. It is shown in frames per second [fps] at
the bottom of the Timeline. For WWW movies, 12 fps usually gives the best results.

Animating with Tweening

With tweening, you create your artwork in the first and last frames of your animation.
Flash fills in the intermediate steps [or the steps between]. Tweening creates a minimal file
size, since Flash only stores the changes between the frames and not the complete frames.

There are two types of tweening: motion tweening and shape tweening.

Motion tweening means changing the position of an object along the Timeline.
Shape tweening means changing the properties of the objects along the Timeline.

Motion Tweening

1. Begin by creating a graphic of type to use in the animation.

2. Go to the Timeline and select the frame where you want the animation to end.

3. Choose Insert > Timeline > Keyframe.

4. With the keyframe selected, move the text or graphic on the Stage. Use the shift key
to limit the movement in a straight line.

5. Click and select the first and last frames.

6. Choose Insert > Timeline > Create Motion Tween.

7. To test the animation, open the Controller and click on the Play button.

Information Technology Services, UIS 13

 [ Not for Circulation ]

Motion Tweening with a Motion Path

1. Begin by creating a motion tween.

2. Position the cursor on the first frame.

3. From the Properties panel, select Orient to Path.

4. Choose Insert > Timeline > Motion Guide. This inserts a new guide layer. Guide
layers are not published with the Flash movie.

5. Make the Guide Layer active by clicking on it. Use a drawing tool to draw a motion
path.

6. In the first frame, drag the shape by its registration point and snap it to the
beginning of the line.

7. In the last frame, drag the shape by it registration point and snap it to the end of the
line.

8. To test the animation, open the Controller.

9. Click on the Play button.

Shape Tweening

With shape tweening, you will change an objects shape over time. Shape tweening can also
include changing the objects location on the stage, as well as color and size. With shape
tweening, you can create morphing effect, with one shape transforming into another.

1. Using the Oval tool, draw a circle on Frame 1 Layer 1. This will be the starting
frame of this shape tween animation.

2. Select Frame 12 on Layer 1 and press F7 to add a blank keyframe. The circle on your
screen will disappear so you have a place to draw the ending frame of this
animation.

3. Using the Rectangle tool, draw a square along the right side of the stage. This will
be the ending frame of your animation.

4. Double-click anywhere in the Timeline between the two keyframes to select the
range of frames. You want to make sure you have this selected before you apply the
shape tween.

Information Technology Services, UIS 14

 [ Not for Circulation ]

5. On the Properties panel, select Shape from the Tween drop-down menu. This will
create a shape tween between the two keyframes in Layer 1. Green tinting and solid
arrow on the timeline indicate an active shape tween.

6. Press return [Macintosh] or Enter [Windows] on your keyboard to preview your

animation. The circle will gradually turn into a square.

Multiple Shape Tweens

So far, we have learned how to create a single shape tween. There will likely come a time
when you will want to create more than one shape tween in your project. In the following
example, you will learn how to create multiple shape tweens by placing them on separate
layers. Working with multiple layers is the best way to choreograph animations with
multiple tweens.

1. Open the file named mutplShpTwn.fla file located inside the Flash folder on the
desktop. You will notice four layers: one layer named background with the hula
girls body parts that will remain stationary and three more layers where you will
apply motion tweens to make her skirts and arms move.

2. Double-click on each of the layer names to give them new, more descriptive names.
Name layer 1 Left Arm, Layer 2 Right Arm, and layer 3 Skirt. It is important to
name the layers so that it is easy to recognize what content is on that layer.

3. Click the Lock icon at the top of the Layers panel to lock all the layers at once. Click
the Skirt layers Lock icon to unlock the layer.

4. On the Skirt layer, press F6 on Frame 20 and again on Frame 40 of the Skirt to add
keyframes to those frames. This process duplicates the artwork on those specific
frames. You should now see artwork from Frame 1 of the Skirt layer, representing
the beginning of the animation, artwork on Frame 20, which will represent the
middle of the animation, and then artwork on Frame 40, which will represent the
end of the animation.

5. Next, make sure that your Playhead is over Frame 20. Since this is where you want
the animation to change, you are going to slightly alter the artwork on Frame 20.
Move you pointer over the right side of the skirt and notice how the cursor icon
changes to a curved line. Move the right side of the skirt outward and the left side
inward.

6. To animate the hula girls skirt, all you have left to do is to add a shape tween. Click
on the right side of the Skirt layer name to select all the frames on that layer. From
the Properties panel, choose Tween > Shape. This will generate a shape tween
between each of the two keyframes.

7. Press the return [Macintosh] or Enter [Windows] key to see the shape tween in action.

Information Technology Services, UIS 15

 [ Not for Circulation ]

8. Lock the Skirt layer and unlock the Right Arm layer. You are going to create the
shape tween for the right arm.

9. On the Right Arm layer, press F6 on Frame 20 and again on Frame 40 to add
keyframes to those frames. This process duplicates the artwork on those specific
frames. You should now see artwork from Frame 1 of the Right Arm layer,
representing the beginning of the animation, artwork on Frame 20, which will
represent the middle of the animation, and then artwork on Frame 40, which will
represent the end of the animation.

10. Click on Frame 20 to select all the artwork in that frame. Move the arm slightly
towards the center, just to the middle of the skirt. Click anywhere on the stage to
deselect the artwork and modify the shape by dragging out the left side.

11. To animate the hula girls right arm, all you have left to do is to add a shape tween.
Click on the right side of the Right Arm layer name to select all the frames on that
layer. From the Properties panel, choose Tween > Shape. This will generate a
shape tween between each of the two keyframes.

12. Press the return key to see the shape tween in action.

13. Lock the Right Arm layer and unlock the Left Arm layer. You are going to create
the shape tween for the left arm.

14. Repeat steps 9 through 12 on the Left Arm layer to create the shape tween for the left
arm. Be sure to move it slightly left of the existing arm so that you can see them both
in the final animation.

15. On Frame 40 of the Background layer, press F5 to add frames so that you can see the
hula girls stationary parts throughout the animation.

16. Press the return [Macintosh] or Enter [Windows] key to test your animation!

Acknowledgements
Flash Hands-On Training, Lynda Weinman
Introduction to Flash, Karen Rohne

Information Technology Services, UIS 16