Introduction to

Macromedia Flash MX

Digital Media Workshop Series

Jason Canavan
Media Specialist

Durham District School Board

400 Taunton Rd. East
Whitby, ON
L1R 2K6
 Table of Contents

Foreward.........................................................................3

Why use Flash?...............................................................4

Setup..............................................................................5

Layout - Stage and Timeline............................................6

Toolbox...........................................................................7

Motion Tweens................................................................8

Guided Layers.................................................................11

Mask & Masked Layers....................................................13

C Durham District School Board

 Foreward

Macromedia Flash has become the industry standard for animated graphics and
interactivity. Flash combines vector graphics, high quality text, interactivity and
compressed audio to achieve a rich multimedia experience that can be utilized for
CD ROMS, DVDs and websites. Macromedia Flash generates vector-based graphics
and therefore will download much faster than sites that display text and graphics
generated with bitmaps. Flash files will also play consistently on many different
types of browsers and operating systems. Now with Windows XP, the Flash plug in
comes standard with Internet Explorer.

C Durham District School Board

 Why use Macromedia Flash MX?

With Macromedia Flash MX you can:

+ animate graphics and text with smooth playback

+ add sound and music to your movies
+ develop interactive training tutorials
+ with advanced Actionscript - create complex interactivity
+ create stand-alone executable files (projectors) to distribute your movies as one file
+ develop rich multimedia websites entirely in Flash

C Durham District School Board

 Setup

Whenever you start in Macromedia Flash MX, the first thing you will want to setup
is the Movie Properties dialogue box. This box outlines the properties of your movie;
frame rate at which your movie will play, the dimensions of your movie, background
colour and what your rulers measure in. Located at the bottom of your Flash
window you will find the Properties dialogue box, if you click on Size you will
get the following options.

Setting the Frame Rate to 24 will allow animations to play smoothly, if the computer
is fast enough to render the movements. Twenty-four frames per second is a good
guideline to follow for using your animations on the internet.

C Durham District School Board

 Layout - Stage and Timeline

Below is the default layout for Macromedia Flash MX. The timeline indicates what
frame you are at and also indicates the number of frames in your movie. Within
the timeline you will find layers - you can have any number of layers within a movie
and it is within these layers that you put your graphics, text, and sounds. The
Work Area is not viewable when you play your movie, so it is a place to work on objects
or if you want your objects to “fly in” to your movie then start them from the Work Area.
The Stage is where all viewable objects lie. Anything on the stage is seen by the user.

Timeline

Work Area

Stage

C Durham District School Board

 Toolbox

The toolbox contains all tools necessary for drawing, viewing, coulouring and modifying
your objects. Each tool in the toolbox comes with a specific set of options to modify
that tool. The diagram below outlines the grouping of tools.

Drawing Tools

Magnification
tools

Colour Tools

Tool Options

C Durham District School Board

 Motion Tweens

Motion tweening is the ability to move an object in either linear or non-linear fashion.
This must be created carefully in order to achieve the desired results. This tutorial
will outline the steps in order to achieve a motion tween.
1. On layer one create a ball in the centre of the screen.
2. Select the object by drawing a box around the ball with the selection tool.
3. Goto Insert - Convert to Symbol (keyboard shortcut - F8) to bring up the
Convert to Symbol dialogue box.
4. Give your graphic a name and select the radio button for Graphic and click Ok.

In order to complete a motion tween you must first convert any object
to a graphic symbol.

5. Now your ball is a Symbol (Graphic) and is ready for movement.

6. Right click on Frame 15 of layer 1 and choose Insert Frame. This will create a
length for your animation (15 frames).
7. Highlight the first frame by a single left mouse click on the frame. The frame
should turn black.
8. Goto Insert - Create Motion Tween. You will notice that a dotted
line will fill in between frame 1 and frame 15.
9. Highlight frame 15 then goto Insert - Keyframe. This will set a
keyframe at frame 15. You will now have a solid line with an arrow on the end
closest to Frame 15.

Keyframes are needed in order to move the object between two points.
Frame 1 and Frame 15 are your Keyframes, therefore you can move this
ball between point A and point B.

C Durham District School Board

 Motion Tweens

10. In order to make a ball bounce we must have 3 keyframes; a starting frame,
a frame for the highest point of the animation and another frame in the same
position as the first. This will create a loop. Create a Keyframe at Frame 30
by highlighting frame 30, Insert - Keyframe. You will now have an arrow from
Frame 15 to Frame 30 as well.

Keyframe 15

Keyframe 1 Keyframe 30 (same position as 1)

11. Goto Frame 15 and move your ball to the top of the Stage.
12. You are now ready to preview your animation. Goto Control - Test Movie
(Keyboard shortcut = Ctrl + Enter)

C Durham District School Board

 Guided Layers

In this tutorial, you will learn how to have an object move along a path (guide).
This tutorial will also give you experience with using layers.

Start by choosing File - New from the menu bar to clear your screen.

1. Setup your Movie Property box with proper frame rate and colour.
2. Create two layers (by choosing the icon outlined below) - 1 for the guide and
1 for the guided object.

Add Layer

3. On layer 1, create an object that you would like to move.

4. With the object highlighted, goto Insert - Convert to Symbol. Give the object
a name and select the radio button for Graphic - Ok.
5. Highlight layer 1 - frame 30 - goto Insert - Frame, to create an empty frame at
frame 30.
6. Highlight the first frame in layer 1 - Insert - Create Motion Tween.
7. Highlight frame 30 - Insert - Keyframe.

The object is now setup to move, however, we have not given it different
coordinates yet. Now create a Guide layer (path for object to move) using the
pencil tool. We will provide movement later.
1. Lock layer 1 before drawing on layer 2. This stops you from moving the object.
2. Use the pencil tool to draw a path in layer 2. This path will now serve as your
guide for your object.

Lock Layer

C Durham District School Board

 Guided Layers

3. Highlight Layer 2, frame 30. Goto Insert - Frame. The guide must be as long
as the motion layer in order for the object to be guided.
4. We must now setup layer 2 to be the guide. Right click on the layer 2 name -
goto Guide.

5. You will notice the icon beside the title Layer 2 has now changed to a small
hammer. This means that the layer is now a guide.
6. Right click on the name Layer 1 now and goto Properties. Here you will change
layer 1 to Guided. This means that your object will now follow the path in
layer 2 (the guide layer). You will also notice that the hammer icon for layer 2
now has changed, indicating that the guide layer now is guiding layer 1.

C Durham District School Board

 Guided Layers

7. Unlock Layer 1 and lock Layer 2. Highlight layer 1 - frame 1 move your
object to the start of your guide (if it already isn’t there). The object should
“snap” to the start of the line. This now sets your first keyframe for your object.
8. Highlight layer 1- frame 30, then move your object to the end of the line (guide).
This will set your last keyframe for the object.
9. Test your movie - Control - Test Movie (ctrl + Enter).

C Durham District School Board

 Mask and Masked Layers

A masked layer is a window to the layers that are found below the mask layer.
You will only see what is under the masked layer through the holes in that layer.
The hole is created by using a shape.

1. File - New, to clear the stage.

2. Start by creating two layers - name Layer 1 - Picture, and Layer 2 - Masked
Layer.
3. With frame 1 of the Picture layer highlighted, goto File - Import - Choose a
photograph from the directory.
4. Size the photo to be exactly the same size as the page.
5. Highlight frame 1 of the Masked Layer and draw a shape that will act as your
mask.

6. Drag your masked layer object so that it is overtop of the picture.

7. Right click on the name Masked Layer and choose Mask from the pull-down.
You should now see the image through the shape of the masked layer.

In order for the mask to work properly, you will notice that both layers
have been locked. In order to edit either layer you must first
unlock the layer you wish to change.

C Durham District School Board

 Mask and Masked Layers

Mask applied

Note: In order to see the mask applied both layers need to be locked.
This happens automatically when you select Mask for the
masked layer.

C Durham District School Board

 Mask and Masked Layers
Animating The Mask

To animate a mask you must first start by unlocking the mask layer.

1. Unlock the masked layer.

2. Highlight the first frame, which should in-turn highlight the object.
3. Choose Insert - Convert to Symbol. Change the object into a Graphic Symbol
by clicking on the associated radio button and provide a name for the object.
This will enable the object to move.
4. With the first frame still highlighted, choose Insert - Create Motion Tween.
5. Highlight frame 30 of the Masked Layer, goto Insert - Keyframe. This will
create a keyframe on frame 30 and allow you to move the object to another
coordinate to create motion.
6. Unlock the Picture Layer then highlight Frame 30 - Insert - Frame.
7. Move your object to another location.
8. Test your movie - Control - Test Movie (ctrl + Enter).

Moving Mask

C Durham District School Board

 Animating Text

Animating text is commonly used for web banners and is a wonderful way to
catch your audience’s attention.

1. Start by using the text tool to create yourself some text. For this tutorial make
your text large and centred on your stage. This will be the final resting place
for your title.
2. Insert - Convert To Symbol to convert the text into a Flash Graphic.
3. Give the text object a name and choose the Graphic radio button.

Now that your text is created and set in place, lets now work on animating the text,
starting with the timeline.

1. Start by right clicking on the first frame of your layer 1 timeline and
choose Create Motion Tween.
2. Goto frame 20 and right click - choose Insert Keyframe. This will
make your animation 20 frames long.
3. Highlight frame 1 with a single left mouse click - the frame will turn
black (highlighted). This will in-turn select your text object.
4. Choose the Free Transform Tool from the toolbar and make your
object smaller. This will be the starting point of your animation.
5. You can now preview your animation by using Control - Test Movie.

C Durham District School Board