Flash Cs3 Animation 1 Mt

8/11/2019 Flash Cs3 Animation 1 Mt

1/18

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 itmakes 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 classicexample" 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, selectFlash 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 needit here. *ust click on the small color square near the pencil icon and when the palette showsup, click the No colorbutton +see it in the imae below, on the riht. For the fill, choose anycolor you like.

www.FlashExplained.com
http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/http://www.flashexplained.com/http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/


2/18

1.4 -t the $ery bottom of the same panel, check if Obect !rawin"and Snap to Obectsoptions are unselected +turned off.

1.5 Click anywhere on the stae with the &$al tool (O), start drain your mouse and draw acircle.

1.6 Selectthe circle by clickin on it with the Selection tool (#). (o to the roperty inspectorand 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 &olorpanel.

1." %n the Colors panel, do the followin"

Click the paint bucket icon to select the fill color.

Choose 'adialin the pedrop0down menu.

-dd two more craons+the little colored squares near the radient bar. /o this by

simply clickin anywhere between the two existin ones, the black and the white.

http://flashexplained.com/http://flashexplained.com/


3/18

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 imaebelow. -lso, chane their colors to +from left to riht"

2F-456

2FF7867

2FF7867

2555555

1.12 9sin the still selected aint bucket tool (K), click on the circle to fill it with your newlymade radial fill.



4/18

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 colorby choosin the no color option forit, :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 rotateit. /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 !eleteor ac*spaceon 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"



5/18

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 Smbol+or press F$ to con$ert this drawin into amo$ieclip symbol.

Select 1o2ie clipas type.

Call it basketballand click OK.

!ou)ll notice that a blue outline has appeared around your basketball. This is Flash tellin youthat this is a symbol and not a simple drawin.

1.2# (o to the timeline and clic* on the little dotbeneath the padlock to lock this layer. Then

doble4clic*on its name and rename it to basketball.



6/18

1.21 Click on the 5nsert 6aerbutton to make a new layer and call it floor.

1.22 Click and dra the floorlayer downwards, until you see a thick dotted line appear. 'eleaseyour mouse button then.

1.23 The floorlayer will now be beneath the basketballlayer.

This makes sense, because the basketball will bounce off the floor, so it has to be in a layerabo$e it.

1.24 Creatin the floor is easy. *ust select the 'ectanle tool (')and draw a nice rectanle atthe bottom of the stae. Make sure it spans the stae from side to side.



7/18

% used a linear radient because % find it more real that way. % also remo$ed the outline+stroke.

1.25 6oc*the floorlayer. !ou won)t be addin anythin inside it anymore. -nd it)s better toha$e it locked so you don)t put anythin in it by accident. % always work like that.

-lso, nloc*the basketballlayer.

2. Making $o%r &irst motion tween animation

2.1 Select the ball by clickin on it oncewith 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 clickinand drain it with the Selection tool or by usin the arrow *eson your keyboard.



8/18


9/18

2.3 !ou should mo$e the ball to a point where it will touch the floor. 8ut you can)t see the floornow, because it exist only in the first frame of its layer. To chane this, ri"ht4clic*on rame

--of the floorlayer 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 youthat the first keyframe of the floorlayer 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 anychanes.

-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. Sinceyou won)t be makin any modifications to the floorlayer, it is best to keep it locked, thuspre$entin any possibility of accidentaly addin or remo$in somethin from it.

2.4 &lic*on the second *erameof the basketballlayer to select it and then select the ball

on the stae by clickin on it oncewith the Selection tool (#).



10/18

2.5 1ow that you ha$e selected the basketball mo$ieclip, mo$e it towards the floor by usineither the combination of Shit7down arrowon your keyboard +by far the easiest option orwith your mouse. % recommend usin the keyboard, because you will mo$e the ball straihtdown, 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 thebasketballlayer or anywhere between the two keyframes and select the &reate 1otion

weenoption from the contextual menu.



11/18

%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 anythinwent wron, the arrow would be discontined+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 mustuse either a mo$ieclip symbol +which is my fa$orite symbol, because of its $ersatility or araphic 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 motiontween to be successful, a sinle symbol must be present in the layer where the animation istakin place +either a mo$ieclip or a raphic symbol. !ou can not ha$e multiple symbols or amo$ieclip and some other drawins or ob:ects in the same layer if you want to ha$e a oodmotion 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 ; ananimation will loop endlessly unless you stop it $ia -ctionScript, but that is not important rihtnow. -s you certainly noticed, the ball is somewhat slow. ?et)s speed up the animation. Closethe test window by pressin the close button in its upper riht corner, to return to the Flash

authorin en$ironment.



12/18

2.! Select 1odi > !ocmentto access the /ocument roperties window. %ncrease theFrame rateto ,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 passesthrouh in 6 second.



13/18

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 tobe 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 Framein frame @5 of the floorlayer. /o like you didbefore" 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 Keramethere. %f you are not sure where you arein 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, becauseit 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.


14/18


15/18

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. Thisis because when you copy a keyframe in Flash, all of its contents et copied too. $ery sinle

ob:ect inside it, with all of its properties +position, sie, etc ets copied.

3. Create the 3rd motion tweenanimation by clickin between the 3rd and Ath keyframesand selectin it from the menu.



16/18

!ou certainly noticed that this sement of the animation, the third motion tween, is a little bitshorter than the pre$ious ones. This is also to make it all look more real" since the arth)sra$ity pull is actin on the ball, there is now a shorter distance for it to o from the hihestpoint to the floor. The ball)s fall ets shorter, so you ha$e to make your motion tween shorteraccordinly.

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 tweensement 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.


17/18

4.2 (o to the roperty %nspector. !ou will find the easin"option on its left side. Click the littlearrow next to it and a slider will appear. /ra it down until the $alue reaches 4-00. This iscalled easin" inor acceleratin.

4.3 Test your mo$ie +&trl7Enteron a C or &md7'etrnon 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 *eramebyclickin on it.

4.5 This time, set the Easeoption to -00, which means easin" otor decreasin speed+deceleratin.

4.6 For each subsequent keyframe, you should set the easin option a $alue that)s smaller



18/18

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 todo a basic motion tween animation in Flash CS3, the difference between frames andkeyframes, 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 sorce ile or this lessonis included with this /F. %f missin, et it at the oriinallesson pae on Flashxplained.com.

?ike this Flash lessonB Subscribe to Flashxplained.comto stay up to date on new lessons and

tutorials

http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/?feed=rss/http://flashexplained.com/http://flashexplained.com/?feed=rss/http://flashexplained.com/http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/animation/flash-cs3-animation-basics-motion-tween/http://flashexplained.com/?feed=rss/

Flash Cs3 Animation 1 Mt

Documents

Transcript of Flash Cs3 Animation 1 Mt