Professional Documents
Culture Documents
Creating Your First Flash Professional CS6 Document - Adobe Developer Connection
Creating Your First Flash Professional CS6 Document - Adobe Developer Connection
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.
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:
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.
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.
Figure8.Preandholdthehi kewhileuingtheOvaltooltodrawacircleonthetage.
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).
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.
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.
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.
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).
Addingareplau ontoretarttheanimation
Inanearlierection,outoppedtheanimationfromloopingaddingastop()actiontothelatframeofthe
Timeline.Whentheplaheadreachethelatframe,itiintructedtotop,whichpreventitfromloopingacktoFrame
1.
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.
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