INTRODUCTION TO FLASH ANIMATION
®
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Copyright 2012 Adobe Systems Incorporated. All rights reserved.
Flash file types

The format in which you edit Flash documents has the file extension FLA.

The format in which you export Flash documents for viewing in the Flash
player has the file extension SWF.


By default, SWF movies contain XMP metadata—information about the file
available to web search engines and viewable in Adobe Bridge.
The format that lets multiple people work on separate parts of the Flash
file, and that works with Adobe programs such as After Effects, has the
file extension XFL.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
2
Flash workspace
Menu
bar
Panels
Stage
Motion
Editor
Tools
Timeline
Layers
© 2012 Adobe Systems Incorporated. All Rights Reserved.
3
Stage

You compose movie content on the Stage.

Set Stage size by selecting Modify > Document.

To specify the Stage size in pixels, enter values in the Width and Height boxes. The minimum
size is 1 x 1 pixels; the maximum is 2880 x 2880 pixels.

To minimize document size, select the Contents option to the right of Match (but first create all
of the objects on the Stage).

To set the Stage size to the maximum available print area, select the Printer option.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
4
Tools panel
Tools create the content of a movie.

Selection tools: Select, scale, distort, rotate objects

Drawing tools: Draw, paint, create text, and erase objects

View tools: Zoom and pan

Color tools: Set stroke and fill colors

Options: Modify the currently selected tool
© 2012 Adobe Systems Incorporated. All Rights Reserved.
5
Panels
Panels provide additional tools
for creating and editing
movies.

Click the panel to view
additional options for the
current panel.

You can hide or show panels
by using the options on the
Window menu.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Panels
6
Timeline panel

You can organize and control the content of a movie over time.
Frames
Playhead
Layers
© 2012 Adobe Systems Incorporated. All Rights Reserved.
7
Frames and keyframes

Frames: Like films, Flash movies divide lengths of time into frames, which
are organized on the timeline.

Keyframes: Frames that define a change in what is displayed in a movie
or include frame actions to modify a movie. When you open a new blank
movie document, it contains one layer with one blank keyframe.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
8
Frames and keyframes
Keyframe with content
Blank keyframe
© 2012 Adobe Systems Incorporated. All Rights Reserved.
Empty frames
Empty slots for new frames
9
Layers

Layers are like multiple film strips stacked on top of each other, each with a
different element that appears on the Stage.

Graphics

Animations

Text

Sounds

Buttons

Frame actions
© 2012 Adobe Systems Incorporated. All Rights Reserved.
10
Symbols and libraries

Symbols are elements you reuse within a movie to reduce file size.

Types of symbols include graphics, buttons, movie clips, sound files, and
text.

A library is where you store and organize symbols.

When you drag a symbol from a library to the Stage, you create an
instance of the symbol.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
11
Advantages of using symbols

Easy editing: If you change the symbol in the library, all instances of the
symbol are updated automatically.

Smaller file sizes: Symbols are downloaded only once, regardless of the
number of instances you include in the movie. This reduces the size of
your published movies and decreases download times.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
12
Animation with tweening

Tweening: A tween is an animation that is created by specifying a state for an
object property in one frame and another state for that same object in another
frame. Flash calculates the values for that object’s properties in between those
two frames. The term tween comes from the phrase “in between.”

Flash supports three different types of tweening.


Motion tweens are powerful and simple to create. Motion tweens allow you to create
most tweened effects.

Classic tweens are more complex to create, but provide certain capabilities that motion
tweens do not.

Shape tweens allow you draw a shape at one specific frame in the Timeline, and change
that shape or draw another shape at another specific frame. Flash then interpolates the
intermediate shapes for the frames in between, creating the animation of one shape
morphing into another.
Inverse Kinematics (IK): IK is a method for animating an object or set of objects in
relation to each other by using an articulated structure of bones. Bones allow
symbol instances and shape objects to move in complex and naturalistic ways
with a minimum of design effort. For example, with inverse kinematics you can
easily create character animation, such as arms, legs, and facial expressions.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
13
Motion tweening

Motion tweens can only have one object instance associated with them
and use property keyframes instead of keyframes.

Motion tween spans can be stretched and resized in the timeline and are
treated as a single object.

With motion tweens, eases apply across the entire length of a motion
tween span. Easing only specific frames of a motion tween requires the
creation of a custom ease curve.

The Motion Editor enables you to view all Motion tween properties and
their property keyframes.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
14
Classic tweening

Classic tweens use keyframes. Keyframes are frames in which a new
instance of an object appears.

Classic tweens consist of groups of individually selectable frames in the
timeline.

With classic tweens, eases can be applied to the groups of frames
between the keyframes within the tween.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
15
Shape tweening

Shape tweens work best with simple shapes. Avoid shapes with cutouts
or negative spaces in them. Experiment with the shapes you want to use
to determine the results. You can use shape hints to tell Flash which
points on the beginning shape should correspond to specific points on the
end shape.

You can also tween the position and color of shapes within a shape
tween.

To apply shape tweening to groups, instances, or bitmap images, break
these elements apart.

To apply shape tweening to text, break the text apart twice to convert the
text to objects.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
16
Inverse Kinematics (IK)

Inverse kinematics lets you can create natural motion.

You can use the Bones tool to add IK animation to symbol instances and
shapes.

To animate text by using IK, first convert the text to a symbol first.

Add bones to separate symbol instances or to the interior of a single shape.

When one bone moves, the other connected bones move in relation to the
bone that initiated the movement. To animate by using inverse kinematics,
you need only to specify the start and end positions of objects.

You can use IK in Flash in two ways.

The first is to articulate a series of symbol instances by adding bones to connect
each instance to another instance. The bones allow the chain of symbol instances
to move together.

The second way is to add an armature to the interior of a shape object. The shape can
be created in merge drawing mode or object drawing mode. The bones allow you to
move and animate parts of the shape without the need to draw different versions of
the shape or create a shape tween.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
17
Sound

First, import a sound file into the
library.

Add sound to a movie by dragging
an instance of the sound into a
frame.

To minimize file size, loop shorter
sounds (to make them repeat).
© 2012 Adobe Systems Incorporated. All Rights Reserved.
18
Actions

ActionScript statements instruct a movie to do something while it is
playing. ActionScript can be attached to a frame or to an object:

Frames: ActionScript attached to a frame is triggered when the movie plays
that frame.

Objects: ActionScript attached to an object is triggered when the viewer
interacts with the object, such as moving the pointer over a hotspot or clicking a
button.
© 2012 Adobe Systems Incorporated. All Rights Reserved.
19