Flash CS3 animation basics: Motion guide

With this simple and straightforward tutorial, you will learn one very handy animation
technique: how to use a motion guide to make an object follow a certain path. Ill show you:
ow to create a motion guide !inside a guide layer",
ow to make a movieclip follow the motion guide you made,
ow to make the guided animation more realistic and more.
#ou will be creating a motion tween animation which will then be linked to a motion guide.
#ou can see the kind of animation you are going to make on the web page of this tutorial.
1. Making a simple motion tween animation that will follow the motion
guide later
1.1 $pen a new document by selecting File > New. %elect Flash File (ActionScript 3.0),
click OK.
1.2 Save your document right away. &ater, youll be able to save it just by pressing trl!S.
'emember to do this whenever you pass a certain number of steps or make significant
changes to your document. It is better to save often then to lose your work because of your
computer crashing, power shortages, etc.
$(. #oull start by making a movieclip. #ou need it to make a motion tween animation which
will be made to follow a motion guide later. ) paper airplane will be fine for this kind of
animation.
1.3 %elect the &ine tool (N). %elect a darker grey hue for the Stro"e color !I picked
*+,+,+,", turn on the Snap to O#$ects option and make sure that O#$ect %rawing is
turned off. -he screenshot below shows you these three options clearly.
1.4 .lick and start dragging with the &ine tool downwards. /ake a line that is appro0imately
+12+3 pi0els long.
%ince you have turned on the %nap to $bjects option, drawing a straight line should pose no
problem at all.
www.Flash&'plained.com
1. %elect the 4oom tool (() and 5oom in on the line that you just drew. .lick and drag to
5oom in on the desired area.
#oull be able to work more easily now.
1.! 6se the &ine tool (N) again. -he Snap to O#$ects option should be turned on from before
!thats the small magnet icon found at the bottom of the -ools panel". 7ring the cursor near
the top of the line, clic" and start dragging left and down. #ou will automatically start
drawing from the top end of the e0isting line, thanks to the %nap to $bjects option.
1." )dd three more lines to complete one side of your paper airplane, as shown on the image
below.
www.Flash&'plained.com
1.# %elect the whole drawing using the %election tool ()).
1.$ op* the selected items by pressing trl! or selecting &dit > op*.
1.1% #ou will now paste in place a copy of these lines either by pressing trl!Shi+t!) or
selecting &dit > ,aste in ,lace. 8ow, there wont be any apparent change. 7ut you have just
pasted a smae, e0act copy of your drawing over the original one. -o see it, use the le+t or
right arrow keys on your keyboard to move the new copy.
If you had clicked anywhere on the stage after pasting the drawing in place, you will lose it.
-hats because the copy will merge with the original automatically. -hats what happens with
vectors !pure drawings, not symbols" in 9lash. %o, if you want to make use of your new copy,
just move it before clicking anything else.
1.11 With the freshly pasted copy still selected, select -odi+* > .rans+orm > Flip
/ori0ontal.
www.Flash&'plained.com
1.12 /ove the mirrored half so that it joins the original drawing perfectly. #ou can do that with
the arrow "e*s, but I recommend doing it with the %election tool ()), because thanks to it,
the drawing will perfectly snap into place, as shown in the picture below.
1.13 If you wish to make your paper airplane more realistic, you can apply some linear
gradient color fills to it. 6se the :aint 7ucket tool (K) to do it.
1.14 -urn back the 5oom to ;11< !no 5oom at all".
1.1 Select your completed drawing, both the lines and fills, using the %election tool ()). -o
create a movieclip out of your selected vector drawing, select -odi+* > onvert to S*m#ol.
www.Flash&'plained.com
.all your new symbol paper airplane, select -ovie clip as type and also select the central
square for the registration point -his last choice isnt e0actly a must, but it will make creating
the guided animation a little bit easier. .lick OK.
=as soon as you do that, an a5ure outline will appear around your newly made symbol and the
:roperties inspector will also show you that you are dealing with a movieclip symbol now and
not a simple drawing anymore.
#ou will create a simple motion tween animation now.
1.1! 1ight2clic" on frame 31 and select 3nsert Ke*+rame.
1.1" 6se the %election tool ()) to move the movieclip. >ust click and drag it to a new position.
#ou can place it anywhere, because whats important is that you make a motion tween
animation, the direction of the movement isnt important now.
www.Flash&'plained.com
1.1# 1ight2clic" between the two keyframes and select the reate -otion .ween
animation.
If you have done everything properly, an unbroken arrow over a purple background should
appear.
If you didnt obtain a good motion tween !your arrow is dashed2broken", please check my
motion tween animation tutorial which e0plaines in detail how to make such an animation, and
where possible errors may lurk.
1.1$ .all the current layer airplane and loc" it.
9ine. 8ow you have the prerequisite for creating a guided animation ? a simple motion tween.
&et me show you how to add a guide to it.
2. Creating a motion guide
2.1 .lick the Add -otion 4uide icon beneath the layers to add a new motion guide.
)s you can immediately see, a new motion guide layer has been added to your document. -he
layer benath it !airplane" has instantly become linked to this layer, become the guided la*er.
-he airplane layer is now guided by the Guide: airplane layer. -his can clearly be seen by the
layers icon which has become slightly indented ? it has moved to the right.
www.Flash&'plained.com
)lso, the duration of the guide layer is the same as that of the guided layer !31 frames in this
particular e0ample".
2.2 %elect the :encil tool (5). In the -ools panel, go to the end of it and choose the Smooth
option for drawing with your pencil.
In the :roperties inspector, select hairline as line type and enter 600 as the value for the
Smoothing option. .hoose any color you like, since the guide won7t #e visi#le. I chose
hairline to be able to work more easily and adjust the animation in more detail.
2.3 .lick and start dragging with the :encil tool (5) to draw a guide !in the Guide: airplane
layer, of course". /ake a curve ? it will come in handy for simulating the flight of your paper
airplane. I started and finished drawing the curve outside the stage on purpose ? to make it
appear as if the airplane flew inside the scene and then disappeared outside of it.
www.Flash&'plained.com
3. Creating a guided motion tween animation
3.1 8ow loc" the Guide: airplane layer and unloc" the airplane layer. lic" on the first
keyframe of the airplane layer to select it.
3.2 lic" on the paper airplane movieclip once to select it @ do this with the %election tool
()).
3.3 #ou will move the movieclip to the guides starting point. 6se the %election tool ()) again.
.lick on the movieclips registration point !thats the small circle with a little cross inside"
and drag it over to the beginning of the guide. $nce the movieclip is ready to snap into place,
you will see a bold, black circle appear near your cursor, as shown below.
If the snapping does not occur, check if it is turned on.
www.Flash&'plained.com
3.4 lic" on the second keyframe in the airplane layer to select it.
3. 8ow do the same thing for the movieclip in this keyframe: :lace it over the other end of
the guide using the %election tool ()). It should also snap into place, just like before.
3.! %peed up the animation a little bit !before testing it", by increasing the +rame rate of
your 9lash movie. %ou#le2clic" the frame rate !below the layers" to open the Aocument
:roperties window.
www.Flash&'plained.com
%et the 9rame rate to 89 +ps and click $(.
3." %elect ontrol > .est -ovie. #ou should see an animation similar to the one shown
below.
WowB -he movieclip is moving along the guideB #ou did it. 7ut, there is one obvious flaw here:
the paper airplane isnt moving around as in the real world. It should be moving with its nose
pointing forward. %o let me show you now how you can easily do that !you must, because
animation is about simulating the real2world"B
3.# Select the first keyframe again.
3.$ %elect the 9ree -ransform tool (:). )lso, turn off the %nap to $bjects option to be able to
adjust your movieclips position freely, without any snapping.
3.1% 7ring the cursor near one of the movieclips corners !if the movieclip isnt selected, select
it now". lic" and start rotating until the paper airplanes nose is aligned with the direction
of your motion guide !the curve in the layer above it".
www.Flash&'plained.com
3.11 Select the second keyframe of your animation again.
3.12 )djust the movieclip with the 9ree -ransform tool here too. -he important thing is that
the movieclip should be oriented as if it was following the guide all along ? aligned with its
direction.
3.13 -here is one last thing to be done to have a proper guided motion tween: Select the
+irst "e*+rame again !like you did in step C.D" and go to the :roperties inspector. $nce there,
turn on the option called Orient to path. /ake sure that it is selected, as seen below.
3.14 -est your %W9 again by selecting ontrol > .est -ovie and you should see your
airplane moving realistically, as shown at the beginning of this lesson.
8ow that was easy, wasnt itE Fuided animations are fun, because they help simulate real2
world movements of various objects. In one of the upcoming animation tutorials, I will also
e0plain to you how to create a circular animation and how to display the path. In the
www.Flash&'plained.com
meantime, %ubscribe to 9lashG0plained and youll be notified of any new 9lash lessons coming
your wayB
-he source +ile +or this lesson is included with this :A9. If missing, get it at
http:HHflashe0plained.comHanimationHflash2csC2animation2basics2motion2guideH.
&ike this 9lash lessonE %ubscribe to 9lashG0plained.com to stay up to date on new lessons and
tutorialsB
www.Flash&'plained.com