Flash Animation

Flash 8 Animation Sydney CEO
Prepared by: Kelly Short
Kelly Short 1
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
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
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 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
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
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
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
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
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
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
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
Go back to frame 1
Select Shape
from the Tween
Option
Your timeline should now look like this
On
CD!
Kelly Short 14
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
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
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
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
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
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
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
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
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
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
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
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

Flash Animation

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Flash Animation

Uploaded by

Copyright:

Available Formats

Flash 8 Animation Sydney CEO

Prepared by: Kelly Short

Create a new Flash Document

Lists recently opened items

Scene and Symbol

Free Transform Tool (Q) Gradient Fill (F)

Line Tool (N) Lasso (L)

Pen Tool (P) Text (T)

Hand Pan(H) Zoom (Z)

Tool related Options

The tool related options allows you to draw

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

Exercise to create a straight line:

• Select the Pen tool.

Important points about curves:

Remember to Double click to select both outline and fill

Click and drag a side or corner handle out to

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

You can also do this through the modify menu

Select the text tool on the toolbar

Change the type to Static

If you are taking either the published or working file to

Fonts ARE NOT embedded in flash files.

Select the text

Go to Modify, Break apart

This breaks it down to individual

Go to Modify, Break apart again

This converts the text to a pic-

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

Name the symbol

You will now notice two differences. When selected,

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

If not, you can open it by going to

Change tween to Motion

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

Your timeline should now look like this

Using the paintbrush, draw or write some-

On the timeline, right click on Frame 10

Draw something different in

Your timeline should now look like this

Step 1: Make sure you

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

Insert a Blank Keyframe on frame 3 of SuperSteve

We are skipping one frame to make it easier.

Select the onion skinning

Find the recoil folder and click

With onion-skinning turned on, Super

Draw a boat on the stage

Your timeline should look like this:

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

Your timeline should now say

Add another layer

Rename the layer

Draw smoke using the paintbrush

Right click and insert a keyframe in

Modify the smoke slightly

The boat disappeared in frame 4 because there

Go to Control—> Test movie to test the boat.

In order to move the boat, just motion tween it

Insert a keyframe on frame 25

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