Introduction to using Flash CS3

Creating an animation
Rules
• For each action create a new layer
• If you muck up a layer trash it and start again

Use UNDO to 1. Load Adobe Flash CS3

backtrack when 2. In Flash, choose File > New > Flash File (Action Script 3.0).
lost 3. Set page properties click on Movie Properties button [12fps] (or choose MODIFY >
1 Starting Flash Document)
- set movie speed to 12 frames per second [you can change it later if you wish]
- Set Size and Background colour
4. Make sure TIMELINE, TOOLS & PROPERTIES windows are visible using WINDOW
> Properties
5. Use FILE > Save to save Flash movie Project [which is a .fla file which is not web
ready]
Backgrounds
1. Double-click on Layer1 [or hold CONTROL key down and click to access
PROPERTIES] and rename it Background
2. Click in first cell of Background layer
3. use TOOLS to draw shape[s]
4. To add text to this background click in cell one
- Choose the text tool and click and drag on the photo to make a text box
- use PROPERTIES to select Font style
- you can edit text by choosing Text tool and clicking on text box [or drag text box to
new position]
5. To keep the background constant - In ‘Background’ layer click on a new cell [follow
numbers shown at top] and choose INSERT > Timeline > Frame
- if you do this in Frame 60 this creates a background for 60 frames at 12fps = 5
seconds
Shape Tween
Shape Tween from 1. Double-click on Layer1 [or hold CONTROL key down and click to access
a square to a PROPERTIES] and rename it Shape1
circle. 2. Choose the Rectangle tool in the Tools panel, and draw a blue square on the left
side of Stage. Notice a black dot in frame 1- this is now a keyframe.
(With Shape tweens, you use raw, vector shapes- the simpler, the better. That is, the
simpler the shape, the more likely the Shape tween will work the way you want. With
complex shapes the tween can often implode and fail.)
3. Select Frame 60 and Insert > Blank KeyFrame (or press F7) to create a new blank
keyframe.
4. Choose the Oval tool in the Tools panel, and draw a circle in the same location as
the square.
5. In the Timeline, click any of the frames between the two keyframes. In the Property
inspector choose Shape from the Tween pop-up menu. The Shape tween changes
the frames in the layer in the Timeline to a pale green, and a solid horizontal arrow
appears between the first keyframe to the last. If the Line is dotted something is
wrong!
6. Click and drag the playhead from Frame 1 to Frame 30 to see the square morph into
the circle(or press Return).

Shape Tween to 1. Select Frame 60 in the Timeline. Choose the Selection tool in the Tools panel, and
move objects click and drag the circle to the right side of the Stage.
across the Stage 2. play back the animation, the shape morphs from a square to a circle, and moves
across the Stage as it changes.

Shape Tween to 1. Select Frame 60 and select the circle.

morph shape 2. Choose the Property inspector and click the Fill color box. Choose a red swatch.
colors. Play back the animation. The color changes as the shape moves across the Stage,
creating a series of blends between the blue and red colors of the square and circle.

• Most actions can be done in at least two different ways [using mouse, menu or keyboard]
Shape Tween 1. Create a new File and save (or create a new layer using INSERT > Timeline > Layer
using Transform or +layer icon and rename it)
2. Draw simple shape in frame 1
3. Insert a keyframe in frame 60 (or press F6)
4. Click in Frame 60 and select the Shape
5. Select the Free Transform Tool From Tools Menu
6. Change size of shape
7. In the Timeline, click any of the frames between the two keyframes. In the
Property inspector choose Shape from the Tween pop-up menu
Playback the animation

Graphic Motion
Create Symbol 1. Create a new Flash File and save
(graphic, button or 2. Double-click on Layer1 [or hold CONTROL key down and click to access
movie clip created PROPERTIES] and rename it motion1
in Flash - can be 3. Choose the TOOLs to create a simple shape (rectangle) in the left of the stage
reused in your 4. Select the shape Modify > Covert to Symbol
document 5. Name Symbol eg Rectangle and select Graphic
Moving Shape 6. Insert a keyframe in frame 60 (or press F6)
7. Click in Frame 60 and select the Shape and move it to the right
8. In the Timeline, click any of the frames between the two keyframes. In the Property
inspector choose Motion from the Tween pop-up menu.

The Motion tween changes the frames in the layer in the Timeline to a pale blue, and
a solid horizontal arrow appears between the first keyframe to the last. If the Line is
dotted something is wrong!

9. Playback the animation

Rotating Shape 1. In the Timeline, click any of the frames between the two keyframes.
2. In the Property inspector choose Rotate: CW or CCW and enter number of times
3. Playback the animation
Changing Colour 1. Select the shape in frame 1 (or frame 60)
2. In the Property inspector choose Tint
3. Select a colour from the colour swatch and a percentage
4. Playback the animation
5. Can also change alpha etc
Publishing 1. To save the project, use FILE > Save to save as a .fla file
2. To Export for web publishing, choose FILE > Publish Settings
- and select Flash [.swf file type] for running with Flash reader or plug-in
- each option has its own settings – click on tab to access
3. Then click on PUBLISH button to produce Flash [.swf] versions
– files will be saved in the same folder where you saved the Flash working file
- .swf can be inserted into web pages or linked to a web page
More Hints • Layers work in the order from bottom-up ‘over’ those below. You can re-order by
dragging layer up or down.
• To remove non-working Tweens highlight cells (highlight first to last, then select None
in Tween drop-menu in properties window.