2D Animation

What is Animation

“To animate” means “to give life to”. Animations are created from a sequence of still images. The images
are displayed rapidly in succession so that the eye is fooled into perceiving continuous motion. This is
because of the phenomenon called Persistence of Vision. This is the tendency of the eye and brain to
continue to perceive an image even after it has disappeared.

For example, in the above shown figure, a sequence of images of a character in various positions gives the
illusion of motion when displayed rapidly one after another.

Animation generally deals with hand drawn images in contrast to motion video which deals with actual
photographs of real-world objects taken through a camera, although both uses the concept of displaying a
sequence of images one after another to depict motion.

Historical Background

In the later half of 19th century John Marey and Edward Muybridge developed devices that took sequences
of photographs of moving objects, and used it to take pictures of galloping horses along a racetrack in
California. The next big technological advance came with Thomas Edison’s invention of the Kinetograph,
which was a type of camera that could take upto10 photographs per second.
In the beginning of the 20th century short animation films were created in which each frame was a separate
drawing on paper. In 1928 the Disney production studio produced the first full color cartoon with sound,
staring Mickey Mouse. Computers entered the picture after World War II, with simple experiments in
computer generated graphics during the 1959s. The integration between computer graphics and film was
first done in the 1970s for creating special effects in feature films like 2001: A space Odyssey. Throughout
the 80s and 90s companies such as Industrial Light and Magic, Pacific Data Images and Pixar brought ever
more sophisticated computer generated imagery to video and film, culminating in the release of Toy Story
by Pixar in 1995 – the first completely computer generated animated feature film.

Uses of Animation

The application of animation to graphics has following impacts or effects:

• This increases the interest of viewer and creates a lasting impression. By adding the appearance of
movement to a static object, the resulting image stimulates emotion and builds excitement. Due to
this reason, animation is at the heart of most computer games.

• It makes the graphics more realistic and exciting.

• It provides an excellent way to view industrial and business products or service in simulation.
[Especially for items that have working ports such as gears, motors or manufacturing equipments.]

• It acts as a time-based and space-based medium to control over the pace of communicated
message.

Basically, the animation becomes much more effective than motion video in situations where the ultimate
goal of a picture is to convey information to the viewers. A picture that is free of complications of the
shadows and reflections in its real environment that is, simpler, may be more useful to visualize an abstract
concept than a photographic realism. It is often more effective to alter the reality intentionally to get the
simplest view of a complex process by applying the technique of animation.
Uses of Animation

In multimedia, animation is regarded as an important and useful tool for communicating information. The
main application areas of animation include:

• Marketing and advertising

• Staff And Program Development Training Presentations

• Educational Multimedia Programs

• Training Programs

• Sports

• Edutainment Titles

• Health-Care Programs

• Games

• Process Simulation

• Cyber Art

• Interactive Magazines

• The Internet

Keyframes & Tweening

In traditional animation lead animators or experts draw the most important frames, where there is a major
change in the course of action. These frames are called ‘key frames’. The intermediate frames between
keyframes are drawn by the assistant animators. This process is called ‘tweening’ derived from ‘in-
between’.

For example, for depicting the motion of the rectangle moving from lower left corner to the upper middle
portion and again to the lower right corner, the keyframes where the course of action changes are shown in
the Fig:2. The middle frames between the keyframes are the intermediate frames.

Computer Based Animation

Computer based animation production is much quicker than the traditional process and requires less effort.
The drawings are more accurate and are of better quality. Computers can be used to assist in producing
animation, by employing them to draw the in-between frames. Using computer software the lead animator
draws the keyframes and stores them electronically within the computer. The computer then generates or
tweens intermediate frames by interpolating between key frame pairs.

Cel Animation

‘Cel Animation’ is a term from traditional animation. The word ‘cel’ comes from the word ‘celluloid’ the
material that made up early motion picture film and refers to the transparent piece of film that is used in
hand-drawn animation. Animation cels are generally layered, one on top of the other, to produce a single
animation frame. Layering enables the animator to isolate and redraw only parts of the image that change
between successive frames. A frame consists of the background cel and the overlying cels. By drawing
each frame on transparent layers, the animator can lay successive frames one on top of the other and see
at a glance how the animation progresses through time.

Path Animation

Computers can be used to produce another type of animation different from rendered animation. It involves
movement of a sprite along path. A ‘sprite’ is a graphic element, which changes over time. A sprite can be
made to move over a path that is represented internally within the computer as a mathematical formula.
During playback, the formula is used to generate the path on the screen and the sprite is made to move
along it. In this case there are no frame sequences or rendering, and hence it is different from rendered
animation. This type of animation is called Path animation or Sprite animation. Since there are no frame
sequences, the file sizes are smaller than rendered animation.
Transformation

Animation involves movement or change of objects. There are various types of transformation: Translation,
Rotation and Scaling.

- Translation involves movement in straight lines

- Rotation involves clockwise or counter clockwise rotation of an object

- Scaling involve changing the size of part or whole of an object.

We have to keep track of objects at a particular instance of time. For that we need some kind of co-ordinate
system to quantitatively specify the objects location.

Co-ordinate System

In any 2D package, to place objects specifically, a precise system of defining locations is required. In 2-D
plane, this requirement is fulfilled by two lines that are perpendicular to each other with
distances marked on each line allowing to locate objects accurately on the plane. This system
is called a coordinate system and the numbers that identify where a point or pixel is are
known as coordinate of a point.
In the figure shown here, the two lines drawn perpendicular to each other are called axes of the coordinate
system. The horizontal axis is known as the X-axis and the vertical axis is known as the Y-axis. The point of
intersection between two axes is the origin of the coordinate and is expressed as (0,0).

2D Versus 3D Animation

2D animation programs does not take into consideration the depth of objects and typically depict animated
objects on flat surfaces. These are drawn taking into account two co-ordinate axes along X and Y
directions.3D animation monitors objects by considering space co-ordinates and usually involves modeling,
rendering and adding surface properties, lighting and camera motions. These are usually more complex
than 2D animations and have to take into account three axes along X, Y and Z directions to define locations
of objects in space.

Animation Techniques

Some of the techniques employed in building up an animation sequence, either in the traditional way or
computer-based are:

• Onion-skinning

• Motion-cycling and

• Masking

Animation Techniques

Onion-skinning

Onion-skinning is a drawing technique borrowed from traditional cel animation that helps the animator
create the illusion of smooth motion. Rather than working on each frame in isolation animators lay these
transparent cels one on top of the other. This enables them to see previous and following frames while they
are drawing the current frame. Onion-skinning is an easy way to complete sequence of frames at a glance
and to see how each frame flows into the frames before and after.
Animation Techniques

Motion cycling

Human and animal motion such as walking, running and flying is mainly a repetitive action that is best
represented by a cycle. A walk cycle requires from 8 to 12 frames.

This can be illustrated with the help of the following example. It has two halves. The first half begins at an
extreme: the feet are at their farthest apart, with the back toe and front heel touching the ground. In the
remainder of the first half i.e. frames 3 and 4, the legs trade position. So do the arms- but when the left leg
is forward, the right arm is forward, and vice versa. The second half of the cycle i.e. frames 5 to 8 is simply
a variation of the first half, but with arms and legs reversed. The finished walking character can be used as
a moving cel i.e. a sprite.

Animation Techniques

Masking

Artists who use airbrushes use cutouts of a red plastic called rubylith to protect parts of their work from the
application of paint. A mask in a computer program is in a sense a model of the plastic masks- it protects
parts of a frame from the application of ink. By this technique you can make animated object move “behind”
the protected area.

Special Effects
Apart from physically moving an animated object on the screen, certain other changes to the objects can
also be incorporated to enhance the overall effect of the animation sequence. These are generally called
Special Effects.
Some of them are:

• Color Cycling

• Morphing

• Warping

Special Effects

Color cycling

Color Cycling allows you to change color of objects by cycling through a range of colors in the color wheel.
The software provided smooth transitions from one color to another.

Morphing

Morphing is the process of smoothly interpolating between two different images. The first frame and last
frame is specified and the computer generates the intermediate frames. When played back it appears that
the first image gradually changes into the second image.

Warping

Warping is a method of distorting an object by specifying the first and last frames and letting the computer
generate the intermediate frames.

Animation File Formats

Warping is a method of distorting an object by specifying the first and last frames and letting the computer
generate the intermediate frames.
The most popular file formats for creating 2D animation are:

• Animated GIF

• QuickTime

• AVI

• FLIC

Animation File Formats

Animated GIF
The GIF format has the capability of carrying multiple images in a single file. Since they are limited to 256
colors, their sizes are small and hence extensively used for web. It can support transparent areas.
QuickTime
QuickTime is multimedia system extension for both the Macintosh and Windows computers. QuickTime
architecture provides - standard interface, playback and compression/decompression features. They can
be played back by a freely downloadable player called movie player. QuickTime supports streaming. That
is why they are extensively used on the web.
AVI
The full form of AVI is the Audio Video Interleave. It is the video and animation format for Video for
Windows. On Windows platform Windows Media Player is used to play the AVI files. Video editing software
like Premiere and Autodesk Animator can be used to compile multiple frames into AVI movies.
FLIC
FLIC format is proprietary AutoDesk format for animations. It is supported by the Autodesk Animator Studio
and Autodesk 3D studio programs. There are two versions of the FLIC format, represented by the
filenames .FLI and .FLC. The filename extension .CEL indicates both kinds of FLIC. FLIC movies are
limited to 256 colors at a time. FLIC files do not have sound tracks or mask layers.

Tools for 2D Animation

The widely used authoring tools for animation are as follows:

• Macromedia Director
• Authoring Professional
• Asymetrix ToolBook

Popular Stand-alone Animation Software:

• Autodesk Animator Studio

• Macromedia Flash
• GIF Animator

Introduction

Using Flash, you can animate objects to make them appear to move across the Stage and/or change their
shape, size, color, opacity, rotation, and other properties. You can create frame-by-frame animation, in
which you create a separate image for each frame. You can also create tweened animation, in which you
create the first and last frames of an animation and instruct Flash to create the frames in between.

Flash Basics overview

Flash movies are graphics and animation mainly targeted for Web use. They consist primarily of vector
graphics, but they can also contain imported bitmap graphics and sounds. Flash movies can incorporate
interactivity to permit input from viewers, and you can create nonlinear movies that can interact with other
Web applications. Web designers use Flash to create navigation controls, animated logos, long-form
animations with synchronized sound, and even complete, sensory-rich Web sites. Flash movies are
compact, vector graphics, so they download rapidly and scale to the viewer's screen size.

You've probably watched and interacted with Flash movies on many Web sites. Flash movies are viewed in
a Flash Player, and it can be downloaded for free from the Macromedia Web site. The Flash Player resides
on the local computer, where it plays back movies in browsers or as stand-alone applications. Viewing a
Flash movie on the Flash Player is similar to viewing videotape on a VCR—the Flash Player is the device
used to display the movies you create in the Flash authoring application.

Before we really start with Flash 5

• Flash is an architectural program; You need to think and plan vertically (Layers), horizontally
(Timeline frames) and structurally (Symbols). Mastery over all three axes is mastery of Flash
architecture.
• Plan your files before starting authoring. This will save your development time and also will free your
mind to add creativity and sophistication to your final product.
• You can sketch in Flash or can place scanned drawings and bitmaps. Any drawn object can be
used over and over again by making it a symbol.
 • Vector file sizes (such as the text and lines that Flash draws) are unaffected by changes in scale.
So be bold and make it big if you want.
• The contents of the Library are generally not exported with the movie, so put as much you need in
the Library.
• Use Layers to gain maximum control over your items i.e. to keep them organized and easily
editable. Flash flattens the layers when it exports, so layers add depth to development without
adding bytes to final product.
• ActionScript is a full-blown object-oriented language, much like JavaScript. So, you need to
structure your movies in architecturally savvy ways to take advantage of the power of ActionScript.
• Use frame labels, rather than frame numbers, as a way to enable significant flexibility without
requiring major revision. Use comments to help you keep track of what is going on. They are not
exported with .SWF files.

The Stage and the Timeline

Like films, Flash movies divide lengths of
time into frames. The Stage is where you
compose the content for individual frames in
the movie, drawing artwork on it directly or
arranging imported artwork.

The Stage is where you compose individual

frames in a movie.
 The Timeline is where you coordinate the
timing of the animation and assemble
separate layers.

Layers act like stacked sheets of transparent acetate, keeping artwork

separate so you can combine different elements into a cohesive visual
image.
The logo, chair, and navigation controls in the movie are each on separate
layers.

Symbols and Instances

Symbols are reusable elements that you use with a movie. Symbols can be graphics, buttons, movie
clips, sound files, or fonts. When you create a symbol, the symbol is stored in the file's library. When you
place a symbol on the Stage, you create an instance of that symbol.

Symbols reduce file size because, regardless of how many

instances of a symbol you create, Flash stores the symbol in the
file only once. It is a good idea to use symbols, animated or
otherwise, for every element that appears more than once in a
movie. You can modify the properties of an instance without
affecting the master symbol, and you can edit the master symbol
to change all instances.

Symbols can be edited in place on the Stage. Other elements on

the Stage are visible but dimmed. You can also edit a symbol in a
separate window. When you edit a symbol, the Timeline window
displays only the Timeline of the symbol you are editing.

You can locate and open a symbol in the library from within the Movie Explorer, using the Find in Library
command.
Editing a symbol in isolation (left) and editing a symbol in its context in the movie.

Symbols and interactive movies

Symbols are also an integral part of creating interactive movies; you can use instances of symbols to create
interactivity in a movie. For example, you can create a button symbol that changes in response to mouse
actions and place an instance of the symbol on the Stage. You use another type of symbol, called a movie
clip, to create sophisticated interactive movies.

The Library window

The Library window is where you store

and organize symbols created in Flash,
as well as imported files, including
sound files, bitmap graphics, and
QuickTime movies. The Library window
lets you organize library items in folders,
see how often an item is used in a
movie, and sort items by type.

Panels
To view, organize, and modify elements in a Flash movie, you can use floating panels that contain
commands and options related to each type of element. Panels enable you to modify symbols, instances,
colors, type, frames, and other elements.

You can use panels to customize the Flash interface, by displaying the panels you need for a specific task
and hiding other panels.

Panels
Using panels

Floating panels help you view, organize, and change elements

in a movie. The options available on panels control the
characteristics of selected elements.
Panels in Flash let you work with objects, colors, text,
instances, frames, scenes, and entire movies. For example,
you use the Character panel for selecting type character
attributes, and the Frame panel for entering frame labels and
choosing tweening options. To view the complete list of panels
available in Flash, choose Window > Panels.

You can show, hide, group, and resize panels as you

work. You can also show and hide several panels,
including the Info, Mixer, Instance, Frame, and Actions
panels, using buttons in the Launcher bar at the bottom
of the application window.

You can group panels together in custom arrangements,

and you can save custom panel layouts. You can reset
panel display to the default layout (displaying the Info,
Mixer, Character, and Instance panels to the right of the
application window) or to a custom layout that you have
saved previously.

Most panels include a pop-up menu with additional options. The pop-up menu is indicated by a triangle in
the panel's upper right corner. (If the triangle is dimmed, there is no pop-up menu for that panel.)

Panels
To open a panel:
Choose Window > Panels and select the desired panel from the list.

To close a panel, do one of the following:

Click the Close box in the upper right corner (Windows) or upper left corner (Macintosh).
Choose Window > Panels and select the desired panel from the list.
Right-click (Windows) or Control-click (Macintosh) the panel's tab and choose Close Panel
from the context menu.

To open or close panels using the Launcher bar:

In the Launcher bar, click the button for the Info, Color Mixer, Character, Instance, or Actions
panel.
Note: You can also open or close the Library window or the Movie Explorer using the Launcher
bar.

To use a panel's pop-up options menu:

Click the triangle in the panel's upper right corner to view the menu.
Click an item in the menu.

To close all panels:

Choose Window > Close All Panels.

To group panels:
Drag a panel by its tab onto the tab of another panel.

To bring a panel within a group to the front:

Click the panel's tab.

To ungroup a panel into a separate window:

Drag the panel by its tab to the outside of its window.

To move a panel or a panel group:

Drag the panel or group by its title bar.

To save a custom panel layout:

Choose Window > Save Panel Layout. Enter a name for the layout and click OK.

To delete a custom layout:

Open the Flash 5 application folder on your hard drive and delete the Panel Sets file.

To select a panel layout:

Choose Window > Panel Sets.
From the submenu, choose Default Layout to reset panels to the default layout, or choose a
custom layout that you have saved previously.

To resize a panel:
Drag the panel's lower right corner (Windows) or drag the size box at the panel's lower right corner
(Macintosh).

To collapse a panel or a panel group to its title bar and tab only:
Double-click the title bar. Double-click the title bar again to return the panel or group to its previous
size.

To collapse a panel or panel group to its title bar (Macintosh only):

Click the collapse box at the right end of the title bar. Click the box again to return the panel or
group to its previous size.
Flash drawing and painting tools

Flash provides various tools for drawing freeform or precise lines, shapes, and paths, and painting
filled objects.

To draw freeform lines and shapes as if drawing with a real pencil, you use the Pencil tool.
To draw precise paths as straight or curved lines, you use the Pen tool.
To draw basic geometric shapes, you use the Line, Oval, and Rectangle tools.
To create brushlike strokes as if painting with a brush, you use the Brush tool.

When you use a drawing or painting tool to create an object, the tool applies the current stroke and fill
attributes to the object. To change the stroke and fill attributes of existing objects, you can use the Paint
Bucket and Ink Bottle tools.

You can reshape lines and shape outlines in a variety of ways after you create them. Fills and strokes are
treated as separate objects. You can select fills and strokes separately to move or modify them.

You can use snapping to automatically align elements with each other and with the drawing grid or guides.

Flash drawing and painting tools

Specifying stroke and fill attributes

To specify stroke or fill color, you can use the Stroke and Fill controls in the toolbox, the Ink Bottle and
Paint Bucket tools, or the Stroke panel and Fill panel. To modify stroke style or line weight, you use the
Stroke panel. To create or edit gradient fills or apply bitmap fills, you use the Fill panel.

When you create new objects with the drawing and painting tools, the objects are painted with the attributes
specified in the tools' Stroke and Fill controls. You can also change the stroke and fill attributes of existing
objects.

You can copy stroke or fill attributes from one object to another using the Eyedropper tool.
Reshaping lines and shape outlines

You can reshape lines and shape outlines created with the Pencil, Brush, Line, Oval, or
Rectangle tools by dragging with the Arrow tool, or by optimizing their curves.

You can also use the Subselection tool to display points on lines and shape outlines and modify the lines
and outlines by adjusting the points.

To display anchor points on a line or shape outline created with the Pencil, Brush, Line,
Oval, or Rectangle tools:
Select the Subselection tool.
Click on the line or shape outline.

Using the grid, guides, and rulers

When grids are displayed in a movie, they appear as lines behind the artwork in all scenes. You can snap
objects to the grid, and you can modify the grid size and grid line color.

When rulers are displayed, they appear along the top and left sides of the movie. You can select the unit of
measure used in the rulers. When you move an element on the Stage with the rulers displayed, lines
indicating the element's dimensions appear on the rulers.

You can drag horizontal and vertical guides from the rulers onto the Stage when the rulers are displayed.
You can move guides, lock guides, hide guides, and remove guides. You can also snap objects to guides
and change guide color. Draggable guides appear only in the Timeline in which they were created.

Note: To create custom guides or irregular guides, you use guide layers.

To display or hide rulers:

Choose View > Rulers.
To specify the rulers' unit of measure:
1. Choose Modify > Movie.
2. Select an option from the Ruler Units pop-up menu.
To display or hide the drawing grid or guides:
Choose View > Grid > Show Grid or View > Guides > Show Guides.
Choose View > Grid > Edit Grid or View > Guides > Edit Guides, and select Show Grid or
Show Guides in the dialog box.
Note: If the grid is visible and Snap to Grid is turned on when you create guides, guides will snap
to the grid.

To turn snapping to grid lines or guides on or off, do one of the following:

Choose View > Grid > Snap to Grid or View > Guides > Snap to Guides.
Choose View > Grid > Edit Grid or View > Guides > Edit Guides, and select Snap to Grid
or Snap to Guides in the dialog box.
Note: Snapping to guides takes precedence over snapping to the grid in places where guides fall
between grid lines.
To specify snapping tolerance for the grid or guides:
Choose View > Grid > Edit Grid or View > Guides > Edit Guides.
Select an option from the Snap Accuracy pop-up menu in the dialog box.
To change grid or guide line color:
Choose View > Grid > Edit Grid or View > Guides > Edit Guides.
Click the triangle next to the color box and select a color from the palette. The default grid
line color is gray. The default guideline color is green.
To change the spacing of the grid:
 Choose View > Grid > Edit Grid.
In the Grid dialog box, enter values for vertical and horizontal grid spacing, and click OK.
To move a guide:
Use the Arrow tool to click and drag the guide.
To lock guides or clear all guides:
Choose View > Guides > Edit Guides, and then choose Lock Guides or Clear All and click
OK.
Note: Clear All Guides removes all guides from the current scene.
To remove a guide:
With guides unlocked, use the Arrow tool to drag the guide to the horizontal or vertical ruler.

Creating Animation overview

You create animation by changing the content of frames in sequence. You can make any object move
across the Stage, change shape, increase or decrease its size, rotate, change color, or fade in or out.
Changes can occur independently of, or simultaneously with, other changes. For example, you can make
an object increase its size and fade in as it moves across the Stage.

There are two methods for creating an animation sequence in Flash: frame-by-frame animation and
tweened animation. In frame-by-frame animation you create the image in every frame. In tweened
animation, you create starting and ending frames and allow Flash to create the frames in between. Flash
internally calculates and assigns the values for the object's size, rotation, color, or other attributes evenly
between the starting and ending frames to create the appearance of movement.
Tweened animation is an effective way to create movement and changes over time while minimizing file
size. In tweened animation, Flash stores only the values for the changes between frames. In frame-by-
frame animation, Flash stores the values for each complete frame.

Do It Yourself

Working with multiple layers

Steps to be followed:

1) We will animate the word "Layers”. First of all select the Text
tool and write "L" on the stage. This is in layer 1.You can change
text color, size etc.from the Text options panel.

2) Then again write the letter "a" and place it beside the first letter.
Place it on a separate layer i.e. layer 2.

3) In this way write the full word by keeping each letter

on a separate layer. Place the layers in the following
way.

4) Now play the Movie. For this select Control>Play

or Test Movie.

Tweening
Tweening comes from the words "in between". Actually, it is a process of generating
intermediate frames between two images to give the appearance that the first image evolves
smoothly into the second image. With Tweening you can go from one keyframe to another
and specify changes in the animation and let the Flash program create the frames in
between. Here you can view various exercises of tweening to create animations from simpler
to complex ones.

Animating a figure on the screen is amazingly easy because of the Flash feature called
Tweening. Here the in-between frames between the keyframes are generated by the
computers.

Tweening is a process of creating motion, change in shape, size, color and rotation of graphic objects,
while minimizing file size. Tweening is of two types — Motion Tweening and Shape Tweening, where
Motion Tweening is the easiest one.

Change in Color (Shape Tweening)

Steps to be followed:
1) In Frame 1 draw a rectangle with a fill color according to your choice.
2) Insert a new keyframe [F6] in Frame 12.
3) Select the rectangle in Frame 12 and change the fill color from Fill tool.
4) Right click on the timeline between frame 1 and 12 and choose Panel>Frame.
5) In Frame tab select Tweening>shape. See the change in timeline.
6) Now play the movie to see the change in color.

Change in Size (Shape Tweening)

Steps to be followed:

1) In Frame 1 draw a rectangle.

2) Take a new keyframe in Frame 12.
3) Select the rectangle in Frame 12 and resize it with resize tool from Toolbar.
4) Put tween option to shape in Frame panel.
5) Press <return> to see the change in stage.

Change in position (Shape Tweening)

Steps to be followed:
1) In Frame 1 draw a rectangle.
2) In the timeline take a new keyframe [F6] on Frame 12.
3) Move the selection of the rectangle on the stage to any position of your choice.
4) Select any frame between Frame 1 and 12 and choose shape tween option from Frame panel.
5) Press <return> to see the animation.

Multiple Animation (Shape Tweening)

You can use more than one kind of animation on a single frame.This can be illustrated with the
help of the following example.
Steps to be followed:
1) In the Frame 1 draw a rectangle.
2) In the timeline take a new keyframe[F6] on Frame 20.
3) n Frame 20 on the new keyframe delete the previous shape and draw a new
shape in a different position with a different color fill.
4) Select any frame between Frame 1and 20 and choose Shape tween from the Frame panel.
5) Press<return> to see the animation.

Motion Tweening

With motion tween,we can involve a change in color,

change in size, change in position or any combination of the
precedings at one point in time (using a keyframe). Then
at another point in time the same properties are changed.
In this exercise you will learn how to make an object
move across the screen.

Steps to be followed:
1) Create a small circle to the left in the Stage area. Do
this by selecting the circle tool from the left toolbar.
Draw the circle in the Stage area as shown below:

2) Select the Arrow tool from the left toolbar. Click on the
circle to select it as shown below:

3) Now we have to convert the circle to a symbol. When the

circle is converted to a symbol we can create instances of the
circle. From the top menu choose Insert > Convert to Symbol.
Name the symbol "Ball", and select OK.

4) Go to Frame 40 in the Timeline. Do this by clicking the gray

field below 40. Then right click in this field. Choose Insert
Keyframe. Keyframes appear as circles in a frame. This
operation duplicates the image.
 5) Select the circle and move it to the right a couple of inches
as shown below:

You can do this also by changing the value of "x" co-

ordinate in the "Info" panel keeping the "y" co-ordinate
unchanged.

6) Click on the Timeline any place between Frame 1 and

Frame 40. Then right click and choose Create Motion
Tween (shown below).

You will see that frames 1 to 40 in the Layer 1 have

changed color and an arrow appears through them,
as shown below.

7) Choose Control > Test Movie from the top menu

to test your Flash movie and save your work.

We are now ready to see a moving ball by clicking

menu Control>Test Movie (Ctrl+ ENTER). Save
the file in your proper folder before playing back
the movie.

Working with Guided Layers

Regular Guide Layer is a special layer into which you can draw anything you want
(usually shapes to help align graphics or notes to other team members). Everything
contained in a guide layer is excluded from export when you create a .swf, so it won't
show up in your final file, nor will it add to file size.

Motion Guide layer acts like a Regular Guide (they're both guides, after all); however,
a Motion Guide Layer contains a line to which you associate a Motion Tween,which is
in a guided layer. This is how you make a Motion Tween follow a path.

Guided layers are available only if the adjacent layer above

it is set to Motion Guide. In the Guided layer, you can create
a Motion Tween that follows the path drawn in the Motion Guide Layer. This can be
illustrated with the help of the following example.

Steps to be followed:
1) 1) In the first layer i.e., layer 1 insert a movie clip or simple graphic. In case of graphic,
convert it to symbol. In this case we are considering a movie clip-a flying butterfly.

2) Click on the Add Guide Layer icon.

3) Draw a path with the help of Pencil tool.

4) Insert a new keyframe[F6] in Frame 20 in both the layers.

5) Select the Arrow tool and click the Snap modifier.

6) Move the butterfly so that its centre point is over one end
of the line. A black ring appears at the center point when it
is locked to the motion guide.

7) Select the last keyframe in layer 1 and move the butterfly

so that it snaps to the other end of the line.

8) Right click on the timeline between Frame 1 and 20 and choose Window>Panel>Frame and
choose Motion from Tweening pop-up menu.

9) Press Enter to play the animation. (See the example reference overleaf.)

Frame-by-frame Animation

Frame-by-frame animation changes the contents of the Stage in every frame and is applicable for
complex animations in which images change in almost every frame instead of simply moving along
a straight or predefined path. Frame-by-frame animation increases file size more rapidly than
tweened animation. This can be illustrated with the help of the following example.

Steps to be followed:
1. Draw any figure you want to animate in Frame
2. Take a new keyframe in next Frame i.e. Frame 2
3. Now move the parts according to your requirement.
4 Click on the Onion Skin button to have the Onion skinning effect to see
the present displacement in terms of the previous frame.
5. Follow steps 2 through 3 until you are finished.
6. When your animation sequence is complete click on the onion skin
button to view the current frame.

7. Go to frame 1 and play the sequence <return> to see the complete

animation in sequence.

Masking

Masking is a very useful and effective feature available in flash. It is a layer property. For
masking we need at least two layers, one for the mask and one that gets masked. The
graphical contents of the mask layer will determine which parts of the masked layer will show
through.

By this technique you can make animated object move ”behind” the protected area. This can
be illustrated with the help of the following example.

Steps to be followed:

1) Draw a rounded corner rectangle and fill it with yellow color. Select the border of the rectangle
and increase its depth from Stroke panel (Window> Panel> Stroke). Keep it in Layer 1 and name
it "unmasked".

2) Right click on frame 60 and click 'Insert Frame' on pop-up menu.

Take a new layer and name it "text”. Here

3) draw a rounded corner rectangle smaller than
the yellow one and fill it with pink color. Click
on the Text tool and write "Masking" on the
same layer. From the Text panel choose font
color, size and style of your choice.

4) Insert a frame at Frame 60.

5) Take a new layer and name it "mask". Draw a circle partly covering the text and place it at the left
corner of the stage.

6) Convert it to symbol (graphic) by choosing Insert>Convert to Symbol.

7) On the layer named "mask" take a new keyframe [F6] on the Frame 60.

8) Click on Frame 60 and move the circle to the right side of the stage (to the end of the text) by using right
arrow key.

9) Right click on any frame between 1 and 60 and choose Create Motion Tween.

10) Right click on the layer name "mask" and choose mask from the drop down list. This layer acts as a
 mask. The text
with the pink
background is
masked since
they are on the
same layer. The
yellow
background is
unmasked.

11) Play your animation by pressing Ctrl+Enter.

12) Now save your work.