Introduction to Flash CS6

What is an Animation?

An animation is the simulation of movement created by displaying a series of pictures or frames.

For example, cartoons. An animation is one of the chief ingredients of multimedia presentations.
There are many software applications that enable you to create animations that you can display
on a computer monitor.

Intoduction

Adobe Flash, popularly known as Flash, is a multimedia graphic software that is used to create
interactive animated vector graphics for the web as well as for desktop presentations, movies,
games, etc.

Starting Flash

Click on Start→Adobe→Adobe Flash Professional CS6

In Windows 7

Click on Start → All Programs →

Adobe Flash Professional CS6.

In Create New section, click Flash Document option. The Flash window appears with by default
name 'Untitled-1'.

Main Components of the Flash

Menu Bar

Lists the Menu options such as File, Edit, View, Insert, and Help. These menu options include
commands to access most of the features of the Flash program.

Edit Bar

Displays the current scene number, the Edit scene button, the edit Symbol button, and the
Zoom control.

Toolbar

Contains the Flash tools; the toolbar includes tools for drawing and painting lines and shapes,
selecting objects, changing the views of the Stage, and choosing colors.
Work Area

Located in the document window and is used to place objects that are not part of the viewable
stage, also used to position objects that move on or off the stage as part of an animation.

Timeline

Located at the document window, displays and contains the layers and frames that make up an
animation and organizes the objects that are part of the document.

Panels

Contain controls for viewing and changing the properties of objects.

Property Inspector

Provides easy access to the most common attributes of the currently selected tool or object.

Stage

The Stage is the white area at the center of the window. It is where the Flash movies are
created.

Saving a Flash File

The steps to save a flash file are:

1. Click on File menu → Save As. The Save As dialog box appears.

2. Give the file name, select the location where you want to save the file and click Save button.

Tool Box Overview

Flash provides various tools to draw graphic, fill colour, gradient colour and modify the shape
drawn by the tools

Selection Tool

The Selection tool is used most commonly to select and move an item or multiple items on the
Stage. It is also used to edit lines and shapes, in a way that is familiar to users who have
worked in other vector graphic applications.
Sub Selection Tool

The Sub Selection is the companion for the Pen and is found in the Tools panel to the right of
the Selection tool. The Sub Selection tool has two purposes (figure 5): To either move or edit
individual anchor points and tangents on lines and outlines.

When you position the Sub Selection tool over a line or point, the hollow cursor displays one of
the two states:

• When over a line, it displays a small, filled square next to it, indicating that the whole selected
shape or line can be moved.

• When over a point, it displays a small, hollow square, indicating that the point will be moved to
change the shape of the line.

Lasso Tool

The Lasso tool is used to select a non-regular shaped portion of an object like tree outline.

1. Click on Lasso tool on the toolbox.

2. Click and drag the mouse on the image to select the part.

Line Tool

The Line tool is used to draw straight lines.

The steps to draw straight lines are:

1. Select the Line tool on the toolbox.

2. Select the properties of stroke from Property Inspector.

3. Click and drag on the Stage to draw straight lines.

Pencil Tool
The Pencil tool lets you draw free form strokes on the Stage, similar to the way you draw using
a regular pencil on a regular sheet of paper.

The steps to use Pencil tool are:

1. Select the Pencil tool on the toolbox and select the line's type from Options.

2. Select the proprieties of stroke from Property Inspector.

3. Click and drag on the Stage to draw lines.

Pen Tool

Pen tool is used to create a complex shape consisting of a lot of perfect arcs and a lot of perfect
straight lines.

To create curved or straight lines with the Pen tool, follow these steps:

1. Select the Pen tool on the toolbox.

2. Select the properties of stroke from Property Inspector.

3. Click and drag on the Stage to draw line with perfect curves.

Oval Tool
Drawing with the Oval tool creates a perfectly smooth ovals and circles.

The steps to use Oval tool are:

1. Click Oval tool on the toolbox.

2. Set line colour, style and fill style from Property Inspector.
3. Drag over the Stage to draw oval or circular shapes (figure 10).

Note:

To draw a circle, press Shift key, click and drag mouse over the Stage, while keeping Shift key
pressed.

Rectangle Tool

The Rectangle tool creates rectangles and squares.

The steps to use Rectangle tool are:

1. Click Rectangle tool on the toolbox.

2. Set line colour, style and fill style from Property Inspector.

3. Drag over the Stage to draw rectangle or square shapes.

Note:

To draw a square, press Shift key, click and drag mouse over the Stage, while keeping Shift key
pressed.

Brush Tool

Brush tool is used to create smooth or tapered marks. Unlike the Pencil tool, which creates
marks with a single row of anchor points, the Brush tool actually creates marks by usingfilled
shapes. The fills can be solid colours, gradients, or fills derived from bitmaps.

The steps to use Brush tool are:

1. Click Brush tool on toolbox.

2. Select brush size, shape and colour.

3. Drag over the Stage to draw oval or circular shapes.

Eraser Tool

The Erase tool works similar to a classic eraser. Simply select the tool and drag on the Stage to
erase things,

Double-click Eraser Tool

To erase all, you can double-click the Eraser tool to delete everything on the stage. (If it is done
by mistake you can use shortcut Ctrl+Z to undo).

Using the Eraser Mode Option

In the options listed at the bottom of the toolbox you can specify the Eraser Mode:

Erase Normal: Erases strokes and fills on the same layer.

Erase Fills Erases only fills; strokes are not affected.

Erase Lines: Erases only lines; fills are not affected.

Erase Selected Fills: Erases only the currently selected fills and does not affect strokes,
selected or not. (Select the fills you want to erase before using the Eraser tool in this mode.)

Erase Inside: Erases only the fill on which you begin the eraser stroke. If you begin erasing from
an empty point, nothing will be erased. Strokes are unaffected by the eraser in this mode.

Using the Faucet Option

To remove stroke segments or filled areas:

1. Select the Eraser tool and then click the Faucet modifier.

2. Click the stroke segment or filled area that you want to delete.

Using the Eraser Shape Option

In the options listed at the bottom of the toolbox there is a drop down that lets you specify the
Eraser shape and size. Use this option to customize the size and look of the eraser.

Ink Bottle Tool

The Ink Bottle tool lets you change the stroke colour, line width and style of lines or shape
outlines. Using the Ink Bottle tool, rather than selecting individual lines and objects, makes
easier to change the stroke attributes of multiple objects at one time.

The steps to use the Ink Bottle tool are:

1. Select the Ink Bottle tool.

2. Choose a stroke colour as described in using the Stroke and Fill controls in the toolbox.

3. Choose line style and line width from the Stroke panel.

Paint Bucket Tool

The Paint Bucket tool fills enclosed areas with colour. It can both fill empty areas and change
the colour of already painted areas. You can paint with solid colours, gradient fills, and bitmap
fills. You can also use the Paint Bucket tool to adjust the size, direction, and center of gradient
and bitmap fills.

The steps to use Paint Bucket tool to fill an area are:

1. Select the Paint Bucket tool.

2. Choose a fill colour from the Color tool box.

3. Click the Gap Size modifier and choose a gap size option:

•Don't Close Gaps: If you want to close the gaps manually before filling the shape. Closing gaps
manually can be faster for complex drawings.

•Choose one of the Close options to have Flash fill a shape that has gaps.
4.Click the shape or enclosed area that you want to fill.

The steps to adjust a gradient or bitmap fill with the Paint Bucket tool are:

1. Select the Paint Bucket tool.

2. Click the Transform Fill.

3. Click an area filled with a gradient or bitmap fill.

The Timeline

The Timeline is the area where we organize and control time based animation in Flash. Flash
documents divide lengths of time into frames. In our document, we can set how many frames
are shown per second. This is known as the frame rate. When the frames are shown in a
sequential order, our brain interprets changes between frames as animation. When an
animation has a slow frame rate we are able to see each frame individually and the movement
appears choppy. When the frame rate is high our brain can no longer pick out individual frames
and the animation looks clean.

To give you a reference for what typical frame rates are, keep these numbers in mind. The
default fps (frames per second) setting in Flash is 12fps. A typical Hollywood movie uses 24fps
and TV movies are usually around 30fps. It is not necessary for a Flash document to have a
frame rate of 24 or 30 fps since animations are typically used on the Web and a higher frame
rate dramatically increases the size of the document. 12 fps gives us a smooth animation
without a large file size.

The timeline layout

Different components of the timeline.

Layer

Layers are used to determine which elements appear in the foreground and which appear in the
background, creating a visual stacking order for objects on the Stage.

While a single layer is sufficient for static graphics, computer-assisted animations require their
own layers. To create multiple animations, you need multiple layers. Layers appear above the
Stage in the main Flash document window, in a timeline. The timeline actually resides in its own
panel, which is anchored at the top of the main document window by default.

Working with Layers

The standard view of a layer is the one that shows the image. Let's see the different buttons
available in the Layers panel and how to use them.

Adding layers

New Layers can be added as needed when working with a particular scene in the Flash movie.

The steps to add an additional layer are:

1. In the Timeline, left-click one of the existing Layers to select it (figure 19).

2. Select the Insert menu - Timeline Layer. A new layer will be created on top of the selected
layer. The layer will be given a default name.

Note:

Another way to add a layer is by clicking the Insert Layer button.

Renaming Layers

By default, each layer is named in numeric sequence such as 'Layer 1', 'Layer 2', 'Layer 3' and
so on. It is always more useful to assign meaningful names to each layer so that their function
within the Flash project is understood. Meaningful names can be assigned to a layer by
renaming it.

The steps to rename a layer are:

1. In the Timeline, double-click on the layer name (figure 21). The layer name will appear in a
text box with the entire name selected.

2. Enter the desired name of the layer.

3. Press the Enter key.

Working with multiple layers

As previously discussed, layers provide a means to manage and control specific elements of a
Flash project. In the coming sections, we will illustrate the use of multiple layers in a project.

The steps to create a circle layer are:

1. Open a new Flash document.

2. In the Timeline, double-click on the default layer name and rename the layer: 'Circle'.

3. In the Tools panel, select the Oval Tool (O).

4. In the Colors panel, set the fill color as required.

5. Draw a circle in the middle of the stage.

The steps to create a rectangle layer are:

6. Insert a new layer from Insert menu Timeline Layer.

7. A new layer is added above the 'Circle' layer in the Timeline. Double-click on it and rename it
to 'Rectangle.

8. In the toolbox panel, select the Rectangle tool().

9. In the Colors panel, set the fill colour as required.

10. Draw a rectangle on top of the circle on the Stage (figure 23).

The steps to create a polygon Layer are:

1. Insert a new layer from Insert menu Timeline-Layer.

2. A new layer is added above the 'Rectangle' Layer in the Timeline and rename it to 'Polygon'.

3. Right-click on Rectangle tool in the toolbox panel and select the PolyStar tool.

4. In the Colors panel, set the fill colour as required.

5. Draw a polygon on top of the rectangle on the Stage.

Note:

Notice how the graphics are distributed on the different layers. The layer on the top will always
have priority over the lower levels. This priority ordering can be modified by changing the order
of the layers. At present the "Polygon" Layer is on the top. By putting the "Polygon" Layer below
the "Rectangle" Layer, the "Rectangle" Layer will have priority over the "Polygon" Layer.

The steps to change the layer order are:

On the Timeline, left-click and drag the 'Polygon' Layer below the 'Rectangle' Layer. The
'Rectangle' Layer will now be on top of the 'Polygon' Layer.

Advanced Layer Techniques

In addition to adding, renaming and changing the order of layers, there are additional features
that make it easier to work with layers. These include locking and hiding layers.

Locking and Unlocking a Layer

Locking layers is particularly useful when many layers are used and the user does not want a
particular layer or layers to be modified.

To lock a layer:

• In the Timeline, click the Bullet button below the Lock/Unlock All Layers button of the Layer
that will be locked. Once clicked, the Bullet will change to the Lock/Unlock button.

To unlock a layer:
• Click the Lock/Unlock button.

Hiding and Displaying a Layer

Hidden layers are useful when working with multiple layers. Instead of viewing all the layers at
once, layers can be hidden from view to make the work easier.

To hide a layer

• In the Timeline, click the Bullet button below the Show/Hide All Layers button of the layer that
will be hidden. Once clicked, the Bullet will change to the Cross button.

To display a hidden layer

Click the Cross button.

Frames

Animation is the rapid display of sequential still images that, when displayed fast enough give
the illusion of motion. In Flash we call each of these still images a Frame.

Frame(s): Refer to the still images that when shown sequentially, create the illusion of
animation.

FPS: It stands for Frames Per Second. When the FPS number is between 16 and 24, the
human brain can perceive motion.

KeyFrame: Keyframes are the drawings which define a movement. In the workflow of traditional
hand-drawn animation, the senior or key artist would draw the keyframes. After testing and
approval of the rough animation, the scene would be handed over to their assistant. In Flash,
the keyframes represent the starting and ending points for tweens.

Creating a Simple Animation

Let us now learn to create simple actions in Macromedia Flash with an example.

1. Click the initial frame on timeline.

2. Choose the Oval Tool from the toolbox and make a ball at the middle left corner of the stage.
3. Select the Arrow Tool to get the mouse pointer. Right-click on frame 1 and select Insert
Keyframe.

4. Select the 15th frame from timeline and select Insert Frames option. The grey frames appear
on timeline.

5. Now click on frame 8. Right-click and select Insert Keyframe. A black dot appears on this
frame on the timeline (figure 29).

6. Click the ball and drag it to the center bottom of the stage.

Now select frame 15. Right click and select Insert Keyframe as done earlier at frame 15.

7. 8. Select and drag the ball from middle left corner to top right corner of the stage.

8. Now you have the ball at three positions as indicated by frames 1, 8, 15.

9. Click on Control menu → Play option. The ball will appear to bounce once.

10. To repeat the bouncing, click Control menu → Stop option.