verticalflash

MacromediaFlashMXIntroductionMacromediaFlashMXisapowerfulWebauthoringapplicationusedtocreateanimation,interactiveenviromentsanddatadrivenapplicationsforuseonWebsites.
FlashMXisoneoftheleadingWebauthoringprogramsforcreatingvector-basedanimationsor"Flashmovies"forWebsites.
AworkingFlashdocumentshouldhavethefileextensionof.
fla.
AcompiledFlashdocumentexportedtowebisabreviatedasa.
swffile.
Flashcreatesvector-basedgraphicsratherthanbitmapgraphics.
Vectorgraphicsarecreatedusinglinesandcurves,whereasbitmapgraphicsaredescribedbypixelsofcolor.
Bitmapimagesareresolutiondependent;therefore,resizingabitmapimagecanleadtodistortion.
Vector-basedgraphics,ontheotherhand,aredrawnusingmathematicalformulas.
Resizingavector-basedimagemeanstheformulaisrecalculated,resultinginascaledversionoftheoriginalimageandnodistortion.
FlashMXsupportstheimportingofbitmapgraphics.
ThisfeaturegivestheWebdeveloperagreatdealofflexibility.
TheadditionofaFlashmovietoaWebsiteinvitesinteractivityandprovidesanopportunityforvisitorstohaveamoreengagingexperience.
NOTE:YoumusthavetheFlashMXapplicationtoopenthe.
flafilesfoundintheExamplessection.
A30-daytrialversionisavailableatMacromedia.
UsingLayersinFlashMXLayersarelikeclearsheetsofacetateorglass.
Layerscanbestackedontopofeachother.
Eachlayercanhaveitsownartwork,soundoractiononit.
Useasmanylayersasyouneedtokeepeverythingseparateandorganized.
Beconsistentwiththewayyouorderandnamelayers,sothatifyouhavetoputthe.
flaawayandworkonitdowntheroad,youwon'tbetotallylost.
Thisisagoodpracticetoadopt.
Suggestedlayerorderandlayernamesare:1.
Actions---anyframeactionsassignedcanallbehere.
2.
Labels---Namekeyframesthathaveactions3.
Sounds---Anysoundscanbeplacedinkeyframeshere.
4.
Object1(whateveryouhaveonthislayer)5.
BackgroundNamelayerswithshortmeaningfulnamesthatyouwillbeabletoidentifyataglance.
Suchas"redballbounce,"or"buttonhome.
"Thesearen'treadbyFlash,sotheyjusthavetohavemeaningtoyou.
NOTE:Youcanhaveasmanylayersasyouwant(orasyoursystemcanhandle).
Layersdonotaddtofilesize.
CreatingNewLayersThereareseveralwaystocreateanewlayer:Clickonthe"+"buttoninthelowerleftcorneroftheTimeline.
or,FromtheInsertmenu,chooseLayer.
or,Right–click(Windows)orControl+Click(Macintosh)onanexistinglayerandchooseInsertLayerfromthedropdownmenu.
viewsamplefileCreateaguidelayerbychoosingModify>Layerandselectingthe"guide"option.
Aguidelayerisusedtohelpindrawing.
Anylayercanbemadeintoaguidelayer.
Theartworkappearsinyourworkarea,butnotinthepublishedmovie.
Whenyouseethisiconnexttothelayername,thenitisaguidelayer.
LayerAttributesYoucanchangetheorderofthelayersbydraggingthemupordownintheTimeline.
TheiconsacrossthetopoftheTimelinecontroldifferentattributesofthelayers.
ThefirstchangesthevisibilityofthelayertoOfforOn.
Thisishelpfulifyoudon'tneedtoseethatlayertoworkonadifferentlayer.
EvenifyouhavethevisibilityofthelayerturnedOff,itwillstillshowupinthepublishedmovie.
Ifyouwantthelayertobevisible,butnotshowupinthepublishedmovie,changethelayertoaguidelayer.
Thepageicononthelayerwillthenchangetoa"t-squareshape"TheLockiconlocksthelayersothatyoucan'tmakechangesonit.
TheBoxwillchangewhateverartworkisonthelayerintoanoutline.
Itwillshowupastheartwork,notasanoutlineinthemovie.
Youcanalsochangetheheightofthelayer.
Thismaybenecessaryifyouhaveasoundfileonaframeandyouwanttoseethewholesoundwaverepresentation.
Tochangetheheight,Control+Clickonthelayer(Macintosh)orright-click(Windows)andchooseProperties.
AdjustthelayerheightintheLayerHeightboxatthebottomofthemenubox.
Exercise:Createanobjectonalayer,clickontheeyeandtestmovie.
Youshouldseethateventhoughthelayerisinvisible,theobjectshowsup.
(Inordertotestamovie,itmustbesavedfirst.
)Changetheobjecttoanoutline,anddothesamething.
Itshouldlookthesame.
Changethelayertypetoaguideandtest.
Eventhoughtheobjectisvisible,itwon'tshowupinthetestmovie.
CreatingColorsinFlashMXThereareseveralwaystoselectcolorwithFlashMX.
TheSwatchespaneldisplaysthe216WebsafecolorsandalsostorescustommixedcolorscreatedbytheMixerpanel.
ToopentheSwatchesandMixerpanel,fromtheWindowsmenuandthenSwatchesandthenMixer.
WhenworkingwithcolorsinFlash,youmaywanttoorganizetheSwatches,MixerandFillpanelsintoonewindow.
Thesethreepanelsareusedtogetherveryoftenwithcolors,andyoucansaveandrecallthispanellayout.
AddingaNewColortotheSwatchesPanelClickontheMixerpaneltab.
Selectthecolorswatchnexttothebucketsymbol.
ThisistheFillcolor.
SelectanothercolorfromthedropdownswatchesmenuorbyusingtheslidersfromtheRGBslidersontheright.
ThesesliderscanbeswitchedfromRGB(Red,Green,Blue)toHSL(Hue,Saturation,Luminance)orHEX(Hexidecimal)usingtheleftpointingarrowontheMixerpanel.
AdjustthetransparencyofthenewcolorwiththeAlphatextboxorslider.
Whenthecolorandtransparencyisset,selectAddSwatchfromtherightpointingarrowontheMixerpanel.
SwitchtotheSwatchespanel.
Thecoloryoucreatedisatthebottomofthecolorswatches.
NowyouhaveacustomswatchpalettethatyoucansaveandcallintootherFlashsites.
SavingaCustomSwatchesPanelSelecttheSwatchespanel.
Usethepull-downmenufromthetoprightarrowandchooseSaveColors.
Saveyourswatchesinyourchosendirectory.
AddingaNewGradientFillLet'smakeanewgradientthathasonesolidcolorandonetransparentcolor.
FromtheSwatchespanel,choosethegreenradialgradienttype.
(Youcanchangethetypeofgradientlater.
)FromtheupperrightarrowchooseDuplicateSwatch.
Toalteraportionofthegradient,selectoneofthecolorboxesunderthebarthatdefinesthegradient.
Next,usethe"colorfill"boxabovetochooseanothercolor.
Nowselecttheothercolorandchooseanewone.
Youcanchangethegradienttypefromthepull-downmenutocreatevarioustypesofgradients.
ChangethegradienttypetoLinear.
Nowlookatyourswatchesandyou'llseethenewgradientyoumadeattheendofthegradients.
Gradientcolorswatchescanonlybeusedinfills.
Transparentfillscanonlybeappliedtonewobjects.
Theywillnotreplaceafillalreadythere.
Youwillhavetoselectanddeletethefillbeforerefillingwiththetransparentcolor.
Thismighthavetobeatwo-stepprocess.
Ifthereisnostrokeonyourobject,addatemporaryonewiththeinkwelltool.
Usethattodefinetheareatobefilled,thenyoucandeletethestrokeagain.
Modifyingthegradient'ssize,positionandrotationinsideofafilledobject.
Makeashapeandfillitwithyournewlycreatedgradient.
Selectthe"filltransform"toolontheToolbox.
Clickonyourfilledshapeonthestage.
AcenterpointappearsinthecenteroftheshapeandwithaRadialfillacirculartransformmodifiersurroundstheshape.
Thesquarehandleisanadjustmenthandle.
LinearandBitmapfillswilladisplayacenterpointandtwoverticallinesoneithersideoftheshape.
Ontherightline,thesquareadjustmenthandleappears.
TheTransformFillhandlesallowyoutochangethesize,positionandrotationofthegradientfillinsidetheobject.
Whenyoudragfromthecenterpoint,thepositionofthefillwillmove.
Thesquareonthesidechangesthewidth,thecircledirectlybelowcontrolsscale,andtheothercirclebelowthatonecontrolstherotationofthefill.
Themousepointerwillchangewhenhoveringoveroneofthehandlestoindicatethefunction.
Trythiswithalinearfilltoseethedifference.
Inalinearfill,youcanmodifythesamepropertiesaswellasskeworslantbydraggingfromoneofthecorners.
BitmapFillsIntheFillpanel,chooseBitmapfromtheFillMenu.
ClickonabitmapthatappearsintheFillpanel.
YoucanmodifyaBitmapfillthesameasaLinearfill.
DrawinginFlashMXIfyou'refamiliarwithPhotoshoporotherdrawing,imagemanipulationandpaintprograms,thenFlashtoolswilllookfamiliar.
Let'sgooversomeofthedrawingmethodsuniquetoFlash.
OverlappingShapesWhenoneshapeoverlapsanotherandthetwoshapesareonthesamelayerandandarenotselected,theseobjectsmergeintooneobject.
Youcanstillselectonesectionoftheobject,butwhenyoumoveit,thepartoftheotherobjectthatwasoverlappedwillbeerased.
Exercise:Drawashapeonthestageinonecolor.
Drawanoverlappingshapeinanothercolor.
Selectoneofthecolorareasanddragtheshape.
Youseethatthepartoftheshapethatwascoveredbytheoverlappingshapeisgone.
Keepthisinmindwhenyou'recreatinggraphics.
Ifyoudon'twantthistohappen,puttheshapesondifferentlayers,groupthemormakethemsymbols.
PencilToolThePenciltoolworkslikearegularpenciltoolwithsomecooloptions.
ThePenciltooldrawsinthreemodes:Straighten,SmoothandInk.
ThesemodesappearintheOptionssectionoftheToolbox.
ChooseStraightenanddrawabox.
Thelinesyoudrawhavebeenstraightened.
Trythiswiththeothertwomodes.
Smoothmakesnicecurvesaveragedfromthecurveyoudrew.
Inkleavesthelineasyou'vedrawnit.
SelectingedgesandlinesinFlashMXToselectalinesegmentorthefillofanobject,usetheArrowtoolandclickonceoverthelineorfill.
Doubleclickingonalinewillselectallthecurvesinthatline.
Choosetheselection(Arrow)toolanddeselectanyshapesorlinesthatareonthestage.
Withtheselectionarrow,moveitoveroneoftheshapeedges.
Thepointerarrowchangeswhenyou'reovertheedgeofashapethathasn'tbeengroupedormadeintoasymbol.
Ifit'soveracurvedlineorcurvededgeofafill,itisapointerwithacurvenexttoitandwillmovethecurveifyoupressanddrag.
Overacornerorendpoint,itisapointerwithacorner,andwillmovethepointorcornermaintainingthestraightlines.
Thiswillpullbothstrokeandfillalike.
Toreshapelinesandfills,selectthem.
UsetheSmoothorStraightenmodefromtheModifyMenuorfromtheOptionssectionoftheToolbox.
(YoucanadjusttheamountofsmoothingorstraighteningbychoosingPreferencesfromtheEditmenu.
)Control-drag(Windows)oroption-drag(Macintosh)alinetocreateanewcornerpoint.
OptimizingShapesThefewercurvedsectionsinashape,thelowertheamountofdataFlashhastomaintainonthatshape.
OptimizingshapesishighlyrecommendedtoreducefilesizeandincreaseplaybackspeedoftheFlashmovie.
Toreducetheamountofcurvesinanobject,chooseOptimizefromtheModifymenu.
TheOptimizeCurvesdialogboxallowsyoutoreducethenumberofcurvescontainedinashape.
Observetheshapeasyousmoothitandstopbeforeitchangestheshapeunacceptably.
Ifit'sasimpleshape,thenumberofcurvesmaynotchangeatall.
Optimizingallobjectsinamovie,cansignificantlyreducethemoviefilesizeandincreasetheplaybackspeed.
Exercise:Drawashape.
SelectitandchooseOptimizefromtheModifymenu.
Usetheslidertoadjusttheamountofsmoothingtoapplytothecurve.
(YoucanalwayschooseUndofromtheEditmenu.
)Theoption'Usemultiplepasses'willrepeatthesmoothingprocessuntilnomoreoptimizingispossible.
ThisisthesamethingaschoosingOptimizefromtheModifymenuoverandoveragain.
PenToolIfyouarefamiliarwithAdobeIllustratororPhotoshop,MacromediaFreehandorFireworks,you'veseenthistoolbefore.
ThePentoolallowsyoutoplacepointsandcreatecurvesandlinesthatarerepositionable.
Exercisetocreateastraightline:SelectthePentool.
Clickonceanywhereinthestagewindow.
Clickagain,andastraightlineiscreatedbetweenthetwopoints.
Exercisetocreateacurvedline:PositionthePeniconwhereyouwantittobeginonthestage.
Pressandholdthemouseandslideinthedirectionyouwantthecurvetogo.
You'llseetangenthandlesthatappearthatyoucanalsoselectandreposition.
Release,andeitherrepeatorjustclickwhereyouwantthecurvetoend.
Exercisetomodifyacurve:Usethesub-selectiontooltoselectapointoritsselectionhandlesanddragthemtoanewposition.
Importantpointsaboutcurves:Tochangeacurvepointtoacornerpoint(oranchorpoint),usethePentoolandjustclickonthepoint.
Tochangeacorneroranchorpointintoacurvepoint,usethesub-selectiontool,theoptionkeyanddrag.
Todeleteacornerpoint,clickonthepointwiththePentool.
Todeleteacurvepoint,doubleclickonthepoint.
Fewerpointsmeanssmallerfilesize.
Acurvepointisahollowcircle.
Acornerpointishollowsquare.
BrushToolTheBrushtoolisusedtoaddcolortoyourmovie.
TheBrushtoolhasmodifiersforBrushSize,BrushShapeandModes.
ThesemodifiersarelocatedintheOptionssectionoftheToolbox.
TheModesfortheBrushtoolprovidedifferentwaysofpainting.
TheModesare:PaintNormal-isjustlikeyouexpectPaintFills-leavesstrokesuntouchedPaintBehind-paintsinbackofPaintSelection-onlypaintsselecteditemPaintInside-paintsonlythefillyoustartinIfyou'reluckyenoughtohaveatabletandpressure-sensitivepen,thenanotheroptionisavailable:thePressuremodifier.
ThePressuremodifierallowsyoutovarythethicknessofthelineyoudraw.
Exercise:Createanobjectthathasafillandstroke.
SelecttheBrushtoolandtrythedifferentpaintingoptions.
TOPTopofFormWasthispageusefulBottomofFormMakingButtonsinFlashMXOneofthemostpowerfulfeaturesofFlashMXistheinteractivityyoucanbuildintoyourWebsite.
Thebuttonsymbolissomethingyou'lluseoften.
Buttonscanbeassimpleorascomplexasyouwant.
Buttonscancontainmoviesandactionsinside.
Buttonsareactuallyinteractivemoviesconsistingoffourframes.
Thefirstthreeframesdefinethreestatesofthebutton,whilethefourthframedefinesthehitarea,ortheareathatis"hot.
"Thefourframesare:1.
Up--whatbuttonlookslikeininactivestate,whenthepointerisnotoverthebutton;2.
Over--whatthebuttonlookslikewhenthepointerisoverit;3.
Down–whatthebuttonlookslikewhenthemouseisclickedonit;and4.
Hit--theareathatis"hot"thatwilltriggerthebuttonstates.
Exercisetobuildasimplebutton:FromtheInsertmenu,chooseNewSymbol.
IntheSymbolPropertieswindowthatopens,chooseButtonastheBehaviortype.
Nameit:b,simplebutton.
ClickOK.
Thisopensupthesymboleditingwindow.
Youwillsee4labeledframesintheLayersandTimelinearea.
Theseframesrepresentthe4statesforyourbutton:Up,Over,Down,andHit.
Thisiswhereyouwillcreatetheartworkforthedifferentstatesforyourbutton.
Clickinthe"Up"stateframe.
Onthestage,drawabluefilledcircle.
TheUpstateisdone.
Tocreatethe"Over","Down"and"Hit"states,selecteachframe(state)andfromtheInsertmenuchooseKeyframe.
Thiswillputthelastkeyframe(Upstateframe)intheselectedframe.
Thenyoucangobacktoeachnewframeandchangethebutton.
Wewantthe"Over"stateofthebuttontolooklikethe"Up"stateexceptwithadifferentfillcolor.
Selectthe"Over"stateframe.
Ifyouclickdirectlyontheframe,itwillselectallobjectsinthatframe.
Ifyouclickovertheframe,onthestatelabel,itwillgotothecorrectframe,butnotselecttheobjectsinthatframe.
Iftheobjectisnotselected,choosetheselectionarrowandselectthebluefilledcircleonthe"Over"state.
Whileitisselected,chooseanewcolorbythefillbuckettochangethefillcolor.
Nowselectthe"Down"stateframe.
Let'smaketheDownstatealittledifferent.
ChangethefillcolortoyellowthesamewayasintheOverstate.
Addsomelittledasheslikeradiatingraysfromthesunaroundthecircle.
Let'sleavethe"Hit"statethewayitis.
ClickontheScene1iconintheupperlefthandcorneroftheworkarea.
IftheLibrarywindowisnotopen,selectWindow/Library.
(Thekeycommandwillbeindicatedinthepull-downmenu,ifyou'dratherusekeysthanthepull-downmenusallthetime.
)ThesimplebuttonyoumadeshowsupintheLibrarylist.
Selectthebuttonandthe"Up"stateofthebuttonwillappearintheupperportionoftheLibrarywindowalongwitharightpointingarrow.
Clickthisrightpointingarrowandyou'llseeallfourstatesofthebuttonplayed.
Dragthisbuttonontoyourstage.
Toseeyourbuttoninaction,fromtheControlmenu,selectEnableSimpleButtons.
Rolloveryourbuttonandclickonit.
Itshouldturnadifferentcolorwhenyourolloverit,andturnintoayellowsunwhenyouclickonit.
SeeExample1intheFlashExamplessectionofthistutorialforthefinishedproduct.
Exercisetocreateabuttontoperformanaction:OneofthemostcommonbuttonactionsistocallupadifferentURL.
We'llputthisactiononthebuttonwejustmadeandplacedonthestage.
FromtheControlmenuturnoffEnableSimpleButtonssoyoucaninteractwiththebuttononthestagewithouttestingthemovie.
(EnableSimpleButtonswillnotshowyoumoviesinkeyframes.
)FromtheWindowmenu,chooseActions.
ThiswillopenuptheObjectActionswindow,oneofthemostpowerfultoolsinFlashMX.
CheckandseethatitissetonNormalmodeandnotExpertModebyclickingonthearrowintheupperrightcorner.
(Normalmodegivesyoucluesandblankstofillinwiththepropersyntax.
Expertmodeallowsyoutotypeinyourownsyntax.
)Forourpurposes,wewillchooseBasicActionsfromthelistonthelefthandside.
Scrollthroughthelistandselect"GetURL".
Eitherdoubleclickonit,ordragitovertotherighthandside.
Itwillshowupwiththepropersyntax,andanareatofillinonthebottomoftheObjectActionswindow.
(Thisactiondefaultstothe"onrelease"action.
Ifyouwanttochangethis,clickonthatlineintheObjectActionswindow,andyou'llseeanewsetofoptionsforthatlineonthebottom.
)With"GetURL"selected,FlashasksyoufortheURLyouwantthisbuttontodirecttheuserto.
Ifyoudon'thaveaURLtouse,typeinthisone:http://www.
utexas.
edu/Nowyou'rereadytotestyourbutton.
Thereareseveralwaystodothis:fromtheControlmenu,chooseTestMovieorfromtheFilemenu,choosePublishPreview/HTMLorfromtheFilemenu,choosePublishPreview/Flash.
Testthebuttonbyrollingoveritandclickingonit.
SeeExample2intheFlashExamplessectionofthistutorialforthefinishedproduct.
Exercisetocreateafancierbutton:Selecttheb,simplebuttonintheLibrarywindow.
ClickontheOptionsarrowandfromthedrop-downmenuselectDuplicate.
Namethisbutton'copyb,moviebutton'.
LeavethebehaviorasButton.
ClickOK.
CreateamovietoplaceintheDownstateofthebutton.
First,let'scopythesunandraysfromtheDownstateofthesimplebutton.
ClickontheSymbolsiconintheupperrighthandcornerofthestage,scrolldownandchooseyouroldbutton.
Thesymboleditoropens.
ClickontheDownframe,selectthesunandrays,andfromtheEditmenu,chooseCopy.
FromtheInsertmenu,chooseNewSymbol.
SelectMovieClipandnameit'm,sunny'.
ClickOK.
Thesymboleditorisnowopen.
FromtheEditmenu,choosePasteinPlace.
Youshouldseeyoursunfromthe"Down"stateofthesimplebutton.
FromtheInsertmenu,chooseKeyframesatframe5andframe10.
Gotoframe5.
Scalethesunupalittle(i.
e.
,maketheimagebigger).
FromtheModifymenu,chooseTransformandthenScale.
Graboneofthesquarehandlesandmaketheimagealittlebigger.
Nowletsmakeatweenbetweenkeyframe1and5,and5and10.
Clickonaframebetween1and5.
TheareaontheTimelineturnsblack.
NowopentheFramespanel.
FromtheWindowmenu,choosePanelsandthenFrame.
ChooseShapeTweeningfromthepull-downmenu.
(Shapetweeningisforobjectsthathavenotbeenturnedintosymbolsorgroupedtogether.
Youcantellifit'sarawgraphicbytheselection.
Itwillselectandfilltheobjectwithblackandwhitenoiseifitsstillraw.
Groupedobjectsandsymbolswillhaveaboundingboxinstead.
Theshapetweenisrepresentedbyalightgreenbackgroundwithasolidlinearrowontop.
Dashedlinesmeanssomethingisnotright.
)Thetweenshouldmakeasmoothupwardscalebetweenframe1and5.
Dothesamethingbetweenframe5and10.
Let'smakethisevenmorefun.
Addalayerabovethescalingsunlayer.
Nameit'spiral.
'Double-clickontheLayertochangethelayername.
Insertakeyframeonthefirstframe.
Selectthefirstframeonthespirallayeranddrawadarkeryellowororangespiralontopofthesun.
SelectthespiralandmakeitasymbolbychoosingConverttoSymbolfromtheInsertmenu.
Nameit'm,spiralmovieclip.
'Thebehaviorismovieclip.
CreateaKeyframeinframe10.
Selectframe10whichstillcontainstheunconvertedgraphic.
Selecttheimage,deleteitanddragthespiralsymbolfromtheLibrarywindowintoitsplace.
Youcanusethearrowkeystolineupthecentercrosshairs.
Itshouldbeinregistrationwiththefirstoneonthefirstframe.
Let'smakethespiralrotateonecompleterevolutionfor10frames.
Selecttheareabetweenframes1and10andopentheFramepanel(fromtheWindowmenu,chooosePanelsandthenFrame).
IntheTweeningboxselectMotion.
InMotionTweening,youcanindicatethedirectionoftheRotation.
SelectCCWforcounter-clockwise.
Inthe"times"box,put1for1revolution.
Motiontweensworkonsymbols.
ThetweenontheTimelinewilllookblue,withasolidlinearrow.
Createanewlayerandmoveittothetop.
Callit'actions.
'Ontheactionslayer,selectframe10andinsertakeyframebychoosingKeyframefromtheInsertmenu.
ChooseWindow/Actions.
TheFrameActionswindowopens.
SelectBasicActionsand"GoTo.
"Itwillbeanactiononthisframesendingittoaframenumberorlabel.
Itdefaultstoframe1whichisfineinthiscase.
Nowthismoviewillloopendlessly.
(ThetimelinesinmoviesareindependentoftheTimelineonthemainstage,soframe1isuniquetothismovie.
)PuttingthemovieintothebuttonClickonthesymbolsiconintheupperrighthandcornerandselect'copyb,moviebutton.
'Youarestillinthesymboleditor,butyouarebackintheduplicateofthefirstbuttonyoumade.
GototheDownstate(frame)anddeletethesungraphic.
Fromthelibrary,draginthecopyb,moviebuttonyoujustfinishedmaking.
Youcanlineupthecentercrosshairswiththearrowkeys.
GobacktoScene1(upperleft).
Nowyourmoviebuttonhasananimateddownstate.
Testyourmovie.
SeeExample3intheFlashExamplessectionofthistutorialforthefinishedproduct.
Congratulations,youhavemadeabuttonwithamovieinit!
UsingSymbolsinFlashMXOneofthemostefficientwaystouseFlashMXistousesymbolswheneveryouneedmorethanoneoccurrenceofagraphic,oranimationorsound.
Asymbolisagraphic,button,movieclip,orsoundthatyoucreateonce,thenreuseinyourmovieorothermovies.
FlashallowsyoutohaveanitemsavedintheLibrarythatyoucanpulloutontoyourstageoverandoveragainwithoutbustingyourfilesizebudget.
Youcanalsomodifycertainparametersoneachinstancesuchasscale,rotation,alphaandoverallcolor.
Ifyoumodifythesymbol,itwillchangealltheinstances,butifyoumodifytheinstance,thenjustthatinstanceisaffected.
SymbolTypesMovieClip-Asymbolthatcanincludeanimation(s),buttons,graphics,othersymbols,andoperatesindependentlyofthemainstageTimeline.
Button-Asymbolthatallowsinteractivityandthatrespondstomouseclicksorrollovers.
Buttonscanalsohavemoviesplacedinoneofthestates.
Graphic–AsymbolthatisusedforstaticimagesoriscontrolledbymainstageTimeline.
Interactivecontrolsandsoundswon'tworkinthissymbol.
Sound-TheSoundsymboliscreatedautomaticallywhenyouimportasound.
Font-CreatethistypeofsymbolfromtheLibrarywindowoptionssoyoudon'thavetoembedfontsinyoursite.
NamingconventionsTheLibrarystoressymbolsinalphabeticalorder.
Inordertokeepsymboltypesgroupedtogether,nameeachsymbolusingthefirstletterofthetypeofsymbolthatisitfirst,followedbyacomma,thenthenameofthesymbol.
Whenyouareworkingwithmanysymbols,thishelpsyoufindtheparticularsymbolquicklyandconsistently.
Example:g,balloonm,balloonmovies,balloonsqueakysoundb,balloonbuttonac,balloonmovementactionscriptinmovieExercise:Createasimpleshapeonthestage,suchasaredballoon.
Let'ssavethisshapeintotheLibrarybymakingtheballoonagraphicsymbol.
UsingtheArrowtool,drawaselectionboxaroundthewholeballoon.
Withitselected,fromtheInsertmenu,chooseConverttoSymbol.
ASymbolPropertiesdialogboxappearswith3Behavioroptions.
FlashdefaultstotheMovieClipbehavior.
SelecttheGraphicbehavior.
Nameyoursymbol:g,balloon.
ClickOK.
Deletetheballoonfromthestage.
FromtheWindowmenu,chooseLibrary.
You'llseeyourballoonsymbolintheLibrarywindow.
Dragtheballoonsymbol(g,balloon)outofthelibraryontothestage.
Nowyouhavean"instance"oftheballoononthestage.
Let'schangetheappearanceoftheballooninstance.
Usingthepropertiesmenu,changethealphato50%,changethetint,andchangethescaleandrotation.
You'llseetheoriginalsymbolisunaffected.
Youcankeeppullinginthesamesymboloverandoveragainbutchangeeachinstanceanywayyouwant.
Theseattributescanalsobechangedfordifferentkeyframes.
Note:Ifyouplanonanimatingeachinstanceindependently,puteachinstanceonaseparatelayer.
Animationrequires"tweening",whichwillonlyworkononesymbolononelayeratatime.
MakingamoviesymbolfromtheballoongraphicsymbolFromtheInsertmenu,chooseNewSymbol.
ChooseMovieClipastheBehaviorifit'snotalreadyselected,andnameyoursymbol:"m,balloonmovie.
"ClickOK.
Moviesymbolshavetheirowntimeline.
Thiscangetconfusing.
Youarenowinthesymboleditor,whichlooksjustlikethestage(becauseithasits'ownindependenttimeline).
Onewayyoucantellyouareinsymboleditingmodeisbylookingattheupperlefthandcorner,whichwillhavethemoviesymbolyoujustnamedafterthescenename.
IntheLibrarywindow,dragthe"g,balloon"symboloutontothem,balloonmoviestage.
Selectframe10onyourtimelineandthenfromtheInsertmenu,choosingKeyframefromthetopmenu.
(Keyframewillduplicatethelastkeyframewithsomethinginit.
)Movetheanimationscrubbertothesecondkeyframeandselecttheballoonorclickonthatframe(thiswillpickeverythinginthatkeyframe).
Modifytheballooninstancebyrotation,scale,alphaand/orcolor.
Nowweneedtocreatea"tween"betweenthefirstkeyframeandthesecondkeyframe.
Todothis:ClickintheTimelinesomewherebetweenthefirstandsecondkeyframes.
Inthepropertyinspector,selecttheMotionoptionfromtheTweendropdownmenu.
Youcanonlyusethemotiontweenonsymbols.
Youcanalsoaddautomaticrotation,easing,andotheroptionsatthispointintheframewindow.
ThereshouldbeanarrowdisplayedintheTimelineareabetweenthetwokeyframes.
Ifyouselectsomethingelse,themotiontweenshouldshowuponalightbluefield.
(Shapetweensaregreen.
)Nowifyouscrubthroughtheframes,you'llseetheballoonchangingsmoothlyfromframetoframe.
Let'smakethisactionloopcontinuously.
Todothat,let'sassignanactiontothelastkeyframe,tellingittoreturntothefirstframeofitsTimelineagain.
Clickonthelastframeandchoosewindow>actions,theFrameActionsdialogboxappears.
MakesureyouareinnormalmodeintheFramewindow.
(checkupperrightpull-downarrow)Clickonthe"Actions"bookdisplayactioncatagories,selectthe"MovieControls"bookandfindGoTo.
Itwilldefaulttoframe1,whichisfine.
Now,themoviewillloopcontinuously.
SeeExample4intheFlashExamplessectionofthistutorial.
ButtonSymbolNowwewillmakeabuttonusingboththeg,balloonandthem,balloonmovie.
Thebuttonsymbolhas4defaultstates:Up,Over,DownandHit.
Thesestatesreflectwhat'shappeningwhenthebuttonisdoingnothing,whenthemouseisoverit,whenthemouseclicksonit,andthehitzoneforthebutton.
Gobacktothemainstage.
FromtheInsertmenu,chooseNewSymbol.
ChooseButtonoptionandnameit:'b,balloon.
'Youarenowinthesymboleditingmodeagain.
Selectthe"Up"frame.
Dragtheg,balloonsymbolfromtheLibraryontothestage.
Thisiswhatthebuttonwilllooklike"atrest.
"Forthe"Over"state,wewanttheexactsameposition,butanothercolor,sowe'regoingtocopythe"Up"frameandpasteitintothe"Over"frame(or,clicktoselectthe"over"frameandhitF6,oryoucanalsojustchooseKeyframefromtheInsertmenu,anditwillcopythecontentsofthelastkeyframe).
changethecoloroftheballoonusingthepropertyinspector.
Nowwhenyourolloverthisbutton,itwillchangecolor.
Next,selectthe"Down"keyframearea.
FromtheInsertmenu,chooseKeyframeanddraginm,balloonmoviefromtheLibrary.
Forthe"Hit"area,itdoesn'tshowatall,soyoucanusethesymbolordrawahitareainthisstate.
Yourbuttoniscreatednow.
Let'stestit.
GobacktoScene1anddragyournew"b,balloon"outontothestage.
TestyourbuttonbychoosingTestMoviefromtheControlmenu.
SeeExample5intheFlashExamplessectionofthistutorial.
Congratulations!
You'vemadeamovie,andabuttonwithamovieinit!
AnimatinginFlashAnimationinFlashiseasy!
Let'slookatacoupleofdifferentwaystoachieveanimationinFlash.
Webuilttweensinthe"ButtonandSymbolsmaking"tutorial,butlet'sdoaquickreview.
ShapeTweenDrawashapeatframe1.
(Tryasimpleshape,likeaheart.
)Insertablankkeyframeatframe30intheTimeline.
Drawanothershape(likeastar)inadifferentcoloratframe30.
Thetwoshapesshouldbeonthesamelayer.
ClickontheareabetweenthetwoframesintheTimeline.
Theareawillturnblack.
Now,opentheFramespanelandchooseShapeTween.
Alightgreenbarwithasolidarrowwillappearbetweenthetwoframes.
WhenyouscrubbackandforthintheTimeline,theheartmorphstothestar,andchangescolor.
SeeExample6intheFlashExamplessectionofthistutorialforafinishedproduct.
MotionTweenCreateasymbolorpulloneoutoftheLibraryontoanewlayeronframe1.
Insertakeyframeatframe30.
Thiswillkeepthesymbolonframe30.
Modifythesymbolbychangingtheposition,scale,rotation,andalpha.
(UsetheEffectspanelforthealpha).
Selecttheareabetweentheframesonthetimelineanditwillturnblack.
OpentheFramesPanelandchooseMotionTween.
Alightbluebarwithasolidarrowwillappearbetweenthetwoframes.
WhenyouscrubbackandforthintheTimeline,thesymbolwillmove,scale,rotateandthealphawillchange.
MotionTweenhasotheroptions.
Youcanchoosethedirectionoftherotationfromthepull-downmenuintheFramesPanelandhavethetweenautomaticallyrotatetheobjectthenumberoftimesyouspecify.
SeeExample7intheFlashExamplessectionofthistutorialforafinishedproduct.
Animationscanbereused.
Forexample,let'ssayyoucreateananimationinamoviesymbolofabouncingball.
YoucouldpullthatballoutoftheLibraryasmanytimesasyourcomputercanhandle.
Youcanputthemallonindependentlayers,animatetheposition,scale,tint,alpha,etc.
AnimatingalongaPathLet'ssayyouwantasmallairplanetofollowapathfromthegrounduptotheclouds.
Createamoviesymbolofalittleairplanewithananimatedpropeller.
Dragthesymboloutontothestage.
Youmaywanttoaddarunwayandsomecloudsintheskytomakeyouranimationmorecomplete.
SelecttheairplanelayerandfromtheInsertmenu,chooseMotionGuide.
ThiscreatesanewlayercalledaGuideLayerontopoftheairplanelayer.
InsertanotherkeyframeintheGuide:airplanelayeratthepointwhereyouwantthemotiontostop.
UsingthePenciltool,drawacurvethatyouwanttheairplanetofollowfromtherunwaytotheclouds.
(Itwon'tshowupinthemovie)Selectthefirstkeyframeintheairplanelayer.
SelecttheArrowtoolandmovetheairplanetothebeginningofthecurve.
Nowselectthelastkeyframe.
Movetheairplanealongthecurvetotheendofthecurve.
Double-clickthefirstkeyframetoopentheFramepanel.
ChooseMotionfromtheTweeningmenuandcheckSnap(snapstheregistrationpointtothepath).
ScrubalongtheTimeline,andtheairplanewillfollowthecurvefromfirsttolastframe.
Whenyoupublish,theplane'spropellerswillmove.
(MovieanimationsdonotdisplayinFlashonthestage.
)SeeExample8intheFlashExamplessectionofthistutorialforafinishedproduct.
FramebyFrameAnimationThisisthemostfile-sizeintensivemethod,butsometimesit'stheonlywaytogettheeffectyouwant.
YoucanturnonaniftyfeaturecalledOnionSkinningtoseesurroundingframessoyoucanmoreaccuratelydrawyourframe.
Exercise:Inframeone,drawadog.
Inframeseven,fromtheInsertmenu,chooseKeyframe.
Thiscopiesthedogfromframeonethroughframeseven.
Insertanewlayerabovethedoglayer.
Youcancallit"feet.
"ClickontheOnionSkiniconfromtheoptionsundertheTimeline.
Youwillseeafadedversionofthefirstframe.
Clickandmoveeachofthedog'slegs.
Ifyoulike,youcancontinuetodothisforanotherfewframesfortheeyelidsandthetail.
TurnofftheOnionSkinbutton.
Nowscrubthroughyouranimation.
Younowhaveadancing,tail-waggingwinkingdog.
SeeExample9intheFlashExamplessectionofthistutorialforafinishedproduct.
UsingSoundinFlashMXThereareseveralwaystousesoundinFlashMX.
Youcanloopsoundstoplaycontinuously,independentofthetimeline,orsynchronizeyoursoundstoananimation.
YoucanimportandedityoursoundsintheSoundPanel.
ImportingImportsoundsintoFlashbychoosingImportfromtheFilemenu.
ThefollowingaudiofileformatscanbeimportedintoFlash:WAVAIFFMP3IfyouhaveQuickTime4orhigher,youcanalsoimportthesefileformats:SoundDesignerII(Macintosh)SoundOnlyQuickTimeMovies(MacintoshandWindows)SunAU(MacintoshandWindows)System7Sounds(Macintosh)WAV(MacintoshandWindows)FlashstoresaudiofilesintheLibraryasasymbolalongwiththegraphics,moviesandbuttons.
Soundfilesareindicatedbyaloudspeakericon.
Becausethesoundisasymbol,youonlyneedonecopyofitandyoucanuseitinmanywaysinyourFlashmovie.
IntheLibraryandontheTimeline,audiofilesarerepresentedassoundwaves.
TwotypesofsoundsinFlash--eventsoundsandstreamsoundsEventsoundsmustdownloadcompletelybeforetheystartplayingandtheywillcontinueplayinguntilexplicitlystopped(usuallybyastopaction).
Eventsoundsareassociatedwithaneventsuchasamouseclick,andareindependentoftheTimeline.
Streamsoundsbeginplayingassoonasthere'senoughdatatoplay.
Thesesoundsaresynchronizedtothetimeline.
Flashforcestheanimationtokeepinsyncwiththesound.
Ifitcan'tdrawframesfastenough,Flashwilldropframestokeepthesoundinsync.
EditingwiththeSoundPanelTheSoundPanelallowsyoutomodifythepropertiesoftheselectedsound,forexample:specifyifthesoundisanEventorStreamstartanewsound,orStopthesoundapplyeffectstothesounds,suchasNone(whichstripsanypreviouseffectsoffthesound),FadeInorOut,LefttoRight,etc.
IfyouchooseCustom,youcanmodifytheinandoutpointsofthefade,theduration,etc.
inthewindowthatopensup.
Clickontheboxesatthecornersofeachchannelandalsoaddpointsalongthelinebyclicking.
Exercise:ImportasoundfilebychoosingImportfromtheFilemenu.
Youcandownloadasample.
wavfilenamedslide_whistle_3x.
wav.
IfyouhaveFlashyoucandownloadthefinishedsound.
flafile.
Ifyoudon'thaveFlash,a30-daytrialversionisavailableatMacromedia.
OpentheLibraryPanel,andclickonthesoundsymbolyoujustimported.
YouwillseeitintheLibrarywindowwithaplayarrow.
YoucanlistentothesoundyoujustimportedbyclickingonthearrowatthetoprightoftheLibrarywindow.
Nameandselectlayer:SoundsAddkeyframesatframe1andframe45(orsomewhereontheTimelinepastthedurationofthesound).
It'snotnecessarytodothis,butitgivesyoualookatthefileintheTimeline.
Dragthesoundontothestage.
Youshouldseeitonthelayerasawaveform.
Youcangetabetterlookatthisbyincreasingtheheightofyourlayer.
FromtheModifymenu,chooseLayer.
Atthebottomofthiswindow,youcanchangethelayerheight.
Changeitto200%andclickOK.
OpentheSoundPanel.
SelectthesoundontheTimeline.
TheinformationaboutthatsoundfilewillshowupintheSoundPanel.
Itwillalsobevisibleinthetoppull-downmenu.
Ifyouhaveothersoundsimported,theywillbeinthemenualso.
Youcanchangethesoundfileyou'reeditingfromhere.
Directlyunderthatyouwillseethesoundfileinformation,MHzandfilesize.
YoucanapplydifferenteffectstoyoursoundNone-choosingthiswillremoveanypreviouseffectsLeftchannelRightchannelFadelefttorightFaderighttoleftFadeinFadeoutCustom–whenyouchoosethis,anotherwindowwillopen,allowingyoutoeditbothaudiochannels.
Theeditbuttonopensupthesameaudiochanneleditor.
Chooseeacheffect,opentheeditorandlookateacheffect.
Ifyouclickinoneofthechannels,itwillchangetoCustom,buttheseeffectscanbeusedasstartingpointstogettheeffectyouwantorusethemasis.
Thebestwaytogetafeelforthesoundeditoristoapplyeacheffecttoyoursound,listentoitandtrysomethingsinthecustomeffecteditor.
Belowtheeffectspanelisthesyncmenu.
Ithasthefollowingoptions:Event–associatedwithspecificactions,nottiedtothetimeline(likeasoundaccompanyingamouseclick)Start–sameasEvent,butwillcreateanewinstanceofthatsoundifitisalreadyplaying.
Stop–stopsthespecifiedsoundStream–syncsthesoundwiththeanimation,forcestheanimationtoplayatthesamerateasthesound,droppingframesifnecessary.
Youcanloopthesoundthenumberoftimesyoutypeinthebox.
Don'tloopstreamingsound;itwillincreaseyourfilesizedramatically.
Havefun!
SavingandPublishinginFlashMXSavingFlashmoviesTosaveyourworkingsitewithallitslayers,animations,etc.
fromtheFilemenu,chooseSave.
FlashwillsaveitasaFlashmoviewitha.
flaextension.
ThisissimilartoPhotoshopwhereyousaveyourworkingsitewithallitslayers,channelsandtextasa.
psdfile.
Archivethisfile.
Whenyou'rereadytoshowyourcreationtotheworld,youmustpublishorexportyour.
flafileintoafileformatthatwillplaybackontheWeborbeviewedasastillimageoraseriesofimages.
PublishingFlashmoviesontheWorldWideWebOneofthemostpopularwaystomakeyourmultimediaprojectavailabletotheworldisbyputtingitontheWorldWideWeb.
AneasywaytoaccomplishthisisbychoosingPublishSettingsfromtheFilemenu.
ThePublishcommandcreatestheFlashPlayerfile(SWF)andtheHTMLdocumentthatinsertsyourFlashPlayerfileintoaWebbrowser.
TopublishyourFlashproject,firstclickPublishthenOK.
Thisdialogboxgivesyoutheopportunitytocreatedifferentfileformats--GIF,JPEG,PNG,andQuickTime--andtheHTMLneededtodisplaytheminthebrowserwindow.
Thesealternativeformatsenableabrowsertodisplayyourmovie'sanimationandinteractivityforuserswhodon'thavetheFlashPlayerinstalled.
BecreativeandhavefunwithFlash!
http://www.
utexas.
edu/learn/flash/index.
htmlhttp://iea.
fmi.
uni-sofia.
bg/it/it_2002/flash5/index.
htmlhttp://www.
macromedia.
com/devnet/mx/flash/learning.
htmlhttp://www.
flashkit.
com/tutorials/http://www.
flashkit.
com/tutorials/Flash_Kit/http://www.
egret.
net/flash_examples.
htmhttp://www.
ori.
org/~kenl/flashstuff.
htmlhttp://www.
debwebonline.
com/dwflash.
htmhttp://www.
powersolution.
com/2001/10/services-flash.
shtmlhttp://www.
brazen.
co.
nz/design/flash.
htmhttp://iat.
ubalt.
edu/moulthrop/flashEx/http://www.
jwdc.
com/jwdc/flash.
htmlhttp://www.
site-maker.
com/flash-site-maker.
htmhttp://www.
deitel.
com/books/wirelessHTP1/flash_multimedia/ch31/examples.
html