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...
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...
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
Save your file (note the .fla extension)
Now, how 'bout we animate the instance and have some fun