F L A S H M X A N I M A T I O N

Table of Content Learning Objectives

1. Creating and Editing symbols 1. To familiarize with

Flash animation
techniques.
2. The library panel

3. Using layers

4. Using the Timeline

5. Flash Animation

 Motion Tweening

 Tweening size and rotation

 Tint tweening

 Alpha tweening

 Shape tweening

 Ease option

6. Flash Animation Part 2

 Motion Tweening using Motion Guide layer

 Shape tweening using shape hint

 Masking effect

1. Creating and editing symbols

1. A symbol is a reusable image, animation or button. An instance is an occurrence of a
symbol on the stage. You can say the occurrence is the copy of a symbol that is
placed on the stage. A symbol can have many occurrence or copy where you do not
need to draw the same shape, animation or button. For example, you can have more
than one button in one page but you do only need to create one button and copy
them on the stage.

2. Whenever you modified any symbol such as the shape or color, it automatically
modifies the instances or the copy of the symbol. However an instance can be very
different from its symbol in color, size, and function.

3. Any symbol you create automatically becomes part of the library for the current
document.

4. Flash can handle three types of symbols:

a. Graphics
i. Use graphic symbols for static images and to create reusable pieces of
animation that are tied to the Timeline of the main movie. Graphic symbols
operate in sync with the movie's Timeline. Interactive controls and sounds
won't work in a graphic symbol's animation sequence.

b. Buttons
i. Use button symbols to create interactive buttons in the movie that respond to
mouse clicks, rollovers or other actions. You define the graphics associated
with various button states, and then assign actions to a button instance.

c. Movie clips

i. Use movie clip symbols to create reusable pieces of animation. Movie clips
have their own multi-frame Timeline that plays independent of the main
movie's Timeline—think of them as mini-movies inside a main movie that can
contain interactive controls, sounds, and even other movie clip instances. You
can also place movie clip instances inside the Timeline of a button symbol to
create animated buttons.

2. The library panel

1. The library in a Flash document stores

symbols created in Flash, plus imported
files such as video clips, sound clips,
bitmaps, and imported vector artwork. The
Library panel displays a scroll list with the
names of all items in the library, allowing
you to view and organize these elements
as you work. An icon next to an item's
name in the Library panel indicates the
item's file type.

2. To display the library panel choose

Window > Library
3. Creating and Editing symbols

a. You can create a symbol from selected objects on the

Stage, or you can create an empty symbol and make
or import the content in symbol-editing mode.
Symbols can have all the functionality that you can
create with Flash, including animation.

b. For example, you can convert your drawing into

symbols. Choose Insert > Convert to Symbol.

c. Then the symbol properties will appear.

d. Give a name to the symbol and choose the appropriate type of behavior. In the
Library panel you can see that the symbol is listed.

e. Once you created a symbol, you can use instances of it anywhere on the stage. To
create instances drag the symbol icon to the stage. Create two or three instances.

f. You can change or modify the properties of each instance without affecting other
instances. You can transform, skew, scale, and rotate. You can also change the
brightness, tint color, and transparency of an instance through the property
inspector. Note that you cannot change the color using the drawing tool.

g. You can also edit the symbol itself and change all the instances of that symbol. To
edit symbol you have to go to symbol editing mode. Click on an instance and
choose Edit > Edit Symbol. In this symbol editing mode, only the symbol itself will
appear and the rest of the document will disappear. Now, you can edit the symbol
as drawing where you can use all the drawing tools. To go back to the stage
choose Edit > Edit Document.

h. You can also break apart the instance to break the link to the symbol, so that the
instance is now a separate drawing. Then you can modify this drawing and
convert it to a different symbol.

3. Using Layers

1. Layers are like transparent sheets of acetate stacked on top of each other. Layers
help you organize the artwork in your document. You can draw and edit objects on
one layer without affecting objects on another layer. Where there is nothing on a
layer, you can see through it to the layers below.

2. To draw, paint, or otherwise modify a layer or folder, you select the layer to make it
active. A pencil icon next to a layer or folder name indicates that the layer or folder is
active. Only one layer can be active at a time (although more than one layer can be
selected at a time).

3. When you create a new Flash document, it contains one layer. You can add more
layers to organize the artwork, animation, and other elements in your document. The
 number of layers you can create is limited only by your computer's memory, and
layers do not increase the file size of your published movie. You can hide, lock, or
rearrange layers.

4. You can also organize and manage layers by creating layer folders and placing layers
in them. You can expand or collapse layers in the Timeline without affecting what you
see on the Stage. It's a good idea to use separate layers or folders for sound files,
actions, frame labels, and frame comments. This helps you find these items quickly
when you need to edit them.

5. Layers are very important because each layer can contain only one animation.

6. Creating layers and layer folders.

a. To create a layer or layer folder click the Add layer or Add folder button at the
bottom of the time line.

7. Delete layers

a. To delete a layer click a layer and click the trashcan button at the bottom of the
timeline.

8. Rearranging layers

a. To rearrange the position of the layer simply drag the layer up and down to
desired position.

9. To hide layer’s content

a. Click the dot under the eye column on the layer you want to hide. A red X will
appear to indicate that the content of the layer is not visible. Click again on the
red X to make to content visible again.

10. To lock layer’s content

a. You can lock the layer avoid accidentally modifying the content of the layer. Click
the dot under the lock column on the layer you want to lock. A lock icon will
appear and to unlock the layer, click the lock icon.

11. You need to be careful not to draw, create animation or insert symbols in the wrong
layer. Look at the timeline panel, to make sure you are working on the correct layer
the pencil icon will appear next to the layer’s name to indicate an active layer.
4. Using the Timeline

1. The major components of the Timeline are layers, frames, and the playhead.

2. Layers in a document are listed in a column on the left side of the Timeline.

3. Frames contained in each layer appear in a row to the right of the layer name.

4. The Timeline header at the top of the Timeline indicates frame numbers.

5. The playhead indicates the current frame displayed on the Stage.

Layers Playhead Timeline header

Frames

Current frame indicator Frame rate

5. Flash Animation

1. You create animation in a Macromedia Flash MX document by changing the contents

of successive frames. You can make an object move across the Stage, increase or
decrease its size, rotate, change color, fade in or out, or change shape. Changes can
occur independently of, or in concert with, other changes. For example, you can
make an object rotate and fade in as it moves across the Stage.

2. There are two methods for creating an animation sequence in Flash: tweened
animation, and frame-by-frame animation. In tweened animation, you create
starting and ending frames and let Flash create the frames in between. Flash varies
the object's size, rotation, color, or other attributes evenly between the starting and
ending frames to create the appearance of movement. In frame-by-frame animation,
you create the image in every frame which can be very difficult because you have
drawn the changes in every frame.

3. In short, tweening is the graduated changes between two keyframes.

4. Tweened animation.

a. Flash can create two types of tweened animation, motion tweening and shape
tweening.

i. In motion tweening, you define properties such as position, size, and rotation
for an instance, group, or text block at one point in time, and then you change
those properties at another point in time. You can also apply a motion tween
along a path.
 ii. In shape tweening, you draw a shape at one point in time, and then you
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
animation.

5. Using keyframes in animation.

a. A keyframe is a frame when you specify

changes in an animation. In tweened animation,
you create keyframes at important point in the
timeline and let Flash creates the frames in
between. Keyframes are indicated by a circle in
a frame. Keyframes that contains no graphics
will be blank.

6. Motion tweening.

a. Tweening motion is graduated changes in the position of the object. If you open a
new document, automatically, there will be one layer and in that layer is an empty
keyframe. When you draw an object, you can see the empty keyframe is now become
a filled keyframe indicating there is a graphic or object in it.

b. Click on the first keyframe which will select the object you have drawn, and choose
Insert > Create Motion Tween. Note that Flash will automatically convert your graphic
into symbol.

c. Next Select Frame 25 and insert a keyframe. While keyframe in Frame 25 is selected,
use the Arrow tool to move the instance to a different position. Press Enter to see the
result.

7. Tweening size and rotation

a. Now select Frame 15 and insert a keyframe. While keyframe 15 is still selected, go to
the transform panel. If it doesn’t appear choose Window > Transform. Change the
percentage to 200% to make the object twice larger and under rotation change to
180 to create a rotation motion.

b. Press Enter to see the result.

8. Tint Tweening (Color)

a. Tint tweening is the graduated changes in the color of the object. Add another layer
and rename as tint tweening. Draw a shape and convert it into graphic symbol.
Remember that if you draw a shape, there is an outline and fill. So you must select
both to convert them into symbol. To be safe, click the Frame 1 of the tint tweening
layer and choose Insert > Convert to Symbol.

b. Next go to frame 25 of tint tweening layer and insert a keyframe. While keyframe 25
is selected click on the object and under the Property Inspector, choose Color > Tint
and change to different color. Next go to the first frame of the tint tweening layer;
under the Property Inspector choose motion under the tween droplist.

9. Alpha Tweening (Fade out)

a. Alpha tweening is the graduated changes of the transparency of the object. Add
another layer and rename as alpha tweening. Draw a shape and convert it into
graphic symbol. Remember that if you draw a shape, there is an outline and fill. So
 you must select both to convert them into symbol. To be safe, click the Frame 1 of
the alpha tweening layer and choose Insert > Convert to Symbol.

b. Next go to frame 25 of alpha tweening layer and insert a keyframe. While keyframe
25 is selected click on the object and under the Property Inspector, choose Color >
Alpha and change the percentage to 0. Next go to the first frame of the alpha
tweening layer; under the Property Inspector choose motion under the tween pop up
list.
10. Shape tweening

a. Shape tweening is the graduated changes of the shape of the object. Similar to
motion tweening, but you use it to change the shape of the image. However shape
tweening cannot be used on a symbol or a group. It can only be used on drawings.

b. Add another layer and rename as shape tweening. Draw a shape.

c. Next go to frame 25 of shape tweening layer and insert a blank keyframe. While in
keyframe 25, draw a different shape.

d. Then go back to Frame 1 of shape tweening layer, under the Property inspector,
choose shape under the tween pop-up list. You can see on the time line, the frames
for shape tweening is green instead of purple.

11. Ease option

a. For both motion and shape tweening, there is an option under the Property Inspector
called ease. If you set the ease settings to negative value, the tweening effect will
start slowly but accelerate near to the end of animation. If it is set with positive value
the tweening effect will begin rapidly but slowing towards the end.

6. Motion tweening using Motion Guide layers

1. Motion guide layers let you draw paths along which tweened instances, groups, or
text blocks can be animated. You can link multiple layers to a motion guide layer to
have multiple objects follow the same path. A normal layer that is linked to a motion
guide layer becomes a guided layer.

2. It lets you specify a route or path the object is going to follow to move from one place
to another.

Motion
Guide

3. Open a new document and then create a shape and convert it to graphic symbol.
Next select frame 20 and insert a keyframe. Rename Layer 1 as Motion.

4. Click the motion guide button at the bottom of the timeline to insert a motion guide
layer. Click Frame 1 of guide layer and draw a line using the pencil tool. Make sure
you use the smooth modifier. Start drawing from the center of the object to the
position you want the object to move.
 5. Go to Frame 20 of Motion layer use the arrow tool and make sure the snap button
is activated and move the object at the end of the line. Make sure the center of the
object is on the very end of the line.

6. Go back to Frame 1 of Motion layer and under the Property Inspector motion in the
tween pop-up list. Press ENTER to see the result.

7. Shape tweening using Shape hint.

a. To control more complex or improbable shape changes, you can use shape hints.
Shape hints identify points that should correspond in starting and ending shapes.

b. For example, if you are tweening a drawing of a face as it changes expression, you
can use a shape hint to mark each eye. Then, instead of the face becoming an
amorphous tangle while the shape change takes place, each eye remains
recognizable and changes separately during the shift.

c. To see the difference with and without using shape hint, let us create one shape
tweening example.

i. Open a new document. Using the text tool type number 1 on the stage using a large
and black font on Frame 1. Next click on Frame 20 and insert a keyframe. In frame 20
change number 1 to two, then choose Modify > Break Apart to turn it into shape.

ii. Do the same in Frame 1 and choose Modify > Break Apart to turn ‘1’ into shape.

iii. Under the property inspector choose shape in the tween pop-up list and press ENTER
to see the result.

iv. To use the shape hint click Frame 1 and choose

Modify > Shape > Add shape hint. Repeat the step
again to add another shape hint. Position the shape
hint on the top and bottom of both characters in both
Frame 1 and Frame 20. Press ENTER to see the
result.
8. Masking effect

1. For spotlight effects and transitions, you can use a mask layer to create a hole
through which underlying layers are visible. A mask item can be a filled shape, a type
object, an instance of a graphic symbol, or a movie clip. You can group multiple
layers together under a single mask layer to create sophisticated effects.

2. You can use a movie clip as a mask to create a hole through which the contents of
another movie clip are visible.
a. Open a new document. Choose Insert > New symbol and choose movie clip as the
behaviour.

b. Create two layers and name the top layer “Circle” and the bottom one “text”.

c. Create a circle on the circle layer and convert it to a graphic symbol named
“circle”

d. On frame 1 of the text layer type in the word “Masking”, make it a large and thick
font.

e. Insert a keyframe at frame 30 on the text layer.

f. Insert a keyframe at frame 30 on the circle layer.

g. Add motion tweening from frame 1 to frame 30 on the circle layer.

h. In your circle layer on frame 1 place the circle on the left side of the masking text.

i. On frame 30 places the circle on the opposite side of the masking text. The circle
should move across the text now.
j. Place your cursor on the Layer name Circle. Right click and select Mask.
k. Go back to the main stage, open the Library panel and drag your masking movie
clip to the stage.