Level 1 Information&

Your ICT Learning

Communication
Partner
Technology (ICT)

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 counts 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
 Information &
Level 1 Communication
Your ICT Learning
Partner Technology (ICT)

Step by Step Training Manual

BASIC ANIMATION

Adobe Flash CS6

Bahasa Melayu Edisi 1.0
 ISI KANDUNGAN
BAB MUKA SURAT

BAB 1 Persekitaran Kerja 3

1.1 Pengenalan 3
1.2 Antara Muka Flash 3
1.2.1 Menu Bar 4
1.2.2 Timeline 5
1.2.3 Layers 5
1.3 Ruang Kerja 6
1.3.1 Views Atau Zooms 7
1.3.2 Zoom Panel 7
1.3.3 Panels 8

BAB 2 Melukis Dan Mewarna 9

2.1 Tools Panel 9
2.1.1 Opsyen Dalam Tool Panels 10
2.2 Color Panel 10
2.3 Swatches Panel 11
2.4 Align Panel 11
2.5 Info Panel 12

BAB 3 Berkerja Dengan Objek 13

3.1 Objek 13
3.1.1 Sempadan (Border) 13
3.1.2 The Fill 13
3.1.3 Select (Menggunakan Selection Tool) 14
3.1.4 Kumpulan (Modify  Group) 14

BAB 4 Berkerja Dengan Teks 15

4.1 Ciri – Ciri Teks 16
4.2 Text Layout Framework ( TLF Text ) 17

BAB 5 Berkerja Dengan Bunyi 18

5.1 Mengimport Bunyi 18
5.2 Ciri – Ciri Bunyi 19

1
 5.3 Mengubahsuai Bunyi 20
5.4 Memasukkan Bunyi 21

BAB 6 Layers 22
6.1 Apa itu Layer? 22
6.1.1 Memasukkan dan membuang Layer 22
6.2 Bekerja dengan Layer 22
6.3 Menyusun Semula Layer 23
6.4 Jenis – Jenis Layer 24
6.5 Tutorial 1: Bagaimana menggunakan “Guide Layer” 25
6.6 Mask Layers 28
6.7 Tutorial 2: Bagaimana Mask Layer berfungsi? 29

BAB 7 Symbols 32
7.1 Apa Itu Simbol? 32
7.1.1 Bagaimana menghasilkan Simbol? 32
7.1.2 Libraries (Penyimpanan) 33

BAB 8 Grafik 34
8.1 Apa Itu Grafik? 34
8.1.1 Jenis – Jenis Grafik 34

BAB 9 Klip Wayang 35

9.1 Apakah Movie Clip? 35
9.2 Tutorial 3: Bagaimana menghasilkan Movie Clip yang mudah 35

BAB 10 Tween 36
10.1 Tweening Animation 36
10.2 Classic Tween 36
10.3 Tutorial 4: Menghasilkan Classic Tween yang mudah 36
10.4 Shape Tween 38
10.5 Tutorial 5: Menghasilkan Shape Tween yang mudah 38
10.6 Motion Tween 39
10.7 Tutorial 6: Menghasilkan Motion Tween yang mudah 40

2
 BAB 1
Persekitaran Kerja
1.1 Pengenalan
Adobe Flash ialah rangkaian multimedia yang digunakan untuk menambah animasi, video dan
interaktiviti untuk laman web. Adobe Flash sering digunakan untuk iklan-iklan dan permainan
komputer.

Adobe Flash memanipulasi grafik vektor dan raster dalam menyediakan animasi teks, lukisan dan
imej pegun. Flash menyokong pelbagai penstriman audio dan video, dan dapat menangkap input
pengguna melalui tetikus, papan kekunci, mikrofon, dan kamera. Adobe Flash mengandungi satu
bahasa berorientasikan objek yang dikenali sebagai ActionScript.

1.2 Antara muka Flash

Adobe Flash mempunyai persekitaran kerja intuitif atau antara muka yang mudah. Tambahan pula
ia mempunyai beberapa kelebihan kerana ia hampir sama dengan program Adobe lain seperti
(Dreamweaver, Freehand, Director), membuatkan ianya lebih mudah dikuasai dan difahami.

Menu bar

Properties
Panel

Panels

Tool Panel
Stage

Work Area

Layers Timeline

Daripada imej diatas, kita dapat melihat antaramuka yang muncul sebaik sahaja program Adobe
Flash diaktifkan. Adobe Flash akan mengingati keutamaan anda dan secara automatik membuka
semula tugas yang anda buat pada sesi terakhir sebelum menutup program.

3
Berikut ialah penjelasan setiap item-item dan juga fungsi.

1.2.1 Menu Bar

Menu Bar digunakan untuk memudahkan pengguna menggunakan ciri-ciri program yang lain. Ianya
serupa dengan mana-mana program Adobe lain. Berikut merupakan Submenu yang boleh
digunakan:

Menu Description
 Membolehkan anda mencipta, membuka dan menyimpan hasil kerja anda.
 Memasukkan hampir kesemua jenis arkib ke dalam movie yang sedang anda
hasilkan (bunyi, video, Imej atau Flash movies).
File
 Opsyen Publication Settings dimana anda boleh mengubah sifat-sifat sesuatu
terbitan.
 Mengkonfigurasi helaian yang hendak dicetak dan ciri-ciri cetakan.
 Menu klasik yang membolehkan anda melakukan arahan Cut, Copy, Paste keatas
Edit objek, imej atau pun Frame.
 Membolehkan anda mengubahsuai beberapa opsyen lazim program ini.
 Membolehkan anda memindahkan frame dan scene selain daripada membuat
View fungsi Zoom biasa. Juga boleh membuat grid dan guides, ini boleh dipilih melalui
opsyen yang dikonfigurasi dan submenu Grid and Guides.

 Membolehkan anda memasukkan objek, frame baru, layer, action dan scene ke
Insert
dalam movie anda.
 Transform membolehkan kita untuk mengubahsuai grafik yang terdapat dalam
sesuatu movie.
 Draw Bitmap membolehkan pengubahsuaian grafik semasa dalam peta-peta
Modify
vector.
 Other options membolehkan kita mengubahsuai sifat-sifat Smooth, Optimize atau
pun dari movie yang sama (Layer, Scene) dalam elemen animasi.

Text  Mengandungi kesan dalam mengedit teks.

 Membolehkan pengendalian Command (sekumpulan ayat-ayat yang disimpan

yang mana ia membenarkan peniruan terhadap apa yang telah diperkenalkan oleh
Commands
pengguna dalam edisi) yang telah kita simpan dalam animasi kita, dalam
melaksanakan apa yang kita ada.

 Anda boleh mengubahsuai sifat – sifat penghasilan semula pada filem Play,
Control
Rewind, Test Movie.
 Debugging merupakan satu proses membuang isu-isu biasa daripada aplikasi anda
Debug atau pun menguji kesilapan-kesilapan yang tidak diketahui dan masalah-masalah
dalam perlaksanaan.

4
  Selain daripada opsyen klasik dalam mengagihkan windows, menu ini mempunyai
Window
pintasan ke semua panel.

 Kita boleh mengakses fail Help yang diberikan oleh Adobe, daripada manual
Help
semasa kepada Action Script, tutorial, panduan pelajaran dan sebagainya.

1.2.2 Timeline

Timeline mewakili satu mod visualisasi yang mudah. Ia mengandungi dua bahagian:

1. Frames yang dibatasi oleh garis tegak.

2. Nombor-nombor frame yang membolehkan kita mengetahui sesuatu nombor yang
ditetapkan bagi setiap frame, tempoh dan bila frame akan muncul dalam filem tersebut.

Tambahan pula, terdapat beberapa alat pada bahagian bawah seperti Onion paper dan ia juga
menunjukkan maklumat tentang Jumlah frame semasa (1 dalam imej), kelajuan frame (24.0 dalam
imej) dan jangkamasa movie (0.0 dalam imej).

Timeline mewakili pertukaran frame dalam sesuatu jangkamasa. Movie Flash bukannya frame
tunggal yang akan kelihatan satu per satu dalam Timeline yang mana susunannya dibentuk oleh
Timeline yang sama.

1.2.3 Layers
Pengetahuan mengenai Layer merupakan asas dalam
menguasai Adobe Flash dengan efisien. Layer boleh
didefinisikan sebagai satu movie induk pada satu
lapisan sahaja. Ini bermaksud, satu Layer mengandungi
garis masa tersendiri.

Objek dalam satu Layer berkongsi frame yang sama.

Oleh itu, ianya boleh digabungkan. Namun, adalah lebih
baik memisahkan setiap objek supaya objek tidak akan
bertindih. Menggunakan layer yang banyak adalah baik
dalam menghasilkan filem dan ianya lebih mudah digunakan.

5
1.3 Ruang kerja
Kawasan kerja merangkumi beberapa bahagian. Bahagian yang paling penting adalah Stage. Stage
mempunyai ciri-ciri yang penting, oleh itu Stage saling berkait dengan Document Properties, untuk
menggunakannya, tekan butang kanan tetikus di mana-mana pada Stage yang tidak mempunyai
objek dan seterusnya pada Document Properties.

OR

Daripada Properties Panel Klik tetikus kanan pada Stage

Tetingkap untuk Document Setting

6
Alat Huraian
Ia menentukan saiz pada wayang. Saiz terkecil adalah 1 x 1px (pixels) dan
Dimensions
terbesar pula adalah 2880 x 2880 px.

Match Ia menyebabkan kebetulan pada wayang dengan pilihan saiz.

Background Color Warna yang dipilih akan dijadikan warna latar belakang keseluruhan wayang.
Frame Rate Bilangan frame sesaat yang akan muncul pada wayang.
Ruler units Unit yang digunakan untuk mengukur jumlah
Butang ini telah ditambah dalam versi ini, bagi membenarkan penyimpanan
Make Default ciri-ciri ke dalam dokumen semasa dan diaplikasikan ke dalam semua
dokumen. Ciri-ciri ini boleh ditukar dari panel pada bila-bila masa.

1.3.1 Views atau Zooms

Efek Zoom bergerak dari jarak dekat atau jauh daripada pandangan asal. Ianya sangat berguna untuk
melihat animasi (terutamanya grafik) dan boleh memperbaiki sesetengah bahagian yang tidak dapat
terlihat pada jarak tertentu. Selain daripada itu, ianya berguna untuk melihat animasi dari jarak jauh
bagi mendapatkan visi umum.

1.3.2 Zoom Panel

Anda boleh mengakses semua fungsi zoom melalui Menu View.
Dalam mana-mana kes. Flash termasuk dalam capaian pantas untuk
submenu termasuk:

Show Frame: Ianya menunjukkan kandungan keseluruhan frames

global semasa. Saiz frame diperluaskan bagi menampung
keseluruhan kawasan kerja. Anda tidak akan dapat melihat objek jika
ianya berada di luar kawasan kerja.

Show All: Semua objek wayang ditunjukkan di dalam kawasan kerja,

daripada size frame ke ruang kosong dapat dilihat setelah di
sesuaikan. Semua objek tidak akan kelihatan di sebelah kanan apabila
semua objek di letakkan di sebelah kiri frame.

7
1.3.3 Panels
Panel mengandungi berberapa fungsi yang tersendiri. Misinya adalah bagi memudahkan dan
menyenangkan bagi pengguna.

Color Panel warna membolehkan kita menghasilkan warna palette FLA

dan menukar warna garisan dan pengisian.
Swatches Membolehkan kita memilih warna secara cepat dan grafik

Align Cara mudah untuk menjajarkan objek secara tepat

Info Gunakan info panel untuk memaparkan secara terperinci ketika
anda menguji kandungan fail dan jenis yang alat sokongan yang
berbeza.
Transform Mengubah, memutar, senget, skala atau mengubah elemen. Anda
boleh mengubah atau menambah pilihan semasa operasi
pengubahsuaian.
Code Panel Code Snippets dicipta bagi memudahkan bukan programmer
Snippets untuk memulakan ActionScript 3.0 yang mudah dan cepat. Ini
membolehkan anda menambah Code ActionScript 3.0 keatas fail
FLA bagi membolehkan ianya berfungsi secara umum.
Components Membolehkan kita memasuki apa yang telah dibuat dan
mengunakan komponen yang telah disediakan oleh Flash.
Komponen adalah objek “bijak” yang mempunyai sifat dan banyak
kegunaan (calendar, skrol dan sebagainya)
Motion Motion presets adalah tatarajah sebelum motion tweens yang anda
Presets boleh aplikasikan keatas objek. Dengan mudah pilih objek dan klik
butang Apply ke atas panel Motion Presets.
Project Anda boleh menggunakan panel Projek Flash Pro dalam mengurus
pelbagai dokumen untuk satu projek. Projek Flash Pro
membenarkan anda mengumpul pelbagai fail yang berkaitan
semasa menghasilkan aplikasi yang kompleks.

8
 BAB 2
Melukis dan Mewarna
Terdapat beberapa fasa yang perlu dilalui oleh pereka dalam menghasilkan satu animasi atau reka
bentuk web. Selepas fasa “Apa yang saya ingin hasilkan dan bagaimana ia akan kelihatan”
kebiasaannya, fasa reka bentuk adalah langkah seterusnya. Menyedari akan imaginasi yang anda
hasilkan, sekarang adalah masa untuk mengetahui setiap alatan melukis dan mewarna dengan
effektif.

2.1 Tools Panel

Toolbar mengandungi semua keperluan dalam proses melukis. Berikut adalah alatan yang selalu
digunakan dan bagaimana menggunakannya.

Alatan Penerangan
Selection Selection: Gerakkan pilihan atau lapisan
Tool Subselection: Pilih dan gerakkan tujuan laluan
Free Transform: Mengukur semula, memutar, dan mencondong
objek
3D Rotation: Memutar objek di dalam ruang 3D
Lasso` : Membuat pilihan
Drawing Pen : Melukis laluan Vektor
And Text Text: Mencipta kotak teks.
Tools Line : Melukis garis lurus
Shapes : Melukis bentuk Vektor
Pencil : Melukis laluan secara bebas
Brush Melukis kawasan secara bebas
Deco : Mencipta corak menggunakan simbol

Retouching Bone : Mencipta objek Kinematic secara songsang

Tools Paint Bucket: Mengubah atau mengisi ruang.
Eyedropper :Contoh warna dan gaya
Eraser : Memadam kerja lukisan

Navigation Hand :Memandu arah

Tools Zoom : Menambah atau mengurangkan size paparan
Colors Area Stroke Color : Memilih stroke (garis luar) warna.
Fill Color : Memilih isi(didalam) warna
Default Stroke/Fill : Meletakkan stroke and mengisi warna asas:
hitam dan putih.
Swap Colors :Menukar stroke dan pengisian warna

9
2.1.1 Opsyen dalam Tool Panels
Sesetengah alatan mempunyai keistimewaan pilihan bagi memudahkan dan
menguatkan kegunaannya. Untuk mencapai utiliti ini, kadang-kala tidak cukup sekadar
klik pada alatan yang padan. Cara untuk mencapai Sub-menu, klik pada garisan atau
objek rujukan. Kemudiannya sub-menu akan muncul (atau ianya akan ditanda sekiranya
ia telah sedia ada) sebagai:

Adjusting Objects: Ia digunakan bagi membuat objek untuk disesuaikan dengan lain,
contohnya, jika boleh bersilang dengan sempadan, dan objek seperti digabungkan.

Smoothening: Ia menghaluskan segmen lurus dalam mengurangkan ketegaran garisan

Straightening: Ia berfungsi sebaliknya. Ia menukar segmen bulat kepada garis lurus

2.2 Color Panel

Melalui Color Panel kita akan dapat menghasilkan warna kita sendiri dan juga memilih warna-warna
yang kita suka.

Untuk memaparkan color mixer panel, klik pada icon Color Mixer. Satu panel yang mengandungi
pelbagai warna akan dipaparkan. Pilih salah satu. Ia juga membolehkan pengenalan kepada kod
warna menurut kepada piawaian berasaskan HTML.

Color Mixer
Color Swatches

Kita boleh mencipta pelbagai jenis Fills (kandungan):

 Solid Fill: Kandungan hanya mempunyai satu warna.
 Linear Gradient: Jenis kandungan khas, satu warnap
akan membuat gradient sehingga warna bertukar ke
satu warna yang lain. Warna tersebut kelihatan
beransur gelap dari satu sudut ke satu sudut yang lain.
 Radial Gradient: Hampir sama dengan diatas, tetapi
corak gradient tersebut bertukar menjadi gelap adalah
secara berpusar.
 Bitmap: Membolehkan anda memasukkan imej ke
dalam movie sebagai kandungan.

10
2.3 Swatches Panel
Panel Color Swatches memudahkan kita untuk melihat warna-warna yang telah disusun dengan
cepat dan mudah, warna solid (hanya satu warna) dan juga linear gradients atau radial gradients.
Tambahan pula, apabila kita mencipta warna menggunakan Panel Color Mixer, kita boleh
memasukkannya ke dalam sampel dengan arahan Add Swatch (dalam menu, yang terletak di
bahagian atas kanan panel Color Mixer). Apabila warna sudah dimasukkan, ia akan tersenarai
bersama set sampel yang lain, mudah diakses ketika membuat movie. Setiap movie mempunyai set
sampel tersendiri, dan setiap kali kita membukanya kita boleh menggunakan sampel terakhir yang
kita gunakan sebelum ini.

Warna yang dimasukkan dari

Masukkan warna dari Color Mixer ke
Color Mixer
Swatches

2.4 Align Panel Align panel

Setelah mengetahui bagaimana memilih objek sekarang kita

akan menjajarkan objek-objek tersebut.

Bagi memjajarkan objek dengan tepat, Flash menyediakan

Align Panel. Bagi memaparkan Align Panel, kita hanya perlu
klik pada ikon Align:

Panel Align membolehkan kita menjajarkan objek

sebagaimana dikehendaki. Sebelum kita mengambil kira
sebarang kemungkinan, kita mesti menekankan opsyen Align
To Stage. Opsyen ini menunjukkan semua kedudukan yang
mungkin bagi setiap objek dalam stage.

Jika opsyen ini tidak dipilih, objek akan mengambil rujukan daripada kumpulan objek tersebut
berada, dan akan menyelaraskan kedudukan secara automatik. Pilihan yang selalu digunakan adalah
Stage, di mana ianya akan meletakkan objek di tengah-tengah frame bergantung kepada had
sesebuah filem.

11
Align Panel dan kelebihannya:
 Align: Align digunakan untuk memastikan objek
yang dipilih disusun secara seragam pada suatu arah

 Distribute: Menjajarkan objek dengan mengambil kira

paksi yang melepasi bahagian tengah satu-satu objek,
ini membolehkan pengagihan kelihatan seragam.

 Match Size: Menyeimbangkan saiz objek. Jika “To Stage” diaktifkan,

secara automatik saiz objek akan disepadankan dengan panjang dan
lebar sesebuah filem.

 Space: Menyebarkan ruang kosong antara objek secara seragam.

2.5 Info Panel Info panel

Selain daripada menggunakan Align Panel untuk

mengawal kedudukan sesuatu objek dengan tepat, kita
juga boleh menggunakan Info panel.

Anda boleh mengakses panel ini daripada ikon Info.

Kelebihan panel ini adalah terhad, tetapi jika kita
mencari ketepatan atau tidak yakin dengan pengagihan
melalui Flash, kita boleh menggunakan cara ini.

Width/Height: Memaparkan saiz objek

dengan demensi yang dipilih dalam
Document Properties. W: ialah lebar H: ialah tinggi.

Registration/Transformation Point: Mengawal lokasi sesuatu objek dalam stage. X dan Y

mewakili koordinat paksi sesuatu objek (X ialah paksi mendatar dan Y ialah paksi
menegak).

Color At Cursor Location: Menunjukkan warna semasa dimana cursor diletakkan,

bergantung kepada kuantiti Merah (R), Hijau (G), Biru (B) and Alpha effect (Alpha) yang
ada.

Cursor Location: Menunjukkan lokasi cursor. Cursor ini berguna jika kita kita hendak
membuat sesuatu pada movie selepas kita memastikan kedudukan cursor atau pun untuk
menjajarkan bahagian-bahagian objek dalam sesuatu kedudukan.

12
 BAB 3
Berkerja dengan Objek

3.1 Objek
Bekerja secara bebas dengan animasi, laman web, katalog untuk CD-ROMs atau di mana-mana
tempat lain, kita akan bekerja dengan objek. Secara umum, kita boleh menganggap semua yang
muncul dan dapat dilihat dalam wayang sebagai satu objek. Sesuatu objek boleh dijadikan imej,
yang mana kita reka atau import, button, lukisan dan sebagainya.

Yang boleh dianggap objek mempunyai 2 bahagian asas:

3.1.1 Sempadan (Border)

Terdiri daripada satu garis nipis yang memisahkan objek daripada
bahagian luar stage. Ianya boleh wujud atau tidak, bergantung
kepada apa yang mudah bagi kita. Apabila kita mewujudkan Fill
sesuatu objek, garis sempadan akan terhasil dan warnanya
dikenalpasti sebagai garisluar berwarna (Outline Color)

Jika kita mahu melukis dan mewujudkan Sempadan kita mesti

Border
menggunakan Pensil Tool, Line or Pen dan jika kita ingin lukisan
tanpa sempadan, klik pada garisan Border dan padam.

3.1.2 Pengisian (Fill)

Fill adalah bahagian keseluruhan dalaman objek tanpa sempadan. Bagi melukis objek tanpa
sempadan, kita boleh menggunakan tools seperti Paintbrush atau Paint Bucket.

Objek yang tidak dipilih Objek dengan garisan sempadan Objek dengan pengisian telah
yang telah dipilih dipilih

13
3.1.3 Select (Menggunakan Selection Tool)
Bekerja dengan objek, adalah lebih baik mengetahui bagaimana mengubahsuai objek sama ada
(bergerak, berputar, mengubah warna). Mari lihat bagaimana memilih bahagian objek yang berbeza:

 Memilih sempadan (border) atau Pengisian (Fill): Klik pada Border atau Fill

 Memilih sempadan (border) dan Pengisian (Fill): Klik dua kali pada Fill.

 Memilih semua sempadan (atau garisan) pada warna yang sama dan berhubung: Klik dua kali
pada garisan yang mempunyai warna.

 Memilih Simbol, teks, atau kumpulan: Klik teks dalam Simbol atau dalam kumpulan. Sempadan
objek akan berwarna biru setelah dipilih.

 Memilih pelbagai elemen: Terus tekan SHIFT sementara pemilihan objek.

 Memilih objek yang wujud dalam satu zon tertentu: Gunakan Selection Tool (Anak Panah)
untuk memilih objek.

 Memilih daripada Timeline: Jika kita memilih satu frame yang tertentu daripada Timeline,
semua objek dalam frame tersebut akan dipilih secara automatik. Ianya berguna jika anda mahu
mengubahsuai semua elemen dalam frame dengan cepat.

 Memilih Semua: Salah satu pemilihan mod biasa yang mengandungi semua eleman adalah
dengan mengklik menu Edit → Select All.

3.1.4 Kumpulan (Mengubah kumpulan)

Satu kumpulan adalah terdiri daripada satu set objek. Namun bukan semua objek adalah dalam
bentuk kumpulan. Oleh itu, pilih objek-objek yang hendak dikumpulkan, kemudian klik Menu.
Modify -> Group.

Kita dapat perhatikan bahawa tekstur pada setiap objek akan hilang setelah dikumpulkan. Setelah
digabungkan, adalah mustahil untuk memilih satu objek sahaja daripada kumpulan tersebut.
Tambahan pula, garis segiempat di sekeliling objek-objek tersebut telah memagari semua objek
yang telah digabungkan.
Select All  Modify  Group

Namun, jika anda ingin mengubah satu daripada objek tersebut, anda harus membatalkan
penggabungan objek, iaitu dengan cara klik pada objek kumpulan > Menu Modify > Ungroup.

14
 BAB 4
Berkerja dengan Teks
Flash memberikan kesemua yang mungkin kita perlukan dalam penghasilan animasi dan seterusnya
yang berkaitan dengan teks. Walaubagaimanapun, Flash telah menghasilkan animasi grafik, dalam
bentuk dimana ianya akan menggunakan sebarang teks dalam satu atau lebih objek untuk
digunakan dalam animasi yang anda kehendaki. Flash juga membenarkan anda mengubah kesan
animasi teks dalam penciptaan animasi yang menarik. Flash dibahagikan kepada 3 jenis teks: Static
Text, Dynamic text, dan Input Text.
Engin Teks
4.1 Ciri – Ciri Teks
Klik pada Text Tool untuk memasukkan
tulisan pada stage di mana kita ingin
meletakkan teks. Pada Properties Panel,
ianya terbahagi kepada beberapa bahagian:

Jenis Teks Orentasi Teks

Engin Teks Arah bagi menambah teks mudah atau teks yang memerlukan pilihan
(Text Engine) canggih seperti ruang berganda atau membungkus objek disekitarnya.
Jenis Teks Pilihan mana-mana teks digunakan bagi tujuan paparan.
(Text Type)
Orentasi Teks Teks penyesuaian ditukar dari mendatar kepada menegak begitu juga
(Change Orientation Of dari kanan ke kiri.
Text)

Pemilihan kedudukan X Pemilihan kedudukan Y

Pemilihan kelebaran Pemilihan Ketinggian

Kekunci pemilihan
nilai lebar dan tinggi

Selection X Digunakan untuk mengubahsuai kedudukan animasi anda /teks mendatar.

Position
Selection Y Digunakan untuk mengubahsuai kedudukan animasi anda / teks menegak.
Position
Selection Width Digunakan untuk mengubah saiz animasi anda/kelebaran teks.
Selection Height Digunakan untuk mengubah saiz animasi anda/ketinggian teks.
Lock Selection Pilihan mengubah size anda akan diubah secara bersama.
Width & Height
Values Together

15
 Setkan Font
Setkan Font Family Embedding Options
Setkan Font Style
Pilih Tracking Amount
Pilih Point Size dalam Points
Text (Fill) Color Auto Kern
Font Rendering Method

Set The Font Pilih jenis font yang dikehendaki.

Family
Set The Font Style Pilih sama ada Regular, Bold, Italic atau Bold Italic.
Select Point Size Pilih saiz huruf cetak.
Text (Fill) Color Pilih warna huruf cetak.
Set Font Ini membolehkan huruf cetak yang dicipta di dalam dokumen berjalan seiring
Embedding dengan document, ini bagi memastikan pandangan dokumen kelihatan
Options seperti apa yang anda inginkan.
Select Tracking Pilih ruang huruf cetak.
Amount In Points
Auto Kern Isi diantara dua ruang ciri. Kebanyakan huruf cetak mengandungi maklumat
tentang masalah ciri-ciri.
Font Rendering Pilih bagaimana alat anda melaksanakan huruf cetak anda.
Method

Text alignment

Indentation Line Spacing

Left Margin Right Margin
Line Type

Text Alignment Align Left: Kesemua garisan bermula dari kiri sejauh mungkin (diantara frame
teks yang telah ditetapkan).
Center: Garisan telah dibahagikan ditengah-tengah titik perenggan diantara
kiri dan kanan.
Align right: Kesemua garisan bermula dari kanan sejauh mungkin (diantara
kotak teks yang disediakan).
Justify: Jika ruang terhad teks akan dilebarkan jika perlu.
Indentation Bagi memastikan ruang diantara teks. Ini digunakan apabila typography
menunjukkan fail yang sama atau menambah kesan khas pada teks.
Left/Right Margin Mengukur semula ruang kosong dari kiri ke kanan paparan anda.
Line Spacing Jumlah ruang yang muncul diantara garisan di dalam teks dokumen.
Line Type Jika teks adalah dinamik, pilihan ini membenarkan kita untuk memilih jenis
garisan (1 garis, garis berganda atau garis berganda tanpa diubah).

16
4.2 Text Layout Framework (TLF Text)
TLF menyokong kelebaran kekayaan teks serta menyusun sifat teks dan menyediakan kawalan halus
teks. TLF juga membenarkan kawalan hebat ke atas teks dari enjin teks sebelumnya, sekarang
“Classic Text”. TLF teks juga menyediakan ciri gaya tambahan, termasuk jarak, ligatures, warna
terang, garis bawah, strikethrough, kes, kes digit dan banyak lagi.

Ia juga termasuk gaya perenggan tambahan, termasuk sokongan pelbagai kolum serta kelebaran
parit. Garis akhir adalah pilihan justifikasi, margin, inden, ruang perenggan, dan nilai pad tambahan.
Anda juga boleh meletakkan putaran 3D, kesan warna, dan cara campuran ke TLF teks tanpa
meletakkan symbol klip wayang.

Menggunakan 3D Rotation tool Putaran 270 darjah

Highlighted Strikethrough

17
 BAB 5
Berkerja dengan Bunyi
Flash membenarkan kita memasukkan sebarang bunyi yang kita mahu dalam filem kita (.wav, .aiff
y .mp3) dengan cepat dan mudah. Kita juga dapat menambah kesan biasa pada wayang (biasanya
"klik" pada butang), kesan yang kompleks (muzik latar) dan malahan membuat animasi yang
dihasilkan bersama muzik.

5.1 Mengimport bunyi

Untuk menambah bunyi ke dalam Movie anda perlulah mengimport masuk media tersebut ke dalam
library terlebih dahulu. Caranya adalah:

Klik pada File  Import  Import to Library

Perhatikan bahawa, anda hanya boleh mengimport fail .wav audio ke dalam filem anda. Sebaik
sahaja fail ini diimport, anda boleh melihat fail baru ini dalam panel Library anda. Setelah fail audio
tersedia, anda kini boleh menggunakannya pada bila-bila masa yang anda mahu.

18
5.2 Ciri – ciri bunyi
Dalam Flash, kita boleh menghasilkan bunyi daripada Properties Panel. Segala yang ada di sini bagi
tujuan memasukkan, mengubahsuai dan menyunting bunyi yang kita gunakan. Jika kita belum
mengimport sebarang bunyi, kita akan dapati bahawa panel ini tidak boleh digunakan. Untuk
menggunakan bunyi, kita perlu mengklik pada tetingkap filem dan seterusnya Properties Inspector
akan memaparkan paparan seperti berikut:

Sound Name

Sound Effect

Edit Sound Envelope

Sync Sound Sound Loop

Number Of Times
To Loop

Ini adalah Ciri-Ciri Bunyi yang perlu kita beri perhatian.

Sound Name Memaparkan senarai bunyi yang telah diimport.

Sound Effect Dari sini kita boleh menambah efek ke dalam bunyi, sebagai contoh bunyi melalui
saluran kiri ke kanan (ini mencipta bunyi yang sensasi yang mana bunyi yang kita
dengar adalah dari satu tempat ke satu tempat, meskipun ianya jauh daripada
bunyi sekeliling), volume bertambah secara progresif dan sebagainya… Jika kita
ingin menambah efek bunyi secara kompleks, mungkin kita perlu memadankan
bunyi tersebut dengan program yang dicipta secara specific bagi mencapai tujuan
sebelum mengimport.
Sound Sync Pilihan bunyi ini membolehkan kita menentukan bila masa kita memulakan
lakonan, ini adalah pilihan yang kita ada.
Sound Loop / Menentukan bilangan nombor bunyi yang dimainkan. Dimainkan bagi tempoh
Number Of yang tidak pasti, dimainkan mengikut kiraan masa wayang dan masa bunyi,
Times To Loop kemudian diulang jika diperlukan (ini lebih baik dari menetapkan pada 9999 kali)

19
5.3 Mengubahsuai Bunyi
Tidak digalakkan memasukkan bunyi menggunakan pilihan Stream dan dalam masa yang sama
mengulangi kembali bunyi tersebut semasa menyelarasakan bunyi dengan imej. Terdapat satu alat
istimewa yang boleh digunakan iaitu Edit Sound Envelope. Dengan alat ini, kita boleh memotong
hujung bunyi (jika ianya terlalu panjang) atau membuat bunyi tersebut beransur hilang. Apabila kita
klik pada Edit Sound Envelope tool, panel tool akan terpapar.
Effect

Left Channel
Timeline

Right Channel

Play Controls View Options

Apa yang boleh anda lakukan adalah klik pada butang Zoom Out sehingga anda dapat melihat
penghujung gelombang suara. Dari timeline bar, tarik bunyi kemana-mana yang anda perlu dan
anda akan melihat gelombang bunyi semakin pendek. Atau, anda boleh gunakan pilihan efek bagi
menghasilkan kesan bunyi. Fade Out sebagai contoh akan membuat penghujung bunyi lebih
menarik.

20
5.4 Memasukkan Bunyi
Bunyi akan dipaparkan oleh Flash pada Frames
Sekarang kita sudah tahu bagaimana untuk
mengimport bunyi, apakah pilihan yang kita
ada bagi mengubah dan bagaimana
mengunakannya. Salah satu ini sangat
penting: Bagamana memasukkannya ke
dalam movie kita.

Mari kita gunakan Classic Tween yang mudah ini

sebagai contoh. Mula-mula, klik pada frame yang
terletak diantara keyframe asal dan keyframe
akhir. Kemudian lihat pada seksyen Sound yang
terletak pada panel Properties.

Sekarang, klik pada menu yang berlabel Name.

Pastikan anda sudah mengimpot bunyi tersebut
terlebih dahulu. Sekarang, perhatikan pada
opsyen yang ada dan cari fail untuk bunyi tersebut.
.

21
 BAB 6
Layer
6.1 Apa itu layer?
Kita mengunakan layer dan frame untuk mengawal objek-objek yang terkandung dalam animasi.
Frame mewakili masa untuk wayang kita. Bayangkan 1 frame sebagai 1 saat. Semakin banyak frame,
semakin lama masa tayangan anda. Layer pula kita boleh anggap sebagai lapisan-lapisan pada
wayang kita. Setiap layer selalunya mengandungi satu objek yang mempunyai animasinya yang
tersendiri.

6.1.1 Memasukkan dan membuang layer

Untuk memasukkan layer baru. Klik pada New Layer Button yang terletak pada bawah sebelah kiri
panel Timeline. Untuk membuang layer, klik pada butang Delete Layer yang juga terletak pada
kawasan yang sama.

New Layer Delete Layer

6.2 Berkerja dengan layer

Piawaian paparan satu lapisan menunjukkan sesuatu imej. Mari lihat perbezaan butang yang
digunakan dan bagaimana menggunakan butang tersebut.

Show Or Hide
All Layers Show All Layers
As Outline

Lock Or Unlock
New
New Folder
Folder
New Folder All Layers

New Layer Delete

22
New Layer Digunakan untuk menghasilkan layer pada scene.
New Folder Untuk menghasilkan folder layer. Ia membantu mengumpulkan layer yang
berkaitan supaya timeline anda tersusun dan senang diurus.
Delete Padam Layer
Show Or Hide Alat ini membolehkan kita memaparkan atau menyembunyikan semua lapisan
All Layers filem. Ianya sangat berguna apabila kita mempunyai banyak lapisan dan ingin
membuka hanya satu lapisan sahaja dalam satu masa.
Lock Or Unlock Alat ini digunakan untuk menghalang mana-mana lapisan yang tidak diingini
All Layers ketika proses mengedit.
Show All Layers Butang ini akan menyembunyikan / menampakkan kandungan dalam semua
As Outline layer dalam bentuk garisan. Berdepan dengan pelbagai set objek dengan cara ini,
kita akan dapat membezakan semua layer dengan mudah dan untuk melihat
dalam setiap lapisan.

6.3 Menyusun semula layer

Lapisan yang berlainan mempunyai ciri-ciri yang biasa dengan yang lain. Pertama dan ciri utama
adalah Timeline, semua lapisan pada skrin berkongsi had masa yang sama, oleh itu, keseluruhan
bingkai objek akan kelihatan dalam keseluruhan lapisan, pada masa yang sama dalam filem ianya
akan bertindih antara satu sama lain.

Kenapa objek bertindan dengan objek yang

lain? Kriteria yang diberikan adalah
berdasarkan kedudukan layer dalam sesuatu
file. Objek yang akan muncul terlebih dahulu
akan berada di lapisan paling atas.

Contoh: Lihat gambar disebelah.

Penjaga gol muncul di hadapan gol, kerana
lapisan "Penjaga Gol" adalah terletak di atas
lapisan "Goal", agar ia boleh dilihat sebagai
imej. Jika kita mahu menukar kedudukan
objek, klik pada lapisan dan gerak dan tarik
ke atas atau ke bawah mengikut kedudukan
yang diingini.

23
6.4 Jenis – jenis layer
Terdapat pelbagai jenis layer, seperti yang terdapat pada sifat-sifat am sesuatu layer:

Normal Layers: Merupakan keadaan default sesuatu layer, ia akan mempunyai semua
ciri-ciri. Lapisan popular digunakan dan hampir semua menggunakannya: untuk
meletakkan objek, bunyi, aksi dan Helps.

Guide Layers: Layer ini untuk kandungan yang khas dan spesifik. Ia
digunakan dalam animasi bagi pergerakkan sesuatu objek dan tujuannya
hanya untuk mengarahkan satu trajektori yang mesti diikut oleh objek.
Sebab, ianya digunakan untuk mewakili trajektori sesuatu objek yang
dianimasikan, dan selalunya terdiri daripada garisan (lurus, berbentuk dan
sebagainya.

Dalam imej dibawah kita dapat melihat terdapat dua layer. Yang pertama mengandungi bola biru
dan yang kedua mengandungi garisan berbentuk. Kita telah menentukan layer kedua sebagai Guide
Layer, supaya apabila kita membuat pergerakan, ianya akan digunakan sebagai trek bagi bola biru
tersebut. Garisan tersebut tidak akan kelihatan dalam movie setelah ianya siap.

Guide act as Motion Path

24
6.5 Tutorial 1: Bagaimana menggunakan “Guide Layer”
Motion Guide merupakan garisan yang digunakan sebagai laluan yang diikuti oleh sesuatu objek
untuk apabila digerakkan. Jika anda menngunakan versi Flash lebih lama, anda masih boleh
melakukan tutorial ini.

1. Buat dua layer dan namakan yang atas sebagai Guide dan yang bawah sebagai Obj. Anda
boleh menamakan kedua-dua layer mengikut kandungannya. Disini, Guide layer akan
mengandungi Motion Guide dan Obj layer akan mengandungi objek yang akan digerakkan.

2. Klik kanan pada nama Guide Layer dan pilih Guide. Ini akan untuk menghasilkan garisan
dalam layer yang mana kita hendak membuat Motion
Guide.

Jika langkah ini dilakukan dengan betul, layer tersebut

akan kelihatan seperti berikut.

Berikan perhatian untuk langkah seterusnya,

klik pada nama Obj Layer dan sambil menekan
butang kiri tetikus, gerakkan tetikus sedikit ke
atas.

Apabila tetikus dilepaskan, layer anda akan

kelihatan seperti pada imej sebelah kanan.
Anda telah menetapkan Guide layer sebagai
motion guide untuk Obj Layer.

25
3. Pilih frame pertama pada Guide layer. Pilih
Pencil Tool dan lukis laluan yang akan dilalui
oleh objek anda. Garisan ini akan menjadi
Motion Guide anda.

4. Sekarang lukis objek anda. Satu bulatan biasa pun cukup memadai. Anda boleh menukar
objek kepada Symbol, pilih Graphic dan simpan sebagai obj_mc (jika anda melangkaui
langkah ini, Flash menukar objek tersebut secara automatik kemudian).

5. Dalam Properties Inspector anda akan dapat melihat objek obj_mc. Jika anda tidak nampak
Library window pergi ke Window->Properties. Sekarang pilih frame pertama pada Obj Layer
dan heret objek tersebut daripada library ke bahagian atas hujung garis panduan tadi.

26
 Sekarang pergi ke timeline pada setiap layer, klik kanan pada frame ke 30 Insert Frame.
Timeline anda akan kelihatan seperti berikut:

Sekarang pilih ke frame terakhir pada Obj Layer dan heret objek anda ke hujung garisan
Motion Guide. Satu buatan kecil di tengah-tengah objek akan menyangkuk pada hujung
garisan. Sekarang pilih mana-mana frame pada Obj Layer, klik kanan dan pilih Create Classic
Tween.

Selesai.Tekan Ctrl+Enter untuk memainkan movie anda.

6. Jika movie anda bergerak terlalu cepat, ada dua cara untuk mengubahnya. Pertama sekali
dengan menambah jumlah frame. Dan yang kedua dengan Frames per Second (fps) ke nilai
yang lebih rendah pada panel Properties Inspector.

Frames per Second (fps)

27
6.6 Mask Layers
Mask layer adalah layer yang terletak di atas layer yang lain, yang mana ia akan menutupi layer yang
lain, danmembolehkan kita melihat hanya sebahagian daripada layer yang menutupi objek yang
terdapat dalam mask layer (ia berfungsi seperti penapis). Seperti juga guide layers, objek yang sedia
ada dalam layer jenis ini tidak akan kelihatan selepas movie dihasilkan. Hanya objek daripada
masked layer berkaitan dengan objek yang di tutup akan kelihatan.

Mask Layers: Layer ini boleh diibaratkan sebagai kumpulan yang mengekalkan unmasked layers
terbuka.

Mask Layer
Masked Layer

Masked Layers: Layer ini berfungsi dengan Mask Layers. Mask layers dan masked layers mesti
berkait supaya dapat berfungsi dengan baik. Objeknya akan kelihatan pada hasil akhir movie, tetapi
hanya bila beberapa objek pada Mask layer berada
diatasnya.

Sebagai Contoh:
Segi empat tepat berwarna biru merupakan
sebahagian daripada Masked Layer oleh itu ia akan
kelihatan pada hasil akhir movie ( tetapi hanya yang
ditutupi oleh mask layer). Bentuk bujur merah yang
terletak dalam Mask layer tidak akan kelihatan pada
hasil akhir movie, tetapi hanya bahagian bersilang
sahaja yang akan kelihatan.

28
6.7 Tutorial 2: Bagaimana Mask Layer berfungsi?
1. Buat Flash Movie baru, dan buat dua layer, namakan layer pertama mask dan yang kedua
text.

2. Pada layer text taipkan AWESOME dan tukarkan kepada symbol, pilih type sebagai Movie
Clip dan namakan symbol sebagai "text".

3. Pada mask layer buat satu kotak dan warnakan dengan warna hitam, dan pastikan kotak ini
cukup besar untuk memuatkan perkataan yang anda taip tadi. Tukarkannya kepada symbol,
pilih Movie Clip dan namakannya "mask".

29
4. Stage anda akan kelihatan seperti imej berikut. Kita akan masukkan satu lagi keyframe
untuk teks, animasikan teks tersebut, dan paparkan mask mudah dan bagaimana ia
berfungsi.

5. Klik kanan pada frame 50 pada timeline bagi mask layer dan klik Insert Frame (atau klik pada
frame 50 dan tekan F5). Ini akan memastikan objek mask akan kelihatanThis untuk jangka
masa sehingga frame ke 50.

N
e
x
t

6. Seterusnya, klik kanan pada frame 10 pada text layer dan Insert Frame (klik pada frame 10
dan tekan F5). Ini menandakan perubahan posisi bagi symbol ini pada layer tersebut pada
frame ke 50.

R
i
g
h
t
-

7. Klik kanan pada frame 25 pada timeline bagi mask layer dan pilih Create Motion Tween.
Heret kotak kebawah melepasi teks, kemudian klik pada frame 50 dan heret kotak tersebut
balik ke kedudukan asal.

30
8. Timeline akan kelihatan seperti imej diatas. Jika anda heret slider merah diatas timeline anda
akan dapat melihat kotak tersebut bergerak melintasi teks anda.

9. Sekarang kita akan membuat mask. Klik kanan pada bahaigian nama mask layer dan pilih
Mask, dan selesai. Cuba movie anda (dengan menekan Ctrl + Enter) dan anda akan dapat
melihat teks tersebut muncul dan hilang perlahan-lahan.

31
 BAB 7
Simbol
7.1 Apa itu symbols?
Simbol datang daripada objek yang telah kita cipta dengan menggunakan alat yang disediakan oleh
Flash. Apabila mengubah objek menjadi simbol, ianya akan dimasukkan dalam perpustakaan (library)
pada waktu penciptaan yang mana membenarkan kita menggunakan simbol pada beberapa
peristiwa, sama ada dalam filem yang sama atau yang lain.

7.1.1 Bagaimana membuat symbol?

Mencipta simbol baru adalah
salah satu tindakan yang selalu
digunakan dalam Flash dan juga
langkah pertama penghasilan
animasi.

Langkah menghasilkan simbol adalah seperti berikut:

1. Pilih objek yang hendak ditukar menjadi simbol. Buka petak dialog Symbol properties >
menu Insert → New atau tekan butang Ctrl + F8 atau F8.

2. Apabila selesai muncul sebuah tingkap sebagai satu imej. Kita akan meletakkan nama simbol,
yang mana kita akan menggunakannya.

3. Kita boleh memilih type of symbol or behaviour kedalam objek yang telah ditukar. Kita
boleh memilih sama ada Movie Clip, Button And Graphic.

32
7.1.2 Libraries (Penyimpanan)
Terdapat dua jenis library di dalam
Flash, Penyimpanan umum dengan
contoh, dan penyimpanan khas
untuk menghasilkan filem.

Bagi menggunakan penyimpanan

khas yang disediakn oleh Flash,
pergi ke Menu Bar > Window →
Other Panel → Common Libraries
dan pilih salah satu daripadanya. Ini
adalah jenis – jenis symbol: buttons,
clips atau graphic terdapat di sini.

Bagi melihat contoh movie yang telah dihasilkan oleh Flash, pergi ke
Menu Bar, Help →Samples.

Untuk memasuki penyimpanan symbol daripada filem yang kita telah cipta, pergi ke Menu Bar,
Window → Library. Semua simbol-simbol yang kita telah dicipta akan kelihatan dalam penyimpanan
ini.

Kandungan simbol dalam penyimpanan boleh dikenal pasti melalui nama dan ikon yang mewakili
simbol. Untuk menggunakan simbol ddalam penyimpanan, pilih symbol dan heret ke mana – mana
kawasan kerja anda.

Movie Clip Button Graphic

33
 BAB 8
Grafik
8.1 Grafik dalam Flash
Grafik adalah simbol yang mana membenarkan kita menyampaikan objek statik dan animasi yang
ringkas. Jika anda ingin menggunakan grafik dalam filem anda, pastikan ianya mempunyai timeline
sendiri.

8.1.1 Jenis – jenis Grafik

Antara jenis grafik adalah:

a) Static: grafik ini kekal tanpa perubahan. Saiz dan masa untuk memuat naik/turun akan
berkurangan, namun ianya bergantung kepada resolusi grafik tersebut.

b) Animated: Grafik jenis ini mempunyai pelbagai bentuk, kedudukan dan ciri semasa. Saiz
kedudukan grafik animasi (membentuk ciptaan kepada dimensi yang sama) grafik jenis ini lebih
besar daripada grafik statik.

Disebabkan ini, walaupun laman web menyediakan animasi yang hebat dan menarik kemunculannya,
tetapi terdapat 2 sebab yang tidak menyenangkan:
1) Berkenaan dengan Bitmaps (sekarang kita lihat apakah maksudnya) Saiz yang terlampau besar
akan muncul dipenghujung web.

2) Walaupun ini bukan berkenaan dengan bitmap, sebagai contoh, jika terdapat Flash animation
yang biasa dimana saiznya tidaklah melampau, ketetapan yang terdapat di dalam kebanyakan
animasi membuatkan kita merasa “bosan”, dan walaubagaimanapun isu yang penting adalah
kandungannya.

34
 BAB 9
Klip Wayang
9.1 Apakah Movie Clip?
Movie Clip adalah sebuah wayang. Seperti juga jenis-jenis Flash symbol yang lain, klip wayang
mempunyai timeline tersendiri dan tidak seperti Graphics, timeline ini tidak terikat dengan timeline
yang terkandung di dalam dokumen jadi dapat dilakukan dengan bebas.

Simbol-simbol jenis ini boleh mengandungi pelbagai jenis symbol yang lain: grafik, klip atau butang,
begitu juga dengan objek yang dicipta oleh Flash sebab klip tersebut juga merupakan wayang. Salah
satu kelebihan klip yang kita jumpa semasa membuat wayang ialah kerumitan dan size. Ia boleh
membuat banyak bingkai, ini membolehkan kita mempunyai visi yang baik bagaimana kita
membangunkan animasi yang jelas dan timeline yang “lebih bersih”.

Klip merupakan alat yang memberikan Flash kuasa yang hebat, ia juga membolehkan kita mencipta
wayang yang lebih rumit dan meningkatkan efek penglihatan, sejak pergerakan berganda dan bebas,
hubungan diantara klip dokumen yang berbeza dapat dicipta.

Semua ini tidak akan dapat kita cipta dengan jenis symbol grafik tetapi kita boleh melakukanya
dengan klip. Oleh itu, kebiasaanya klip akan digunakan pada apa juga jenis animasi kerana
kehebatan perubahannya meninggalkan graphic untuk kegunaan Static Images.

9.2 Tutorial 3: Contoh membuat Movie Clip

Sila gunakan langkah-langkah berikut dalam Flash untuk menghasilkan simbol klip filem.

1. Pertama hasilkan/mengimport objek yang akan ditukarkan ke klip filem. Import bitmap ke
persekitaran kerja menggunakan Ctrl + R.
2. Pilih objek dan kemudian tekan F8 (atau Modify >> Convert to Symbol).
3. Pilih Movie Clip Behavior dan namakan simbol, sebagai “Fade”.
4. Klik dua kali simbol “Fade” di atas persekitaraan kerja untuk menukar simbol ke mod
simbol-editing. Sekarang hasilkan urutan animasi (anda boleh menggunakan Animasi
Tweened atau Animasi Frame-by-Frame)

5. Rajah di atas menunjukkan Timeline simbol klip Movie. Klik Scene 1 untuk keluar dari mod
penyuntingan simbol.
6. Simpan kerja anda dan uji Movie dengan (Ctrl + Enter).

35
 BAB 10
Tween
10.1 Tweening Animation
Tween dalam Adobe Flash Professional adalah sebuah animasi yang dicipta untuk menyatakan nilai
bagi nilai objek dalam satu keyframe dan satu lagi untuk nilai yang sama dalam satu keyframe yang
lain. Flash mengira nilai di antara kedua-dua frames. Tween diperoleh dari perkataan "di antara".

Terdapat beberapa jenis tweens, termasuk Classic tweens (menggunakan kaedah Timeline animasi
yang terdahulu), Motion tweens (menggunakan Editor Usul dan laluan gerakan), dan Shape tweens
(hasil lukisan dua bentuk vektor berasingan dan berkaitan satu kepada yang lain). Di samping
melakukan pergerakan tweening, anda boleh Tween filter, kesan warna, dan ketelusan.

10.2 Classic Tween

Tweens klasik adalah satu cara lama dalam mewujudkan animasi dalam Flash Professional. Tweens
ini hampir sama dengan Motion Tween, tetapi agak lebih rumit untuk dihasilkan dan kurang
fleksibel.

Walau bagaimanapun, tweens klasik menyediakan beberapa jenis kawalan melalui animasi yang
tidak terdapat dalam Motion Tween. Kebanyakan pengguna akan memilih menggunakan Motion
tweens, tetapi sesetengah pengguna masih mahu menggunakan tweens klasik.

10.3 Tutorial 4: Menghasilkan Classic Tween yang mudah

Langkah:

1. Pertama, buka program Flash. Setelah program dibuka, anda

akan melihat ruang kosong yang dipanggil ruang kerja. Jika
anda tidak dapat melihat sesuatu seperti kotak putih, hasilkan
animasi yang baru dengan pergi ke File > Flash Document.

2. Sekarang, klik pada Alatan Rectangle daripada kumpulan ikon-

Click the rectangle tool icon
ikon di sebelah Kiri. Ikon alat Rectangle akan kelihatan
seperti imej di sebelah:

36
3. Setelah anda klik pada ikon Rectangle, pergi ke kawasan melukis, untuk melukis 1
segiempat, klik pada tetikus dan tarik – kemudian lepaskan setelah anda mempunyai segi
empat. Pastikan bahawa segi empat berada rapat dengan tepi kiri kawasan putih tempat
anda melukis:

Lukis satu segi-empat

menggunakan Rectangle Tool

4. Setelah segi empat dilukis, lihat timeline anda, Timeline

anda adalah kawasan yang luas daripada bahagian yang
mempunyai nombor dan kotak-kotak kecil yang
menegak. Lihat pada Bingkai 1, titik hitam akan
kelihatan:

Pastikan titik dalam timeline anda

5. Titik hitam menandakan sesuatu yang wujud di bingkai

itu – Farme 1. Dalam kes ini, "sesuatu telah wujud"
dalam segi empat yang anda cipta. Sekarang, lihat
sedikit pada sebelah kanan anda dan cari nombor 20.
Klik kanan dan tujukan pada di kotak di bawah berlabel
bernombor 20 dan pilih "Insert Keyframe ".

6. Setelah anda memilih “insert Keyframe”, Anda akan melihat titik hitam yang lain akan
muncul di Bingkai 20. Pastikan anda memilih Keyframe pada Frame 20 dengan mengklik
mengunakan penunjuk tetikus.

7. Dengan memilih Keyframe. Pergi ke segi empat sekali lagi, anda akan melihat seluruh segi
empat anda juga telah dipilih. Sekarang, tekan anak panah sebelah kanan (pada keyboard)
beberapa kali untuk membuat objek bergerak beberapa sentimeter dari kanan ke sebelah
tepi kawasan wayang.

8. Sekarang, dengan penunjuk tetikus, klik Frame 1 wayang anda pada timeline. Pastikan segi
empat beradadi sebelah kiri, tanpa ragu-ragu klik pada Frame 20. Segi empat akan bergerak
ke kanan. Klik mana-mana pada Frame 10 dan anda akan perasan bahawa segi empat itu
berada pada sebelah kiri dan berada pada kedudukan asal.

37
 9. Klik pada Frame 1 dan highlight semua
frame dari Frame 1 sehingga Frame 20.
Sementara semua frame di “highlight”
klik kanan dan pilih " Create Classic
Tween:"

Highlight semua frame dan pilih "Create Classic Tween"

10. Jika semua telah siap, klik pada mana – mana dalam timeline anda, dan perhatikan bahawa
anda boleh "menggerakkan" kedudukan segi empat dalam 20 frame.

11. Pergi ke File > Save bagi menyimpan animasi. Dari sana, pergi ke File > Publish Preview >
HTML. Anda akan melihat segi empat anda beransur-ansur bergerak dari arah kiri ke arah
kanan.

10.4 Shape Tween

Dalam Shape tweening, anda lukiskan bentuk vektor pada satu bingkai tertentu dalam Timeline, dan
mengubah bentuk atau memasukkan satu lagi bentuk lain pada bingkai tertentu. Flash Professional
kemudian menyelitkan bentuk perantaraan untuk bingkai di antara objek, mewujudkan transformasi
animasi satu bentuk kepada yang lain. Shape Tweens boleh dilakukan dengan bentuk yang mudah.
Elakkan menggunakan bentuk cut-outs atau ruang negatif. Bagi menjelaskan lagi bagaimana shape
tween berfungsi, lihat tutorial yang diberikan.

10.5 Tutorial 5: Menghasilkan Shape Tween yang mudah

Mari membuat satu Shape Tween

Langkah 1 - Guna Oval Tool dan lukis satu

bulatan pada Stage – perhatikan, satu Keyframe
muncul pada timeline.

38
Langkah 2 - Masukkan Keyframe yang baru pada
Timeline lalu lukis satu segi empat pada stage.

Langkah 3 - Klik pada frame diantara kedua-dua

keyframe ini lalu pergi pada properties panel dan
pilih Tween – Shape. (Anda juga boleh terus klik
tetikus kanan pada frame tersebut dan pilih Add
Shape Tween)

Sekarang mainkan klip anda.

10.6 Motion Tween

Motion Tween adalah ciri-ciri yang terdapat dalam Adobe Flash yang membolehkan anda dengan
mudah menggerakkan objek. Daripada menentukan lokasi objek dalam setiap bingkai, anda boleh
menggunakan Motion Tween, yang mana secara automatik akan menggerakkan objek dari lokasi
permulaan sehingga akhir.

Untuk mewujudkan Motion Tween pilih lapisan dalam timeline dan heret objek ke atas kawasan
kerja. Kemudian pilih bilangan bingkai dalam tempoh masa yang anda akan gunakan untuk tempoh
animasi. Untuk mewujudkan Motion Tween, anda boleh sama ada klik kanan dalam timeline dan
pilih "Create Motion Tween," atau pilih Insert → Motion Tween daripada menu bar. Nota: Bagi
menghasilkan Motion Tween, anda perlu menukar objek kepada simbol terlebih dahulu.

39
10.7 Tutorial 6: Menghasilkan Motion Tween yang mudah
Sekarang, mari hasilkan satu Motion Tween yang mudah.

Langkah 1
Mula dengan melukis satu bulatan.

Langkah 2
Kemudian letak satu normal frame kemudian klik sebelah kanan > Create Motion Tween pada frame
asal.
Insert Frame

Langkah 3
Sekarang, pilih mana – mana frame diantara keyframe
asal dan frame akhir. Klik pada frame tersebut dan
pindahkan objek anda pada satu kedudukan yang
baharu. Perhatikan bahawa satu keyframe baharu akan New Location
muncul dalam frame tersebut dan path akan
ditunjukkan di kawasan kerja anda. Motion Path

Original Location

Langkah 4
Anda boleh mengubahsuai path menggunakan Selection Tool untuk penghasilan yang lebih baik
mengikut kesukaan anda.

Make the path curvy using Selection Tool

40