Flash 8 Animation

Sydney CEO

Prepared by: Kelly Short

Kelly Short

Flash 8 Animation

Sydney CEO

Contents

Kelly Short

Section

Page

Screen Layout

Flash Drawing

Motion Tweening

11

Shape Tweening

13

Frame by Frame animation

15

Movie Clips

19

Music

23

Publishing

24

Flash 8 Animation

Sydney CEO

Screen Layout

Create a new Flash Document

Lists recently opened items

Kelly Short

Kelly Short

Toolbar

Properties Bar

Stage

Timeline

Library

Flash 8 Animation
Sydney CEO

Flash 8 Animation

Sydney CEO

The Timeline
Key Frame

Empty Key Frame

Empty Frame

Layer Name

Onion Skinning

Scene and Symbol

New Layer, Motion Guide, Layer Folder

The Tools
Select (V)
Free Transform Tool (Q)

Sub Select (A)

Gradient Fill (F)

Line Tool (N)

Lasso (L)

Pen Tool (P)

Text (T)

Oval (O)

Rectange (R)

Pencil (Y)

Paintbrush (B)

Ink Bucket Tool (S)

Paint Bucket (K)

Eye Dropper (I)

Erase (E)

Hand Pan(H)

Zoom (Z)
Stroke Colour
Fill Colour

Black and White, No colour, Swap Colours

Tool related Options

Kelly Short

Flash 8 Animation

Sydney CEO

Flash Drawing
Select the Drawing Tool

The tool related options allows you to draw

lines that are automatically straightened or
smoothed, or drawn directly as they are drawn

On Straighten

Becomes

On smooth

Becomes

The Ink setting stays the same as what you have drawn
Kelly Short

Flash 8 Animation

Sydney CEO

Filling
In most painting programs, if you had a situation like the one left, and you tried to fill in, you
would end up with colour across your entire
screen. However, Flash allows you to fill large
and small gaps automatically when filling.

Step 1: Select Paint Bucket (K)

Step 2: Select the colour you require

Step 3: Select Close large gaps from the Tool Options

Step 4: Click in the area you wish to fill

Kelly Short

Flash 8 Animation

Sydney CEO

Modifying Drawings
Selecting edges and lines in Flash MX

To select a line segment or the fill of an object, use the Arrow tool and click once over the line or fill.
Double clicking on a line will select all the curves in that line.
Choose the selection (Arrow) tool and deselect any shapes or lines that are on the stage. With the selection

arrow, move it over one of the shape edges. The pointer arrow changes when you're over the edge of a
shape that hasn't been grouped or made into a symbol. If it's over a curved line or curved edge of a fill, it is
a pointer with a curve next to it and will move the curve if you press and drag. Over a corner or endpoint, it
is a pointer with a corner, and will move the point or corner maintaining the straight lines. This will pull
both stroke and fill alike.
To reshape lines and fills, select them. Use the Smooth or Straighten mode from the Modify Menu or from
the Options section of the Toolbox. (You can adjust the amount of smoothing or straightening by choosing
Preferences from the Edit menu.)
Control-drag (Windows) or option-drag (Macintosh) a line to create a new corner point.

Pen Tool
If you are familiar with Adobe Illustrator or Photoshop, Macromedia Freehand or Fireworks, you've seen this
tool before. The Pen tool allows you to place points and create curves and lines that are repositionable.
Exercise to create a straight line:

Select the Pen tool.

Click once anywhere in the stage window.
Click again, and a straight line is created between the two points.

Exercise to create a curved line:

Position the Pen icon where you want it to begin on the stage. Press and hold the mouse and slide in the direction you want the curve to go. You'll see tangent handles that appear that you can also select and reposition.
Release, and either repeat or just click where you want the curve to end.
Important points about curves:

To change a curve point to a corner point (or anchor point), use the Pen tool and just click on the point.
To change a corner or anchor point into a curve point, use the sub-selection tool, the option key and drag.
To delete a corner point, click on the point with the Pen tool.
To delete a curve point, double click on the point.
Fewer points means smaller file size.
A curve point is a hollow circle.
A corner point is hollow square.

http://www.utexas.edu/learn/flash/

Kelly Short

Flash 8 Animation

Sydney CEO

Modifying Drawings
The free transform tool allows you to modify any drawing. Select the
Free Transform tool from the Toolbar and then click on the graphic
you wish to modify.
Remember to Double click to select both outline and fill
Click and drag the corner handles to rotate

Click and drag a side or corner handle out to

enlarge or reduce the size

Click and drag a side up and down, or the top

across to skew

You can also do this through the modify menu

Kelly Short

Flash 8 Animation

Sydney CEO

Text
If you are wanting text just to display (not to change or be input) you are creating static text.
Select the text tool on the toolbar
Change the font and styles here

Change the type to Static

IMPORTANT:
If you are taking either the published or working file to
another computer that doesnt have the font that you have
used installed, then the default font (usually Arial or System) will replace it.
Fonts ARE NOT embedded in flash files.

If you wish to display a not often used font in your flash file, you can Break it Apart. This treats the text as
a graphic from that point onward, and you cannot edit the text or font after breaking it apart.In other
words, check that it says what you want it to say and its spelt right before breaking apart!

Select the text

Go to Modify, Break apart
This breaks it down to individual
words
Go to Modify, Break apart again

This converts the text to a picture, and can be edited like one

Kelly Short

10

Flash 8 Animation

Sydney CEO

Motion Tweening

Create a new page in Flash.

Draw a ball like the one below at the bottom of the stage. For the markings on the ball, you will need
to use the smooth option of the pencil

IMPORTANT:
Only symbols can be motion tweened, so you must
convert to a symbol before
tweening

Select everything on the frame (ie, the entire ball by clicking on the keyframe in the toolbar

Go to the Modify menu and select Modify> Convert to Symbol

Name the symbol

Select Movie Clip

You will now notice two differences. When selected,
the ball will have a blue border surrounding it.

The ball will also be a member of the library, if you

have it open.
If not, you can open it by going to
Window>Library

Kelly Short

11

Flash 8 Animation

Sydney CEO

To Create the Tween: Right click on frame 10 and select Insert Keyframe

InBetween
Frames

This should create a timeline that looks

like this:

Keyframe

Keyframe

While in frame 10, select and move the ball to the top half of the stage. This
sets the end position of the ball as at the top of the stage.

Select Frame 1,
which is where
you want the
Tween to
START
Change tween to Motion

Change rotate to CW (clockwise), only if you want your ball to rotate

On
CD!
Your timeline should now look like this

Kelly Short

12

Flash 8 Animation

Sydney CEO

Shape Tweening
Create a new document
Using the paintbrush, draw or write something on the stage
On the timeline, right click on Frame 10
and select Insert Blank Keyframe. This
will insert a keyframe with nothing on it.

In-Between
Frames

Keyframe

Keyframe

Draw something different in

Frame 10

Kelly Short

13

Flash 8 Animation

Sydney CEO

Go back to frame 1

Select Shape
from the Tween
Option

Your timeline should now look like this

On
CD!

Kelly Short

14

Flash 8 Animation

Sydney CEO

Frame by Frame
A walk cycle is created by 4 frames, repeated over

The following parts are created for you to work with in the CD

Recoil
Contact

High Point
Passing

On
CD!

Kelly Short

15

Flash 8 Animation
Step 1: Make sure you
are in Frame 1 of the
SuperSteve Layer

Sydney CEO
Step 2: Find the
contact folder

Step 3: Click and drag legs, arms and head across to

stage

Kelly Short

16

Flash 8 Animation

Sydney CEO

Insert a Blank Keyframe on frame 3 of SuperSteve

Layer
We are skipping one frame to make it easier.

Select the onion skinning

tool to see the previous and
next 4 frames

Kelly Short

17

Flash 8 Animation

Check you are

on frame 3

Sydney CEO
Find the recoil folder and click
and drag Steves parts across

With onion-skinning turned on, Super

Steve should look something like this so
far:

Complete the same steps with passing and high point symbols.
Once you have completed one cycle, you can copy and paste individual frames to create more cycles.
If you want more information on cycles (including drawings of thousands of different cycles, there is a great
book by Richard Williams called The Animators Survival Kit: A manual of methods, principles and formulas
for classical, computer games, stop motion and internet animation

Kelly Short

18

Flash 8 Animation

Sydney CEO

Movie Clips

Draw a boat on the stage

Select the entire boat and convert to a symbol (Modify>Convert to symbol)
Name it boat and make sure that you have Movie Clip selected

Notice here, it
says Scene 1

Your timeline should look like this:

Kelly Short

19

Flash 8 Animation

Sydney CEO

Now, double click on the boat to edit the movie clip

Your timeline should now say

Scene 1 Boat
This means that you are inside the boat symbol

Add another layer

by clicking on this
button
Rename the layer
Smoke by double
clicking on its centre

Draw smoke using the paintbrush

Kelly Short

20

Flash 8 Animation

Sydney CEO

Right click and insert a keyframe in

the smoke level, as this is what we
want to change

Modify the smoke slightly

The boat disappeared in frame 4 because there

was no frame in layer 1. Right click on frame
4 in layer 1 and add a frame

Click on Scene
1 to return to
the stage

Kelly Short

21

Flash 8 Animation

Sydney CEO

Go to Control> Test movie to test the boat.

The boat should remain stationery, but the smoke should move

In order to move the boat, just motion tween it

Insert a keyframe on frame 25

Move the boat off the screen

Go back to frame 1 and set the Tween property to Motion

Kelly Short

22

Flash 8 Animation

Sydney CEO

Sound
Add a new layer and rename it sound by double clicking
Insert a keyframe where you want the sound to start.

Import the sound to the Library

by Going to File>Import to
Library

The sound wave

will show in the
timeline

Kelly Short

Click and drag the sound

onto the stage

23

Flash 8 Animation

Sydney CEO

Publishing
Publishing the file converts the project file to an .swf file that can be read on any computer with
the free Flash Player

Firstly, go to File> Publish settings

Converts to a swf file

Creates a HTML
file and embeds
the swf within

You can also publish

individual frames as gif, jpg
or png
You can also have a self
running exe or QuickTime
movie.

Kelly Short

24

Flash 8 Animation

Sydney CEO
Go to File>Publish
Your files are automatically published and should
then be in the same folder as your .fla published
file.

Project File
HTML File
.swf File

Kelly Short

25

Flash 8 Animation

Sydney CEO

Resources
Cartoon Smart This is my favourite Flash resource website, they sell video tutorials. There are some free
ones on the site for you to download, and Ive included them on this disk. They are well worth spending the money on, if you have some spare, and they do offer discounts if you want to sign up for the
newsletter, including $5 monthly specials. www.cartoonsmart.com
Flash Kit This is a comprehensive website of resources and tutorials related to Flash. Some of the tutorials
are of dubious quality, you do have to search through to find the good ones. I like to use it for the content that they provide for free that can be integrated into your flash filethe sound effects and loops,
for example, are great. http://www.flashkit.com/
Adobe website, the makers of Flash, have some excellent written tutorials, with some video backup, especially with the features new to Flash 8. http://www.adobe.com/devnet/flash/learning.html

Kelly Short

26