Flash Christmas Basics.docx

Flash Christmas Basics.docx

《Flash Christmas Basics.docx》由会员分享，可在线阅读，更多相关《Flash Christmas Basics.docx（17页珍藏版）》请在冰豆网上搜索。

FlashChristmasBasics

GettingStarted

MacromediaFlashMXisamultimediatoollikenoother.Ithasthecapabilityforcreatinginteractivemultimedia,containingsound,graphics,movieclips,buttons,andmore.Beforeyouwillbeabletocreatehighqualityprojects,itisimportanttounderstandthebasicsofdrawinginFlash.Inthissession,wewilldrawvariousitemsinFlashusingapremadeFlashexercisewithguidelayers.Theseguidelayersdonotshowinthefinishedmovie,soallofyouroriginalworkwillbecontainedinthefinishedpublishedmovie,nottheinstructionsyouseeonyourscreenalongtheway.Let’sgetstarted!

PartsoftheWindow

TheinterfaceforFlashresemblesanumberofdifferentprograms.IfyouhaveworkedwithMacromediaproducts,youwillnoticemuchresemblanceinthewaytheworkspaceisorganized.Otherelementsarecommontovariousgraphicprograms,suchasatimeline（similartotimelinesinvideoeditingprograms）,layersonthetimeline（similartolayersinprogramssuchasPhotoShop）,anddrawingtools（similartomanydrawingprograms）.

Timelinewith3Layers

Zoom

WorkArea—

Stage

OpenYourFirstFile

LaunchFlashandopenthefileFlashDrawingStarter.fla（FLAistheformatFlashworkingfilesaresavedin）.Ascreensimilartothepreviouspagewillappear.Youcanchangethewaythescreenlooksbydraggingtoolbarsaroundthescreenorpressingonthegraybarsofdifferentpanels.Ifyouarelookingformissingpanels,theycanbefoundundertheWindowmenu.Youcanalsoaccesspanelsetsunderthismenu（orsaveyourown!

）.

TIP#1:

WhenworkinginFlash,itisagoodideatodrawdifferentobjectsondifferentlayers.Then,lockthelayeruntilyouneedtouseitagain.Drawingobjectsontopofeachotheronthesamelayercanresultinmissingpartsiftheobjectsaremovedagain.

Scene1:

PencilTool

ThePenciltoolisafreehanddrawingtool.Flashallowsyoutospecifywhetheryouwantyourfreehanddrawingtobestraightened,smoothed,orleftasis.Thelinestyle,weight,andcolorcanbechangedinthePropertiesInspector.Formostpeople,thepenciltoolisnotveryusefulfordrawingmuch;basically,itisbestusedtoenhanceadrawing（addwrinkles,etc.）.

YOURTURN:

Trytodrawacandycaneshapeusingthepenciltool.Experimentwiththevarioussettings—straighten,smooth,andink.Then,changethestroke（line）styleandcolorusingthePropertyInspector.

Scene2:

PenTool（andLineandPaintBuckettool）

Aftercompletingthepreviousexercise,youmightbefrustratedwithdrawinginFlash,butthat’swhatthenextfewexerciseswillhelpyouwith!

Thistime,wewilltrytocreateacandycaneagain,butwe’llusethepentool.

ThePentoolcreateslinesandcurves,butitdoessobycreatingpoints（nodes/dots）thatallowformorepreciseediting.Then,theArrowtool（blackarrow）andSubselectiontool（whitearrow）canbeusedtomakechanges.Movingthearrownearapointorlineinyourdrawingwillallowyoutocurvethelineorchangeitsposition.

YOURTURN:

Trytodrawacandycaneshapeusingthepentool.UsetheguideprovidedinthetutorialasanexampleModifyusingtheblackArrowtool.Then,addlinesforthestripesusingtheLinetoolandfillinthestripesusingthePaintBuckettool.

TIP#2:

Flashcreatesvectorobjectswhenyoudrawfromwithintheprogram.Theseobjectsarelowerinfilesizethantraditionalbitmapgraphicsanddonotdistortwhenresized.ObjectsdrawninFlashmaycontainastrokeand/orafill.Astrokeistheoutlineofanobject,orborder;afillistheinsideoftheobject.Thesetwothingsareseparatefromoneanother,soitisimportanttoselectbothpartswhenmovingthegraphicaround.

Scene3:

ShapesBow（drawingwithShapes）

Drawingwithshapesisprettystraightforward.ClicktheOvalorRectangletool,andthenclickanddragtocreateyourshape.Todrawperfectcirclesorsquares,holddowntheShiftkeywhiledraggingtocreatetheshape.Youcancreateashapewithnofillinthemiddlebyeitherselectingthefillanddeletingitafterwardorbyselecting“nocolor”beforedrawingtheobject.WhenusingtheRectangletool,youcansettheoptionstoroundtherectangleinsteadofhavingpointedcorners.

YOURTURN:

Trytodrawabowusingfiveovalsandtworectangles.Followtheguideonyourtutorial.Deletethefillsinthecenterandanyunneededlines,andthenmodifyusingtheArrowtool.

Scene4:

ShapesOrnament（drawingwithShapesandusinggradients）

GradientfillscanbeappliedinsideofshapesusingtheColorMixerpanel.Whereitsays“Solid,”selectthedropdownarrowandchooseeitherlinearorradialgradient.

Abarappearsshowingthetwocolorsthatmakeupthegradientattheleftandtheright.Dragthepointerstochangetheamountofeachcolorinthegradient.Selectacolorsquaretochangeit,orshift-clickbetweenthemtoaddothercolors.

Oncethefillhasbeenapplied,thefilltransformtoolcanbeusedtochangethedirectionandplacement.

YOURTURN:

Drawanornamentusingarectangleandacircle;addagradientfill.Then,usethelinetooltoaddstripesorotherwisedecoratetheornament.Then,trytocreateanangelusingthepatternshownonthetutorial—twosquares,onecircle,oneoval,andonerectangle.UsetheArrowtooltomodifytheshape,deleteunneededlines,andcolorasyoudesire.Addanyextraeffects（withthepenciltool）.

Scene5:

PenTree（drawingaChristmastreewiththepentoolandaddingittotheLibrary）

Gridsarehelpfulwhendrawingtolineupobjectsandlines.WhendrawingtheChristmastree,changethegrid（View,Grid,EditGrid）to50pxby50pxorsomeotherunitthatyoufeelcomfortablewith.

YOURTURN:

Createthetreepointsusingthepentoolintheorderindicatedinthediagramonyourtutorial.Useablackstrokeandgreenfill.

Oncethistreehalfisdrawn,doubleclickthetreetoselectboththestrokeandfillandthencopythatsection.Pastethenextsectionandthenflipitandplacethemsidebyside（toflip—Modify,Transform,FlipHorizontal）.YoumightwanttoaligntheYvalueinthePropertyInspectorsothatyouaresurethetreematchesupperfectly（buthey,who’sseenaperfecttree?

）.

Besureyourtreehasthecorrectcolorsandthendeletethelinedividingthetreehalves.ChoosetheFreeTransformToolandselecttheentiretree.Stretchitsothetreeistaller（butnotmuchwider）.UsetheArrowToolandpoint

tothegapindicatedinthediagram.Yourarrowshouldchangetoacurvyline.Dragsothatyouroundouttheedgesofyourtree.Then,usetherectangletooltocreatethestumpandfillasyoudesire.

Next,convertthetreetoasymbolsoitwillbestoredinthelibrary（F8—createthisasamoviesymbol）.Oncesomethingisanofficialsymbol,anypermanentchangesyouwishtomaketotheobjectshouldbemadeinsymboleditingmode.Moreonthat...soon.

MakeLotso’Symbols!

Returntoyourpreviousscenesandconvertyourearliercreatedobjectstographicsymbols（selectentireobjectcarefullywitharroworlasso,F8）.Besuretogiveeachobjectaname.Astheyareconvertedtosymbols,theywillbestoredinthelibrary.YoucanviewthelibrarybypressingF11.

Scene6:

ShapeTween

Tweeningisaprocessofautomaticallyfillinginthegapsofasequenceinananimation.Flashcreatestheframes“inbetween”twokeyframesto“morph”onethingintoanother.Therearetwotypesoftweening—shapeandmotion.Thisexercisewillfocusspecificallyonshapetweening.Inordertoshapetweensomething,itmustbebrokenapart（Ctrl-B）andcannotbeasymbol.

TIP#3:

Keyframesarerepresentedonthetimelinebyafilledincircle（iftheyhavesomethinginthem）oranunfilledcircleiftheyareblank,butreadytobedrawnin.Framesarejustgray.Ifyouwanttochangesomethinginananimation,youmustinsertakeyframe;ifyouinsertaframeandmakeachange,allpreviousframeswillalsochange.Rightclickonaframeonthetimelinetoinsertkeyframe,blankkeyframe,orframeasneeded.

Totweensomething,theobjectmustbeonitsownlayer.Fortunately,ifyouaccidentallyplacesomethingonalayerwithit,youcaneasilycuttheobjectand“pasteinplace”onadifferentlayer.Remember,alwayslocklayerswhenyouarenotusingthem.

YOURTURN:

Sothatwecanusethisagain,wearegoingtocreateanewsymbolanddrawthetweenthere.Withthegridon（50x50）drawacirclewithnostrokethatoccupiesoneofthesquares.Insertakeyframeat20;clickinframe20andmakethecirclechange.We’lluseaneateffectthatmakesaglowbyselectingthecircle,clickingModify,Shape,SoftenFillEdges.Setto20px,15steps,andexpand.Then,clicksomewherebetweenkeyframe1and20andsetthetweeninthePropertiesInspectortoSHAPE.Exitsymboleditingandthenewsymbolshouldbeinyourlibrary.

WhatShapeTweeningCanDo

WhatShapeTweeningCan’tDo

∙Tweentheshapeofanobject

∙Tweenthecolorofanobject

∙TweenthepositionofanobjectontheStage

∙Tweenthetransformation（scale,rotation,skew）ofanobject

∙Tweentextthathasbeenbrokenapart（Ctrl-B）

∙Tweengradients

∙Tweengroupedobjects

∙Tweensymbols

∙Tweentextthathasnotbeenbrokenapart

*FromMacromediaFlashH*O*T

Scene7:

MotionTween

Motiontweeningworksverymuchlikeshapetweening,onlydistortionismuchlesslikely.Thisisbecausemotiontweensrequiresymbols.Beforeyoucanmotiontweensomething,youmustconvertittoasymbol.Then,afterinsertingakeyframelateronthetimeline,youcanchangethesymbol.Youcannotreplaceonesymbolwithanotheranddoamotiontween.Youcanchangetheproperties（color,transparency--a