Boot-Click-Erter

Chapter-2) FRAMES AND KEYFRAMES

Single rectangle in your

timeline and it
contains

t i m e l i n e . Every
a

fifth
"
single step has
frame
your
a greyY

IS a
frames

Animationsi n Actio A Frame

animatioon.
Frames a r e numbered at the top
of the
The black dots
at the
b o t t o m of
some

draw
dr
with a frame number. timeline, you
and is marked into frame o n the contents
ill

k e y t r a m e s . You don't
draw a
frame whose
represent the indicates the

in Flash 8 the stage. Ihe current-frame

urrently displayed
o n the stage.
marker (playhead)

I n This Chapter Working with Frames/Keyframes

use one of the following options
depending upon

inserting
frame or keytrame,
For
You will learn (ror stau
about requirement:
choose
InsertFrame

the significance on a rectangle in the timeline and

of timeline
in Flash Right-click

Keyframe or Insert
Insert Blank Keyframe.
t h e terms Frame, Keyframe and Layer pasting rames/keyfrar
tran frames), Insert
and
copying

inserting, deleting, selecting, Cutting, like

frame-by-fram
ame, OR Timeline and choose
techniques
click on Insert
animations with
different
Click on arectangle in the timeline, then or Blank
Keytrame.
creating simple tween

static frames), Keyframe

of these options: Frame (for
guided-motion

Shape-tween, motion-tween and with

maskin
ng one

option
mask and using
rotation
OR (Static
press F5
reating a
then
With shortcut keys, click rectangle in the timeline,
on a
Flash lools panel for
Elash Tools tor cred
creating o
frame), F6 (Keyframe), F7 (Blank Keyframe).
on the
available
with the basic tools wIill l e d r n
ome
some
basic
basic techniund
techniques used
r chapter, you
modifying objec on the stage. In this
animations from still objects. Do You Know?
Tor creating simple to

When you insert a Keytrame, the content of

the previous keyframe gets copied
WORKING WITH THE TIMELINE below the stage, Is a series of small.
all rectangle blank keyframe, it creates a trame
with d
be present
above or
the new keytrame. When you insert a
timeline, which may
A blank stage.
It contains two important things:
Layers
Frames trames, while
the objects that vou
actual animation takes place within the imate are actions and their procedures that can be applied on tramel keyframe.
Ihe
Table 1 lists some more

specified in layers (Fig. 1). UNUSED FRAMES Table 1: Frame/keyframe actions

LAYER
KEYFRAMES
Frame/Keyframe Action Procedure

|Untitled-1*
To select a single trame Select the frame.
Timeline Scene1
Select the first frame and the last frame while
To select continuous trames
Layer pressing the Shift key.
Press the Ctrl key and select all the frames (one
PLAYHEAD
To select non-continuous trames
by one).
ab
3
120fps 0.2 To select all frames on a layer Click the name of the layer.

Fig. 1: The Timeline

32 33
 Boot-Click-Enter 8
Chapter-2
Right-click on the trame, and ther
Frames click Remov
OR eCREATING ANIMATION number of ways.
These are

To delete the selected frame(s) We can create

animation in Flash in a

Edit Timeline > Remove

including its content from the stage Frames Frame-by-Frame animation
OR Shape-tween animation
Press Shift+F5
Motion-tween animation

Riaht-click on the trame and then click Guided-motion tween

Clear Frames on
selected Frame-by-Frame Animation
lo delete the content of the OR frame separately
and executing

frame(s) on the stage but the frame animation is created by designing each
EditTimeline> Clear Frames Frame-by-Frame
frames in a sequence.
remains on the timeline
OR all these follow:
Frame-by-Frame animation, the steps
are as
create a
To the stage
Press Alt+ Backspace Select Text tool from the Tools panel and insert some text on

Step
lo copy the selected frame(s) in the Select the frame(s)> Right-click (example: Welcome).
Frames
Copy StepChange the font of the text with the help of tools
available on Property Inspector
clipboard
window.
lo paste the copied frame with its Riaht-click at the place
the timeline
on
whereere break the text box apart so that each letter becomes a

content to the destination you want to paste and click on Paste StepPress Ctrl+ B twice to
Frames separate object.
the first keyframe to the next frame.
LAYERS Step Press F6 key from the keyboard to copy
its color. Now, move the letter
A Layer is a row with frames in the timeline. You can create multiple layers. StepIn the nextframe, select the first letter and change
you organize the artwork in your document. You can draw and edit objects on onea
ayers help to another place on the stage.
layer StepRepeat steps 4 and 5 for each letter in the text.
without affecting objects on another layer (Fig. 2).
ACTIVE LAYER
StepTo play the movie:

Click on the first frame, then click on the Control menu and press Play.
.
Untited-1" OR
Tmeine Scene 1
n
Press Enter key to play it once.
5 5
60
DEyer 5 . --------- - - ----------- OR
DLzyer3 . .
************** Press Ctrl + Enter keys to play the movie continuously till it stops.
LAYERS DLayer 1 -- - - - --1 ---

Dyer6
D2er 4
Fig. 2: Timeline showing multiple Layers Do You Know?
Working with Layers If the speed of your animation is too fast, reduce the frame rate by clicking on
To add a layer, click on the Insert Layer icon o n the timeline panel.
new Modify Document. Reduce the frame rate and try again.
insert a
This will
layer directly above the layer that is currently selected. Double-click the
new
name to change it. You layer
may also easily rearrange the order of
layer and then dragging it to the selected location your layers by clicking a

layer, select it by clicking on the layer name and then alongwith the other layers. lo delete a
clicking on the Trash can icon
34
 Chapter-2

Practice Time
Boot-Click-Enter 8

Create an animation showing a bouncing ball.

Hint: Draw the ball

in
the first frame. Keep copying the
position of the ball in every subsequent keyframe
eyframe and cha Do You Know?
Shape-lween Animation onge the Do not convert an object to symbol if you want to shape-tween l
another method you can use for
Shape-tweening is credting
It iS an animation technique
technique thatanimations.
tra
shape-tweening is morphing.
another. Iry the steps given
new Flash
below.
document.
AnotAnonehershappeterm isr Note:
Symbols cannot be shape-tweened. Make sure that the line is smooth and not broken

Step Open a
nto ensure correct tweening (Fig. 5).
Tools from the Tools panel to
Step Select appropriate in the first frame. create a
circle) on the stage color Timeline Scene1
Step Select frame number 3 on the sdme layer and press F6 I
shape (sov.
the keyframe. PY Layer 1
Select the last frame (35 in this example) and delete th. Fig. 5: Broken Tween
Step circle.
Step Now, new shape
create a in this frame (say a
diamond) of
trame numbers 1 and 35
a
differensnt color. Practice Time
Step Select any frame between and select the
from Tween pop-up menu in the Proper Inspector (Fig. 3). Shape opion Create a Flash animation in which a rectangle changes into a kite.

PropertiesFilters Rarameters
Frame
Tween: Shape Sound: None Motion-Tween Animation ball animation.
None In the Frame-by-Frame animation activity, you have created a bouncing
<Frama Labes Ease: Motion Effect: None called that provides a shortcut
There is another animation technique Motion-tweening
Shape need to convert the object
Blend: Distibubve Sync: Event Edit for the same animation. lo understand motion-tweening, you
Label type:

Name
Repeat
No sound selected
or drawing into a symbol.

To do so, the steps are as follows:

Fig. 3: The shape-tween property box ball in the first frame of 1. Place it at the starting place on the stage
StepDrawa layer
(Fig. 6).
StepSelect frame number 75 and press F6. Draw a star in this fram

Step Click between frame 35 and 75, and select Shape option under Twean
n the
Property Inspector. The timeline will appear as shown in figure 4 below.

Step Play the movie.

Untitled-1
Tmeine Scene 1

. 10 15..., ,.
Dayer 1
TIMELINENOTnON ECUTOR 45 50 55 60 6570 5

Fig. 6: The starting position oft the object

Fig. 4: Timeline showing a shape-tween animation

36 87
 Boot-Click-Enter 5

Chapter-2
Guided-Motion Tween Animation the grapnic
Step If you have used more than select all the
the
complete

that when you create a

motion-tween
another
animation,
method

the ball, have noticed provides

shape with selection tool
one
tools to design ard to group
design You must line from keyframe to keyframe. Flash
path for your
and press Ctrl + G from the movesin a straight
A motion guide is a
objects into one. symbol involves using a motion guide.
Step Select of motion tweening that to the last keytrame.
the object (ball). to follow from the first keyframe
Click on Modify Converta aclick
Symbol. hoose the
on OK.
graphic symbol
menu bar or you can press F8
key to convertthe symbol hd given below: the stage
Graphic option from this dialog box,
ad
Try the steps 1. Place it at the
starting place
on
name

ball in the first frame of layer

Step Draw a
(Fig. 6).
Do You Know? have used more tools to design the ball,
than one
select the complete
al

More the number of frames used, better is your animatO

Stepltyou Ctrl+ G from the keyboard
to group
with the selection tool and press
shape
the objects. Convert to
Select the object (ball). Click on Modify m e n u
and then click on the
r0.
Step this dialog9
the keyframe by pressingthe ball. the Graphic option from
Step y r a m e s and copy of Symbol option from the menu bar. Choose
tep Select the keyframe and change the position box, name the symbol and click Ok.
new
and select Motion option from t he
Step any frame between
the two frames Select frame 40 and press F6 to copy the keyframe.
elect Inspector (Fig. Step
m e n u in the Property
ween pop-up Select any frame in the centre and click on Motion under Tween in Property
Step
Inspector.
PrapertiesFiters Parameters Motion Guide option (Fig. 9) or
Tween: Moton Scale
Sourid:None
Step Now right-click the first layer and select Add
Frame
None dit..
Effect: None
Edit.. click on Add Motion Guide icon . This will insert a guided layer above
F e r e LEce> Ease MOL
layer 1 (Fig. 10).
Shape 0imes
Syic: |Event Repeat 1
Labal type: Rotate: Auto No sound selected tle Eit Tinsert Moify Text Cormnandis Co
USync LUSiap
O r i e n t to pati
Tocs Ltied-
property box Tenelne Scene 1
Fig. 7: The motion-tween

of the ball in bouncine Laye

changing the position Show All
Step Repeat steps 4 to 6 and keep of the ball on the arouid
Lock Otherss
the tinal pOsition
direction. The last frame will show Hide Others

your changes.
the bounce. Press Ctrl + S to
save Srsert Layer
teit
Delete Layer
appedrs as shown in figure 8.
the movie. The timeline of
motion-tween
Step Play Yew
Guie
Adel Sicticn Guidle

TMLNEaoTONEOTO Coks MMask

1. 5 2 30 35. Eu 65 70 75 Show Masking

Pe 2 D InsertnFolder
Guide: L
Delete Folder
Expand fo tder
A Layer 1
Collapse Folder

Expand All tolders

O
Collapse Al Folders

Fig. 8: Timeline showing motion-tween Properbes

Fig. 9: The Add Motion Guide Fig. 10: The guided layer above layer 1

38 39
 Boot-Click-Enter 8
Chapter-2
Step Select the first icon
frame in
Select the Pencil tool Show/Hide All Layers
and draw the the guide layer (and no Step Hide the motion guide layer by click on

required path (Fig. 11). Step Play the movie by pressing Ctrl + Enter keys from the keyboard.

Scm MASKING IN FLASH

GUIDE LAYER hole througn wn
which you create a
Masking i5a very interesting concept of Flash in in it. Masking auow
like a wall with a window
underlying layer is visible. A masking layer is be used for making spot light kind of effects.
hide parts of an object or text. It can
you to also animate
lunar/solar eclipse. You can
For example, showinga torch light or effect of
the mask or the layers beneath it.
PATH DRAwN WITH
PENCIL TOOL Creating a Mask
To understand the masking effect, try the steps given below:
a saved picture
w e have imported
Step Create a n e w Flash document. In this example, Stage> select
to the stage (Fig. 14) by clicking on File > Import > Import
to
11: Guided Motion
Fig. the path where the picture is saved.

Do You Know? first and

neda Fash Profesional8- [Untitled-2

View Insert Modity Tat Commands Control Window Help

to specity
the action n the the last Unttled-2"

ntweened animation, you only have Tmelne Scene 1

frames
the
between two keytrames.
Keytrames. Flash automatically fills the S1 15223 5
DEye10

Step Next, select the first frame layer 1. Select

in
the
Snap cheekbox in the Pron
of the object to the motion
the registration point ath. a 20fp 0.0
Inspector. This will snap that the centre point of
the ball is exactly ov
er
Place the object (ball) such the
starting point of the path (Fig. 12).

12: The object the starting point of the drawn path

Fig. on

Select the last frame (40 in this example) in layer 1 and place the
now
centre
tre
Step
point of the ball exactly on the end point of the drawn path (Fig. 13).
Fig. 14: Importing a Picture to the Stage
Step Select a distant frame, for example, 50 and press F6 key to copy frames.
Step Insert another layer (layer 2) in the document by clicking on lnsert Layer icon
StepSelect the first frame of layer 2 and draw any shape at the initial place on the
picture. In this example, we have drawn a circle (Fig. 15). Press F6 in Frame 50
Fig. 13: The object on the end point of the drawn path to copy frames.

40
Chapter-2

Boot-Click-Enter 8
L

it is

Step Amask layer icon indicates the mask layer. The layer immediately below
the mask layer, and its contents can be seen through
the filled ared on
linked to to a maskd
the mask. Ihe masked layer name is indented, and its icon changes
layer icon (Fig. 18).
i c m a a Rah Prole
Fi v e t Modiky Tet Caneands Coetul n d
Tedk
meine ne 1
THE MASK e
LAYER ICON A

Fig. 15: Drawing a Shape for Masking

Step Convert the shape into graphic symbol. a

Step Now, in layer 2 at regular intervals, copy trames by pressine

Motion-tween between each interval by clicking on
6 key and&c
the
Tweenin Property Inspector (Fig. 16).
interval,
Motion option create
of the circle
trom
change the po
postion Fig. 18: Masking Layer
Properties Filters Parameters Save and play the movie and the effect. You will the circle moves
Tveen: None
Step see see as
Frame Sound: | None across the screen, the image behind it is visible. The circle in the mask layer works
None
Frame Labe'>
MOtod Effect: None like a window in a
wal
Snape
Label type:
Sync:EVent JEdt...
Nane Repeat
No sound selected
1 Do YouKnow?
You can decrease the frame rate to lower the speed of the animation. For this,
Fig. 16: Creating motion-tween click on Modify > Document option from the menu bar and decrease the
Step Now, right-click on the layers name (layer 2) in the timeline and Frame rate number.
option from the menu (Fig. 17). select Mask
Macromeda Pash Prcfsional 8-JUnftied-21
Fle Edt Vie Inset Mody Tet Commands Control
Rotation with Masking
The mask can be rotated using rotate command of Flash which
gets activated when you
Uatece Untitied-2
R create a motion-tween. lo do rotation with marking, the steps are as follows:
Trraine Scene1
Step Import a picture on the stage.
Shou A Step Set the stage according to the image size by clicking Modify Document and
A L2y Lock Others then selecting Contents option from the Match.
Hde Others

Incet Layer
Step Select Frame 50 and click F6 from the keyboard to copy the frame.
Deete Lrye Step Lock layer 1 from the timeline's Lock button
Guide Step Insert a new layer, layer 2, on the timeline.
Adá Motion Guide

Mask Step Draw a Polystar in the centre of the stage (Fig. 19). You can draw any shape
Colars
using various tools on the toolbar.
Fig. 17: Selecting the Mask option
Step Convert the shape into graphic symbol a

42
43
 Boot-Click-Enter 8

Chapter-2 LErene Scene 1

animations using simple
DEye 2 anim
Dyer interesting developers
create and
how Flash ca be used to powertul,
have seen more

So, you has become

more complicated web-based

tools. Recently, Flash technology

and easy
to truly appreciate its power
mo to create
interactive
animations
and

have begun tutorials with

c r e a t e small
Flash is used to
applications. tool.
exercises and is a powerful e-learning
self-testing

Let Us Recall own

has itS
each layer
containing layers, and
series ot small rectangles
limeline is a

Fig. 19: Drawing a shape on the masking layer set of frames

contains an action is the keytrame.
insert a keytrame (by pressina F& The frame that
2),
Step On the masking layer (layer with frames in the timeline.
select Motion from Tween in ProDertu I A Layer is a row
in the timeline.
Step On layer
the CW option
2, click and
from the Direction menu of Rotate (Fig. 2o) Inspector and sele60,ect You can select, insert, remove, copy
animation, you
and paste frames/keyframes
create an object
for each frame
so as to

In the trame-by-frame
Properties Filtersarametes an animation sequence.
Tween: Motion sale Sound:|None produce transforms one shape into another
Frame

Ease: 0 Edt. Efiect: None Shape-tweening is an animation technique that

Frame La
JEdt... location to another in
subsequent
m o v e s from one
Label type Rotate Sync:Evernt Repedt
In Motion-tweening, the object the ending keytrames.
|UonerAu
tto
No sound selected
have to define the action in the starting and
Nane
frames. You just and drawing
a guided layer
CCW
define the path of motion of an object by adding
You c a n

Fig. 20: Rotating an object the path on it.

Masking allows you to hide part

of an object or text.
layer 2 and select Mask option trom the menu.
nu. The
Ihe
Step Right-click on sho.
stage would
now appear as shown in figure 21.
HANDS ON
activity.
of layers with the help of the following
Let us practice the concept
Tnee * Open Flash and follow these steps.
in Flash.
OLy 2
Step Open a new flash document You can also
Step In the first of layer 1, import the picture of a basketball.
keyframe
a symbol.
draw the basketball it you want. Convert it into
Click frame number 50 and press F6. In between frame 1 and 50, click and
Step on
select Motion option under Tween in the Property Inspector.
the bal.
Step Insert a layer and draw or import a basketball net away from
new

Convert it into a symbol. Press Fó in frame 50 of this layer to copy keytrames.

from
Step Now, add a guided layer above layer 1 and draw the path of the ball
down to the ground
original position towards the net and then through the net
(as if the ball is passing through the net). See figure 22 for reference
Fig. 21: Masking layer
Define the beginning and the end point of the ball on layer 1.
Step Save and press Enter to play the movie. Step
45
 Chapter-2
Ltrl * Enter keys from the
the keyboard.
OStep Play the movie by pressing Boot-Click-Eter
Untded-1
Scene 1
Tmene
D 101520253

yer 2
B. Fill in the blanks.
Gurde L..
Layer 1 1. A Flash movie is made up of series ot.
timeline.
Uoo S1 20fs a is a row with its frames in the
2 A document.
3. You can insert layers in a Flash
fast.
animation is running very
You reduce t h e - if the
4. can -

once.
the animation
5 Press the -
key trom the keyboard to play
the parts indicated with arrows in the following figure.
C. Label

|Tmeine Scene 1

DLayer 1

Fig 22
Answer Type Questions
D. Very Short
into series of frames.
Name the object present on Flash s c r e e n that is divided
xercises 2 Name any two animation techniques.
till stopped by the user
3. Which keyboard controls play a movie continuously
READ AND ANSWER tor motion
4. Name the animation technique in which you
can define your own path
A. Tick (V) the correct option. of an object on the stage.

1. A timeline is made up of layers and. 5. What is the name of the default layer on the timeline?
(a) More layers (6) Frames (c) Stage (d) Tools Short Answer Type Questions
2. In the - animation techniques, the content of
each frame is 1. Define the term Animation.
manually one by one. sset What the main components of a timeline? Write briefly about each component.
2 are

(a) Motion-Tween (b) Shape-lween 3. Write a brief note about any two quick animation techniques.
(c) Frame-by-Frame (d) Guided-Motion Tween 4. Write the steps to insert a keyframe in the timeline.
3. ldentify the tween which does not work on symbols. 5. What do you understand by Masking in Flash animation.
(a) Motion-Iween (b) Shape-Twee F. Long Answer Iype Questions

(c) Frame-by-Frame (d) Guided-Motion Tween 1. Write briefly about all actions related to frames or keytrames.
2. Differentiate between a frame and keyframe
4. By default, the total number of layers present on a Flash document are.
3. Write the steps to animate an object using shape-tween option.
(a) One (b) Two (c) Three (d) Four 4. How do you convert an object into a symbol? Write in steps.
5. Name the term used for the actual work area in a Flash document. flash animation? Explain
5. What is the significance of having multiple layers in a
(a) Timeline (b) Frames (c) Scene (d) Stage briefly with the help of an example.
46
47