Information &

Level 1 Communication
Your ICT Learning
Partner Technology (ICT)

Step by Step Training Manual

BASIC ANIMATION

Adobe Flash CS6

English Version 1.0
 TABLE OF CONTENTS
CHAPTER PAGE NO
CHAPTER 1 The working Environment 3
1.1 Introduction 3
1.2 Flash Interface 3
1.2.1 Menu Bar 4
1.2.2 Timeline 5
1.2.3 Layers 5
1.3 The Working Area 6
1.3.1 The Views or Zooms 7
1.3.2 Zoom Panel 7
1.3.3 The Panels 8

CHAPTER 2 Drawing and Coloring 9

2.1 Tools Panel 9
2.1.1 Tool Panel’s Options 10
2.2 Color Panel 10
2.3 Swatches Panel 11
2.4 Align Panel 11
2.5 Info Panel 12

CHAPTER 3 Working with Objects 13

3.1 The Objects 13
3.1.1 The Border 13
3.1.2 The Fill 13
3.1.3 Select (Using Selection Tool) 14
3.1.4 Groups (Modify  Group) 14

CHAPTER 4 Working with Texts 15

4.1 Text Properties 16
4.2 Text Layout Framework ( TLF Text ) 17

CHAPTER 5 Working with Sounds 18

5.1 Importing Sounds 18
5.2 Sounds Properties 19

1
 5.3 Editing Sound 20
5.4 Inserting a Sound 21

CHAPTER 6 Layers 22
6.1 What is Layer? 22
6.1.1 Inserting and deleting layer 22
6.2 Working with Layers 22
6.3 Reorganizing the Layers 23
6.4 Types of Layers 24
6.5 Tutorial 1: How to use Guide Layer 25
6.6 Mask Layers 28
6.7 Tutorial 2: How Mask Layers works? 29

CHAPTER 7 Symbols 32
7.1 What are the symbols? 32
7.1.1 How to create a symbol 32
7.1.2 The Libraries 33

CHAPTER 8 Graphic 34
8.1 What's a graphic? 34
8.1.1 Types of Graphics 34

CHAPTER 9 Movie Clips 35

9.1 What is a Movie Clip? 35
9.2 Tutorial 3: Sample on how to create Movie Clip 35

CHAPTER 10 Tween 36
10.1 Tweening Animation 36
10.2 Classic Tween 36
10.3 Tutorial 4: Creating a simple Classic Tween 36
10.4 Shape Tween 38
10.5 Tutorial 5: Creating a simple Shape Tween 38
10.6 Motion Tween 39
10.7 Tutorial 6: Creating a simple Motion Tween 40

2
 CHAPTER 1
The working Environment
1.1 Introduction
Adobe Flash is a multimedia platform used to add animation, video and interactivity to web pages.
Flash is frequently used for advertisements and games.

Flash manipulates vector and raster graphics to provide animation of text, drawings, and still
images. It supports bidirectional streaming of audio and video, and it can capture user input via
mouse, keyboard, microphone, and camera. Flash contains an object-oriented language called
Action Script.

1.2 Flash Interface

Flash offers with the most handy and intuitive environment or working interface. Moreover it has an
advantage because it is similar to other Adobe programs (Dreamweaver, Freehand, Director), it
makes easier to assuming Flash, and faster its management and control.

Menu bar

Properties
Panel

Panels
Tool Panel

Stage

Work Area

Layers Timeline

From the image, we are able see the interface that appears right after opening the Flash program.
Flash will remember your preferences and automatically reopened your work done on the last
session before closed.

3
Followed are each items explain and also its function.

1.2.1 Menu Bar

The Menu Bar is aimed to give an easier access to different program features. It is similar to any
other web or graphic design program. Let's see the main Submenus that you can access to:

Menu Description
 It allows creating, opening and saving your work.
 Inserts to the current movie nearly all types of archives (sounds, videos, images
and even Flash movies).
File
 Publication Settings option from which you can modify the characteristics of the
publications.
 It also enables to configure the printing pages and printing
 It is a classic menu that allows you to Cut, Copy, Paste objects , images or frames;
Edit  It also allows you to customize some of the most common options of the
program.
 Apart from, typical zooms; it allows you to move the frames and scenes. It also
View includes the possibility to create a grid and some guides. These can be selected
from submenu Grid and Guides from where you can configure its options.

 It permits you to insert objects into the movie, as well as new frames, layers,
Insert
actions, scene.

 Transform permits one to modify the graphics that exist in the movie.
 Draw Bitmap allows modifying current graphics in vector maps (this theme will be
Modify studied further).
 Other options allow you to modify characteristics of the animation elements
Smooth, Optimize or of the same movie (Layer, Scene).

 Its content affects the edition of text

Text

 Allows administrating the Commands (group of saved sentences that allows to

Commands emulate what user can introduce to the edition environment) that we had saved
in our animation, to execute what we already have.

 You are able to modify the properties of the movie reproduction Play, Rewind,
Control
Test Movie.
 Debugging is the process of removing known issues from your application or
testing for unknown errors and performance problems.
Debug

4
  In addition to the classical options of distributing the windows, this menu includes
Window
shortcuts to ALL the Panels.

 From here we able to access to help that Adobe offers to us, from the current
Help
manual up to the Action Script, going through tutorials, guided lections etc…

1.2.2 Timeline

The Timeline represents a simple mode of visualization. It consists of two parts:

1) The Frames that are limited by vertical lines.

2) The Numbers of frames that allow us to know the assigned number of each frame, its
duration and when it will appear in the movie.

Moreover, there are some tools on the bottom to work with Onion paper and show the information
about the Number of current frame (1 in the image), the frame Speed (24.0 in the image) and the
Time of the movie (0.0 in the image).

On the definition level, the Timeline represents the succession of frames in time. The Flash movie
will not be the only frames that appear on the Timeline one after another in the order established
by the same Timeline.

1.2.3 Layers
The concept of the Layer is the basic to manage Flash
efficiently. A Layer could be defined as one
independent movie of only one level. That is to say, one
layer contains its own Timeline.

The objects that are in one Layer share a frame and due
to this fact they can "get mixed up" among themselves.
Frequently it could be interesting, but other times it is
convenient to separate the objects in order that they do
not interfere among them. The use of many layers gives
place to a good-ordered movie and of easy use.

5
1.3 The Working Area
The Working Area consists of numerous parts. The most important part is the Stage. The Stage has
very important properties, due to the fact that they coincide with Document Properties, in order to
access them, at the Properties Inspector menu, click on the Edit Document Properties button, or
just right click anywhere on the stage and right click and choose Document Properties.

OR

From Properties Panel Right Click on Stage

The Document Settings Window

6
Tools Description
They fix the size of the movie. The smallest size is of 1 x 1 px (pixels) and the
Dimensions
biggest one is of 2880 x 2880 px.

Match It causes the coincidence of the movie with the selected size
Background Color The color selected here will be the one of the entire movie.
Frame Rate The number of frames per second that appear at the movie.
Ruler units Unit used to measure the quantities.
This button was added in this version of Flash, allows to store the properties of
the current document and to apply them to all the new created documents
Make Default
from the moment. These properties could be changed from this panel
whenever you wish them to.

1.3.1 The Views or Zooms

The Zoom effect consists in moving the "view" near or further away from a fixed place. It is very
useful to see more precisely some of the points of an animation (mainly graphics) and to be able to
fix some parts that are not visible from a distant point of view. By the way it turns out useful to see
the animation from a distance to have a global vision of it.

1.3.2 Zoom Panel

You can access to all the Zooms functions from the Menu View. In
any case, Flash includes a fast accessible submenu to these
commands, includes:

Show Frame: It shows the contents of the global current Frames.

The frame size is extended up to fill an entire Work Area. If there are
objects outside the Work Area, you will not see them.

Show All: It shows all the movie objects inside the Work Area,
adapting the frame size to the necessary space for them to fit in. In
case that all the objects are situated on the left frame side, the right
one will not be visible.

7
1.3.3 The Panels
The Panels are command sets grouped according their function. Its mission is to simplify and
facilitate the commands use.

Color The Color panel lets you modify the color palette of a FLA and
change the color of strokes and fills
Swatches Allows us to select a color quickly and graphically.

Align An easy way to align objects precisely

Info When you are testing your content, use the Info panel to view the
details of the file and to test different content types that a device
supports.
Transform Transform, rotate, skew, scale, or distort the element. You can
change or add to a selection during a transformation operation.
Code The Code Snippets panel is designed to make it easy for non-
Snippets programmers to start using simple Action Script 3.0 quickly. It lets
you add Action Script 3.0 code to your FLA file to enable common
functionality.
Components It allows us to access to the already constructed and ready to be
used Components that Flash provides. The components are
"intelligent" objects with characteristic properties and many
utilities (calendars, scrolls etc.)
Motion Motion presets are pre-configured motion tweens that you can
Presets apply to an object on the Stage. You simply select the object and
click the Apply button in the Motion Presets panel.
Project You can use the Flash Pro Project panel to manage multiple
document files in a single project. Flash Pro projects allow you to
group multiple related files together when creating complex
applications.

8
 CHAPTER 2
Drawing and Painting
Design passes through many phases when designing web page or an animation. After the phase of
"What do I want to create and how is it going to look like ", normally, the phase of graphic design
comes up. Realize what your imagination has produced on Flash, now is the time to know every
drawing and painting tool effectively.

2.1 Tools Panel

The Tools Bar contains all necessary Tools for the drawing. The following are the tools which always
used and how to they are used.

Tool Description
Selection Selection : Move selections or layers.
Tool Subselection : Selects and moves points on a path.
Free Transform : Resizes, rotates, and skews objects.
3D Rotation : Rotates objects in 3D space
Lasso : Makes selection.
Drawing Pen : Draws a vector path.
And Text Text : Creates a text box.
Tools Line : Draws straight lines.
Shapes : Draws vector shapes.
Pencil : Draws freehand paths.
Brush : Draws freehand filled areas.
Deco : Creates patterns using symbols

Retouching Bone : Creates Inverse Kinematic objects

Tools Paint Bucket : Applies or modifies fills.
Eyedropper : Samples colors and styles.
Eraser : Erases artwork.

Navigation Hand : Navigates the page.

Tools Zoom : Increases or decreases the relative size of the view.
Colors Area Stroke Color : Selects stroke (outline) color.
Fill Color : Selects fill (inside) color.
Default Stroke/Fill : Sets stroke and fill to default colors:
black and white.
Swap Colors : Swaps stroke and fill colors

9
2.1.1 Tool Panel’s Options
Some Tools have a special option that eases and strengthens their use. In order to
access these utilities, sometimes it is not enough to click on the corresponding Tool.
The way to access to these Submenus consists in clicking on the line or on the drawn
object. Then a submenu will appear (or it will highlight if it is already present) as:

Adjusting Objects: It is used to make objects to "fit" with others, i.e. if it is possible, to
intersect its borders, then objects seem to be "grouped".

Smoothening: It softens the straight segments in less rigid lines.

Straightening: It does the inverse work. It converts the rounded segments to straight ones.

2.2 Color Panel

The Color Panel as its name indicates is used to create own color and to select color that we like.

To make the color mixer panel appear, we need to click the Color Mixer Icon. By doing this, a Panel
with many colors will appear. Select one of them. It also allows introducing the code of the color
according to the standard established by HTML.

Color Mixer
Color Swatches

We can create differences types of Fills:

 Solid Fill: It consists in a filling formed by a single color.
 Linear Gradient: It is a special filling type; a color does a
gradient until it converts into another one. It can shade
from top to bottom or from one side to the other.
 Radial Gradient: It is identical to the previous one, but
the gradient shade performs a circular pattern.
 Bitmap: It lets you put an image existing in the movie as
filling.

10
2.3 Swatches Panel
The Color Swatches Panel allows seeing the arranged colors in a quick and easy way, solid colors
(only one color) as well as linear gradients or radial gradients. Moreover, when we create a color
with the Color Mixer Panel, we can add it to our set of swatches by Adding Swatch (that is in a menu,
which is open in the right top of the Color Mixer Panel). Once the color is added, it will be in our set
of swatches, and we can quickly access to it each time while working in our movie. Every movie has
its own set of swatches and each time we open it we can use the swatches we had the last time we
worked in the movie.

Add from color mixer to Swatches

Color added from Color Mixer

2.4 Align Panel Align panel

Now that we know how to select the objects or their parts,

let's see how to align them to the Stage.

In order to align them precisely, Flash provides us with the

Align Panel. In order to open the Align Panel, all we need to do
is click on The Align icon:

The Align Panel allows us to align the objects just as we

indicate. Before considering the possibilities, we must
emphasize the option To Stage. This option allows us to
indicate all the positions that must have each object at the
stage.

If this option is not selected, the objects will take the reference from the group of objects they are at,
and will align automatically. The most usual selection is Stage, to align the objects in the centre of
frame depending on the movies limits.

11
Align Panel and its possibilities:
 Align: Align is used to ensure the selected objects are
arranged uniformly on a specified direction and
alignment.

 Distribute: It aligns the objects on the stage taking

into account the imaginary axis that passes through
their centres, so that the distribution become uniform.

 Match Size: It makes the object's sizes match. If the "To Stage" is
active it will stretch the objects up to make them match the movies
width and length. If it is not active, the rest of objects will be the
reference.

 Space: It spaces the objects uniformly.

2.5 Info Panel Info panel

Apart from controlling the object position from the

Align Panel, we can also use Info Panel.

You can access to this Panel from the Info icon. The
possibilities of this Panel are limited, but if we are
searching for precision or we don't trust Flash
distribution, we might use it.

Width/Height: Represents the size of object

in the dimensions selected in the Document
Properties dialog box. W: is the width H: is
the height.

Registration/Transformation Point: Controlling the location of the object on the stage.

The X and the Y represent the axis of coordinates (The X is the horizontal axis and the Y
the vertical axis).

Color at Cursor Location: Indicates the current color where your cursor is located,
depending on the quantity of Red (R), Green (G), Blue (B) and Alpha effect (Alpha) that it
has.

Cursor Location: It indicates the Cursor's location. It is useful if we want something to

occur in the movie after crossing with the determinate cursor position or to align object
parts in specified places.

12
 CHAPTER 3
Working with Objects

3.1 The Objects

Independently of our working with animation, at the web page, at the catalogue for CD-ROMs or in
any other place, we will have to work with objects. In general, we would consider everything that
appears and is visible in the movie as an object. An object could be any image, which we create or
import, a button, a drawing and etc.

The objects that are considered have 2 fundamental parts:

3.1.1 The Border

It consists in one thin line that separates the object from the
exterior part of the stage. It could exist or not, depending on what
is convenient for us. When we create an object, the border is Fill
always created and its color will be indicated in the Outline Color.

If we want to draw and create Borders we must use the Pencil

Tool, Line or Pen and if we want our drawing without border, just
Border
select the border and delete it.

3.1.2 The Fill

The Fill is the interior part of the object without border. In order to draw Fills (without borders) we
can use tools such as the Paintbrush or the Paint Bucket.

NONE selected object Object with the selected BORDER Object with the selected FILL

13
3.1.3 Select (Using Selection Tool)
In order to work with objects, it is useful to know how to select the object part that we want to
modify (move, rotate, change the color). Let's see how to select different object parts:

 Select a Fill or a Border: Click Border or Fill once

 Select the Fill and the Border: Double click the Fill

 Select all the borders (or lines) of the same color that are in contact: Double click one of the
lines that have the color you want to select.

 Select a Symbol, a text, or a group: Click the Symbol in the text or in the group. This types of
objects will show the blue color border (by default) after being selected

 Select various elements: We will keep pressing SHIFT while selecting the objects that we want.

 Select the objects, which are in a certain zone: Use Selection Tool (Arrow) to select an object.

 Select from the Timeline: If we select a certain frame from the Timeline, all the objects from
this frame are selected automatically. It's useful if you want to modify quickly all the frame
elements.

 Select All: The most natural mode of selecting all consists in clicking the menu Edit → Select All.

3.1.4 Groups (Modify  Group)

A Group is a set of objects. However, not each set of objects forms a group. For that, select the
enclosed objects that we want to be grouped and then click the Menu. Modify -> Group.

After doing this we will observe that the texture disappear indicating selected objects and that the
group happens to be a "whole", since it is impossible to choose one of its members without
selecting others as well. In addition, by default, the blue rectangle occurs that encloses the group,
therefore, outlining it.

Select All  Modify  Group

But, if you want to change one of the grouped objects, you must ungroup the whole objects by
clicking the Menu Modify → Ungroup.

14
 CHAPTER 4
Working with Texts
Flash provides everything that we might need to create an animation, and, hence, also all that is
related to the texts. However, Flash was conceived to create graphic animations, in such a way that
it will treat any text as if it were one more object, prepared to be animated if that's what you want it
for. That allows us to animate texts afterwards and to easily create spectacular animations. Flash
distinguishes among 3 types of text: Static text or normal; Dynamic text; and Input text.

4.1 Text Properties Text Engine

In order to write we have to click on the Text

Tool and then at the any point of the Stage
where we want to start writing. The text
properties panel is divided into several parts:

Text Type Change Text Orientation

Text Engine A mode for adding simple text or texts that required sophisticated options
such as multiple columns or wrapping around other objects.
Text Type An option for any text that is used for display purposes.
Change It changes the orientation of the text from horizontal to vertical, as
Orientation Of Text well as from right to left.

Selection X Position Selection Y Position

Selection Width Selection Height

Lock Selection Width

& Height Values
Together

Selection X Used to adjust the position of your animation/text horizontally.

Position
Selection Y Used to adjust the position of your animation/text vertically.
Position
Selection Width Used to resize your animation/text width.

Selection Height Used to resize your animation/text height.

Lock Selection The selection that you resize will resize together.
Width & Height
Values Together

15
 Set Font Embedding
Set the Font Family Options
Set the Font Style
Select Tracking Amount In
Select Point Size Points
Text (Fill) Color Auto Kern
Font Rendering Method

Set The Font Select the font style you want.

Family
Set The Font Style Select Regular, Bold, Italic or Bold Italic.
Select Point Size Select font size.
Text (Fill) Color Select your font color
Set Font It enables fonts used in the creation of a document to travel with that
Embedding document, which ensures that a user views the document exactly as you
Options intended.
Select Tracking Select the size of your font spacing.
Amount In Points
Auto Kern Kerning is the space between two specific characters. Most fonts contain info
about problem characters pairs. This info is used when you select Auto Kern.
Font Rendering Select how your device will generate your fonts.
Method

Text alignment

Indentation Line Spacing

Left Margin Right Margin
Line Type

Text Alignment Align Left: All the lines will begin as far as possible to the left (within the
defined text frame).
Center: The lines are distributed to the right and to the left from the middle
Paragraph point.
Align right: All the lines will begin as far as possible to the right (within the
box of defined text).
Justify: The text is widen if it is necessary in such a way that there cannot be
spaces in any of its limits.
Indentation It determines the space between the characters. It is used when the used
typography shows the letters together or to add specific effects to the text.
Left/Right Margin Resize the blank space to the left and right of your page.
Line Spacing The amount of space that appears between the lines of text in a document.
Line Type If the text is dynamic (otherwise it appears deactivated), this option allows us
to determine the type of lines (single line, multiple line or multiple line
without adjusting).

16
4.2 Text Layout Framework (TLF Text)
TLF supports a wider array of rich text layout features and fine control of text attributes. TLF text
allows greater control of text than the previous text engine, now called "classic text." TLF text
provides additional character styles, including leading, ligatures, highlight color, underline,
strikethrough, case, digit case, and more. It also includes additional paragraph styles, including
multicolumn support with gutter width, last-line justification options, margins, indents, paragraph
spacing, and container padding values. You can also apply attributes such as 3D rotation, color
effects, and blend modes to TLF text without placing it in a movie clip symbol.

Viewed With 3D Rotation Tool Rotated 270 Degree

Highlighted Strikethrough

17
 CHAPTER 5
Working with Sounds
Flash allows us to insert any sound that we want in our movies (.wav, .aiff y .mp3) in a quick and
easy way. We can add simple effects to the movie (by the typical "click" on pressing button),
complex effects (background music) and even make the animation development accompanied by
music.

5.1 Importing Sounds

To add sound in your movie, first you need to import those media files into your library. To do that,
first:

Click File  Import  Import to Library

Notice that, you can only Import .wav audio file into your movie. Once you have imported these
audio, you will notice a new file now available in your Library Panel. Once these audio file is
available, you can now use it anytime you want.

18
5.2 Sounds Properties
In Flash, we can publish all referring to the sounds from the Properties Panel. Here we have all that
is necessary to insert, modify and edit the sound that we terminate to import. If we have not
imported any sound, we will notice that we cannot select anything in this panel. In order to work
with sounds, we have to click in a frame of our movie. After doing this, the Properties Inspector
takes the following appearance:

Sound Name

Sound Effect

Edit Sound Envelope

Sync Sound Sound Loop

Number Of Times
To Loop

It is the Sound Properties which we need to concentrate on.

Sound Name Display a list of sound files imported in a drop down list.
Sound Effect From here we will be able to add some effect to our sound, as for example that
the sound passes from the left canal to the right one (this creates the sensation
that the sound encircles you since you hear it from one place and then from the
other, although it's very far of the true surrounding sounds), that the volume
increases progressively etc... If we want to add complex sound effects, we might
have to adequately handle the sound with some program created specifically for
this aim before importing.
Sound Sync This option allows us to determine in what moment our sound will start acting;
these are the options that we have.
Sound Loop / It specifies the number of times the sound is played. To play it indefinitely,
Number Of calculate the possible time of the movie duration and the time of the sound, and
Times To Loop then repeat it as many times as necessary (that is better than to set 99999 times).

19
5.3 Editing Sound
It is not recommend insert sounds with the option Stream and at the same time Repeating, since on
synchronizing the sounds with the images. There is one special tool for us to use here, which is the
Edit Sound Envelope tool. With this tool, we can clip the end of a sound (if it’s too long) or make it
fade so the sounds will gradually decrease as it ends. When you click the Edit Sound Envelope tool,
tool panel will appear.

Effect

Left Channel
Timeline

Right Channel

Play Controls View Options

Now what you can do is click the Zoom Out button until you can see the end of your sound wave.
Now from the timeline bar, just drag the sound to which ever frame you desire and you can see the
sound wave will be shorten, thus making your sound shorter. Or you can use the Effect option to
make a sound effect. For example Fade Out will make your sound fade out gradually from a certain
point until the end.

20
5.4 Inserting a Sound
Flash represents the sounds inserted in Frames
Now we already know how to import sound,
what kind of options we can modify and the
usage of each of them. Here is the most
important one: how to insert them in our
movie.

Consider this simple Classic Tween shown on

your right. Now click anywhere between these
two keyframe and then go to the Properties
Panel and then go to the Sound Section.

Make sure that you have imported the sound

beforehand. Now, click on the drop down list
labelled as named and you should find the sound
imported previously on the option available.

Just Click on it and the sound should now be

available on that particular animation.

21
 CHAPTER 6
Layer
6.1 What is Layer?
Layer used to control content; timelines in Flash contain layers and frames. Flash documents can
play over a length of time, like videos or sound, which is measured using frames. Layers are like
transparencies that stack on top of one another; each layer can contain images, text, or animations
that appear on the Stage.

6.1.1 Inserting and deleting Layer

To insert a new layer, simply click on the new layer button located at the bottom left of the Timeline.
To delete a layer, click on the delete button (Looks like a dumpster icon) also located at the same
location.

New Layer Delete Layer

6.2 Working with Layers

The standard View of a layer is the one that shows the image. Now let us discuss about tools that
are used when working with layers.

Show Or Hide
All Layers Show All Layers
As Outline

Lock Or Unlock
New Folder All Layers

New Layer Delete

22
New Layer It is used to Insert layers in the present scene.
New Folder To create layer folder. It helps you group related layers to keep your timeline
organized and manageable.
Delete Erase the selected layer
Show Or Hide This tool allows us to show and hide all layers of the movie. It is very helpful
All Layers when we have many layers and we want only to see one of them.
Lock Or Unlock This tool used to blocks the edition of all the layers, so we'll not be able to edit
All Layers them until unblocking them
Show All Layers This button show / hide the contents of all the layers as if they were composed
As Outline only by borders. Facing numerous set of objects in this way, we'll be able to
distinguish all of them easily and to see in what layer each of them is.

6.3 Reorganizing the Layers

The different layers have many features in common with others. The first and main feature is the
Timeline, all the layers of a same scene share the same timeline and therefore, the objects of all
frames from all the layers will be seen at the same time in the movie as superposed ones upon
others.

But why object is over the others? The

criteria are given by the Layers position in
the movie. The objects that will appear
ahead of all the others will be those that are
on the top layer.

Example: Refer to figure beside.

The goalkeeper appears in front of the goal,
because the layer "Goalkeeper" is located
upon the layer "Goal", so it can be seen in
the image. If we want to change this
distribution, click the layer that we want to
move and drag it upwards or downwards or
to the desired position.

23
6.4 Types of Layers
There are many types of layers, as you can see in the general properties of a layer:

Normal Layers: This is the layers of Flash by default, and they have all the
properties .This layer are used commonly and for almost everything: to place objects,
sounds, actions, and helps.

Guide Layers: This is layers for special or specific content. They are used in
the animations of objects movement and its only aim is to set the trajectory
that this object must follow. Because its mission is to represent the
trajectory of an animated object, its content usually is a line (straight, curve,
etc.).

In the image below we can see the content of 2 layers. The first of them contains the blue ball and
the second contains the curved line. We have defined the second layer as Guide Layer, so that when
making the movement animation, it will be used as a track for the blue ball. Its content would not be
seen in the movie.

Guide act as Motion Path

24
6.5 Tutorial 1: How to use Guide Layer
Motion Guide is a line used as a pathway for an object to move accordingly.
If you're using an older version of Flash you can follow the tutorials as well.

1. Create two layers and name the top one as Guide and the one below it as Obj. You can
insert any desired name but you should name your layers according to the content. In here,
the Guide layer will contain the Motion Guide and the Obj layer will contain the object to be
guided.

2. Right click on the Guide Layer name and select Guide. This will produce the line on the layer
of a Motion Guide.

If you do it correctly the layers will look like this.

Now pay attention. Click on the Obj Layer name

and while pressing the mouse button make an
upward motion with the mouse.

When you release it, your layers should look

Like as the picture shown beside. You have
assigned the Guide layer as the motion guide of
the Obj Layer.

25
3. Select the first frame of the Guide layer.
Select the Pencil Tool and draw the path
that you wish the object to move
accordingly. Line drawn will be
your Motion Guide.

4. Now draw your object. A simple circle would be sufficient enough. You can convert the
object into a Symbol, choose Graphic and save it as obj_mc. (if you skip this step, Flash will
convert it automatically afterward).

5. In the Properties Inspector you will see your obj_mc object. If you cannot find your Library
window go to Window->Properties. Now select the first frame of the Obj Layer and drag
the object from the library to the top end of the guide line.

26
 Now go to the timeline and on each layer, Right Click on the 30th frame and select Insert
Frame. Your timeline should look like this

Now select the last frame of the Obj Layer and drag your object to the end of Motion Guide.
The little circle in the centre should snap on to the line. Now select any frame of the Obj
Layer and select Create Classic Tween.

You're done. Hit Ctrl+Enter to test the movie.

6. If the Movie runs very fast, there are two ways to change it. Firstly increase the number of
frames. Secondly you can reduce the Frames per Second (fps) to a lower value from the
Properties Inspector panel.

Frames per Second (fps)

27
6.6 Mask Layers
Mask layer is a layers are placed "above" the layers, which they mask, and allow us to see only the
part of the layer that cover up the objects located in the mask layer (they act like filters). Similar to
the guide layers, the existing objects in this type of layers are not seen either in the final movie. Only
the objects from their masked layer corresponding to the "covered" ones will be seen.

Mask Layers: These layers can be seen as groups that keep the unmasked layers off.

Mask Layer
Masked Layer

Masked Layers: These layers work jointly with the Mask Layers. The mask layers and the masked
layers must be associated to be involved correctly. Its objects are visible in the final movie, but only
when some object of the Mask layer is on the top of them.

For example:
The blue rectangles are part of a Masked Layer and
therefore they will be seen in the final movie (but only
ones covered by the mask layer). The red oval is
located in the Mask layer and it will not be seen in the
movie, but only overlapping shape of oval and
rectangles will be seen.

28
6.7 Tutorial 2: How Mask Layer works?
1. Create a new Flash movie, and create 2 layers, name the first one mask and the second text.

2. On the text layer type in AWESOME and turn it into a symbol, choose type as Movie Clip
and name the symbol as "text".

3. On the mask layer create a box make it black to make it easily viewable, and make sure the
box is big enough to completely cover the text. Turn that into a symbol, choose Movie Clip
as well and name it "mask".

29
4. Your stage should now look something like the image to the right. We're going to set
another key frame for the text, animate the text, then show a simple mask and how it works.

5. Now right click on frame 50 of the mask layer on your timeline and Insert Frame (or click on
the frame and hit F5). This makes sure that the mask object will be visible on the timeline up
to frame 50.

N
e
x
t

6. Right-click on frame 10 of the text layer and Insert Frame (or click on the frame and hit F5).
This signifies a change in position for that symbol on that layer at frame 50.

R
i
g
h
t
-

7. Click on any frame on the mask layer timeline and go to Create Motion Tween. Drag the box
down pass the text, then click at frame 50 and drag the box back up to its original position.

30
8. Your timeline should now strongly resemble mine on the left. If you drag the red slider along
the top of the timeline you should see your text move behind the mask box on your stage.

9. Now we're about to create the mask. Right-click on the name area of the mask layer and
select Mask, and that's it, you're done. Test your movie (Pressing Ctrl + Enter) and you will
see your text appearing and disappearing.

31
 CHAPTER 7
Symbols
7.1 What is a symbol?
The Symbols come from objects that we've created using the tools that Flash provides us. When
transforming these objects into symbols, they are included in a library at the moment of creation
that allows us using them on several occasions, either in the same or another movie.

7.1.1 How to create a symbol

Creating new symbol is one of
the most used actions in Flash
since it's one of the first steps
to create an animation.

The procedure is the following:

1. We select the object that we want to convert to a symbol. We open the dialog box of
Symbol Properties > menu Insert → New Symbol or just by pressing Ctrl + F8 or F8.

2. Once done it will appear a window as the one of the image. We introduce the name of the
symbol, which we are going to create.

3. This is at the beginning and while we have few symbols it is not very important, but further
it will be helpful for referring to the object.

4. We can select the type of symbol or behaviour into which we convert our object. We can
choose between Movie Clip, Button and Graphic.

32
7.1.2 The Libraries
In Flash we can find two types of
libraries, the common libraries with
examples, and custom libraries
associated to our created movies.

To access the common libraries

that Flash provides, go to the Menu
Bar, Window → Common Libraries
and select one of them. There is all
the type of symbols: buttons, clips
or graphic.

To access the examples of movies completed by Flash, we have to access the Menu Bar, Help →
Samples.

To access the library of symbols of the movie that we are creating once more, go to the Menu Bar,
Window → Library. All the symbols that we've created up to the moment will appear in this library.

The symbols contents in the libraries are identified by its name and by an icon that represents the
type of symbol. To use a symbol of a library, select the symbol and drag it to any place of the work
area.

Movie Clip Button Graphic

33
 CHAPTER 8
Graphic
8.1 What's a graphic?
The Graphics are symbols that allow us to represent static objects and simple animations. In the
case we use a graphic symbol to make an animation. If you apply a graphic in your movie, make sure
you make its own timeline.

8.1.1 Types of Graphics

The graphics can be:

a) Static: this graphic remains without changes. These graphics are typical on the background and on
the objects that don't fulfil any special function. The size and consequently the load time of static
graphics will be generally reduced, although it will always depend on the resolution, on its
dimensions and on the mode in which they are created.

b) Animated: this type of graphics varies its shape, position and others properties with time. Since
to make the animation various graphics beyond the original one should be used or certain actions
that can modify the initial state should be made, the size of animated graphics (for the same
dimensions and form of creation) will be much more bigger than size of static one.

Because of this, although the animations provide our web more spectacular and attractive
appearance, there are two inconveniences:

1) If it's about Bitmaps (now we'll see what it means) the web can arrive at an excessively large size
in the end.

2) Although it isn't about bitmaps, for example, if there are typical Flash animations, which size
isn't excessive, the setting of many animations can make the visitor a little bit "sick" of our site
and therefore his attention from the really important issue: its content.

34
 CHAPTER 9
Movie Clips
9.1 What is a Movie Clip?
A Movie Clip is a movie. Like the other types of Flash symbols, movie clips have their own timeline.
Nevertheless, and unlike the Graphics, this timeline is not bound to the timeline of the document
that contains it, so that its execution is independent.

This type of symbols can contain any other type of symbol: graphic, clip or button, as well as any
object created in Flash, because a clip is actually a movie.

Another one of the Clip advantages we find when we make movies of great complexity and size, is
that it can be made up of many frames, this will allow us to have better vision of how our animation
is developed, and with a clearer and "cleaner" timeline.

The Clips are one of the tools that give greater power to Flash, allowing us to create more complex
movies and increasing the visual effects, since multiple and independent movements, and
connections between different document Clips can be created.
All those things that we couldn't do with a Graphic type symbol, we can do it with a clip. Because of
this, usually the clips are used for any type of animation due to its great flexibility, leaving the
graphics only for static images.

9.2 Tutorial 3: Example of creating Movie Clip

Please carry out the following steps in Flash to create movie clip symbols.

1. First create/import the object(s) to be converted into a movie clip. Import bitmaps onto the
stage using Ctrl + R.
2. Select the object(s) and then press F8 (or Modify >> Convert to Symbol).
3. Select the Movie clip Behavior and name the symbol, as “Fade”.
4. Double-click the instance of “Fade” on the stage to switch to its symbol-editing mode. Now
create an animation sequence (you can use simple Tweened Animation or Frame-by-Frame
Animation)

5. The above figure shows the Timeline of the Movie clip symbol. Click Scene 1 to exit from the
symbol editing mode.
6. Save your work and test the Movie by (Ctrl + Enter).

35
 CHAPTER 10
Tween
10.1 Tweening Animation
A tween in Adobe Flash Professional is an animation that is created by specifying a value for an
object property in one keyframe and another value for that same property in another keyframe.
Flash calculates the values for that property in between those two frames. The term tween comes
from the words "in between."

There are several types of tweens, including classic tweens (using the older Timeline animation
method), motion tweens (using the Motion Editor and motion paths), and shape tweens (the result
of drawing two separate vector shapes and morphing one to another). In addition to tweening
movement, you can tween filters, color effects, and transparency.

10.2 Classic Tween

Classic tweens are an older way of creating animation in Flash Professional. These tweens are similar
to the newer motion tweens, but are somewhat more complicated to create and less flexible.

However, classic tweens do provide some types of control over animation that motion tweens do
not. Most users will choose to work with the newer motion tweens, but some users will still want to
use classic tweens.

10.3 Tutorial 4: Creating a Simple Classic Tween

Steps:

1. First, launch Flash. Once the program loads, you should see a
new blank area called workspace. If you do not see anything
resembling a white box, create a new animation by going to
File > Flash Document.

2. Now, click on the Rectangle tool from the set of icons on the
left. The Rectangle tool icon looks like the image beside: Click the rectangle tool icon

36
3. Once you have clicked the Rectangle tool icon, go to your drawing area, and draw a square
by clicking your mouse and dragging - then releasing once you have a square. Try to ensure
that your square is close to the left edge of your white drawing area:

Draw a square using the

Rectangle Tool

4. After the square has been drawn, take a peek at your

timeline. Your timeline is the large area toward the top
with numbers and small, vertical boxes. Notice, that at
Frame 1, there appears a solid dot:

Notice the Solid Dot in your timeline

5. The solid dot signifies that something substantial exists

on that frame - Frame 1. In that case, the "something
substantial" is the square you created. Now, look a little
to your right and find the number 20. Right click directly
at the box under the number label 20 and select "Insert
Keyframe".

6. Once you select Insert Keyframe, you will see another black dot appear in Frame 20. Now,
make sure you select the keyframe on Frame 20 by clicking it with your mouse pointer.

7. With the Keyframe selected, go down to your square again. Notice that your entire square is
also selected. Now, press your Right arrow (on the keyboard) a few times to make it move a
few centimeters from the right-most edge of your movie area.

8. Now, with your mouse pointer, click on Frame 1 of your movie in the timeline. Notice the
square which is on the left. Without hesitation, now click on Frame 20. Notice that the
square is to the right. Click anywhere else on Frame 10, and notice the square finds its way
back to its original, left position.

37
 9. Click on Frame 1 and highlight all the
frames between Frame 1 and Frame 20.
While all the frames are highlighted,
right click and select "Create Classic
Tween:"

Highlight all the frames and select "Create Classic Tween"

10. If everything worked out well, click anywhere on the timeline, and notice that you can
"track" the square's position through its 20 frame journey.

11. Go to File > Save to save the animation. From there, go to File > Publish Preview > HTML.
You should see your square gradually moving from the left toward the right.

10.4 Shape Tween

In shape tweening, you draw a vector shape at one specific frame in the Timeline, and change that
shape or draw another shape at another specific frame. Flash Professional then interpolates the
intermediate shapes for the frames in between, creating the animation of one shape morphing into
another. Shape tweens work best with simple shapes. Avoid shapes with cut-outs or negative spaces
in them. To understand more about shape tween, let’s see the tutorial provided.

10.5 Tutorial 5: Creating a simple Shape Tween

Let’s do a simple shape tween

Step 1 - Using the Oval Tool place an oval on the

Stage - notice how you now have a Keyframe
inside the timeline.

38
Step 2 - Insert another Keyframe on the Timeline -
and place a rectangle over your oval on that
Keyframe.

Step 3 - Click on a frame in between your two

keyframes and in Properties select Tween – Shape.
(Or Right Click between these two keyframe and
select Shape Tween)

Under Control, click Play your movie.

10.6 Motion Tween

A motion tween is a feature available in Adobe Flash that allows you to easily animate the motion of
an object. Instead of defining the location of the object in every frame, you can create a motion
tween, which will automatically move the object from the beginning location to ending location.

To create a motion tween, simply select a layer in the timeline and drag an object onto the stage.
Then select the number of frames in the timeline you would to use for the duration of the animation.
To create the motion tween, you can either right-click in the timeline and select "Create Motion
Tween," or simply choose Insert → Motion Tween from the menu bar. Note: In order for Flash to
create the tween, you may need to convert the object to a symbol.

39
10.7 Tutorial 6: Creating a simple Motion Tween
Now, let’s do a simple Motion Tween.

Step 1
Start by drawing a simple Circle using Oval Tool.

Step 2
Now, instead of adding a keyframe at a designated frame, just insert a normal frame and then right
click > Create Motion Tween on the original frame.

Insert Frame

Step 3
Now, select any frame in between the original frame
and the last frame. Click on it, and move your object New Location
to a new location. Notice that a new keyframe will
pop-out on that particular frame and a path will be Motion Path
shown on your stage.

Original Location

Step 4
You can modify the path using Selection Tool to better suit your preference.

Make the path curvy using Selection Tool

40