AdoeDeveloperConnection / FlahDeveloperCenter /

Creatingour rtFlahProfeionalC6
document
Adoe
Requirement

Prerequiiteknowledge Requiredproduct
PriorexperienceworkingwithFlah AdoeAnimateCC
ProfeionalC6inotrequired. i
introductorarticleprovideallthetep
ouneedtogettarted.Althoughthi
ampleprojectincludeomeActioncript
code,previouknowledgeofprogramming
inotnecear.

Note:Ifdeired,oucandownloadthe
Content ample letoreviewaworkingverionof
CreatingaFLA leandaddinggraphic thecompletedproject.Otherwie,jut
element followalongwiththeintructionprovided
Creatingamolandaddinganimation elowtocreatetheampleprojectfrom
PulihingWF le cratch.

Addingareplau ontoretartthe Uerlevel

animation eginning
Wheretogofromhere

Modi ed Note:Forinformationonhowtocreateour rtFlahProfeionalC5document,refertothiarticle.

7Ma2012
AdoeFlahProfeionalC6ianauthoringtoolthatoucanuetocreategame,application,andothercontentthat
Pagetool repondtouerinteraction.Flahprojectcanincludeimpleanimation,videocontent,complexuerinterface,
application,andeverthinginetween.Ingeneral,individualprojectcreatedwithFlahProfeionalarecalled
hareonFaceook application(orWFapplication),eventhoughthemightonlcontainaicanimation.Youcanmakemedia-rich
hareonTwi er applicationincludingpicture,ound,video,andpecialeect.
hareonLinkedIn
Print eWFformatiextremelwelluitedfordeliverovertheweecaueWF learevermallandtakeli letimeto
download.Flahprojecto enincludeexteniveueofvectorgraphic.Vectorgraphicrequireigni cantllememor
AdoeAnimateCC animation andtoragepacethanitmapgraphicecauethearerepreentedmathematicalformulainteadoflargedata
FLA WF et.UingitmapgraphicinFlahprojectreultinlarger leizeecaueeachindividualpixelintheimagerequire
aeparatepieceofdatatorepreentit.Additionall,Flahallowoutoelectgraphicelementandconvertthemto
Wathihelpful?
molmakingthemeaiertoreueandfurtherimprovingperformancewhenWF leareviewedonline.
Ye No
clickingumit,ouacceptthe
AdoeTermofUe. CreatingaFLA leandaddinggraphicelement

ankforourfeedack. TouildanapplicationinFlahProfeionalC5,oucreatevectorgraphicanddeignelementwiththedrawingtool
andimportadditionalmediaelementuchaaudio,video,andimageintoourdocument.Next,ouuetheTimeline
andthetagetopoitiontheelementandde nehowandwhentheappear.UingAdoeActioncript(acripting
language)oucreatefunctiontopecifhowtheojectintheapplicationehave.

WhenouauthorcontentinFlahProfeional(chooingFile>New),ouworkwiththematerdocument,whichi
calledaFLA le.FLA leuethe leextenion.a(FLA).WhileeditingaFLA leintheFlahauthoringenvironment,
ou'llnoticethattheuerinterfaceidividedinto vemainpart:

etageilikethecanvathatde netheviileareaduringplaack;ouarrangegraphic,video,u on,and

otherelementonthetagewhileauthoringproject.
eTimelinecontrolthetimingthatpeci ewhenelementinthemovieappearonthetage. eplahead
eginatFrame1andmovefromle torightathemovieproceedthroughtheframe.Dragthelaerinthe
Timelinetoarrangethelaeringorderofgraphiconthetage.Graphicinthehigherlaerappeartoeplacedon
topofthegraphicinthelowerlaer.
eToolpanelcontainthetooluedtoelectojectonthetage,createtextelement,anddrawvector
graphic.
ePropertinpectordiplacontextualinformationaoutthea riuteofanelectedoject;oucanedit
theeoptiontoadjutanoject'e ing.
eLirarpanelcontainmediaelementandmolthataretoredforaproject.Uethipaneltomanageand
organizetheproject'element.WhenoupulihaWF le,onltheLiraritemouactuallueareincludedin
thepulihed le;oudon'thaveto"cleanout"unuedelementthatweren'tuedecauethewon'tincreaethe
pulihedWF le'ize(althoughthedoincreaetheizeofthematerFLA le).

e veareaoftheworkpaceareidenti edinFigure1.
Figure1.FlahProfeionalC6uerinterfaceicompriedof vemainpart.(Clicktoenlarge.)

Actioncriptcodeallowoutoaddinteractivittotheelementinourdocument.Forexample,oucanaddcodethat
caueau ontodiplaanewimagewheniticlicked.YoucanaloueActioncripttoaddlogictoourapplication.
Logicenaleourapplicationtoehaveindierentwadependingontheuer'actionorothercondition. ereare
dierentverionofActioncript.FlahProfeionalueActioncript3whenanActioncript3orAdoeAIR lei
created,orActioncript1and2whenanActioncript2 leicreatedintheNewDocumentdialogox.

Flahincludemanfeaturethatmakeitpowerfuluteatoue,uchapreuiltdrag-and-dropuerinterface
component,uilt-inmotioneectthatoucanuetoanimateelementontheTimeline,pre-wri encodenippet,
andpecialeectthatoucanaddtomediaoject.

Whenouhave nihedauthoringourFLA le,oupulihitelectingFile>Pulih(orpreinghi +F12). e

pulihoperationgenerateacompreedverionofour lewiththeextenion.wf(knownaaWF le).AdoeFlah
PlaeriuedtoplatheWF leinaweroweroraatand-aloneapplication.Althoughoudon'tuploador
ditriutetheFLA leitelf,ou'llalwawanttokeepacopofthematerdocument.Ifouneedtomakeanchange,
oucanopentheFLA leinFlah,editit,andthenpulihanupdatedWF le.

CreatingaimpleFLA le
itutorialguideouthroughtheproceofcreatingaaicFLAdocument.You'lluethiworkowwhenauthoring
projectinFlahProfeional. e rttepinvolvecreatinganewdocument:

1.ChooeFile>New.
2.IntheNewDocumentdialogox,theActioncript3.0 letpeielecteddefault(eeFigure2).IfActioncript3.0
inotelected,electitnow.ClickOK.
Figure2. eNewDocumentdialogoxdiplathe letpeoucancreateinFlahProfeional.

3.Uetheworkpacedrop-downmenulocatedontheupperrightofthecreentoelecttheentialworkpace
laoutoption(eeFigure3). itepenurethatthelaoutofthepanelinFlahProfeionalmatchthe
arrangementofthepaneldiplaedinthecreenhotforthitutorial.

Note:Later,oucancreateapreetofourowncutomworkpacepoitioningthepanelinanwathatouprefer.
ChooetheNewWorkpaceoptionandenteranametoaveourperonalcon guration.Onceit'aved,oucanreet
theworkpacechooingitnamefromtheworkpacemenu.

Figure3.electtheentialoptiontoeetheworkpacelaoutuedforthitutorial.

4.ClickthePropertietaintheupperrightideoftheuerinterfacetoviewthePropertinpector,whichdiplathe
tagepropertieforthe lewhennootherojectareelected.
5.default,thePropertinpectoriverticallalignedalongtherightideoftheworkpace. eizeectiondipla
thecurrenttageizee inga550400pixel(eeFigure4). etageackgroundcolorwatchiettowhite.
Youcanchangethecolorofthetageclickingthewatchandelectingadierentcolorinthecolorpickerthat
appear.
Figure4. ePropertinpectordiplathetageizeandtheackgroundcolor.

Tip:YoucanettheackgroundcolorofthetageintheFlahmoviechooingModif>Documentorelecting
thetageandthenmodifingthetagecolorwatchinthePropertinpector. ere'noneedtodrawarectangleto
de netheackgroundcolor.Whenoupulihourmovie,FlahettheackgroundcolorofthepulihedHTMLpage
totheamecolorathetageackgroundcolor(ifouchooetogenerateanHTML le).

6.ChooeFile>ave.
7.electthelocationtoavetheFLA leonourharddik.NameitimpleFlah.aandthenclickave.Makeanote
ofthelocationwhereouavetheFLA leecaueou'llneedto ndthidirectorattheendofthitutorial.

Drawingacircleonthetage
A erou'vecreatedourFlahdocument,ouarereadtoaddomeartworktotheproject.Drawinghapeia
commontakinFlah.WhenouuethedrawingtoolintheToolpanel,thevectorgraphicoucreatecaneeditedat
antime. efollowingtepdecriehowtocreateacircle;later,ou'lluethicircletocreateomeaicanimation.
Followtheetep:

1.electtheOvaltoolfromtheToolpanel(eeFigure5).
Figure5.Toolwithatriangleintheo omle cornercontainmorethanoneoption;clickandholdthehapetoolicontoelecttheOval
toolfromthelitthatappearintheToolpanel.

2.UethetrokecolorwatchinthePropertinpectortoelecttheNoColoroption(reddiagonaltripe)fromthe
trokeColorPicker(eeFigure6).

Figure6. euniveral"no"mol(reddiagonaltripe)indicatethatthecolorwatchiettotheNoColoroptioninthetrokecolorpicker.

3.electacolorofourchoicefromtheFillcolorpicker,locateddirectlelowthetrokecolorpicker.Chooea ll
colorthatcontratwellwiththetagecolor.Inthiexample,anovalwithalue llcoloridiplaedontopofared
tagecolor.
4.Wheneveroudrawavectorhape,ouhavetheoptionofelectingtwodrawingmode:Mergedrawingmodeand
Ojectdrawingmode.Forthepurpoeofthitutorial,clickthedrawingmodeu ontoelecttheOjectdrawing
modeatthevero omoftheToolpanel.WhentheOjectdrawingmodeielected,theu onwillappear
darkerandelected,ahowninFigure7.
Figure7. eDrawingmodeu oniatogglethatalternateetweenmode;chooeOjectdrawingmodeclickingtheu ontomake
itackgroundappeardarker.

Tolearnmoreaoutthetwodrawingmodeoption,eetheDrawingmodeectionoftheFlahProfeionalonline
documentation.

5.WhiletheOvaltooltillelected,preandholdthehi ke.Drawacircleonthetagehi -draggingonthe

tage(eeFigure8). ehi keiamodi erke;whenoupreandholdthehi kewhiledrawingor
tranformingahapewiththeOvaltool,FlahcontraintheOvaltoolhapetoacirclethatiperfectlmmetrical.

Note: ehi keworkimilarlwithotherautohape;whenoupreandholdhi whiledrawingahapewith

theRectangletool,ou'llcreateaperfectquare.

Figure8.Preandholdthehi kewhileuingtheOvaltooltodrawacircleonthetage.

Tip:Ifou'redrawingourcircleandoueeonlanoutlineofthehapeinteadofa llcolor, rtchecktoenurethat

thetrokeand lloptionareetcorrectlinthePropertinpectorwhilethecircleielected.Ifthe llcolorwatchi
ettoacolorandthetrokeiettoNoColor,thee ingarecorrect.Next,makeurethattheoptiontohowOutline
inotelectedinthelaerareaoftheTimeline.( erearethreeicontotherightofthelaername:eeallicon,lock
icon,andoutlineicon.Doule-checkthattheoutlineicondiplaaolid llandnotjutaquareoutline.Ifouarenot
ureifthehowOutlineoptionienaled,clicktheiconrepeatedltotoggletheviualtateetweennormalviewand
outlineview.)

Creatingamolandaddinganimation
A erdrawingomeartwork,oucanturnitintoareualeaetconvertingittoamol.Amoliamediaaet
thatcanereuedanwhereinourdocumentwithouttheneedtore-createit.molcancontainitmapandvector
imageandanimation,alongwithothertpeofcontent.
Iticommontouemoltocreatetweenedanimation.Youcanalouemoltotoregraphiccontent(a
decriedinthenextetoftep).AouecomemorefamiliarwithFlahProfeional,ou'lluemoltotructure
applicationandinteractivituingmultipletimeline.molareuefulforcompartmentalizingpartofaprojectto
makeiteaierforoutoeditpeci cectionlater.Followtheeteptocreateamol:

1.ClicktheelectiontoolintheToolpanel(eeFigure9).

Figure9. eelectiontoolithe rtitemdiplaedintheToolpanel.

2.Clickthecircleonthetagetoelectit.Aoundingoxelectionappeararoundthecircle.
3.Whilethecircleitillelected,chooeModif>Converttomol(orpreF8)toaccetheConverttomol
dialogox(eeFigure10).nterthenameofthemolintheName eld.UetheTpemenutoelecttheMovie
Clipoption.

Tip:YoucanaloconvertagraphicintoamolelectingitanddraggingitintotheLirarpanel.

Figure10.nteradecriptivenameforthemolintheConverttomoldialogox.

4.ClickOK.Aquareoundingoxidiplaedaroundthecirclemol.You'vejutcreatedareualeaet,calleda
mol,inourdocument.Inthicae,oucreatedamovieclipmolnamedm_circle.(Formoreinformation
aoutmol,readWorkingwithmolintheFlahProfeionalonlinedocumentation.)

IftheLirarpanelinotopen,chooeWindow>Lirartoacceit. enewmolinowlitedintheLirarpanel.
(WhenoudragacopofthemolfromtheLirarpaneltothetage,thecoponthetageicalledanintanceof
themol.)

Animatingthecircle
Inthiection,ou'lluethemolinourdocumenttocreateaaicanimationthatmoveacrothetage:

1.electthecircleonthetageanddragitothetageareatothele (eeFigure11).
Figure11.Repoitiontheintanceofthem_circlemoltothele ofthetagearea.

2.Right-clickthecircleintanceonthetageandchooetheoptiontoCreateMotionTweeninthemenuthatappear.
NoticethattheTimelineiautomaticallextendedtoFrame24andtheredmarker(thecurrentframeindicator,alo
knownatheplahead)movetoFrame24(eeFigure12). iindicatethattheTimelineipreparedforouto
edittheendinglocationofthemolandcreateaone-econdanimationaumingthatouhaven'tchanged
defaultframeratefortheprojectfrom24fpinthePropertinpector.Apanof24frameitheequivalentofone
econdatarateof24fp.(FormoreinformationaouttheTimeline,readWorkingwithtimelineintheFlah
Profeionalonlinedocumentation.)

Figure12. eCreateMotionTweenoperationautomaticallextendtheframeintheTimelineandplacetheplaheadonFrame24.

3.WhiletheplaheaditillonFrame24oftheTimeline,electthecircleintanceonthetageanddragittotheright,
jutpatthetagearea. itepofrelocatingtheintancecreateatweenedanimation.OnFrame24,noticethe
diamond-hapeddot(knownaapropertkeframe)thatappear.Onthetage,alonoticethemotionguidethat
indicatethecircle'pathofmotionetweenFrame1andFrame24(eeFigure13).
Figure13.A ercreatinga24-frametweenanimation,thecircleilocatedatthefarrightattheendoftheanimation(whentheplaheadi
locatedonFrame24oftheTimeline).

4.IntheTimeline,dragtheredplaheadackandforthfromFrame1toFrame24topreviewtheanimation;thii
knownacruingtheTimeline.
5.Youcanchangethecircle'directioninthemiddleoftheanimation.Firt,dragtheplaheadtoFrame10inthe
Timeline. enelectthecircleandmoveittoanotherlocation,furtherdownonthetage.Noticethatthechangei
reectedinthemotionguideandthenewdot(propertkeframe)appearonFrame10oftheTimeline(eeFigure
14). epropertkeframeontheTimelinemarkthetimingoftheanimation,indicatingtheframewhenever
ojectchangeonthecreenandtoringthepropertieoftheojectthatchange.Inthiexample,itithecircle'
locationonthetage(knownaitXandYorhorizontalandvertical)propertiethatarechangingatheplahead
moveacrotheTimeline.

Figure14.A erplacingtheplaheadonFrame10anddraggingthecircleintancedownonthetage,themotionguideofthetweened
animationandthepropertkeframeintheTimelinereectthelocationchangeoftheanimatedcircle.
 6.xperimentwitheditingtheanimationchangingthehapeofthemotionguidepath.Clicktheelectiontoolin
theToolpanelandthenclickaectionofthemotionguideline.Dragittoendthelinehape(eeFigure15).When
ouendthemotionpath,oucauetheanimationtofollowalongamoothcurvedlineinteadofarigidtraight
line.

Figure15.Uetheelectiontooltoadjutthetweenedanimation'motionpath;ratherthanatraightlinetheeditedmotionguidelineinow
curved.

7.ChooeControl>TetMovietotettheFLA leandwatchtheanimationplaackinFlahPlaer.
8. emovieloopautomaticall,ooucanwatchthecirclemoveacrothewindowrepeatedl.Whenouare
nihed,cloetheTetMoviewindow.

UingatopactiontotoptheTimelinefromlooping
YounoticedthattheanimationloopdefaultathemovieplainFlahPlaer. ioccurautomaticallecauein
FlahProfeional,theTimelineietuptoloopacktoFrame1a erexitingthelatframeunleouintructthe
movietodootherwie.WhenouwanttoaddacommandthatcontroltheTimeline,ou'lladdActioncriptcodetoa
keframe(indicatedadotmol)ontheTimeline. iiknownaaddingaframecript.

Tip:KeframeareuedtoplaceActioncriptandaetonpeci cframeintheTimeline.Whenoureviewthe
TimelineofaFLA le,oucanlocatecriptandcontentlookingforthekeframedot.Keframethathaveframe
criptdiplaalowercae"a"mol.

FollowthetepelowtoaddActioncriptcodetoourFLA le.You'lladdoneofthemotcommonTimeline
command,whichicalledthetopaction:

1.It'alwaagoodideatonameourlaerifouhavemorethanone.Alargeprojectcanquicklecome
unmanagealeifitlaerarenotdecriptivelnamed.Doule-clickthenametorenameLaer1.Inthe eldthat
appear,enterthenewname:animation.
2.ClicktheNewLaeru on(pageicon)inthelowerle oftheTimelinepanel.InanActioncript3 le,the
ActioncriptcodemuteaddedtotheTimeline.It'conideredetpracticetocreatealaernamedactionatthe
topofthelaertack,dedicatedtoholdingtheActioncriptcode.Renamethenewlaeroujutcreatedto:action.
Makeureitilocatedaovetheanimationlaer.Nowthatou'vecreatedalaertoplaceourcript,oucanadd
keframetotheactionlaertoaociatetheActioncriptcodewithpeci cframe.
3.MovetheplaheadtoFrame24.ClicktheactionlaeratFrame24(tohighlightthelatframeontheactionlaer).
InertakeframeonFrame24oftheactionlaerchooingInert>Timeline>Keframe(orpreingF6).Notice
thatanempt,lankkeframeappear(oucantellthatthenewkeframedoen'tcontainangraphicecaue
thedoticonforthekeframeihollow,ratherthandiplaingaolidcolor).
4.electthenewkeframewiththeelectiontool.OpentheActionpanel(Window>Action). eActionpanel
containthecriptwindow,whichialargetext eldou'lluetotpeorpateActioncriptcodedirectlintoour
FLA le.Placeourcurorinthetextareanexttothenumer1(line1)andtpeinthefollowingaction:
stop()

Note: itepaumethatou'reuingthedefaultmodeoftheActionpanel.IftheActionpaneliincriptAit
mode,itwon'tallowoutotpedirectlintotothetextarea.Toreturntothedefaultmode,uncheckthemagicwand
iconintheupperrightcorneroftheActionpanel.

5.A ertpingthelineofActioncriptcodeinthecriptwindow,ou'llnoticethatali le"a"iconappearaovethe

keframeintheactionlaeroftheTimeline. iindicatethatthekeframecontainaframecript(aloknowna
anaction).Atthipoint,ourTimelinehouldlookimilartoFigure16.CloetheActionpanel.Ifouneedtoeditthe
code,oucanalwaelectthekeframeintheTimelineandthenopentheActionpanelagain.
6.ChooeControl>TetMovietotettheFLA leandwatchitplainFlahPlaer.Noticethatthitime,theanimation
doen'tloop.YoucanreturntoFlahandtetthemovieagaintowatchthemovieplaagain.

Figure16.AddthetopactionframecripttoFrame24oftheactionlaer.

7.Whenouare nihedpreviewingtheanimation,cloetheTetMoviewindow.
8.ackinFlah,avetheFLA le.

PulihingWF le
Whenouare nihedcreatingourFLA le,andou'veteteditrepeatedl,ouarereadtopulihit. e lethatou
outputwhenpulihingcaneuploadedtoahoterverothattheprojectcaneviewedinarower.Whenou
pulihthe le,FlahProfeionalcompreethedataintheFLA leandgenerateamuchmaller,morecompact(and
non-editale)WF le.It'importanttonotethattheFLAiourmater,authoring le.AlwakeeptheFLA lehandin
caeouneedtomakechangetotheproject. eWF lethatigeneratedFlahwhenoupulihaprojectithe
lethatou'llemedinawepage.IfouarefamiliarwithAdoePhotohop,oucanthinkoftheFLA leathe
equivalentofamaterPD le,andtheWF leatheequivalentoftheexportedJPG lethatwilleinertedonawe
page.

Whileoucanchooetoeditthepulihe ingandonlpulihtheWF le(andthenueAdoeDreamweaveror

anotherHTMLeditortoinerttheWF leinapage)thePulihcommandmakethingeveneaier.Youcanetthe
pulihe ingtoautomaticallgenerateanHTML lethatcontainthecodetoemedtheWF leforou.

FollowtheeteptopulihtheFLA leandoutputtheWF lewiththeHTML le,othatoucanviewthepulihed

projectinarower:

1.ChooeFile>Pulihe ing.
2.InthePulihe ingdialogox,electtheFormatta.VerifthatonltheFlahandHTMLoptionareelected
(eeFigure17). ielectioncaueFlahtopulihonltheWF leandanHTML lewiththeemedcode. e
HTML leiuedtodiplatheWF leinawerower.( ewerowerthencallFlahPlaer,anintalled
plug-in,torenderthecontentoftheWF leoncreen).
Figure17.electtheFlahandHTMLoptionintheFormattaofthePulihe ingdialogox.

Tip:YoucanchangetheTarget eldinthetoprightofthePulihe ingdialogoxtotargetdierentverionofthe

FlahPlaerortheAIRruntime.PulihingtoAIRprovideaneawatocreatedektopormoileapplicationfrom
ourwe-aedapplicationwithoutdoingextrawork.

3.InthePulihe ingdialogox,electtheHTMLtaandverifthatFlahOnlielectedintheTemplatepop-up
menu(eeFigure18). itemplatecreateaimpleHTML lethatcontainonlourWF lewhenpreviewedina
rower.
Figure18.electFlahOnlfromtheTemplatemenuintheHTMLtaofthePulihe ingdialogox.

4.ClickOK.
5.ChooeFile>Pulihtoexportthewe-readWFandHTML lefromFlah.
6.Openourwerower.ChooeFile>Open.NavigatetothefolderwhereouavedourFLA le. e
impleFlah.wfandimpleFlah.html lehaveeenavedthere.(default,Flahalwaavethepulihed le
intheamefolderalongidetheFLAmater le.)electthe lenamedimpleFlah.html.
7.ClickOpen. eWF leemeddedintheHTMLpagenowappearintherowerwindow(eeFigure19).

This content requires Flash

To view this content, JavaScript must be
enabled, and you need the latest version
enabled, and you need the latest version
of the Adobe Flash Player.

Figure19. e leimpleFlah.wfianexampleofaaicFlahanimation,whichappearintherowera erpulihingthe le.(Clickthe

u ontoreplathemovie.)

You'veuccefullcompletedour rtFLA le.Tolearnmoreaoutpulihingourdocument,readthePulihingand

xportingectionintheFlahProfeionalonlinedocumentation.

Addingareplau ontoretarttheanimation
Inanearlierection,outoppedtheanimationfromloopingaddingastop()actiontothelatframeofthe
Timeline.Whentheplaheadreachethelatframe,itiintructedtotop,whichpreventitfromloopingacktoFrame
1.

Inthietofintruction,ou'lllearnhowtoaddaReplau on.Whenauerclicktheu on,itcauetheplaheadto

eginplaingfromFrame1again. iitheehavioroftheexamplehowninFigure19.

Flahiextremelexile. erearemantrategiethatoucoulduetocreateaReplau on,includingretartingthe

plaheadwhenauerpreeakeontheirkeoard,orwhentheclickonthetage,orwhentheclickau on.To
achieveanoftheeoption,ou'lladdomeActioncriptcodethatrepondtotheuerinteractivitatruntime(while
theWF leiplaing). iectioniali lemoreadvancedthanthepreviouectionitcoveromenewconcept
thatou'lluetocontroltheehaviorofourFlahmoviewithprogramming.

FollowtheeteptoaddaReplau onandthecorrepondingActioncripttoour le:

1.InFlah,itiaetpracticetocreateanewlaerforeachelementintheproject(withtheexceptionofActioncript
code,whichcaneplacedonanframeonthetop-levelactionlaer).ClicktheNewLaeru on(pageicon)inthe
Timelinetocreateanewlaerfortheu ongraphic.Doule-clickthedefaultlaernameandrenameit:u on.
2.OpentheComponentpanel(Window>Component)anddragau oncomponentfromtheUIComponent
foldertothetage.Poitiontheu oninthelowermiddleofthetagearea,orandeiredlocation.
3.Whiletheu oncomponenttillelected,openthePropertinpectorandlocatethetext eldatthetopnamed
<IntanceName>.nterthenamefortheu onintance:repla_tn. iianimportanttep.namingthe
u onintance,ou'llealetoreferenceitnameuingtheActioncriptou'lladdtotheproject.Iftheu on
intance'namedoenotexactlmatchtheu on'namepeci edinthecode,theehaviorwon'tfunctiona
expected.
Note:Oneofthemotcommonmitakeitoenterthenameofaframelael,ratherthanenteringtheintance
nameofanojectonthetage.evercarefultoalwaelecttheojectonthetage rt.enoucanaccethe
Propertinpectortocheckthatthepanelrefertotheelectedmolandindicatethatanintanceielected.
Verifthatthe elda"<IntanceName>"eforeoutpethenameoftheintance.IfthePropertinpectorrefer
toaframe,itmeanou'veaccidentallclickedtheTimeline.Namingintancecaneconfuinguntilouare
familiarwiththeoptionpreentedforelectedmolintanceandelectedkeframe.Onethingtocheck:Ifou
accidentallenteranameinthePropertinpectorwhileakeframeielected(inteadofanojectonthetage),
ou'lleearedagiconappearintheTimelineonthekeframe.Framelaelcaneverhelpfulwhencreating
navigationthatjumptodierentframeintheTimeline;forthiexample,however,iticriticalthatouelectthe
u ononthetageandentertheintancenameoftheu onintheu onlaerarepla_tn.Alomakeure
therearenotpo;otherwiethecriptwillnotwork.
4.Toupdatethetextlaeloftheu onthatidiplaedonthetage,enterthetextReplaintothelael eldinthe
ComponentParameterareainthePropertiepanel. ilaelhelpuerundertandwhattheu onwilldo.Iti
purelviualanddoenotaecttheperformanceofthecode.Ifou'dpreferthattheu ondiplaadierentlael,
oucouldenterRewind,Again,oradierentlaelofourchooing.
5.electthekeframeonFrame1oftheactionlaer.OpentheActionpanel(Window>Action).Copthecode
nippetelowandpateitintothecriptwindow:

importflash.events.MouseEvent

functiononClick(event:MouseEvent):void
{
gotoAndPlay(1)
}
replay_btn.addEventListener(MouseEvent.CLICK,onClick)

6.Takeafewmomenttoreadthroughthecode.Noticethattheecondlineegindeclaringafunctionnamed
onClick. elatlineofcodeuetheaddEventListenermethod,whichregiterthefunctionaan"event
litener"fortheu on'"click"event. etranlationofthicodeeentialla:"Whenauerclicktheu on
 namedrepla_tn,runthefunctionnamedonClick.WhentheonClickfunctionrun,itintructtheplaheadto
jumptoFrame1oftheTimelineandeginplaingtheframe."
iithetandardformatuedwhenwritingActioncript3;oneectioncheckforuerinteractivit(uchaa
moueclick)andthattriggeranotherfunctiontorepondtotimingcuefromojectinFlahPlaer.Inthicae,
theeventhandlerfunctionintructFlahPlaertoreturntoFrame1andtartplaingtheTimelineagain.(You'llue
aimilarntaxofcreatinganeventhandlerfunctionandaigningittoau onintanceantimeoucreatean
interactiveu oninFlah.)

Tip:YoucanuetheCodenippetpanelaahortcutwhenaddingeventtou on.

7.ChooeControl>TetMovietotettheFLA le. eanimationplaonceandthentop.ClicktheReplau onto

retarttheanimationandwatchthecirclemoveacrothetageagain.
8.CloetheTetMoviewindowandaveourFLA le.

Wheretogofromhere
erearemanonlinereourceoucanuetolearnmoreaoutworkingwithFlahProfeional:

eGe ingtartedectionintheFlahDeveloperCenteroutlinewheretogonext,dependingonourinteretand
goal.
eLearnFlahProfeionalhowonAdoeTVprovideanentireetofvideotutorialthatillutratewhatoucan
dowithFlah.
eFlahProfeionalonlinedocumentationincludetheintructiononhowtouethefeatureandincludelink
torelatedvideoandtutorialtoachievepeci ctak.
eFlahcommunitforumihelpfulforreearchingquetionandlearningtechniquefromotherFlah
developer;alwaearcheforeumi ingnewpot,ecauethereiawealthofpotedinformationthatoucan
ueto ndolutiontocommonquetion.

MoreLike i

CreatingaimpleanimationinFlah
uildingPreloaderandProgrearinMacromediaFlah
Augmentedrealitwithanimatedavataruingthe3DdrawingAPI
AutomatingtakinFlahProfeionalC5
UingtheAdoeFlahpriteheetGenerator
AutomatingtakinFlahProfeionalC6
UingWC letouildlargeFlahandAIRprojectwithmultipleWF leforiO
Lip-ncingautomaticallwithmartMouthinFlahProfeional
JoiningmultipleWF leintooneWFforiOdeploment
CreatinganacceileanimatedpreentationinFlah