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

 

This is a VERY COMMON MISTAKE

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

This is also a VERY COMMON MISTAKE

 

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...

 

Success!

 

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