Introduction to Adobe Flash CS3

TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
INTRODUCTION
ThistutorialisanintroductiontoAdobeFlashCS3andwilldemonstratethebasicFlashtoolsandconceptswithastepby
stepguidetocreatingananimatedbutterfly.
VECTORVSBITMAP
Flashisavectorbaseanimationprogram.Vectorobjectsaredescribedmathematically,whereasbitmapsare
representedbypixels.ThisallowsFlashdocumentstoremainrelativelysmallandFlashobjectstoretainquality
regardlessofzoomresolution.
Vector
20xZoom
Bitmap
20xZoom
CREATEANEWFLASHDOCUMENT
Whenyoufirststartflash,youwillbepresentedwithawindowtoopenaFlashdocument,createanewFlash
document,orstartfromatemplate.ClickonFlashFile(ActionScript3.0)tocreateanewblankFlashdocument.
CreateaNewFile
SAVEANDSAVEOFTEN
Beforeproceeding,saveyourdocumentandsaveoftenthereafter.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
USERINTERFACE
Theuserinterfaceconsistsofthefollowingpanels:
Layers
Timeline
Behaviors
Tools
Stage
Library
PropertyInspector
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
DISPLAYING/HIDINGPANELS
PanelscanbedisplayedorshownbyselectingordeselectingpanelsfromtheWindowsmenu.
1. ClickontheWindows
menu.
2. Clickonanunchecked
paneltodisplayitorclick
onacheckedpaneltohide
it.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
Triangle
ThinkoflayersasindividualtransparencysheetswhichallowFlashobjectstobecreatedandeditedindependentfrom
oneanother.TheexamplebelowshowsaFlashdocumentwhichhasthreelayers:Triangle,Rectangle,andCircle.
Objectsinthetopmostlayerwillcoveranyobjectsdirectlyunderneath.
Rectangle
Circle
EXAMPLEEXPLAININGLAYERS
LOCKINGALAYER
Lockalayerormultiplelayerstopreventthemfrombeingeditedon.Inthefollowingexample,onlytheRectanglelayer
canbeworkedon.LockalayerbyclickingonthedotlocatedunderneaththeLockcolumn.Clickonthelockicondirectly
totherightofthelayernametounlockthelayer.
LockColumn
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
HIDE/SHOWALAYER
AlayercanbehiddenbyclickingonthedotlocatedunderneaththeEyeicon,theshowandhidecolumn.Noticethedot
changestoahashmark.Showalayerbyclickingonthehashmarkdirectlytotherightofthelayername.Intheexample
below,theTrianglelayerishidden.
Show/HideColumn
HINT
Whenworkingonaprojectwithmanylayers,hidingandlockinglayerswillmakeiteasiertoworkontheFlashStage.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
DOCUMENTPROPERTIES
WhencreatinganewblankFlashdocument,setthedocumentstagesizeimmediately.Changingthestagesizelatermay
alterthepositionofyourFlashobjects.Tosetthestagesize,clicktheModifymenuandselectDocument…….Youcanalso
setthestagebackgroundcolorandframerate.
SethowfasttheFlash
documentwillplay.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
FLASHSYMBOLS
ObjectsinFlasharecalledsymbolsandasymbolcanbeagraphic,amovie,orabutton.Symbolscancontainother
symbols.Forexample,amovieclipcancontaingraphicandbuttonsymbols.
GraphicIcon
ButtonIcon
MovieIcon
WHYUSESYMBOLS
Onceasymboliscreated,itgetsstoredintheLibraryandthencanbereusedmultipletimesintheFlashdocument,
withoutsignificantlyincreasingtheFlashdocumentsize.Anotheradvantageisthatmodificationstothesymbolwill
affectallinstancesofthatsymbolontheFlashstage,whichsavestime.
CREATINGABUTTERFLY
CreateanewmoviesymbolbyclickingontheInsertmenuandselectingNewSymbol…….
SelectMovieClipasthesymboltypeandenteradescriptivenamelikeButterfly,andthenclickOK.
BUTTERFLYMOVIECLIP
TheblankbutterflymovieclipappearsonthestageandthisisindicatedbytheTabwiththelabelButterflybeneaththe
Timelinepanel.Layer1bydefaulthasanemptyframeindicatedbytheopencircleinframe1.
Currentlyediting
ButterflyMovieClip
Eachlayerbeginswith
anemptyframe
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
THEBUTTERFLYBODY
Selecttheovaltool
.
Hint:
Thetriangleinthelowerrighthandcornerindicatesthatthereareadditionaltools.
Clickandholdthetooltoseeapopupwindowofavailabletools.
Withtheovaltoolactive,clickanddragthemousetodrawaslenderovalshapefor
thebutterflybody.Noticehowframe1onthetimelinechangesfromanopencircleto
asolidcircle.Thisindicatesthatthisframehasobjects.
Thesolidcircleindicates
thatthereareobjects
createdonthisframe.
ANTENNAE
Selectthelinetool
.
Click,drag,andreleasetodraw1antennaandrepeattodrawthesecondantenna.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
INSERTMOREFRAME
Nowthatthereisoneframewiththebodyandantennadrawn,addmoreframestothetimeline.Todothis,rightͲclick
onframe60andchooseInsertFramefromthepopupwindow.
Frames2through60willturngrey.Frame60willhaveanopenrectangleindicatingthatitisthelastframethatisa
duplicateofframe1.Clickonanyoneoftheframes2through60andyouwillseeacopyofthebutterflybodyidentical
toframe1.
LABELEACHLAYER
Itisimportanttolabeleachlayerwithadescriptivenametomakeitiseasiertodistinguishbetweeneachlayer,
especiallywhenyouhavemanylayerstoworkwith.DoubleclickonthelabelLayer1andtype””Body””.Lockthelayerby
clickonthedotinthelockcolumn.
Doubleclickandtype
Lockthelayertoprevent
inanewlayername
itfrombeingedited
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
ADDANOTHERLAYER
Clickontheinsertbuttontoaddanotherlayer
RenameLayer2to““LeftWing””.
.
Clickontheframe1oftheLeftWinglayer.
Clicktoaddalayer
abovethecurrentlayer
WHATISYOURFAVORITECOLOR
Selecttherectangletool
.
Clickonthecolorpaletteandselectacolorforthewing.
Clickonthecolorpalette.
Chooseacolorforthewing.
WINGINGIT
OntheFlashstage,inframe1oftheLeftWinglayer.Clickanddragtherectangletoolanddrawaboxnearthebutterfly
body.
Clickattheupperlefthand
corneranddragthemouseto
thelowerrighthandcorner.
Clickontheselectiontool
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
Clickandthedragdownwardontheupperrighthandcorneroftherectangle.
Thenclickonthetopedgeoftherectangleanddragupward.
Thenclickontheleftedgeoftherectangleanddragtotheleft.
Thenclickonthelowerrighthandcorneroftherectangleanddragdownward.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
Clickontheovaltool
.
Startingfromthelowerlefthandcorner,clickanddragtodrawanovalthatendsnearthebutterflybody.
Clickontheselectiontool
Thenclickanddragthelowerleftedgeoftheovaloutward,distortingtheoval.
CONVERTTHEWINGTOASYMBOL
Nowthattheleftwingiscomplete,convertthewingtoasymboltobereusedfortherightwing.
Makesuretheselectiontoolisstillactive,otherwiseclickonit
.
Theclickanddragtheamarqueeboxaroundtheentireleftwing,toselectit.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
ThenrightͲclickontheselectleftwingandchooseConverttoSymbol……fromthepopupwindow.
TheConverttoSymboldialogboxappears.Type““Butterflywing””forname,selectGraphicfortype,andclickOk.
NoticetheButterflywingsymbolappearingintheLibrarypanel.
MOVETHEPIVOTPOINTOFTHELEFTWING
Clickonframe1andthenclickontheleftwingtoselectit.
SelecttheFreetransformtool
.
UsetheFreetransformtooltomovethepivotpointoftheselectedobject,inthiscasetheleftwing.Thepivotpointis
indicatedbythewhitecirclethatgenerallyisinthecenteroftheselectedobject,unlessithadpreviouslybeenmoved.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
PivotPoint
Clickanddragonthepivotpointtotherightedgeofthewing.
COPYTHELEFTWING
OntheLeftWinglayer,clickonframe1.
ThenrightͲclickonframe1.
FromthepopupwindowselectCopyFrames
Thenrightclickonframe10andfromthepopupwindowselectPasteFrames.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
Asoliddotappearsinframe10indicatingthatthereareobjectsinthisframe.
Repeatthelaststepforframes20,40,and60tocopythecontentsofframe1toframes20,40,and60.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
SHRINKANDEXPANDTHELEFTWING
ClickonFrame10.
SelecttheFreetransformtool
andclickontheleftwingtoselectit.
Startingontheupperlefthandcorneroftheleftwing,clickanddragtotherightandupwardtoshrinkandexpandthe
wingtomakethewingappeartobeflapping.
ANIMATETHELEFTWING
Frame1hasthewingintheoutwardflappingpositionandframe10hasthewingintheinwardflappingposition.Flash
willfillintheinbetweenpositionsusingafunctioncallMotiontweening.ToapplyMotiontweeningrightclickanyoneof
theframesbetweenframes1and10.SelectCreateMotionTweenfromthepopupwindow.
Anarrowappearspointingfromframes1through10toindicatethatthereisMotiontweeningbetweenthetwoframes.
COPYTHEINWARDFLAPPINGPOSITION
Nowframes1,20,40,and60allhavethewingintheoutwardflappingposition.Onlyframe10hasthewinginthe
inwardflappingposition.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
OntheLeftWinglayer,clickonframe10.
ThenrightͲclickonframe10.
FromthepopupwindowselectCopyFrames
Thenrightclickonframe30andfromthepopupwindowselectPasteFrames.
Asoliddotappearsinframe30indicatingthatthereareobjectsinthisframe.
Repeatthelaststepforframe50tocopythecontentsofframe10toframe50.
Rightclickbetweenframes10and20andchooseCreateMotionTween.Repeatforframes20Ͳ30,30Ͳ40,40Ͳ50,and50Ͳ
60.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
LOCKTHELEFTWINGLAYER
CREATEANEWLAYERFORTHERIGHTWING
ClickontheInsertlayerbuttontocreateanewlayerandrenamethelayertoRightWing.
Clickonframe1ontheRightWinglayer.
INSERTTHEBUTTERFLYWINGSYMBOL
FromtheLibrarypanel,clickanddragtheButterflywingsymbolontotheFlashstage.
TEKTUTORIAL:INTRODUCTIONTOADOBEFLASHCS3
SelecttheFreetransformtool
.
Clickontherightedgeofthewinganddragtothelefttoflipthewing.
Therightwingshouldnowbeamirroroftheleftwing.
ANIMATETHERIGHTWING
Followthestepstoanimatingtheleftwinginthepreviousstepsfortherightwing.