Flash Introduction

Abstract: This document introduces the basic animation features of

Flash, including the drawing tools, the stage, the timeline,
symbols, and a number of fundamental animation
techniques.

Geeta Mishra // Delhi School of Journalism// Delhi University

 Definitions
Term Definition

ActionScript Adds interactivity and/or playback efficiency to a movie via coding.

Similar to JavaScript, ActionScript is an object-oriented programming
language.

Alpha effect Adjusts the transparency of an instance.

Bitmaps Images using colored dots, called pixels, arranged within a grid. Typical
of most web graphics.

Breaking Converts symbols into basic shapes so that shape tweening can be
apart used.

Button Used to create interactive buttons in a movie that respond to mouse

symbol clicks or other actions.

Component A pre-made movie clip that provides some functionality, such as a

button, a scroll pane, or a progress bar. Components allow you to create
animations with complex functionality, but with a minimum of effort.

Easing By default, the rate of change between tweened frames is constant.

option Easing creates a more natural appearance of transformation by
gradually adjusting the rate of change.

Frame-by- An animation technique that involves subsequently creating a slightly

Frame altered image in sequence and then playing back the entire sequence.
animation

Graphic Used for static images and to create reusable pieces of animation that
symbol are tied to the Timeline of the main movie.

Keyframe A frame in which a change in an animation is defined. Keyframes are an

important part of tweened animation.

Layer Helps organize symbols and other separate animation entities by

allowing you to draw and edit objects on one layer without affecting
objects on another layer.

Geeta Mishra // Delhi School of Journalism// Delhi University

 Term Definition

Library Stores symbols, such as graphic symbols and button symbols, and
allows you to view and organize these files as you work. Helps in
selecting and copying instances of symbols on the main stage.

Motion guide Lets you draw paths along which tweened instances, groups, or text
blocks can be animated from one keyframe to another.

Motion To tween the changes in properties of instances, groups, and type, you
tweening use motion tweening. Flash can tween position, size, rotation, and skew
of instances, groups, and type. Additionally, Flash can tween the color of
instances and type, creating gradual color shifts or making an instance
fade in or out.

Shape In shape tweening, you draw a shape at one point in time, and then you
tweening change that shape or draw another shape at another point in time. Flash
interpolates the values or shapes for the frames in between, creating the
“morphing” animation. Symbols must be broken apart before using
shape tweening.

Symbol A reusable graphical object that is stored in a Library. You can then
create multiple instances of the symbol. There are three symbol types:
graphic, button, and movie clip.

Timeline Organizes and controls a movie's content over time in layers and frames.
The major components of the Timeline are layers, frames, and the
playhead.

Vector Describes images using lines and curves, called vectors, which also
graphic include color and position properties. You can move, resize, reshape,
and change the color of a vector graphic without changing the quality of
its appearance.

Geeta Mishra // Delhi School of Journalism// Delhi University

 Basic Tools
There are many basic drawing tools available in Flash. Each is detailed below. Also note
that many of these tools have additional options or modes that can be changed in the
Options area of the Tools panel.

The first important tool is the Selection tool. This tool is used to make
selections on objects and graphics on the drawing area, or stage. You can
either click on individual objects to select them, or click and drag to make a
rectangular region and select all the objects in it. Once you make a
selection, you may perform subsequent actions that affect your selection,
such as moving it around the stage, deleting, or altering it in the Properties
panel. Hold down the SHIFT key to select multiple individual objects.

The Subselection tool is used for selecting and modifying anchor

points on curves and lines. Clicking once on a line or curve with the
Subselection tool reveals the anchor points. Anchor points are represented
either by a hollow square (a corner point), or a hollow circle (a curve point).
Clicking on an anchor point with the Subselection tool will select that
anchor point (then represented by a filled square or circle). You can then
click and drag the anchor point to move it, ALT-click and drag on a corner
point to convert it to a curve point (and thus reveal anchor point tangent
handles), or ALT-click on a curve point to convert it to a corner point (and
thus remove the tangent handles).

The Line tool is an important drawing tool. It functions like the line
tool in other drawing programs. To use it, click on the stage, drag, and
release to draw a straight line. Stroke width, style, and color can be
changed in the Properties panel. Hold down the SHIFT key while dragging
to constrain the line angle to increments of 45°.

The Lasso tool can be used to select objects on the stage. It allows you
to create a freeform selection area by clicking and dragging around an area.
When you release the mouse button, Flash automatically completes the loop
with a straight line.

The Pen tool is used to create precise paths that are either straight lines or smooth
curves. Stroke width, style, and color, and fill color (for closed paths) can be changed in
the Properties panel. To use the Pen tool to create straight lines, click anywhere on the
stage to define the first anchor point, click again where you want the first segment of the
straight line to end (hold down the SHIFT key to constrain the line to increments of 45°),
and continue clicking to create more straight line segments. Double click the last point to
end the line segments (and create an open curve), or click on the first point you created to
close the curve. To create curved lines, follow the same procedure, but instead of simply
clicking to create each point, click and drag in the direction you want to curve to go.

The Text tool allows you to draw text on the stage. Position the cursor on the stage
where you want to begin your text and then click and start typing. The text font, size,
color and paragraph formatting can be changed in the Properties panel.

Geeta Mishra // Delhi School of Journalism// Delhi University

 The Oval tool allows you to create ovals of any shape and size (including circles).
Stroke width, style, and color, and fill color for ovals can be changed in the Properties
panel. To create an oval, simply click and drag across the stage to create the oval as you
want it. Hold down the SHIFT key while dragging to constrain the oval to a circle.

The Rectangle and PolyStar tools allow you to create rectangles and polygons.
To switch between the Rectangle and PolyStar tools, click and hold the tool icon on the
Tools panel, then select the desired tool from the menu that appears. Stroke width, style,
and color, and fill color for rectangles and polygons can be changed in the Properties
panel. In addition, for the PolyStar tool, the number of sides of a polygon, or points on a
star, can be changed by clicking on Options in the Properties panel. To create a
rectangle or polygon/star, simply click and drag across the stage to create the shape as
you want it. While using the Rectangle tool, hold down the SHIFT key while dragging to
constrain the rectangle to a square. While using the PolyStar tool, hold down the SHIFT
key to constrain the orientation of the polygon or star to increments of 45°.

The Pencil tool is used to create lines and shapes on the stage in much the same way
you would use a real pencil. Stroke width, style, and color can be changed in the
Properties panel. To use the Pencil tool, click and drag across the stage to create a line.
Note that you can end your drawing at the same place you started, but the shape you
create is not filled in. Hold the SHIFT key while dragging to constrain the line to a
horizontal or vertical direction.

The Brush tool is used much like a paint brush. Click and drag across the stage to
paint. The fill color can be changed in the Properties panel. Note that no stroke is
produced when using the brush tool. Under the Options section of the Tools panel, you
can change the brush size and shape.

The Free Transform tool can be used to transform objects in a variety of ways. To
use the tool, click on an object on the stage to reveal transform handles. Then, under the
Options section of the Tools panel, choose the type of transformation you want to
perform. Options include Rotate and Skew, Scale, Distort, and Envelope. Hold down the
SHIFT key while rotating to constrain the angle to increments of 45°.

The Fill Transform tool allows you transform gradient and bitmap fills. To use it,
click on an object that has a gradient or bitmap fill to reveal transform handles. Click and
drag the circle handle in the center of the fill to move the gradient or bitmap. To change
the width or height of a bitmap fill, or the scale of a gradient fill, click and drag the
square handle along the edge of the fill bounding box. To rotate the fill, click and drag
the circle handle on the corner of the bounding box. To change the radius of a circular
gradient fill, click and drag the middle circle handle on the bounding circle of the fill.

The Ink Bottle tool allows you to change the stroke color, width, and style of lines
and shape outlines. To use it select the stoke width, style, and color you want to apply in
the Properties panel, and click on one or more lines or shapes on the stage to apply the
stroke properties to them.

The Paint Bucket tool allows you to fill enclosed areas with color. To use it, select
the solid color or gradient you want to apply in the Properties panel, and click on one or

Geeta Mishra // Delhi School of Journalism// Delhi University

 more enclosed shapes on the stage to fill them with color. Note that under the Options
section of the Tools panel, you can choose how you want Flash to handle partially
enclosed areas.

The Eyedropper tool allows you to copy stroke and fill properties from one object
to another. To use it, click on a stroke or fill of the object whose properties you want to
copy. If you click on the fill, the Eyedropper tool automatically changes to the Paint
Bucket tool, with fill properties set the same as the object you clicked on. If you click on
the stroke, the Eyedropper tool automatically changes to the Ink Bottle tool, with stroke
properties set the same as the object you clicked on. Now click on one or more objects
on the stage to apply the stroke or fill properties.

The Eraser tool allows you to erase objects on the stage. To quickly erase
everything on the stage, double click the Eraser tool icon on the Tools panel. Note that
you can change erasing options in the Options section of the Tools panel.

The Hand tool is used for moving the view of the stage. It is especially useful when
you have used the Zoom tool to magnify the stage. To use it, simply click and drag the
stage in the direction you want it to move. To temporarily switch between another tool
and the Hand tool, hold down the spacebar and click the Hand tool in the Tools panel.
When done dragging, Flash will return to the tool you were using.

The Zoom tool is used for magnifying or reducing the view of the stage. To use it,
click anywhere on the stage to zoom in by a factor of two. Alternatively, you can click
and drag to zoom into a region of the stage. Hold down the ALT key while clicking to
zoom out by a factor of two.

In addition to the drawing and view tools, the Tools panel allows you to
modify the colors that are used to draw strokes and fills. The Stroke color is applied to
lines and shape outlines. The Line, Pen, Oval, Rectangle, PolyStar, and Pencil tools all
produce a stroke. The Fill color is applied to the interiors of shapes. The Pen (for closed
paths), Oval, Rectangle, PolyStar and Brush tools all produce fills.
Practice using the various drawing tools on the stage and note the behavior of each tool
that you use. Remember, you can quickly delete everything on the screen by double
clicking the Eraser tool.

Vector Graphics
As you practice drawing several shapes and pictures with the basic tools, notice how
smooth everything seems to look, especially after you have tried to draw with the Pencil
tool. Shapes and drawings are smooth in Flash because Flash is a vector-based drawing
program. Vectors are mathematical representations of lines and shapes and are not the
same as other images you see, such as digital photographs.
When you zoom into a photograph using a graphics editor program, you will eventually
see blocks, or pixels, of color that make up the picture. A rounded shape will look
progressively less rounded and more jagged as you zoom in closer. When you zoom in
on a circle in Flash, however, you will never see the jagged edges because each
progressive zoom redraws the circle using the vector equations. Vectors minimize
storage space for images by eliminating the need to store color information for a huge

Geeta Mishra // Delhi School of Journalism// Delhi University

 number of pixels (the average digital camera will produce pictures that have over a
million pixels). Instead, only the vector equation is stored and graphics are calculated
and displayed by using this equation.
Even though vector-based graphics require a relatively small storage space, they require a
significant amount of computation to manipulate the vector equations. Therefore, the
simpler your Flash animation (i.e. the fewer points, edges, corners, etc.) the better the
animation will run, especially on older or less powerful computers.
There are some techniques that will help you achieve simpler animations in Flash. The
Selection tool, for example, has options under the Options section of the Tools panel that
allow you to simplify lines and curves in your drawing by making them smoother or
straighter. The more you click on this option, the more smooth or straight your image
becomes.

Simplifying options for the Selection Tool (smooth and straighten)

Stage Elements and Properties

The stage is the main working area for your drawings and animations. Anything on the
stage will show when you play your movie, and anything off the stage will not appear in
the movie. To set the stage and movie properties, press CTRL-J to access the
Document Properties window. Here, you can set the frame rate of your movie, the
dimensions of your movie in pixels, and the default background color of your movie.
Keep in mind that the higher the frame-rate of your movie, the smoother it will play.

Document Properties window

 12 frames per second is sufficient for most Flash projects. For higher quality
animations, 30 frames per second can be used.
 The default Flash movie dimensions are 550 pixels by 400 pixels. This can be
adjusted to suit your larger web page. For example, Flash animations are often
used in combination with HTML elements on a web page and you may need to
change the size of the Flash animation to fit properly with the layout of the rest of
the page.

Geeta Mishra // Delhi School of Journalism// Delhi University

  Choose a background color that will be easy to work with, or set the background
color after you are done with your Flash movie – you don’t want to stare at a
high intensity color for too long while working.
Property is a concept that is frequently encountered in Flash. An object or item contains
sets of parameters that are configurable at any time. For instance, when you draw a red
circle on the stage, it has:
 a fill color property of red
 a height and width property
 a rotation property of 0 degrees
 a stroke width property of 1 pixel, and so on.
You can view the properties of any object on the stage in the Properties panel by
selecting the object with the Selection tool. The type of object selected will affect the
variety of properties that you can modify. Some properties only apply to symbols, a topic
discussed below.

Layers
Flash provides a way to create layers in your animation. Using layers, you can organize
the contents of an animation and separate different objects or groups of objects. As you
work with your animation, you can hide layers to prevent the stage from getting cluttered
and unwieldy, and / or you can lock layers to prevent accidental changes to the objects on
them. Overall, layers are a very useful tool in organizing the objects in your Flash movie,
and, particularly in the case of some animation techniques, are required for the animation
to work properly. Never be concerned with creating too many layers; having too many
layers is better than having too few.
The layers are shown as a stacked order in the layers section of the Timeline panel,
meaning that they are all physically stacked on top of one another on the stage. A higher-
positioned layer will cover anything below it. Objects on lower-positioned layers will not
be visible if there is a shape in a higher layer that is drawn on top of it.

The layers section of the Timeline panel

 To add a new layer, click on the Insert Layer icon on the Timeline panel.
This will insert a new layer directly above the layer that is currently selected.
 Be sure to make it a habit of naming your layers for better organization. Double
click the layer name to change it.
 You may also easily rearrange the order of your layers by clicking a layer and
then dragging it to the selected location among the rest of the layers.

Geeta Mishra // Delhi School of Journalism// Delhi University

  To delete a layer, select it by clicking on the layer name and then clicking on the
trash can icon

The Timeline
The Timeline is the essence of Flash. This is where your work comes alive in the form of
animation. Although it may not be clear at first how the Timeline works, its use will
become almost intuitive as you gain experience in working with Flash.
The Timeline represents all the frames in your movie. Like a cell-animated cartoon, the
illusion of movement is attained by rapidly displaying the contents of a sequence of
frames, just like a flip-book animation. Flash can handle several different types of
animation – frame-by-frame, motion tweening, and shape tweening. All three
animation techniques are conveyed by the Timeline.

The Timeline panel, including the layers section

There are many details to the Timeline. Each block or tick mark represents a single
frame. Frames are numbered in increments of 5 (by default) along the top. The number
of frames in a Flash movie can vary depending on the length of the movie. You can use
the scrollbar below the frames to see frames not currently displayed in the Timeline.
Also notice that the numbers increase from left to right—this is the order in which your
movie will play, at the designated frames per second (defined in the Document Properties
dialog box).
The Playhead is the red rectangular marker located within the frame numbers. Its
position designates which frame is currently displayed on the stage. To move the
Playhead, click and drag it left and right to see how your movie behaves.

Frame-by-Frame Animation
By learning frame-by-frame animation, you will have a better understanding of how the
Timeline works and how you can control it.
1. First, create a shape in one layer on the stage, say, a rectangle. Notice the frame
in the Timeline has a black dot after you have created the circle – i.e., it becomes
a keyframe. Keyframes designate points in animation transitions and reflect
changes in animation as the movie progresses.

Geeta Mishra // Delhi School of Journalism// Delhi University

 The first frame becomes a keyframe when you place an object on the stage

2. Now, click on frame 2 in the layer and go to Insert > Keyframe, or press the
shortcut key, F6. Another keyframe will be created and your rectangle will be
automatically placed on the stage in the second keyframe.
3. If the rectangle is not highlighted as a fine checkerboard pattern, use the
Selection tool to draw a selection box around the rectangle.

A checkerboard pattern indicates the graphic object is selected

4. Now, hold down the SHIFT key and press the down arrow on the keyboard to
move the rectangle down a few pixels. (Without the SHIFT key pressed, the
rectangle will move one pixel at a time.)

Geeta Mishra // Delhi School of Journalism// Delhi University

 The rectangle moves further down in the next keyframe

5. Click the next frame in the layer and insert another keyframe (F6).
6. Move the rectangle down again in the same manner.
7. Repeat this process until you have 12 keyframes, each with the rectangle moving
down a little further than the last time. Now, if you slide, or ―scrub‖, the timeline
playhead back and forth from the first to twelfth frame, you will notice that the
rectangle ―moves‖ up and down.
8. Move the playhead to the first frame and press Enter on the keyboard to play the
movie. Congratulations, you have created your first Flash animation!
9. To preview your movie as it will play in real time, press CTRL-Enter. Watch
how your animation plays and repeats. Close the movie to return to Flash.
Frame-by-frame animation is rarely used in Flash. Its use is mainly confined to
animation sequences that require exact positioning and strict rates of change. Another
circumstance to use frame-by-frame animation is to display imported movie file images,
which is beyond the scope of this workshop.

Motion Tween Animation with Symbols

You have just accomplished frame-by-frame animation in Flash, and as you may have
noticed, it was rather tedious to move the circle down a little at a time in each frame to
produce such a simple animation. We will now look at another type of Flash animation
technique called motion tweening that will provide a shortcut for the same animation. To
understand motion tweening, you will need to learn how to create symbols.
Symbols are objects that you create and store in a Library, allowing them to be reused in
your movie in order to save computer system resources and make your project more
manageable. For instance, if you wanted to create 10 circles, it would be much easier to
define one circle and then clone, or copy, that circle 9 times than to draw all ten circles
from scratch. If you changed your mind and wanted to use squares instead, you would
only need to update your symbol once to change the rest of the circles to squares.

Geeta Mishra // Delhi School of Journalism// Delhi University

 There are three kinds of symbols in Flash: Movie Clip, Button, and Graphic. For this
introductory workshop, we will only focus on the Graphic and Button symbols. Let’s
create a symbol.
1. Create a new Flash movie by selecting File > New and choosing Flash
Document under the General tab.
2. Create a rectangle on the stage of any color and size. Use the Selection tool to
draw a selection box around the rectangle.
3. Go to Modify > Convert to Symbol or press the shortcut key F8. A popup
dialog will be shown.

The Convert to Symbol dialog box

4. Name this symbol Rectangle and be sure to select the graphic subtype by
clicking the Graphic radio button. Click OK. The checkerboard pattern on the
rectangle disappears and a plus sign appears at the top left corner of the
rectangle, indicating that it has successfully become a symbol.

A Rectangle symbol on the stage

5. Now, to animate it via motion tweening, click frame 12 (or whatever frame you
want your animation to end on) in the timeline on the Rectangle layer and go to
Insert > Timeline > Keyframe or press F6.
6. Use the Selection tool to select and drag the rectangle to a new position on the
stage, noticeably far from its original position. You should have two keyframes
in this animation: one at the beginning and one at the end of the layer with the
rectangle on it.

Geeta Mishra // Delhi School of Journalism// Delhi University

 7. Click on any frame between the first and last keyframes of the layer with the
rectangle on it and choose Motion from the Tween menu on the Properties panel
(or go to Insert > Timeline > Create Motion Tween) and you should see that
Flash replaces all the grey frames between the first and last keyframes with a
blue background and an arrow. This is the representation of a Motion Tween on
the Timeline.

Motion tweening has been selected for these frames

8. Move the playhead to the beginning of your movie and press Enter. Your
rectangle should move in increments from its starting position to its final
position. This animation is essentially the same as your frame-by-frame
animation but you did not have to fill in every step, just the first and last. Flash
automatically interpolates the position of your symbol between keyframes. This
is why it is important to designate keyframes – to specify beginning and end
points of animations.
9. Now, let’s make the rectangle move some more, this time in a direction
perpendicular to the original direction. Click on frame 24 and create a keyframe
(F6). Use the Selection tool to move the rectangle to a new location. Create
motion tweening just as before and play your movie. By repeating this process,
you can extend the length of your movie by creating more motion tweens
between additional keyframes.
Remember that we created a Rectangle symbol when we made this animation. Now, let’s
add some more rectangles to our movie.
1. First create a new layer on top of the original one by clicking on the New
Layer button at the bottom left of the Timeline. Creating a new layer is vital,
since Flash does not allow motion tweens on layers with more than one
symbol on the,

Geeta Mishra // Delhi School of Journalism// Delhi University

 Adding a new layer to the Rectangle animation

2. Notice that Flash automatically creates blank frames that match the current
length of your movie. We will create keyframes in place of some of these
blank frames.
3. Click the first frame of this new layer and insert a new keyframe (F6).
4. Access the current Flash movie library by pressing CTRL-L.

The Library panel contains symbols you’ve created

5. The library contains all of the symbols you have created for the movie and
allows you to conveniently select any symbol and place it on the stage,
thereby creating an instance of it. Make sure the playhead is on frame one
of the Timeline and that the newly created layer is selected. Select the

Geeta Mishra // Delhi School of Journalism// Delhi University

 Rectangle symbol from the library list and drag it to the stage. Position this
new rectangle in an empty spot. Notice that Flash places a black dot in frame
one of the new layer to indicate that it has become a keyframe.
6. This new rectangle, in effect, is a clone of your original rectangle – you did
not have to recreate it. We refer to this rectangle as an instance of the
Rectangle symbol. You can have multiple instances of the same symbol in
your animation and you may alter the properties of each instance
independently. Some properties you can change are tint, transparency, and
size. We’ll alter the tint property of this instance in the next step.
7. You can change the color of rectangle instance by first selecting it, choosing
Tint from the Color menu on the Properties panel, and selecting a color from
the color palette box . Your rectangle instance should now be a
different color than the original Rectangle symbol.
8. You can also alter the instance by changing its size or shape with the Free
Transform tool. Try different things to achieve different effects.
9. Once you have made all of your changes, animate the new rectangle in a
similar fashion to the first rectangle, making sure that you create the
keyframes in the proper layer. Notice how your top layer is ―physically‖ on
top – if this rectangle runs into your original rectangle, it will cover it.
10. Press Enter to preview the animation.

Geeta Mishra // Delhi School of Journalism// Delhi University