Now that you (hopefully) understand your tools, it's time to move on to more interesting stuff.
Open up flash, and make sure you have the Library Library, Color Mixer, and Align panels open (you can use the keyboard shortcuts mentioned in the previous chapter, or click on the "windows" tab at the top of your screen.)
Take a look up at your timeline- for now, it consists of one layer, and one keyframe (the little box with the "o" inside of it.)
Use your brush tool to draw out a squiggle.
Take another look at your timeline- notice that the little "o" inside of the keyframe is now filled in? This is a timeline marker, indicating that there are elements on the stage, within this keyframe.
Click on the little grey box beneath the number 20 on the timeline, and press F7.
Cool- you just added a blank keyframe in frame 20- right now, the fames is blacked out, because it's selected. Click and drag the pink "scrubber" box above frame 20, and drag it to the left, to deselect this frame. Click on the blank keyframe we just created, to select it again, and on the stage, use your brush tool to draw a completely different squiggle.
Notice, again, that the little "o" within the keyframe is now filled.
Click on the blank frame beneath the number "10" on your timeline:
Then look down at the "properties" panel at the bottom of your screen. Click the "Tween" drop-down, and select "Shape."
Woah- a lot of stuff just changed! Click on frame 1, and press "enter" to view your animation. Take a look at the timeline, again:
Notice that now that the shape tween has been added, the first keyframe and blank frames have turned green, and an arrow now appears in the timeline. Basically, what we've done is create two different shapes in two points on the timeline, and told flash to figure out how these two shapes would "morph" over time.
You can do other things with the shape tween- go to frame one, and use your paint bucket tool to change the color of your squiggle to green. Press "enter" to view the animation again- note that not only does the shape change, so does the color. Cool, huh?
Go to frame 20, and use your brush to draw out an additional squiggle, to the left of the stage.
Press "enter" to play the animation. Flash automatically calculates how the addition of this new shape alters the "morph" we set up earlier.
In my own animations, I rarely use shape tweens, but I started off with them here because they can look pretty cool, and serve as a good introduction to the basic mechanics of keyframing. Experement a while- try doing shape tweens of strokes (Y)- try morphing an oval into a rectangle.
When you're comfortable with doing shape tweens, we'll proceed
If you want to save your work for future reference, go ahead and do so, now. Press "ctrl-N" and open up a new Flash document.
Next, we move on to Motion tweens- the difference between "motion" and "shape" tweening will become clear, as we continue. For now,
Use your Oval tool (O) to draw out an oval on your stage.
Double-click the center of your circle to select both the red fill, and the green stroke outline. Right-click on the circle, and a pop-up will appear:
Select "Convert to Symbol", and a window will appear:
Name your new symbol "circle", and set the type to "movie clip" (the types of symbols will be explained, later.) Click "OK."
Again, a few things have changed- notice that your new symbol is framed with a light blue box. Notice, further, that it appears in your library:
Now's a good a time as any to teach you how to use the library. Click on your red circle symbol on the stage, and hit "delete." Don't worry- you're just deleting an "instance" of your symbol. It will still exist in the library. Take a look at the window at the top half of the library- you can see your "circle" symbol, sitting there, waiting to be used. Click and drag this small red ball onto the left-hand side of the stage, so your layout now looks like this:
In your timeline, click on the little grey box beneath the number "20". Press F6 to create a new keyframe. With the 20th frame still selected, drag the red ball to the right-hand side of the screen. Click on frame 10, and in your properties panel, select Motion tweening from the type dropdown.
The animated sequence in your timeline just turned blue, and as before, an arrow bridges the formerly empty frames.
Move your scrubber (pink quare at the top of the timeline) over to frame 1, and press "enter" to play your antimation.
At this point, the basics of animation should be clear to you. You're setting up where you want the symbol to be, at the beginning and the end of any one sequence, and flash is figuring out what happens, in-between.
But let's Take this a bit further, for a moment. Go to frame 20- select your circle, and press "Q" to bring up the transform lattice. Scale and skew the circle, using the various handles.
Then, take a look at your properties panel. From the Color drop down list, select "alpha." (This changes the transparency of your symbol.)
A percentage field will pop up, just to the left. Click and drag the slider to 50%
Click on frame one, and press "enter" to run your animation. Notice, again, that flash automatically adjusts the in-between frames to reflect that changes you just made.
The last element of tweening that's important at this time is "Easing." This allows you to fine-tune the automatic tweening that flash creates.
Click on frame 10, and look down at the properties panel. Right below the Tween dropdown, you'll see another percentage field. Click and drag it all the way to the top.
