Flash 8 Animation Sydney CEO

Prepared by: Kelly Short

Kelly Short 1
Flash 8 Animation Sydney CEO

Contents
Section Page
1 Screen Layout 3
2 Flash Drawing 6

3 Motion Tweening 11
4 Shape Tweening 13
5 Frame by Frame animation 15
6 Movie Clips 19
7 Music 23
8 Publishing 24

Kelly Short 2
Flash 8 Animation Sydney CEO

Screen Layout

Create a new Flash Document

Lists recently opened items

Kelly Short 3
 Timeline

Kelly Short
Flash 8 Animation

Library

Stage
Toolbar

4
Sydney CEO

Properties Bar
 Flash 8 Animation Sydney CEO

The Timeline
Empty Key Frame
Key Frame
Empty Frame

Layer Name

Onion Skinning

Scene and Symbol

New Layer, Motion Guide, Layer Folder

The Tools
Select (V) Sub Select (A)

Free Transform Tool (Q) 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 5
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 6
Flash 8 Animation Sydney CEO

Filling
In most painting programs, if you had a situa-
tion 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 7
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 direc-
tion 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 8
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 9
Flash 8 Animation Sydney CEO

Text
If you are wanting text just to display (not to change or be input) you are cre-
ating 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 doesn’t have the font that you have
used installed, then the default font (usually Arial or Sys-
tem) 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 it’s 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 pic-

ture, 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 mo-
tion 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

In-
Between This should create a timeline that looks like this:
Frames

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 some-

thing 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 Sydney CEO

Step 1: Make sure you

Step 2: Find the
are in Frame 1 of the
contact folder
SuperSteve Layer

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 Sydney CEO

Find the recoil folder and click

Check you are
and drag Steve’s parts across
on frame 3

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 Click and drag the sound

will show in the onto the stage
timeline

Kelly Short 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 I’ve included them on this disk. They are well worth spend-
ing 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 con-
tent that they provide for free that can be integrated into your flash file…the 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, espe-
cially with the features new to Flash 8. http://www.adobe.com/devnet/flash/learning.html

Kelly Short 26