Exercise 14: Working with Animation and Motion Guides
This hands-on
exercise shows you how to create a motion tween using a motion guide.
A motion guide lives on a layer above the graphic that will be animated. The
guide is there to help determine the path that the animation will take.
Follow these simple steps:
Open the Flash MX 2004 file named: motionGuide.fla it has all the
files you need to create the exercise.
Lock the layer called bkgrnd so you won’t be able to add any
content to that layer.
Add a layer and then rename it to balloon.
Open the Library [F11] and then open the graphic symbols
folder.
Drag a copy of the balloon graphic onto the Stage, and then use the
setting shown above in the Properties Inspector panel. Set W: to 36, H: to 49, X: to 16,
and the Y: to 19. The settings are not that critical, so try to
get somewhat close to them. (Note: the W and H will resize the balloon graphic).
In the balloon layer of the Timeline find the 220 th Frame and place
a keyframe [F6]. Using the settings shown above in the Properties
Inspector panel set W: to 244, H: to 320, X: to 548,
and the Y: to -31.
Click someplace in the balloon layer and then choose Motion from
the Tween: drop-down. In the Ease: slider set the In to -22.
All other settings are set at default for now.
Select [Control] + [Enter] to see your new animation
on the Timeline. At this point it will move from the left side of the screen
to the right side of the screen, and it should Motion tween from a small balloon
to a rather large balloon. Next you’ll add a Motion layer to add a bit
of realism.
Select the balloon layer and then select the Motion Guide icon to
add a Motion layer above the balloon layer. (This icon sits between the Add
Layer icon and the Add Folder icon, and has a red arched line).
While in this new Guide layer, select the pencil tool with a smooth setting.
Set it to any visible color such as red and make it about 2 or 3pts in
size. Using the image below as an idea guide, try to duplicate the line I used.
Be sure that you are located in the First frame of the Guide layer before starting.
This
is where it can get a bit tricky. After the line is drawn to your liking, you
will have to connect the balloon in frame 1 to the beginning of the red line,
and then moving over to the last keyframe in Frame 220 you will have to connect
the larger balloon to the end of the line. Don’t fret too much, it
might work on the first try or after several, but you will eventually connect
the balloon to the guide line. Follow the steps and images below for help in
doing this, but before, you should check to see if you have Snap to Guides chosen,
select View > Snapping >Snap to Guides.
Can you spot that tiny white circle in the middle of the balloon
on the left? If you grab it by the black selector arrow tool and then drag it
over to the beginning of the new guide line, it should snap to the
guide line. You can tell if it has attached itself by scrubbing the Timeline
by the red frame marker. If it is attached, the balloon will follow the direction
of the line. BUT FIRST… you have to connect the ending balloon
too or it will not work. So follow the same steps as above with the last
frame. I increased the zoom to 400 so I could see the circle better.
If you had luck on the first try, give yourself a pat on the back, and consider
yourself lucky! If not, and you got it on the third or tenth try, congratulations,
if have what it takes to stick with it and you’ll go far someday. I see
trips to the bank in your future! Alright, if you have the time, perhaps you’d
like to add a distant balloon to the playing field. View the screen shot below
to see how I added a new balloon with a motion guide and had the animation start
after the first balloon was on its way.
To add this distant balloon, I selected the bkgrnd layer, inserted
a new layer above it and renamed it to thunderbuster. On Frame 40 of
that layer I added a keyframe [F6] and then dragged a copy of
thunderbuster out of the Library.
It is not real important that you copy every detail of this adventurous balloon,
just create a motion guide layer that will drift the balloon across the landscape.
I did decrease the balloon size at the starting point and increased the size
of the balloon at the ending point so it appeared to be coming a bit closer to
the foreground. It’s that realism thing, hard not to try to make it believable.
This hands-on
exercise shows you how to create a motion tween using a motion guide.
A motion guide lives on a layer above the graphic that will be animated. The
guide is there to help determine the path that the animation will take. 
While in this new Guide layer, select the pencil tool with a smooth setting. 
