Animation Activity

In this tutorial, you will learn how to create a

simple biker animation in Flash CS5 with a snowfall
effect in the background. This tutorial will teach
how to create frames, keyframes, blank frames &
motion tweens. You will also learn how to use the
deco tool to create a simple snow fall effect.
Wewilllearnhowtocreatethanimationyouseeabove.Let's
getstarted!
Open the FLA File
1.Download&Unzipthetut_files.rar.
2.ChooseFile>Openfromthemainmenubar;theOpen
windowisdisplayed.
3.Choosethestart.flafilefromtheOpenwindowandchoose
theOpenbutton;thefiletobeusedinthistutorialisopened.
Bydefault,abikerisplacedinthestagearea,asshownbelow.

4.Next,chooseFile>Import>ImporttoStagefromthemain
menubar;theImportwindowisdisplayed.Navigatetothe
folderthatyoudownloadedandselectthebackground.psdfile.
ChooseOpentoimport;theImportbackground.psdto
stagewindowisdisplayed,asshowninthefigurebelow.
*.psdisthefileextensionforaphotoshopfile.InFlashCS5,
youcanimportaphotoshopfiledirectlytostage.
5.Selecttheleft_treefromthetopleftofthiswindow;its
correspondingparametersaredisplayedontheright.
6.Next,selecttheLosslessoptionfromtheCompressiondrop
downlistinthePublishSettingsarea.
Tip! TheLosslessoptionmaintainsthequalitywhile
publishingthefinalanimation.

6.Similarly,setthesameparameters
forfront_treeandbackgroundicon.Now,choose
the OKbutton;theimagesareimportedtothestageareaas
shownintheFigurebelow.

Onimportingtheimagesonthestage,theexistingbikermovie
clipishiddenbehind.
7.ChooseWindow>Timelinefromthemainmenubarif
theTIMELINEpanelisnotdisplayed.
Thelayernamedbikerisatthebottomofallthelayersin
theTIMELINEpanel.
8.Selectthebikerlayeranddragitabovethelayer
namedbackground;thebikerwillbevisibleinthestagearea,as
showninthefigurebelow.

Adding Motion Tween to the Biker

1.Selectthebikermovieclipfromthestageareaandmoveitto
theleft,outofthestagearea;asshownthefigurebelow.

Thebikermovieclipismovedontheleft,outofthestagearea,
sothatwhilepublishingthefinalanimationthebikerappearsto
enterintothestageafteranintervalof23secs.
2.Selectthekeyframeinfrontofthebikerlayerin
theTIMELINEpanel.Makesurethekeyframeisselectedand
rightclickoverit;aflyoutisdisplayed.ChooseCreateMotion
Tweenfromtheflyout;themotiontweenisaddedtothe
Timelineinthebikerlayer,asshownthefigurebelow.

Youcanidentifythataparticularlayerishavingamotiontween
addedtoitbytheboxshapedsymbolatthefrontofthelayer
nameandthebluebackgroundcolourofthatparticularlayerin
thetimeline.
Everytimeyouaddmotiontweentoalayer,thenumberof
framesaddedinthetimelinewillplaytheanimationfor1
second.Fore.g,iftheframerateissetto24fps(framesper
second),thenumberofframesaddedwilllbe24innumber.You
canviewthedefaultframerateorchangeitfromthebottomof
thetimeline,asshowninthefigurebelow.

3.ChoosetheSelectionToolfromtheToolspanelandselect
therightmostframeofthebikerlayer.Pressandholdtheleft
mousebuttonoveritanddragittoframe160.
4.Next,selectthebikermovieclipfromthestagearea.Press
andholdtheSHIFTkeyanddragthemoviecliptotheright,out
ofthestagearea,asshowninthefigurebelow.

Thegreencoloredlinecreatedrepresentsthemotiontweenpath
forthebikermovieclip.Thecolorofthemotiontweenpathis
similartotheoutlinecolorofthelayerintheTIMELINEpanel.
5.PressandholdtheCTRLkeyandselecttheblankframesfor
theleft_tree,front_tree,andthebackgroundlayeronframe

160,asshownthefigurebelow.Next,presstheF5keyfromthe
keyboardtoaddblankkeyframesinthetimelinefortheselected
layers.

TheplayheadintheTIMELINEpanelatframe160showsonly
thebikermovieclipinthestagearea.Itisso,astheotherlayers
exceptthebikerlayerdidnothaveanyframestillframe160.
F5keyaddsblankkeyframeshavingthesamecontentasofthe
firstlayeroftherespectivelayer.
6.PressENTERtopreviewthemotiontweeninthestagearea.
IftheanimationworkspressCTRL+ENTERtopublishthe
animation;anewwindowdisplayingthemotionisdisplayed,as
shownthefigurebelow.

Adjusting the Motion Tween Speed

1.ChoosetheSelectionToolfromtheToolspanelandselect
thegreencoloredmotiontweenpathforthebikermovieclip.

2.ChooseWindow>Propertiesfromthemainmenubarto
displaythePROPERTIESpanel,ifitisnotalreadydisplayed.
3.SettheEasevalueintheEASEareato100.
Tip!Easingisaprocessforcontrollingmotiontweeninflash.
EasingcanbefurtherclassifiedintoEaseInandEaseOut.In
EaseIn,themotionbeginsslowly,beforegainingspeedastime
progresseswithapositivevalueandinEaseOut,ithappens
exactlyoppositewithanegativevalue.
4.ChooseCTRL+ENTERfromthekeyboardtopublishthe
easingeffectinthemotiontweenedanimation.
Thebikerstartsslowlyandgraduallyspeedsupasitprogresses
totheend,youcanalsodotheoppositebyenteringapositive
easevalue.
Adding Snow Particles in the Scene
1.SelectthebikerlayerfromtheTIMELINEpanelandchoose
theNewLayericonatthebottomleftofthepanel.Renamethe
newlayerassnow_1.
2.ChooseView>Rulersfromthemainmenubartodisplaythe
rulermarkerontheedgesoftheflasharea.
3.Next,choosetheDecoToolfromtheToolspanelandthen
expandthePROPERTIESpanel.
4.Now,selecttheParticleSystemoptionfromthedropdown
listlabeledVineFillintheDRAWINGEFFECTarea;
theParticleSystemoptionsaredisplayedin
thePROPERTIESpanel,asshowninfigurebelow.

5.SetthecolorofParticle1andParticle2towhiteby
choosingtheblackcoloredboxbelowtheEditbuttonin
theDRAWINGEFFECTarea,referthebelowfigureforyou
reference.

3.Next,expandtheADVANCEDOPTIONSareaifitisnotby
default.Setthefollowingvaluesinthisarea:
TotalLength=160ParticleGeneration=160
Rateperframe=3Rotationrate=180

4.PressCTRL+tozoomoutofthecurrentviewandclick
abovethestageareanearthehorizontalslidermarked200;the
particlesaregeneratedtillframe160.
5.ChooseCTRL+ENTERfromthekeyboard;anewwindow
isdisplayedshowingtheparticlegeneration,asshowninthe
belowfigure.

Theparticlesaregeneratedonlyontheleftofthescenearea.To
allowthegenerationoftheparticleontheentiresceneweneed
tocreateonemoreparticlesystem
6.Selectthefront_treelayerfromtheTIMELINEpaneland
choosetheNewLayericonatthebottomleftofthepanel;a
newlayeriscreated.Renamethislayertosnow_2.
7.ChoosetheDecoToolfromtheToolspanelandsetthe
propertiesinthePROPERTIESpanelasdiscussedinstep3.
8.Createaparticlesystemontherightofthestageareawhere
noparticlesweregeneratedearlier.
9.ChooseCTRL+ENTERfromthekeyboardtoviewthefinal
motiontweenanimation,asshowninthebelowfigure.