8
AdobeFlashCS5Tutorials WithDruanColley

Adobe Flash Cs5 Tutorials

Embed Size (px)

Citation preview

Page 1: Adobe Flash Cs5 Tutorials

7/29/2019 Adobe Flash Cs5 Tutorials

http://slidepdf.com/reader/full/adobe-flash-cs5-tutorials 1/8

AdobeFlashCS5TutorialsWithDruanColley

Page 2: Adobe Flash Cs5 Tutorials

7/29/2019 Adobe Flash Cs5 Tutorials

http://slidepdf.com/reader/full/adobe-flash-cs5-tutorials 2/8

TableofContents

AdobeFlashCS5Tutorials......................................................................................1

AdobeFlashCS5–BouncingBallTutorial...............................................................3Step1:OpeningAdobeFlash........................................................................................................................3 Step2:CreatingaNewFile............................................................................................................................3 Step3:Creatingsymbols................................................................................................................................4 Step4:Navigatingbacktothescene.........................................................................................................4 Step5:Creatingtheground...........................................................................................................................5

Step5.1:..................................................................................................................................................................5  Step6:Makinganewframe..........................................................................................................................5

Step6.1:..................................................................................................................................................................5  Step6.2:..................................................................................................................................................................5 

Step7:Creatingamotiontween.................................................................................................................6 Step7.1:Bendingthemotiontween......... .......... .......... .......... .......... ......... .......... .......... .......... .......... .........6Step7.2:MakingtheballSquishonimpact............................................................................................7 

Step8:MakingtheBallbouncebackup................................................... ................................................8

Page 3: Adobe Flash Cs5 Tutorials

7/29/2019 Adobe Flash Cs5 Tutorials

http://slidepdf.com/reader/full/adobe-flash-cs5-tutorials 3/8

AdobeFlashCS5–BouncingBallTutorial

Step1:OpeningAdobeFlash

OpenAdobeFlashCS5

Step2:Creatinga

NewFile

SelectActionScript

3.0fromthedialogthat

displayswhen

youopenAdobeFlash

CS5.IfAdobeFlashisalready

openclick‘File’

andnavigateto‘New’then

selectthe

ActionScript3.0againfrom

thedialog.

Page 4: Adobe Flash Cs5 Tutorials

7/29/2019 Adobe Flash Cs5 Tutorials

http://slidepdf.com/reader/full/adobe-flash-cs5-tutorials 4/8

Step3:Creatingsymbols

Rightclickinthelibrarytapontherighthandsideofthewindowandselect‘NewSymbol’

fromthedisplayeddialog

Thiswillcreatea‘symbol’theseareobjectsthatcanbe

manipulatedintoanimation.

NametheNewSymbol“Ball”.

MaketheSymbolintoaballshapeForinstanceacirclethiscanbedoneby

byselectingtherectangletool

andLongpressingitforthedialogtoappear,

thenselecttheellipsetooloryoucanpress(o).

Step4:Navigatingbacktothescene

Clickbacktothescenebymovingtothetoprightofyourviewpointandclicking‘scene1’thisbringsyoubacktothescene,thisiswheretheanimation

commences.

Page 5: Adobe Flash Cs5 Tutorials

7/29/2019 Adobe Flash Cs5 Tutorials

http://slidepdf.com/reader/full/adobe-flash-cs5-tutorials 5/8

Step5:Creatingtheground

SelecttheRectangletoolbypressingRorbyclickingthe toolbuttononthelefthandside(toolbar).

Andcreateanareathatcanbeusedasthegroundthiswilloccupythebasiclayerasthebackground.Makethisrectangle blackorgrey.

Step5.1:

RightClickontheframeat25andselectthe‘insertframe’optiononthedropdownmenu.ThisshowstheRectangle(backgroundthatyouhavejustdrawnfor

thisperiodoftime0-25s)

Step6:Makinganewframe

Createanewlayerbyclickingthisiconunderyourlayerpanelatthebottomleft.

Thislayerwillbethelayerthatcontainsthemovementoftheballasitbounces.

Step6.1:

Selectthenewlayerthatyouhavejustcreatedandrepeat‘step5.1above’.

Step6.2:

Whilestillhavethenewlayerselecteddragthe‘Ball’symbolontothescenetothetoplefthandside.Thisisnowthe‘Ball

layer’(youcanrenameitifitiseasiertoremember).

Page 6: Adobe Flash Cs5 Tutorials

7/29/2019 Adobe Flash Cs5 Tutorials

http://slidepdf.com/reader/full/adobe-flash-cs5-tutorials 6/8

Step7:Creatingamotiontween

Movetheredbaronthetimelinetotheendoftheframesat25s.thenrightclick

ontheBalllayeratthe25sFrame,andselect‘CreateMotionTween’oncethishasbeensetthebarwillturnblueandyoucanmovetheballwhereveronthe

scenetocreateastraightmotionpath.Thisisthebasicmovementoftheball.

Youcanhittheenter(return)keytoplaythroughthismotiontweenatanytime.

Step7.1:Bendingthemotiontween

Selectthe‘selectivetool’(V)or key,andclickononeofthedotsonthemotion‘line’youcangrabanddragtheseupordowndependingonthedirection

youwantittobend.Inthiscasethebouncingball,wewillcreateanarcasifthe

ballhasbeenthrownorisalreadybouncing.

Page 7: Adobe Flash Cs5 Tutorials

7/29/2019 Adobe Flash Cs5 Tutorials

http://slidepdf.com/reader/full/adobe-flash-cs5-tutorials 7/8

Step7.2:MakingtheballSquishonimpact

Createanewlayerandcallit‘ballLayer2’thiswillbethetransitionoftheballas

itcondensesonimpacttotheground.Rightclickthatlayerat25s.Select‘InsertBlankKeyFrame’thendragthe‘Ball’symbolintothatlayer(soitisbehindthe

Ballin‘Balllayer’).

Make‘BallLayer2’3frameslongbyrightclickingandselectingthe‘insertframe’

option.Selectthemiddleframeofthesethreein‘BallLayer2’andRightclick‘createmotiontween’.RightclickinthisframeagainandChoosetheOption

‘InsertKeyframe’,andfromthismenuselect‘Scale’.(thisallowsyoutochangethesizeandshapeoftheBall.)Byselectingthistoolitwillallowyoutodothis

grabthetoplittlesquareanddragitdownto“squish”theball.

NowSelecttheLastframeandrepeattheStepAbovebutInsteadofmakingthe

ballflattermakeitelongated.

Page 8: Adobe Flash Cs5 Tutorials

7/29/2019 Adobe Flash Cs5 Tutorials

http://slidepdf.com/reader/full/adobe-flash-cs5-tutorials 8/8

Step8:MakingtheBallbouncebackup

Createanewlayerandnameit“BallLayer3”thiswillbe

theballasitbouncesbackupasifitisbouncing.Addanewblankkeyframe(userightclick‘InsertBlankKeyframe’)in

linewiththelastframeofthepreviouslayer.Addthe‘Ball’

symboltothislayer,andusethe tooltoshapeitintothesameshapeastheelongatedball.

CreateaMotionTweeninthislayerandmovetheballuptothetoprighthandsideoftheScene. Bendthepathsothatitlooksasthoughitisbouncing.

Selectthesecondframeand

Inserta‘Scale’Keyframe,andproceedtomakethe

ballbacktoitsoriginal

shape.