Introduction to Flash CS6

Hello friends! Have you ever wondered Let's Learn About

how animated movies and cartoons are
" Starting Flash CS6
created? There are special software " Components of Flash
packages for animation, Adobe Flash Window
is one of the most popular animation " Using the Tools Panel
software packages, In this chapter, you " Transforming Objects
will learn about Flash, its components " Importing Graphics
and use of various Flash tools.

images,
Animated movies, cartoons, computer games, and e-books are a combination of
software packages. One
audio, videos, and other effects. These animations are created using
multimedia software that is widely used. You
of the most popular software is Flash. Flash is a
can create both graphics and animations in Flash.
means the images and graphics
You can call Flash a vector based animation program, which
high resolution and the picture
created in it can be scaled to any size while maintaining
quality remains unaffected.

Info BoX >>>>>

by Macromedia. Later on, Adobe acquired
The Flash software package was originally developed
Flash are called Adobe Flash.
Macromedia. Thereafter, all the versions of

STARTING FLASH CSG

To start Flash, follow these steps:

1 Chc on the Start button > Select All Programs > Adobe Master Collection CS6
Adabe Flash Professional CS6. The Adobe Flash Professional CS6 welcome
57
screen appears (Fig. 4.1).
2. Under the Create New pane, select the ActionScript 3.0.
 Create hom Template Cmate New

AR Ando AASo20
AN
and Anmat
Anten
AK Att 4sNas

ARe AS
ntats
AonS
ash asut
Open a Receot Rem rs rot
ASY30Ce

A t s r 30 er t Ae V

Extent

Fig. 4.1 Welcome Screen of Adobe Flash Professional CS6

screen.
A new Flash Window appears (Fig. 4.2). All the major operations are performed on this
The default file extension of flash file is .fla.

COMPONENTS OF FLASH WINDOW

Let us learn about them.
The various components of the Flash window are shown in figure 4.2.
Menu bar Propertes Ponel

Title bar
|A
Pasteboard

Tayet

Stoge
as

TooBs Panel
Playhead Frame

Timeline

Keyframe Fig. 4.2 Adoh Flash Professional CS6 window

Menu Bar: This bar is located at the top of the Flash window. It has various menus, whien
58 contain the common commands and functions such as saving, opening, editing, and so O
Title Bar: It displays the name of the current file. The default file name is Untitled-.
You can change this name while saving the file.
 Stage: It is the rectangular white area present in the
centre of the Flash Screen. It is the
main workspace where you can place the
clios. and so on. You can also create contents, such as graphics, objects, text, video
drawings and movies in this area.
Pasteboard: the light grey area around the stage. This area is used to store
It is
the
objects until you wish to display them on stage.
Tools Panel: It contains various tools that help you in
drawing, painting, selecting, and
modifying text and graphic objects. It lets youchange the view of the Stage.
Timeline: It is a rectangular window present below the stage. It is divided into frames.
Timeline is used to control the sequence and timing of objects or contents of a
movie.
The main components of Timeline are Frames, Keyframes, Layers, and Playhead.
Frames are indicated by ittle rectangular cells on the Timeline. Frames are used to
add animation effect to an object.
Keyframes are used to define the major changes in the state of an object. For
example, with the help of a keyframe, you can show animation such as change in
the position, color and shape of an object. A keyframe is represented by a dot within
a frame.
Layers are like a stack of transparent sheets. Each layer can hold only one
animation at a time and is treated as an individual thing. By default, a Flash
document opens with asingle layer. You can add new layers to a Flash document
later in order to organize the contents and animation.
The playhead indicates which frame is playing on the stage. It is indicated by ared
rectangle with a vertical line.
Properties Panel
Anything that you add to a Flash document, such as
text, shape, image,graphic, video, and soon is called
Keyboard shorteuts
an object. When you select any object on the stage, its Press Ctrl + F3 to hide or show the
Properties panel on the Flash window.
properties are displayed in the Properties panel. The list
of properties varies depending on the object selected. It
is used for changing the settings like Stage size, background color of the Stage, and frame rate.
You can also make changes to the object or document attributes in the Properties panel.

Ava's Cool Tip >

O0 Can show or hide the Timeline panel by clicking on the Window menu > Timeline option. 59
Similarly, you can show or hide the Properties, Library, and Tools panels.
 Info BoX >>>>
You can create a new document by clicking on the File menu > New option. Cick on OKin he
New Document dialog box that appears.

USING THE TOOLS PANEL

Selection ocl
The Tools panel (Fig. 4.3) is one of the Free Tronsform Tool -3D Rtehg
main components of Flash software. -Lss To
Using these tools, you can create shapes, Pen Tool 0.T
fill colors, select and move shapes or Line Tool
Ratnge Too
graphics, and so on. It allows to draw, Pencil Tool rs
color and modify an object. Let us learn Deco Tool
how to Use varioUs tools in Flash.

Evedrooer Tool
Drawing Tools
Hand Tol -Zoom To
Using drawing tools, you can draw
readymade shapes and freehand drawing.
-F Coo
Line Tool
This tool is used to draw a straight line.
To use this tool, follow these steps (Fig.4.4):
1. In the Tools panel, select the
Line Tool. Fig. 4.3 Tools Ponel

2. Go to the Properties panel,

define the Stroke color, line
thickness and line style in their
respective fields. Note, Stroke
is the outline of any shape.
3. Bring the pointer onto the
Stage. Click and drag it to
draw a line in the desired
direction.
4. Release the mouse after
60 drawing the line ofa desired Fig. 4.4 Using Line Tool
length.
Curving a Straight Line
To curve a straight line, follow these steps (Fig. 4.5):
1 Select the Selection Tool in the Tools panel.
2. Bring the pointer to the centre of the line. Notice, a
Curve symbol appear right below the arrow symbol.
3. Click and drag the pointer to give a cUrve to the line.
A Release the mouse button once the desired curve
is made. Fig. 4.5 Using Selection Tool

Rectangle Tool
The Rectangle tool is Used to draw rectangular and square shapes. To draw a rectangle,
follow these steps (Fig. 4.6):
1. Select the Rectangle Tool.
2. In the Properties panel, Retargle Tool

define the Stroke color,

nu AND STHOo

Fillcolor, Stroke size

Sroke

(thickness) and Style. Sealid

3. Bring the pointer onto Jon peted

VNCTAa Ragged
the Stage. hppled
Mthed

4. Click and drag the pointer Pese

to draw a rectangle.
5. Release the mouse.
A rectangle with defined
Fig. 4.6 Using Rectangle Tool
settings appears on the Stage.

Keyboard Shorteuts
and Line Tools in the Tools Panel, respectively.
Press O, R, and N keys to select the Oval, Rectangle,

Info Box »>>»

Rectangle corner radius in the
You can draw a rounded rectangle by defining the
RECTANGLE OPTIONS section of the Properties panel.
the corner radius after creating 61
You can use the Rectangle Primitive Tool to modify
a rectangle on the Stage.
 Polystar Tool
Usod to draw polygons and stars. To uso this tool, follow these steps (Fig. 4.7):
It is
the PolyStar Tool in tho drop-down monu of the Roctangle Tool.
Select
1,2. In the Propertios panel, dofine the Stroko color, Fill color, Stroko thickness and Style.
SETTINGS soction, click on tho Options tab. The Tool
3. Under the TOOL
dialog box opens.
Setings
Click on the Style drop-down arrow, and select either polygon or star option,
anywhere between
the Number of Sides text box, specify the value 3
InEnter -the value between 0 and 1in the Star point size text box to specify and the 32,
depth of the star points.
will be deeper.
Ifthe number is closer to 0, then the star points
closes.
+ Click on OK. The Tool Settings dialog box
4. Place the pointer on the stage. Click and drag the pointer to draw the selected shape.

Teol Settings

rnket L

Cavd
Jon Me:

Fig. 4.7 Using PolyStar Tool

Pen Tool
tool. This tool ie..,
The Pen Tool of Flash functions differently as compared to a regular pen
smooth curves. To use the Po
for drawing precise paths in the form of straight lines and
follow these steps (Fig. 4.8):
1. Select the Pen Tool in the Tools panel.
2. Define the Stroke color, thickness and style in the Properties panel.
3. Bring the pointer onto the stage and click on the stage where you wish to set the firet
point. Notice, a small blank dot appear at that point.
4, Now, click again to define the second point. Astraight line appears on the Stage with
two anchor points. These are the points where you had clicked.
62 5. Click as many times as you want to draw a desired path. Each point will be connected
automatically.
 6. You have two choices, either you can leave the path open or create a closed shape.
If you wish to keep an open path, thern simply double-click on the last point.
To close a path, place the pointer over the first point. A small blank dot appedrs
next to the pen tip. Click and the path closes.
Pon Teo

LAND SIRDICE

11

Syer (Sold
Scele:4orn0ating
Cap: l
Jo:

Fig. 4.8 Using Pen Tool to draw open and closed path

Pencil Tool
Tietool is very similar to a real pencil and can be used to draw freehand drawings. To draw
with the Pencil Tool, follow these steps:
1. Select the Pencil Tool. 4 Straighten
As soon as the Pencil Tool is selected, its modifier appears at the S Smooth
bottom of the Tools panel (Fig. 4.9). Click on the Modifier icon
2 Ink
to view the available options, which are as follows:
Fig. 4.9 Pencil Tool modifiers
Straighten: This modifier automatically straightens
the lines drawn on the Stage using the Pencil Tool
(Fig. 4.10). It is the default modifier.
Smooth: t draws smooth and curved lines (Fig. 4.10).
Ink: This modifier does not make any modification (Fig. 4.10).
Proparties L
6.6103%
Pengl Tool

Straightern Mode Smooth Mode

UFML AND STROIE

roke:

Style: (sohd
Sale:Normal | O nting
Cap: Gl
Join: | Miter 3, 20

HOOuNG
Snoothing:

Ink Mode 63
Fig. 4.10 Using Pencil Tool
 3. Select the desired Pencil mode option.
4. In the Properties panel, deine the Stroke color, thickness and style.
5. Click and drag the pointer to draw the line.

Info Box >>»

The Text ool lets yoU odd text on the Stage. Select the Text Tool. Bing the pointer onto
and cdick on the desired point. Atext block appears with a blinking cursor
inside. Now,
the
Slage,
As you pe, the text block gets wider to accommodate the text. You can specify the begi
Font n ypiStng.ye,
Sze, and Color and can opply vanious text and paragraph formatting by using the
Fami
Properties ly,
panel.
Ava's Prachice Time
Create the given drawing in Flash CS6 using various tools available in tk
Tools panel.

My Sweet Home

Solution:
1. Open Flash CS6 by clicking on Start
buton > All
Collection CS6 > Adobe Flash Professional CS6.Programs > Adobe Master
2. Selec the Rectangle Tool in the Tools
panel. Choose black as Stroke color and orange
os Fill color. Click and drag the
pointer to draw the wall of the house.
3. Selet the Line Tool and define its Stroke
color and thickness. Bring the pointer onto the
Stoge and draw the roof of the hoUse.
4. Using Pencil Tool, fill the roof area with color.
Define the Stroke color and thickness.
5. Now, draw the door and window using the Pencil Tool with
different Stroke color.
64 6. Use the Rectangle Tool to draw o grass bed in front of the
house.
bushes using the Pencil and Brush tools. Use the Text Tool to type And, draw some
My Sweet Home'.
selectionTools
Flash CS6, the two important selection tools are Selection Tool and Lasso Tool. These tools
In
are Usedto select single or multiple objects. Let us learn how to use these tools.
selection Tool
TheSelection Tool is also known as Arrow Tool. This
toolis
used to select objects on the Stage.
To select stroke, fill, or text block, selec the
Selection Tool in the Tools panel. Then, click on
the object.
To select the filled shape and its outline (stroke)
altogether, double-click on the fill. Fig. 4.11 Using Selection Tool

Ava's Cool Tip >>

con use the Selection Tool by using dragging method too. Select the Selecion Tool. Bring the
pointer onto the Stage. Click and drag the pointer to draw arectangular selection marquee around
selected.
the object to be

Lasso Tool
a freehand
This tool is Used to select the irregular areas in a shape, object, or a drawing. It is
celection tool which lets yOU move the pointer as it you would move a pencil or pen on
drawing. To use the Lasso Tool, follow these steps:
1. Select the Lasso Tool.
2. Bring the pointer onto the Stage. The pointer gets changed to the shape of alasso.
3. Click and drag the pointer around the areas or part of an object or drawing to specify
the selection boundary (Fig. 4.12a).
A. Release the mouse and observe the selection. Now, place the pointer over the selected
portion. Click and drag to move it to another place (Fig. 4.12b).

b
65
Fig. 4.12 Selection using Lasso Tool
 Coloring Tools
eachtool.
Flash consists of coloring tools. Let us learn about
Brush
AbrushTool
lets you paint on a canvas. Likewise, the Brush Tool of Flash is also Used to paint any

object with the brush like strokes.

To use the Brush Tool, follow these steps (Fig. 4.13):
1. Select the Brush Tool.
size, and shqpe given at the of the bottom
2. Select the desired Brush modifier: mode,
Tools panel. apply the selected brush stroke.
3. Click and drag the pointer onto the Stage to

Brde

Brush Tool
Modifier

Tool
Fig. 4.13 Using Brush

Paint Bucker Tool

change the color of an alregdy
Ihe Paint Bucket Tool lets you fill colors in an empty shape or
Normal
tilled shape. You can illa shape by using Normal Fill or Gradient Fill option. The
shades formed
Fill option allows youto fill a single color in a shape. Gradients are colors or
by mixing two or more colors. Flash has a few default gradient colors which are present at
the bottom of the Paint Bucket color palette.
Normal Fill
To fill a shape with Normal Fillor Gradient Fill(Fig. 4.14), follow Gradient Fill
these steps:
1. Select the Paint Bucket Tool.
2. In the Properties panel, select the desired Fill color.
66
3. Bring the pointer onto the Stage. It changes into a bucket. Fig. 4.14 Filling shapes using Paint
4. Click inside the shape to fill it with selected color. Bucket Tool
 Ava's Cool Tip >»
Keyboard shorteuts
To delete everything on the Stage at once, simply Press Alt + Shift + F9 to open the
double-click on the Eraser Tool, color panel to set the gradient color.

Let's Review >>>>>

False.
Write T for True and F for
,Normal Fill or Gradient Fill option is used to fill a shape.
9 A Lasso Tool lets you paint on a Canvas.
Selection Tool is also known as Arrow Tool.
3 The
4.The Rectangle Tool is used to curve a straight line.

TRANSFORMING OBJECTS
Abor inserting an object on the Stage, you can transform it in different manner. YoU Can
resize, rotate, flip and move it to another place on the Stage.
Free Transform Tool
Before applying any transformation to an object,
Transform Tool.
vOu need to select it using the Free
object or shape Info Box >>>»
Hlets you move, resize, rotate, and tlip an
these steps: Placing the pointer over the
on the Stage. To use this tool, follow selected object changes it into a
1. Draw an object on the Stage. cross sign. Click and drag the
2. Select the Free Transform Tool in the Tools panel. object to a new location.
3. Now, click on the object on the Stage. You will
notice some handles around the selected object.

Rotating an Object
To rotate a selected object, follow these steps (Fig. 4.15):
1. Place the pointer over any one ot the tOur corner
handles of the selected object. The pointer changes
to a curved arrow also known as Rotation Handle.
2. Now, click and drag to rotate the object. Afaint 67
selection outline appears on rotation. Fig. 4.15 Rotating an Object
 Scaling anobject
Scaling an Objectmeans to increase or decrease its size. You can scale a selected objet in

Two Dimensions (Height and Width): Place the pointer over a corner handle and dron
two ways:

height and width of an object simultaneously.

Single Dimension
diagonally. the
It scales (Height or Width): Place the pointer over any of the side handles, on
drag it in desired direction. It scales either height or width at atime depending on the

selection of side handle.

Flipping an Object
To flip aselected object, follow these steps:
option.
1. Click on Modify Menu > Transform Horizontal as per the requirement.
2. Select either Flip Vertical or Flip

how an object is flipped vertically (Fig. 4.16 and Fig. 4.17):

Ihis is
S. 6.100 Moeed

POSETo AND SE

Flipping.

Fig. 4.16 Selecting object

Aohte Dela

Srie Aioer 2

EIbbu&
tegar

HESTOE

68
Fig. 4.17 Flipped object
 IMPORTING GRAPHICS
To import clip arts, images, pictures, or graphics stored on the computer to Flash stage,
follow these steps:
1. Click on the File menu > Import > Import to Stage. The Import ialog box
appears (Fig. 4.18.)
9 Locate and select the image you want to import.
3. Click on Open.
The selected image appears on the stage. Once an image is added to the stage, yoU Can
perform various operations on it.
Irmport
OI Libraries Documents > - |Search Documents
Organize New folder

Favorites Documents library Arrange by: Folder v

Includes: 2 locations
Desktop
Downloads Narne Date modified Type
Recent Places
Adobe 25/09/2017 1118 ... File folder
Corel 11/05/2018 5:09 PM File folder
Libraries
Corel 26/04/2017 12:00 ... File folder
Documents File folder
My Palettes 11/05/2018 5:09 PM
Music File folder
23/08/2018 3:17 PM
S Pictures
Scratch Projects
Visual Studio 2008 10/05/2017 3:11 AM File folder
B Videos 24/07/2018 2:56 PM File folder
Visual Studio 201O

Computer
Local Disk (C:)
GNew Volume (D:)

File name: AII Formats

Open Cancel

Fig. 4.18 The Import dialog box

Ava's Cool Tip »>>

Tosave a Flash file, click on the File menu >
Save option. Keyboard Shorteuts
To open an already saved Flash file, click on To save a file: Press Ctrl+S
File menu > Open option. To open a file: Press Ctrl+O
69
To exit Flash, click on File menu> Exit option. To exit Flash: Press Ctrl+Q