Blast 2011
How to make simple web Animations
using Flash CS3
Introduction
Welcome to Flash CS5 at Blast 2011. Flash
is a powerful tool for making animations,
games, and many useful tools.
Examples Made at MVNU
What we’ll cover in this session:








Exploring the Flash interface
Using the Flash stage
Working with panels
Difference between a frame and a keyframe
Using frames to arrange content on the
stage
Using layers to manage content on the stage
Adding objects to the library
Testing your movie
The Flash Authoring Environment
1.
What we are going to do to begin with
is take a walk through the authoring
environment - called the Flash interface
2.
By the end of the stroll, you should be
fairly comfortable with this tool called
Flash and how to use them as you start
creating a Flash movie.
The Start page and Creating a
Flash document
•
•
•
The first thing you see when you launch
Flash is the Start page.
The area on the left side shows you a list
of documents you have previously opened.
The Open link at the bottom of the list lets
you navigate to a document that isn’t on
the list.
The Start Page
Flash Authoring Environment
Menus
Panels
Properties
Flash Stage
Tools
Layers
Timeline
Tools
Views
Colour
Options
Timeline
Timeline
Timeline
Panels
Use to control manage object properties
Document Properties
The Property Inspector
Document Size
Background Colour
Frame Rate
Exploring the Panels in the Flash
Interface
Panels can be moved around and opened or
closed depending upon your workflow needs.
We will now take a closer look at the more
important panels that you will use every day.
They include the following:
Timeline
Library
Property Inspector
Actions panel
Tools panel
Help panel
Exploring the Panels in the Flash
Interface
The Timeline
There is a fundamental truth to becoming
proficient with Flash: master the timeline and
you will master Flash.
At its most basic, all animation is movement
over time, and all animation a series of frames
which are viewed in succession.
The length of your timeline will determine
when animations start and end, and the length
of the animation.
Start
Middle
End
A simple animation ball, a is placed at the left
and right edges of the stage. In between, the
ball is at the top of the stage. From this, you
can gather that the ball will move upward
when the sequence starts and will continue to
its finish position at the right edge of the stage
once it has reached the middle of the
sequence.
Animation is a series of frames on the timeline.
Frames
If you unroll a spool of movie film, you will
see that it is composed of a series of
individual still images. Each image is called a
frame, and this analogy applies just as well
to Flash as it does for the film industry.
Guy Throwing ball

Say we want to make a simple guy
throwing a ball?
Man throwing ball - frames
Make a series of “frames”
 Draw a image – a guy throwing
 Make a new keyframe in the next frame
(right click frame, and “Insert keyframe”)
 Each keyframe is a new image, which
starts as the previous.
 Slightly modify each keyframe.
 Control/Test Movie will test your
animation

Man throwing ball - layers
Make a separate layer for each animated
component.
 Also make a layer for any fixed
background
 Make a layer for a ball.
 Animate ball
 Test again.
 (Timeline controls allow layers to be
locked, by clicking dot under lock icon)

Man throwing ball – Motion Tween
Motion tweens let the computer fill in the
in-between frames
 Simply make an keyframe with an object
in it’s initial position, and then another
keyframe further down the timeline in it’s
final position.
 Right click in between, and add a motion
tween!

Man throwing ball – Motion Guide
Man throwing ball – Motion Guide






Motion guides let the computer guide along a
complex track
Create object in initial position on separate
layer. Add a classic tween.
Right click layer and “add classic motion guide”
Draw line of motion
Go to first frame, and drag object onto starting
position
Go to last frame, and drag object onto ending
frame.
Shape Tween

A Shape tween “morphs” one object into
another.
Shape Tween
On a new layer, add an object.
 In a new blank keyframe many frames
later, add another object.
 Right click in between, and add a “shape
tween”
 That’s it!

The timeline is nothing more
than a series of frames.


When you open Flash, your timeline will be
empty, but you will see a series of rectangles
- these are the frames.You may also notice
that these frames are divided into groups.
Most frames are white and every fifth frame
is gray.
Flash movies can range in length from 1 to
16,000 frames, although a Flash movie that is
16,000 frames in length is highly unusual. The
thing you need to keep in mind is that a
frame shows you the content that is on the
stage at any point in time.
The content in a frame can range from one
object to hundreds of objects, and a frame
can include audio, video, code, images, text,
and drawings either singly or in
combination with each other. When you
first open a new Flash document, you will
notice that frame 1 contains a hollow circle.
This visual clue tells you that frame 1 is
waiting for you to add something to it.