I F MX: Ntroduction To Lash
I F MX: Ntroduction To Lash
The purpose of this handout is to introduce and briefly explore several functions within Flash MX. Step-by-
step instructions for the different ways to animate are also included. References to more comprehensive
treatments of the topics covered will be provided at the end of this document.
Flash MX is a software program produced by Macromedia. Flash is primarily used for creating web-based
animations and for making web pages more interactive. While Flash can be used for creating web pages
from scratch, this is usually a project better-suited for web page creation software like Dreamweaver,
FrontPage or GoLive. In addition to its animation capabilities Flash also has lots of drawing tools. Drawing
shapes for animation directly within Flash is encouraged, though Flash's drawing capabilities are not as
advanced as those of Adobe Illustrator, Fireworks or Freehand.
Drawing
Tools
Layer
Toolbar
Stage Panels
Name this new Symbol and make sure its Behavior is set to Movie Clip. Then Click OK.
What happened? Well, for starters, the selected shape has a different look to it. Its selection should now be
indicated by a blue box. This is an Instance of your Symbol. Go ahead and move it around the Stage by
dragging and dropping it with the mouse. Also notice that your major options at this point (when the
Symbol is selected) are to adjust its scale and color. Feel free to also adjust the color properties of this
Instance via the Effect Panel. Any of these changes will leave the Master Symbol unchanged.
Flash will keep a Library of all of the Symbols you create for an animation file. You can view this Library
and its contents by either typing Control-L or clicking Window > Library. This Library lists all of your
Master Symbols, indicating whether they are a Movie Clip, a Button or a Graphic by the small icon beside
their name. If you click the Options Button you will find several fairly self-explanatory functions for your
Symbols. If you click on the Symbol, it appears in the Library’s Preview box.
CSSCR flash 11/13/06 Page 5 of 16
Library Options
Preview Box
List of Symbols
Click on this Symbol so it appears in the Preview box. Now drag the Symbol’s image from the Preview box
and drop it onto the Stage. You now have two Instances of the Symbol in your movie. Once on the Stage,
each of these instances can be separately modified without disturbing the Master Symbol.
Want to alter your Master Symbol? Double-click on either one of the Instances, the Symbol's image in the
Preview box, or the graphic beside the Symbol in the Library. Or go to the Main Toolbar and click Edit >
Edit Symbol. If all goes well you should be in Symbol-Editing Mode, as indicated by a noticeable change in
the background (it’s not really the Stage anymore). You should also see a change in some text in the upper
left-hand corner, which instead of reading Scene 1 should now read Scene 1 <your Symbol's name>. In
Symbol-Editing Mode you can make global changes to your Symbols. Make some obvious change and then
go back to your main Stage, by either clicking on Scene 1 or clicking Edit > Edit Document. The change
you made to your Master Symbol should now be reflected in both of the Instances and in the Preview of the
Symbol in the Library.
You can use the tutorial on Symbols by clicking Help > Using Flash > Using symbols, instances, and library
assets overview in the Help Panel.
Layers
One way to gain more control over your animation (what things move, what things don’t move) is through
the use of Layers. Any given Layer can contain shapes, Symbols, sounds, etc. that have specified behaviors
which won’t disturb what might be going on in another Layer. The main qualification of this statement is
that Layers are, um, layered, meaning that what happens on a ‘higher’ Layer will appear in front of what
happens on a ‘lower’ Layer on the Stage. The Layer Toolbar and its features are described in the following
graphic. The descriptions are short because these features are fairly self-explanatory. In order to really learn
the features, you should play with them. Try to add a Layer and then draw some shapes or place some
Symbols on each of them. Notice how they appear on the Stage.
CSSCR flash 11/13/06 Page 6 of 16
There are a couple of special functions that Layers can have when used in animations. We will talk about
some more advanced Layers when we cover animation with Guide and Mask Layers.
Animation
There are a couple more concepts to familiarize yourself with before we’re ready for the animation exercises.
First, creating animations requires that we get more intimate with the Timeline in Flash. The Timeline will
indicate, for a given Layer, what things are happening when. The ‘when’ is in terms of frames, and the
default rate at which Flash movies play is 12 frames per second (you can adjust this in the Movie Properties
box, Modify > Document).
When you want to specify that a certain action will happen in a given frame, you will add what’s known as a
Keyframe to that frame. The Keyframe is indicated by a black dot within a frame. You can add a Keyframe
by clicking in the desired frame and either typing F6 or clicking Insert > Timeline > Keyframe. Adding
Keyframes is to be distinguished from adding frames (typing F5 or clicking Insert > Timeline > Frame) in
that Keyframes will indicate action or change while frames will indicate a static continuation of the
preceding Keyframe. You might add frames in order to extend a static background for your movie.
Timeline
Frame marker (red thingy)
that indicates which frame’s
contents are appearing on
the Stage.
Keyframes
CSSCR flash 11/13/06 Page 7 of 16
Frame-by-Frame Animation
If you have intricate drawings that are supposed to change in very subtle ways across frames, you may want
to make these changes on a frame-by-frame basis. While this method of animation can be tedious and
demanding on file size, if you are a professional animator with very specific effects in mind, you may need
to make frame-by-frame animation.
To get a sense of frame-by-frame animation, open a new Flash document (File > New). Draw an initial
shape of something. Now click on frame 2 and create a Keyframe in it (F6). The shape you drew in frame 1
should appear in selected form in frame 2. Now alter this shape in some noticeable way by adding an
additional shape or changing the current shape’s color, scale or rotation. Repeat this process of adding a
Keyframe to the next frame and altering the shape until you have several Keyframes for the changing shape.
Now preview the animation in Test Movie (Control-Enter).
CSSCR flash 11/13/06 Page 8 of 16
Onion skinning.
If frame-by-frame animation is something you will be doing a lot of, you may want to consider using Flash’s
onion skinning tools, located under the Timeline. These allow you to view the contents of previous frames
as you alter them in the current frame. Think of how animation was created in the days before computers:
Hard-working people would have to draw the contents of each individual frame, making small changes in
order to depict smooth movements. It was helpful for them to draw images on thin paper, onion skin paper,
which they could place on top of the images of previous slides. They could then basically trace the preceding
images but with small changes. The figure below gives you a picture of how onion skinning might be useful.
Tweening Animation
If frame-by-frame animation seems like tedious and undesirable work, be aware that you have other options
for animation. These are usually much more efficient and easier on file size. The idea of tweening is that we
don’t have to draw what happens in every frame. Instead we specify what happens on a beginning frame
and an ending frame and then let Flash fill in the rest. The next sections walk you through the four major
types of tweening: motion, shape, and tweening with guide and mask layers.
CSSCR flash 11/13/06 Page 9 of 16
Motion Tweening
Let’s say your animation consists of some shape that’s supposed to move from one spot on the Stage
directly to another spot within a given number of frames. In that case, your best option might be motion
tweening. Here is the walk-through:
1) Open a new Flash document (File > New).
2) Draw a shape on the Stage, select it and convert it to a Movie Clip Symbol (Insert>New Symbol or type
F8).
3) Select a later frame in the Timeline and insert a Keyframe in it (Insert>Keyframe or F6).
4) Select the first Keyframe in frame 1 and specify the initial position of the shape.
5) Select the later Keyframe and specify the ending position of the shape.
6) Select the first Keyframe and open the Properties Panel (Window > Properties)
7) Go to the Tweening drop-down list of the Frame Panel and Select Motion.
8) Notice the arrow that now connects your two Keyframes on the Timeline. This indicates the Motion
Tween.
4) Alter the original shape in this later frame, or first draw a new shape and then delete the old one (Note
that if you use text for this end shape you will want to select the text and then click Modify > Break
Apart for the shape tween to work).
5) Select the initial Keyframe, open the Properties Panel and set Tweening to Shape. Notice the tweening
arrow that now connects the two Keyframes in the Timeline.
Guide Layers
If you want the motion of your motion tween to be anything other than a straight line, you may want to use
a Guide layer. Here you tell Flash how to move an initial shape to a different position.
1) Open a new Flash document (File > New).
2) Select the Pencil drawing tool and use it to draw the path for an object to follow.
3) Select Modify> Timeline > Layer Properties to access this Layer's Properties. Change the Layer to
Guide. (You can also right click the layer and click properties.)
4) Insert a new layer by selecting Insert > Timeline > Layer.
5) Drag this new layer below the path layer. This causes the new layer to be Guided (see its properties) and
the dashed line now separates the two layers.
6) Draw the shape to move along the path in the first fame of the Guided layer. Select it and convert it into
a Movie Clip Symbol (F8).
7) In the Guided layer click the ending frame for the path and insert a Keyframe (F6).
8) In the Guide Layer where the path is insert a frame at this ending frame (F5).
CSSCR flash 11/13/06 Page 11 of 16
9) Click on the first frame of the new layer and create a Motion Tween by selecting Motion from the
Tweening drop-down menu of the Frame Panel.
10) Check the Snap box in the Frame Panel for the first frame of the new layer and move the shape to the
beginning of the path. *The shape’s registration point (+) MUST be on the path or Guide Layer
Motion will not work.*
11) Click on the ending frame for the new layer and snap the registration point of the shape to the end of
the path.
12 Notice that Orient to Path is an option in the Frame Panel whereby the shape being tweened will rotate
toward the direction it’s traveling.
Preview this animation in Test Movie (Control-Enter).
Symbol's
registration
point (+) is
on the path.
CSSCR flash 11/13/06 Page 12 of 16
Mask Layers
The animation effect achieved through the use of mask layers is difficult to describe but easy to understand
once seen. It's basically a spotlight effect. Follow these instructions and just see what you think about this
method of animation.
1) Open a new Flash document (File > New).
2) Draw a filled circle, select it and convert it to a Movie Clip Symbol (F8).
3) Insert a Keyframe in a later frame (F6) and move the circle to a new location.
4) Click on the initial Keyframe and set up Motion Tweening through the Tweening menu on the
Properties Panel.
5) Access the layer’s properties (Modify > Layer) and change this layer to Mask.
6) Add a new layer (Insert > Layer) for the objects the spotlight will show/hide.
7) Drag this new layer below the Masking layer so that it becomes a Masked Layer.
8) In this new layer, draw the shape to be spotlighted (Text works well for this) and move it so that it's in
the path of the circle in the Mask Layer.
9) Preview the animation in Test Movie (Control-Enter).
10) Some masking limitations:
a. No more than one symbol in the Mask layer.
b. No combining Guide and Mask Layers.
c. When you place a Movie Clip symbol in a Mask layer it acts like a Graphic symbol.
You will want to specify four states for this button. Each of these frames will need a Keyframe (press F6
when the frame is selected) and then you will define the contents of each of the four states.
-Up: This is the appearance of the button when it is 'at rest', or unselected or in contact with the mouse.
-Over: This is the appearance of the button when the user moves their mouse over it.
-Down: This is the appearance of the button when the user clicks it with their mouse.
-Hit: This is where you define what area constitutes when the mouse contacts the button and when it
doesn't. No one will see this shape, but the size can impact how people interact with the button.
When you have defined these states, you can return to the Authoring Environment (Edit > Edit
Document). Open the Library (Control-L), find the Button and drag it onto the Stage.
Preview the animation in Test Movie (Control > Enter). Test the button by mousing over it and clicking it.
You can run the Button Tutorial in Flash to get more practice at using Buttons (Help > Using Flash > Using
symbols, instances, and library assets > Creating Buttons).
CSSCR flash 11/13/06 Page 13 of 16
Making buttons even more interactive requires that we get into ActionScripting. Examples of actions you
would assign Instances of Buttons are to indicate that when a particular button is clicked: 1) to open some
web page, 2) to go to a particular frame in the movie, 3) to alter some variable. You can learn these actions
and more in the manuals cited at the end of this document.
CSSCR flash 11/13/06 Page 14 of 16
You will want to save your Flash file first (*.fla). Then when you set your publish settings, you can just click
Publish and the file(s) will be saved where your Flash file has been saved.
The advantage to publishing a Flash Player file (*.swf) is that animations will look the same for most users
because Flash Player plays similarly and is widely and freely available (for the download site see the
Macromedia website listed below). You will still need to embed this file in some other HTML file so that it
is available to web users viewing a web site.
Using the HTML file from the Publish settings allows users to view the animation directly within an internet
browser. The quality can vary more widely than it does with Flash Player files.
You can use the File > Export > Export Movie options to get even more options for your animation.
CSSCR flash 11/13/06 Page 15 of 16
http://www.macromedia.com/support/flash/
http://www.flashkit.com
http://www.virtual-fx.net/
http://www.flazoom.com/
http://www.flashmagazine.com
http://www.were-here.com
http://www.webdevelopersjournal.com/articles/flash/flash_intro.html
http://www.w3schools.com/flash/default.asp
Manuals at CSSCR
There are several very good manuals at CSSCR. The manuals are available for check-out to affiliates of the
University of Washington. Just present your driver’s license to a qualified CSSCR Software Consultant and
ask to see the Flash Manuals.
Introduction to Flash
August 2006
http://julius.csscr.washington.edu/pdf/flash.pd