YISHUN SECONDARY SCHOOL

WeSeek,WeStrive,WeSoar

MacromediaFlash
Tutorial

Contents:
1. WhatisMacromediaFlash
2. ToolsPanel
3. Interface
4. MotionTween
5. TweeningSimultaneousmotionandscaling
6. FadingwithAlpha
7. Changingobjectcolormidtween
8. MotionGuide
9. ShapeTween
10. Texttotexttweening
11. Mask&Masking

WhatisMacromediaFlash
Flashisanauthoringtoolthatdesignersanddevelopersusetocreatepresentations,applications,
andothercontentthatenablesuserinteraction.Flashprojectscanincludesimpleanimations,
videocontent,complexpresentations,applications,andeverythinginbetween.Ingeneral,
individualpiecesofcontentmadewithFlasharecalledapplications,eventhoughtheymightonly
beabasicanimation.YoucanmakemediarichFlashapplicationsbyincludingpictures,sound,
video,andspecialeffects.

Interface
ThisishowFlashlookslikewhenyoulaunchit.

v YouhavetocreateaNewDocumenttostart2DAnimtion.
v ThereistwowaystocreateNewDocument:
ClickonFileNew
orClickatFlashDocument

(ThisishowFlashlookslikeafteryoulaunchit)

ThetoolsintheToolspanelletyoudraw,paint,select,andmodifyartwork,aswellaschange
theviewoftheStage.

Toolspanel

TheTimelineorganizesandcontrolsadocument'scontentovertimeinlayersandframes.
FramesLikefilms,FlashdocumentsdividelengthsoftimeintoFrames.
Layerislikemultiplefilmstripsstackedontopofoneanother,eachcontainingadifferentimage
thatappearsontheStage.
ThemajorcomponentsoftheTimelinearelayers,frames,andthePlayhead.

Playhead

Layer

Frames

TheStageistherectangularareawhereyouplacegraphiccontent,includingvectorart,text
boxes,buttons,importedbitmapgraphicsorvideoclips,andsoonwhencreatingFlash
documents.TheStageintheFlashauthoringenvironmentrepresentstherectangularspacein
MacromediaFlashPlayerorinawebbrowserwindowwhereyourFlashdocumentappears
duringplayback.YoucanzoominandouttochangetheviewoftheStageasyouwork.

TheStage

ThePropertyinspectorsimplifiesdocumentcreationbymakingiteasytoaccessthe
mostcommonlyusedattributesofthecurrentselection,eitherontheStageorintheTimeline.
YoucanmakechangestotheobjectordocumentattributesinthePropertyinspectorwithout
accessingthemenusorpanelsthatalsocontroltheseattributes.
Dependingonwhatiscurrentlyselected,thePropertyinspectordisplaysinformationand
settingsforthecurrentdocument,text,symbol,shape,bitmap,video,group,frame,ortool.When
twoormoredifferenttypesofobjectsareselected,thePropertyinspectordisplaysthetotal
numberofobjectsselected.

MotionTweening
Motiontweening,putsimply,ismovinganobjectfrompointAonthestagetopointBonthestage.
Simplemovementwithmotiontweening:
v InafreshDocument,drawasquareonstage,
selectthefillandtheoutlinetogether,and
convertthemintoasymbolwiththename
square.Placethesquaresymbolontheleft
handsideofthestage.

Square
Symbol

v Inthetimeline,insertakeyframeatframe30 .

v Inthenewkeyframe(clickontheframein
thetimelineifitsnotcurrentlyselected),
movethesquaresymboltothefarrighthand
sideofthestage.
v Nowgobacktothetimelineandclickonany
Framebetween1and29.
v OnthePropertyInspector,selectMotionfrom
theTweendropdownmenu

Tweendropdownmenu

v Testthemoveandwatchtheobjectmovefromlefttotheright.

Tweeningsimultaneousmotionandscaling
v Onthesamestage,clickonframe1onthetimeline.
v SelectthefreeTransformtoolandclickontheScale
buttonintheToolspaneloptions(orrightclickonthe
squareandchooseScale)
Transformtool
(Theselectedobjectwillnowhaveadottedboxarounditwith
eightscalingselectionhandles)

keyframeat
frame30

v
v

Grabthelowerrighthandcornerhandleanduseittoscaletheobjectdowntoabouthalf
ofitsoriginalsize.
Nowclickonframe30onthetimeline,wherethemotiontweenedsquareislocatedatthe
rightsideofthestage.Thistimescalethesquareupbyaboutahalf,usingthebottom
lefthandletodothescaling.
Testthemovie,andyoullseethesquaregraduallygrowlargerfromframe1to30asit
passesacrossthestage.

Fadingwithalpha
v

Onthesamestage,clickonframe15,andinsertnewkeyframes.

Keyframe15

Clickonframe15,selectthesymbol,andopenthecolordropdownmenuintheProperty
inspector.
(Therearedifferenteffectsthatyoucanapplytoyoursymbol)

Colordropdownmenu

SelectAlphafromthedropdownmenu,andthenset
theAlphasliderto0%.Thissettingwillrenderthesymbol
instancetotallytransparentinthekeyframeatframe15.

Alphasliderto0%
v

Whenyoutestyourmovieyoullseetheobjectfadeinand
out.

Changingobjectcolormidtween
Letstakealookathowtochangethecolorofanobjectduringamotiontween.
Inthisexercise,wemoveanobject(text)acrossthestageandchangeitscolorasitmoves.
v Inanewdocument,startbycreatingtext.Select TexttoolintheToolsPanel.Thiswill
opentheTexttoolpropertiesinthePropertyinspector.

(ThisoptionsdisplayedaresimilartothoseinaWordprocessingprogram)
v Selectthetextonthestageandconvertitintosymbol.Remember,onlysymbolsare
groupobjectscanbemotiontweened.
v Createthreemorekeyframeatframes10,20,and30.
v Atkeyframe10,selectthesymbolandopentheColordropdownmenuintheProperty
inspector.
v SelectTintfromthecolordropdownmenuandchangethetintamountto100%.Then,
usingthecolorselectionpalette,changethecolor.
v Repeatthisprocedureatkeyframe20,andatkeyframe30.
Nowyourtextshouldhavedifferentcoloroneachkeyframe.
v Addmotiontweenstothetimelinebetweenframes1and10,
10and20,and20and30.
v Ifyoutestthemovieyoullseeitchangecolorinjumps.
v Nowyoucouldtryclickingoneachofthekeyframesin
successionanddraggingeachparticularinstancetoa
differentpositiononthestage.

MotionGuide
MotionGuideisnothingbutmovingyoursymbolinapredefinedpathsuchascurvesorcircles.
v CreateagraphicsymbolandNamethelayeras"graphic"

"graphic"
Layer

Symbol

v Rightclickonthe"graphic"labelandselect"AddMotionGuide"fromthepopupwindow.
v Anewlayerwillappearontopofthe"graphic"layerwiththelabel"Guide:graphic"along
withtheguideicon.
"Guide:graphic"Layer

"graphic"
Layer

Symbol
v Drawthepathforyoursymbolinthisnewlayerusingpencilorlinetool.
Forexample:Idrewacircleformycar.
v Selectframe50ofguidelayerandpress"F5"toinsertframes.
v Nowgoto"Frame1"of"graphic"layeranddragyoursymboltooneendofyourpath.
Whiledragging,youwillseeabubbleonthesymbol.Thatbubbleshouldgorightbelow
thepath.Somethingliketheoneshownbelow.
v Nowgoto"Frame50"of"graphic"layerandpress
F6toinsertanewkeyframe.
v Nowdragyoursymboltootherendofyourpath.Again,
thebubbleshouldgorightbelowthepath.
v Selectanyframebetween1to50ofyour"graphic"layer.Rightclickandselect"motion
tween"fromthepopupmenu.

ShapeTweening

ShapeTweeningmorphingshapesintosomethingnew,richandstrange,eitherstanding
stillormoving.
Morphingtextintoshapesandviceversa.
UsingshapehintstooverwriteFlashsdefaultshapetweeningbehavior.

Squaringthecircle
v Createanewmovie,anddrawacircleandfillinframe1.
v Clickonframe15,andinsertablankkeyframe.

EmptyKeyframe15

EmptyStage

v Yourstageisemptyonkeyframe15,usingarectangletooldrawasquarewitha
differentcoloronothersideofthestage.
v Highlightkeyframe1to15,OnthePropertyInspector,selectShapefromtheTween
dropdownmenu.

v Nowifyoutestyourmovieyoullseethecirclemorphintosquarewhilemoving
acrossthestage.

Texttotexttweening
Thisanimationstartsoffwithonewordandusesshapetweeningtochangeitintoadifferentword.
v Createanewmovie,andinframe1,usetheTexttoolinconjunctionwiththeProperty
inspectortotypeThisismyfirst,ontheleftsideofthestage.

v Nowselectframe30andcreateanewkeyframeandtypetexttotexttweenonthe
belowrightsideofthestage.

v UsetheArrowtooltoselectkeyframe1,andusethe
ModifyBreakApartmenutofirstbreakthe
textintoseparateletters
(Textistheonlythingthatneedstobebrokenaparttwice)
v SelectModifyBreakApartagaintobreakthemintographics.Makesureyouhave
eachtextboxandlettersselectedbeforeyouthis.
v Dothesamethingtotheothertextremembertobreakthetextaparttwice.
v Clickthebetweenthetwokeyframesonthetimeline,andusethePropertyinspectorto
createashapetween.
v Nowifyoupreviewyourmovieyoullseethefirstwordsmorphintothesecondwhile
movingacrossthestage.

10

Mask&Masking
MasksareapowerfulfeatureinFlashthatallowsyoutoselectivelyshowandhidecontent.
v Createanewmoviebydefaultyouwillhavealayerinyourtimelinewindow.Insertonemore
layer,totallyyouneedtwolayerstomaskanobject.
v Renamethetoplayerto"Mask"andthelayerbelowthatto"background".
v
v
v
v
v
v
v
v Importyourpicturetothe"background"layer.

v UsingOvaltoolfromyourtoolbox,drawa
circlewithoutit'sborderinyour"Mask"layer.

Figure8.4

Figure8.3

v Dragthecircletooneendofyourpicture.

Figure8.5
v Nowgotoframe40"ofyour"Mask"layerandpress"F6"toinsertanewkeyframe.
v Nowgoto"frame40"ofyour"background"layerandpress"F5"toinsertframes,sothat
yourbackgroundimageisavailableallthroughyourmask.
v Select"frame40"ofyour"Mask"layerthatisyournewkeyframe,keepingtheplayhead
on"frame40"of"Mask"layer,dragthecircletootherendofyourpicture.
v Nowgobackto"frame1"ofyour"Mask"layer,keepingtheplayheadon"frame1"ofyour
"Mask"layer,selectShapetweeninyourpropertieswindow.
v Rightclickonthe"Mask"layer(theareawhereyounamedthelayernotwheretheframesexist)
andselectMask.
v YourMaskisallready.PressCtrl+EntertoviewyourMask.

End

11