1. YISHUN SECONDARY SCHOOL
We Seek, We Strive, We Soar
Macromedia Flash
Tutorial
Contents:
1. What is Macromedia Flash
2. Tools Panel
3. Interface
4. Motion Tween
5. Tweening Simultaneous motion and scaling
6. Fading with Alpha
7. Changing object color mid tween
8. Motion Guide
9. Shape Tween
10. Text to text tweening
11. Mask & Masking
1

2. What is Macromedia Flash
Flash is an authoring tool that designers and developers use to create presentations, applications,
and other content that enables user interaction. Flash projects can include simple animations,
video content, complex presentations, applications, and everything in between. In general,
individual pieces of content made with Flash are called applications, even though they might only
be a basic animation. You can make media­rich Flash applications by including pictures, sound,
video, and special effects.
Interface
This is how Flash looks like when you launch it.
v You have to create a New Document to start 2D Animtion.
v There is two ways to create New Document:
­ Click on File – New
­ or Click at Flash Document
(This is how Flash looks like after you launch it)
2

3. The tools in the Tools panel let you draw, paint, select, and modify artwork, as well as change
the view of the Stage.
Tools panel
The Timeline organizes and controls a document's content over time in layers and frames.
Frames Like films, Flash documents divide lengths of time into Frames.
Layer is like multiple film strips stacked on top of one another, each containing a different image
that appears on the Stage.
The major components of the Timeline are layers, frames, and the Playhead.
Playhead
Layer Frames
3

4. The Stage is the rectangular area where you place graphic content, including vector art, text
boxes, buttons, imported bitmap graphics or video clips, and so on when creating Flash
documents. The Stage in the Flash authoring environment represents the rectangular space in
Macromedia Flash Player or in a web browser window where your Flash document appears
during playback. You can zoom in and out to change the view of the Stage as you work.
The Stage
The Property inspector simplifies document creation by making it easy to access the
most commonly used attributes of the current selection, either on the Stage or in the Timeline.
You can make changes to the object or document attributes in the Property inspector without
accessing the menus or panels that also control these attributes.
Depending on what is currently selected, the Property inspector displays information and
settings for the current document, text, symbol, shape, bitmap, video, group, frame, or tool. When
two or more different types of objects are selected, the Property inspector displays the total
number of objects selected.
4

5. Motion Tweening
Motion tweening, put simply, is moving an object from point A on the stage to point B on the stage.
Simple movement with motion tweening:
v In a fresh Document, draw a square on stage,
select the fill and the outline together, and
convert them into a symbol with the name
square. Place the square symbol on the left Square
hand side of the stage. Symbol
v In the time line, insert a keyframe at frame 30 .
v In the new keyframe (click on the frame in
the timeline if its not currently selected),
move the square symbol to the far right­hand
side of the stage. keyframe at
frame 30
v Now go back to the timeline and click on any
Frame between 1 and 29.
v On the Property Inspector, select Motion from
the Tween drop­down menu
Tween drop­down menu
v Test the move and watch the object move from left to the right.
Tweening simultaneous motion and scaling
v On the same stage, click on frame 1 on the timeline.
v Select the free Transform tool and click on the Scale
button in the Tools panel options (or right­click on the
square and choose Scale)
Transform tool
(The selected object will now have a dotted box around it with
eight scaling selection handles)
5

6. v Grab the lower right­hand corner handle and use it to scale the object down to about half
of its original size.
v Now click on frame 30 on the timeline, where the motion­tweened square is located at the
right side of the stage. This time scale the square up by about a half, using the bottom
left handle to do the scaling.
v Test the movie, and you’ll see the square gradually grow larger from frame 1 to 30 as it
passes across the stage.
Fading with alpha
v On the same stage, click on frame 15, and insert new keyframes.
Keyframe 15
v Click on frame 15, select the symbol, and open the color drop­down menu in the Property
inspector.
(There are different effects that you can apply to your symbol)
Color drop­down menu
v Select Alpha from the drop­down menu, and then set
the Alpha slider to 0%. This setting will render the symbol
instance totally transparent in the keyframe at frame 15.
Alpha slider to 0%
v When you test your movie you’ll see the object fade in and
out.
6

7. Changing object color mid­tween
Let’s take a look at how to change the color of an object during a motion tween.
In this exercise, we move an object (text) across the stage and change its color as it moves.
v In a new document, start by creating text. Select Text tool in the Tools Panel. This will
open the Text tool properties in the Property inspector.
(This options displayed are similar to those in a Word processing program)
v Select the text on the stage and convert it into symbol. Remember, only symbols are
group objects can be motion­tweened.
v Create three more keyframe at frames 10, 20, and 30.
v At keyframe 10, select the symbol and open the Color drop­down menu in the Property
inspector.
v Select Tint from the color drop­down menu and change the tint amount to 100%. Then,
using the color selection palette, change the color.
v Repeat this procedure at keyframe 20, and at keyframe 30.
Now your text should have different color on each keyframe.
v Add motion tweens to the timeline between frames 1 and 10,
10 and 20, and 20 and 30.
v If you test the movie you’ll see it change color in jumps.
v Now you could try clicking on each of the keyframes in
succession and dragging each particular instance to a
different position on the stage.
7

8. Motion Guide
Motion Guide is nothing but moving your symbol in a predefined path such as curves or circles.
v Create a graphic symbol and Name the layer as "graphic"
"graphic"
Layer
Symbol
v Right click on the "graphic" label and select "Add Motion Guide" from the pop­up window.
v A new layer will appear on top of the "graphic" layer with the label "Guide:graphic" along
with the guide icon.
"Guide: graphic" Layer
"graphic"
Layer
Symbol
v Draw the path for your symbol in this new layer using pencil or line tool.
For example: I drew a circle for my car.
v Select frame 50 of guide layer and press "F5" to insert frames.
v Now go to "Frame 1" of "graphic" layer and drag your symbol to one end of your path.
While dragging, you will see a bubble on the symbol. That bubble should go right below
the path. Something like the one shown below.
v Now go to "Frame 50" of "graphic" layer and press
F6 to insert a new keyframe.
v Now drag your symbol to other end of your path. Again,
the bubble should go right below the path.
v Select any frame between 1 to 50 of your "graphic" layer. Right click and select "motion
tween" from the pop­up menu.
8

9. Shape Tweening
§ Shape Tweening morphing shapes into something new, rich and strange, either standing
still or moving.
§ Morphing text into shapes and vice­versa.
§ Using shape hints to overwrite Flash’s default shape tweening behavior.
Squaring the circle
v Create a new movie, and draw a circle and fill in frame 1.
v Click on frame 15, and insert a blank keyframe.
Empty Keyframe 15
Empty Stage
v Your stage is empty on keyframe 15, using a rectangle tool; draw a square with a
different color on other side of the stage.
v Highlight keyframe 1 to 15, On the Property Inspector, select Shape from the Tween
drop­down menu.
v Now if you test your movie you’ll see the circle morph into square while moving
across the stage.
9

10. Text to text tweening
This animation starts off with one word and uses shape tweening to change it into a different word.
v Create a new movie, and in frame 1, use the Text tool in conjunction with the Property
inspector to type This is my first, on the left side of the stage.
v Now select frame 30 and create a new keyframe and type text to text tween on the
below right side of the stage.
v Use the Arrow tool to select keyframe 1, and use the
Modify – Break Apart menu to first break the
text into separate letters
(Text is the only thing that needs to be broken apart twice)
v Select Modify – Break Apart again to break them into graphics. Make sure you have
each text box and letters selected before you this.
v Do the same thing to the other text; remember to break the text apart twice.
v Click the between the two keyframes on the timeline, and use the Property inspector to
create a shape tween.
v Now if you preview your movie you’ll see the first words morph into the second while
moving across the stage.
10

11. Mask & Masking
Masks are a powerful feature in Flash that allows you to selectively show and hide content.
v Create a new movie; by default you will have a layer in your timeline window. Insert one more
layer, totally you need two layers to mask an object.
v Rename the top layer to "Mask" and the layer below that to "background".
v
v
v
v
v
v
v
v Import your picture to the "background" layer.
v Using Oval tool from your tool box, draw a
circle without it's border in your "Mask" layer.
Figure 8.4 Figure 8.3
v Drag the circle to one end of your picture.
Figure 8.5
v Now go to” frame 40" of your "Mask" layer and press "F6" to insert a new keyframe.
v Now go to "frame 40" of your "background" layer and press "F5" to insert frames, so that
your background image is available all through your mask.
v Select "frame 40" of your "Mask" layer that is your new keyframe, keeping the playhead
on "frame 40" of "Mask" layer, drag the circle to other end of your picture.
v Now go back to "frame 1" of your "Mask" layer, keeping the playhead on "frame 1" of your
"Mask" layer, select Shape tween in your properties window.
v Right click on the "Mask" layer (the area where you named the layer not where the frames exist)
and select Mask.
v Your Mask is all ready. Press Ctrl+Enter to view your Mask.
End
11