Flash CS3 animation basics: Motion tween

This lesson will be the first in a series where all the animation techniques in Flash CS3 will be
explained in detail. Motion tween animation is one of the most widely used in Flash, so it
makes sense to bein with it. !ou are oin to learn"
#ow to draw a basketball usin the reat drawin tools a$ailable,
#ow to create a mo$ieclip symbol, which is a must for any motion tween animation,
#ow to create keyframes,
#ow to create easin effect for better realism and more.
!ou can see the example of the animation on the oriinal pae of this lesson. %t is the classic
example" an animated, bouncin ball.
1. Creating the basketball movieclip
1.1 &pen a new Flash document by selectin File > New. %n the window that opens, select
Flash File (ActionScript 3.0) and click OK.
1.2 Click on the 'ectanle tool icon and hold your mouse until the menu appears. Select the
&$al tool (O).
1.3 (o to the the bottom of the Tools panel and block the stroke color, because you won)t need
it here. *ust click on the small color square near the pencil icon and when the palette shows
up, click the No color button +see it in the imae below, on the riht,. For the fill, choose any
color you like.
www.FlashExplained.com
1.4 -t the $ery bottom of the same panel, check if Obect !rawin" and Snap to Obects
options are unselected +turned off,.
1.5 Click anywhere on the stae with the &$al tool (O), start drain your mouse and draw a
circle.
1.6 Select the circle by clickin on it with the Selection tool (#). (o to the .roperty inspector
and enter the new dimensions for the circle" $% px.
1. /eselect the circle by clickin anywhere on the stae with the Selection tool (#).
1.! Select the .aint bucket tool (K) and o o$er to the &olor panel.
1." %n the Colors panel, do the followin"
Click the paint bucket icon to select the fill color.
Choose 'adial in the ()pe drop0down menu.
-dd two more cra)ons +the little colored squares near the radient bar,. /o this by
simply clickin anywhere between the two existin ones, the black and the white.
www.FlashExplained.com
1.1# 1ow, clic* and dra" the first crayon a little bit to the riht and chane its color to
+EFA,0-.
1.11 Mo$e the other crayons as well, so that they match the positions shown in the imae
below. -lso, chane their colors to +from left to riht,"
23F-456
2FF7867
2FF7867
2555555
1.12 9sin the still selected .aint bucket tool (K), click on the circle to fill it with your newly
made radial fill.
www.FlashExplained.com
1.13 Select the &$al tool (O). (o to the .roperty inspector and select a solid, blac* line with
a thic*ness o. - for the stroke. Then bloc* the .ill color by choosin the no color option for
it, :ust like you did before for the stroke color.
1.14 /raw an ellipse on the stae, like the one shown below.
1.15 Select the Free transform tool (/) and click on the ellipse with it to select it. Then rotate
it. /o this by brinin your mouse o$er any of the corners, clickin and drain.
1.16 9se the Selection tool (#) to"
Select the ellipse and dra it o$er the circle.
Click on an empty area to deselect the ellipse.
Select the outer part of the ellipse, which is stickin out of the circle.
/elete this part by pressin either !elete or 0ac*space on your keyboard.
1.1 .lay around with the o$al tool to et a few more cur$es, add them to the circle until you
ha$e a nice lookin basketball"
www.FlashExplained.com
1.1! 1ow, still usin the Selection tool (#), select the whole basketball. Click and dra around
it to select all the fills and strokes too.
1.1" Select 1odi.) > &on2ert to S)mbol +or press F$, to con$ert this drawin into a
mo$ieclip symbol.
Select 1o2ie clip as type.
Call it basketball and click OK.
!ou)ll notice that a blue outline has appeared around your basketball. This is Flash tellin you
that this is a symbol and not a simple drawin.
1.2# (o to the timeline and clic* on the little dot beneath the padlock to lock this layer. Then
do3ble4clic* on its name and rename it to basketball.
www.FlashExplained.com
1.21 Click on the 5nsert 6a)er button to make a new layer and call it floor.
1.22 Click and dra the floor layer downwards, until you see a thick dotted line appear. 'elease
your mouse button then.
1.23 The floor layer will now be beneath the basketball layer.
This makes sense, because the basketball will bounce off the floor, so it has to be in a layer
abo$e it.
1.24 Creatin the floor is easy. *ust select the 'ectanle tool (') and draw a nice rectanle at
the bottom of the stae. Make sure it spans the stae from side to side.
www.FlashExplained.com
% used a linear radient because % find it more real that way. % also remo$ed the outline
+stroke,.
1.25 6oc* the floor layer. !ou won)t be addin anythin inside it anymore. -nd it)s better to
ha$e it locked so you don)t put anythin in it by accident. % always work like that.
-lso, 3nloc* the basketball layer.
2. Making $o%r &irst motion tween animation
2.1 Select the ball by clickin on it once with the Selection tool (#). Mo$e it upwards into the
start position ; somewhere near the top ede of the stae. !ou can mo$e it either by clickin
and drain it with the Selection tool or by usin the arrow *e)s on your keyboard.
www.FlashExplained.com
<hen mo$in ob:ects with arrow keys in Flash, pressin an arrow key mo$es your ob:ect by 6
pixel at a time. %f you want to mo$e it faster, :ust hold down Shi.t and then press the arrow
key+s,. !our ob:ect will then mo$e by 65 pixels after each press of an arrow key.
2.2 'i"ht4clic* in .rame -- of the basketball layer and select 5nsert Ke).rame from the
contextual menu.
=and a new keyframe will appear.
- Ke).rame is a point in your timeline where somethin chanes. <hene$er you want to
create mo$ement, or animate a property of a mo$ie clip, add somethin, you must insert a
>eyframe. &n the other hand, a Frame is used to prolon the duration of a >eyframe,
whene$er you want it to last more, but without chanes. !ou will see this in a moment.
www.FlashExplained.com
2.3 !ou should mo$e the ball to a point where it will touch the floor. 8ut you can)t see the floor
now, because it exist only in the first frame of its layer. To chane this, ri"ht4clic* on .rame
-- of the floor layer and select 5nsert Frame.
=here)s the result"
-s you can see, the frame is represented by a small rectanle in your timeline. This shows you
that the first keyframe of the floor layer lasts until frame 66 without any chane. %t has been
proloned in duration by the addition of a simple frame. -nd that)s exactly what you need,
because the floor needs to be seen at all times, toether with the ball, but without any
chanes.
-lso, notice that you ha$e added a frame while this layer has been loc*ed. That)s perfectly
&>. !ou can add or remo$e frames and keyframes from a layer e$en while it)s locked. Since
you won)t be makin any modifications to the floor layer, it is best to keep it locked, thus
pre$entin any possibility of accidentaly addin or remo$in somethin from it.
2.4 &lic* on the second *e).rame of the basketball layer to select it and then select the ball
on the stae by clickin on it once with the Selection tool (#).
www.FlashExplained.com
2.5 1ow that you ha$e selected the basketball mo$ieclip, mo$e it towards the floor by usin
either the combination of Shi.t7down arrow on your keyboard +by far the easiest option, or
with your mouse. % recommend usin the keyboard, because you will mo$e the ball straiht
down, while it is possible that you can accidentally mo$e it left or riht with your mouse. Since
you need the ball to fall straiht down, use your keyboard. Mo$e it down to the floor.
2.6 &>. !ou will now animate this ball. 'i"ht4clic* either on the first keyframe of the
basketball layer or anywhere between the two keyframes and select the &reate 1otion
(ween option from the contextual menu.
www.FlashExplained.com
%f you ha$e done e$erythin as %)$e shown you up until now, you should see a continuous
arrow appear between the two keyframes, on a maenta backround.
The imae abo$e shows how a successful motion tween looks like in the timeline. %f anythin
went wron, the arrow would be discontin3ed +dashed,. That)s how Flash tells you that
somethin doesn)t click.
To be able to make a successful motion tween animation, please note the followin" !ou must
use either a mo$ieclip symbol +which is my fa$orite symbol, because of its $ersatility, or a
raphic symbol. !ou cannot animate a simple drawin. %f you try that, Flash will attempt to
animate it, and you will et unexpected and bad results. -lso, remember that for a motion
tween to be successful, a sinle symbol must be present in the layer where the animation is
takin place +either a mo$ieclip or a raphic symbol,. !ou can not ha$e multiple symbols or a
mo$ieclip and some other drawins or ob:ects in the same layer if you want to ha$e a ood
motion tween animation.
2. Test your Flash mo$ie by selectin &ontrol > (est 1o2ie.
!ou will see your ball fallin to the floor aain and aain. This is standard Flash beha$ior ; an
animation will loop endlessly unless you stop it $ia -ctionScript, but that is not important riht
now. -s you certainly noticed, the ball is somewhat slow. ?et)s speed up the animation. Close
the test window by pressin the close button in its upper riht corner, to return to the Flash
authorin en$ironment.
www.FlashExplained.com
2.! Select 1odi.) > !oc3ment to access the /ocument .roperties window. %ncrease the
Frame rate to ,8 .ps. Click OK.
2." Test your animation aain by selectin &ontrol > (est 1o2ie. !ou should see your ball
mo$e much faster now. This is the result of the frame rate increase. The abbre$iation .ps
means frames per second. %t is the number of frames the playhead in your Flash mo$ie passes
throuh in 6 second.
www.FlashExplained.com
Fine. Close the test mo$ie window now.
3. Making the ball bo%nce
1ow, you are oin to repeadetly insert new keyframes and chane the position of the ball to
be able to create the bouncin mo$ement.
3.1 To a$oid ha$in to prolon the duration of the first keyframe in the floor layer each time
you are mo$in your ball around, insert a Frame in frame @5 of the floor layer. /o like you did
before" ri"ht4clic* on the frame and select 5nsert Frame.
!ou will easily remo$e any surplus frames later, don)t worry about it.
3.2 'i"ht4clic* in .rame ,- and insert a Ke).rame there. %f you are not sure where you are
in the timeline, :ust look below the layers. There, you can clearly see where you are. The
imae below shows you the number of your current keyframe circled in red.
3.3 Select the ball with the Selection tool (#). !ou shoul place the ball upwards aain, because
it is supposed to rebound of the floor. 8ut, this time, you should mo$e it a little bit downwards.
% mo$ed it by A5 pixels downwards. <hy is this soB 8ecause you must simulate reality. -nd in
the real world, the 3arth)s ra$ity force pulls the ball so it ne$er returns in its startin position,
www.FlashExplained.com
but always rebounds to a lower position than the last time.
3.4 -fter you ha$e positioned the ball, ri"ht4clic* between the ,nd and 3rd *e).rames in
the basketball layer and select &reate 1otion (ween from the contextual menu, :ust like you
did for the first sement of your animation.
Test your Flash mo$ie aain +&ontrol > (est 1o2ie, and see how the ball is oin up and
down. /on)t be surprised if it suddenly disappears. This is because the floor layer lasts loner
than the basketball layer in the timeline.
3.5 !ou ha$e to return the ball to the floor now, in a new keyframe. %nstead of ha$in to
reposition it each time +on the floor, the ball will always land on the same spot, manually, you
can accomplish this more easily.
'i"ht4clic* on the second *e).rame in the basketball layer and select &op) Frames from
the contextual menu.
www.FlashExplained.com
3.6 &>, now ri"ht4clic* in .rame ,$ and select 9aste Frames.
%n this new, Ath keyframe, the ball will be positioned exactly as it is in the 4nd keyframe. This
is because when you copy a keyframe in Flash, all of its contents et copied too. 3$ery sinle
ob:ect inside it, with all of its properties +position, siCe, etc, ets copied.
3. Create the 3rd motion tween animation by clickin between the 3rd and Ath keyframes
and selectin it from the menu.
www.FlashExplained.com
!ou certainly noticed that this sement of the animation, the third motion tween, is a little bit
shorter than the pre$ious ones. This is also to make it all look more real" since the 3arth)s
ra$ity pull is actin on the ball, there is now a shorter distance for it to o from the hihest
point to the floor. The ball)s fall ets shorter, so you ha$e to make your motion tween shorter
accordinly.
3.! 'epeat the steps from 3.4 to 3.D, each time repositionin the ball in its upper position and
:ust copyin and pastin a keyframe for the Efloor) position. -lso, make the motion tween
sement smaller each time. !ou can see how % did it below. The numbers at the bottom of the
imae indicate the keyframes in the timeline.
3." Test your mo$ie +&ontrol > (est 1o2ie, and see if you are satisfied with the result.
4. '((ing the easing e&&ect to $o%r motion tween animation
The motion tweens you made so far are fine, but still the animation doesn)t look realistic.
<hyB 8ecause currently the ball isn)t acceleratin and deceleratin. -nd the ra$ity pull does
:ust that" %n real life, while the ball is fallin, it should be ainin in speed because of the
ra$itational pull. Meanin its speed should increase as it is approachin the round. This is
called acceleration.
-lso, when bouncin back up, its speed should decrease, aain because of the ra$itational
pull. -s it is mo$in up, its slowin down. This is called deceleration.
?uckily, Flash has :ust ot an option in store for you ; the easin" option ; which is made for
simulatin acceleration and deceleration. ?et me show you how to apply it to your current
animation.
Sa2e )o3r doc3ment before proceedinF -lways remember to do that.
4.1 Select the first keyframe in the basketball layer.
www.FlashExplained.com
4.2 (o to the .roperty %nspector. !ou will find the easin" option on its left side. Click the little
arrow next to it and a slider will appear. /ra it down until the $alue reaches 4-00. This is
called easin" in or acceleratin.
4.3 Test your mo$ie +&trl7Enter on a .C or &md7'et3rn on a Mac, and watch how the ball
accelerates towards the floor durin the first sement of the animation.
4.4 8ack to the authorin en$ironment +Flash workin space,, select the second *e).rame by
clickin on it.
4.5 This time, set the Ease option to -00, which means easin" o3t or decreasin speed
+deceleratin,.
4.6 For each subsequent keyframe, you should set the easin option a $alue that)s smaller
www.FlashExplained.com
then the pre$ious one, because the ball is losin power with each bounce. #ere)s how you
should set it to et a natural effect ; a ball that slowly comes to a halt"
-nd that would be it. Test your mo$ie to see the ball bouncin. !ou ha$e :ust learned how to
do a basic motion tween animation in Flash CS3, the difference between frames and
keyframes, and how to achie$e an easin effect. %n next Flash CS3 animation lessons, % will
explain to you how to animate shapes, morph them, how to animate effects and more.
The so3rce .ile .or this lesson is included with this ./F. %f missin, et it at the oriinal
lesson pae on Flash3xplained.com.
?ike this Flash lessonB Subscribe to Flash3xplained.com to stay up to date on new lessons and
tutorialsF
www.FlashExplained.com