Flash MX Basics (and Common Problems)
Mr. Skocko Room 246 • 593-5446 • Mac LabValhalla Home

This tutorial will introduce you to a number of basic features, tools, tips, tricks, and common mistakes. If you're one of the students having trouble with broken motion tweens, please take the time to read through it more than once before asking for help.

If you just can't be bothered with this long tutorial, here's the punch line. (But I'll still point you back to this page when you ask basic questions that I've demonstrated repeatedly in class.)


When you launch Flash, the default Stage/Timeline window appears

Move your cursor over the icons (do the same with the toolbar) to see their names

Double-click on the Frame Rate (shown above) and you've found a terrific short-cut


The Document Properties dialog box opens


Change the Stage Dimensions, the Background Color, and the Frame Rate to suit your needs


Clicking on the Background Color fill gives you the Color Picker


The cursor turns into the Eyedropper when over a color


Below you see the results of the new settings


Just a reminder to hover over the icons in the Tool Bar as well (the shortcut for each tool is in parenthesis)


The Oval Tool is depressed and therefore the active tool

You can set the Stroke and Fill colors via the Tool Bar if you like but...


The Property Panel is contextual and reflects options for the currently selected function

As you see, it offers far more options than the Tool Bar does


Increase the size of the Stroke if you like

Those arrows always indicate a pull-down menu


The default choices for the Stroke are here


Pick your Stroke or even click on Custom


And design your own Stroke

The Help button can be very useful if you have questions


A black stroke on a black stage probably won't show up very well


Pick any color you like


And now we're ready to draw an object (note the first frame in the Timeline)


After an object is placed on the Stage, Flash creates a Keyframe automatically


Click on the Stage (the background) and watch the Property Panel change

Yes, you can make changes to the Stage via the Property Panel


Click on the Stroke to select it...

The Stroke is highlighted and the Property Panel changes once again


Click on the Fill to select it

And you're getting the idea, right?


Clicking on the Keyframe is an easy way to select the entire object

Get used to looking at the Property Panel for options


Click on a frame further down the Timeline


Or better yet, Control-click to activate the contextual menu


Insert another Keyframe


The object is now set to appear throughout the first 50 frames of our animation

But it's Static (that means it just sits there)


Control-click on frame 1, create a Motion Tween, and...


We get a dashed line indicating something's wrong



Note the warning sign in the Property Panel

Click on the icon to see what we did wrong


Undo the Motion Tween (Command-Z)


If your object is deselected, click on the first keyframe, double-click it, or draw a rectangle around it


We forgot to convert the object into a Symbol

Control-clicking on the object give us the contextual menu


Give your symbol a descriptive name and make sure the Behavior is set to Graphic


Open the Library to see our symbol

F11 is the listed shortcut but I find Command-L easier to remember


Flash created the Tween 1 symbol for our first failed motion tween attempt


Drag it to the trash icon or select it and click the icon


Flash tells us we can't Command-Z to get it back


Now, here's our symbol


Back in the Timeline, Control-click to create a Motion Tween and...


And we get another dysfunctional Motion Tween



Of course there's a work-around but let's just do it right


Click the Insert Layer icon


To avoid confusion it's a good idea to name our layers by double-clicking on the name

Descriptive names are a good idea


Hide the Bad Tween by clicking on the visibility button (the dot under the eye)


Select the first frame in Good Tween


Since we have a symbol let's use it by opening the Library (Command-L or F11)


Drag it onto the Stage

Note: It's not really the symbol we're dragging but an INSTANCE of the symbol (more on that later)

This corrects our first mistake


Control-click and Insert Keyframe further down the Timeline


Control-click and Create Motion Tween in the first Keyframe and...




I know what you're thinking...

Why did I make you read all that if it's so easy to do?

Why didn't I just show you?

Because making Keyframes BEFORE converting objects to symbols is a common error


I demonstrated the short version five or six times in class

And still about one-third of you are still having trouble

I bet you won't forget to convert your objects to symbols before creating keyframes anytime soon



Of course there's a number of different ways to set up for keyframing but this is how we're beginning

Fair enough?


Save your file (note the .fla extension)


Now, how 'bout we animate the instance and have some fun


Mac Lab | Digital Arts | Web Design | Flash