Chapter 2: The Basics - eduScapes · AIM Your Project with Flash: Chapter 2 - The Basics 37 The timeline is also used to control when and how these objects will ap-pear on the screen

AIM Your Project with Flash: Chapter 2 - The Basics 33

Chapter 2:The Basics

After completing this module, you’ll be able to:

• createandsaveanewFlashdocument.• createsimplegraphicsusingthedrawtools.• groupandresizeimages.• importimages.• create,rename,andlocklayers.• useandaddsymbolstotheLibrary.• addtextusingthetexttools.

AlthoughFlashhasasteeplearningcurve,youonlyneedtoknowafewtoolstobuildsimpleprojects.Onceyouknowthebasics,youcanexploreadditionaltools,resources,andthescriptinglanguagecalledActionScript.

Flashisavector-basedtool.Thismeansthatyou’llbeusingdraw-ingtoolssuchaslines,rectangles,andovalstocreateobjectsthatyoucanmanipulate.Likedrawingtoolsyou’veprobablyusedinthepast,youcanfillshapesandadjustthethicknessoflines.Ifyouwanttoworkwithpho-tographsormakeadjustmentsinclipart,you’llwanttodothatinanotherprogramsuchasFireworksthenimportthemintoFlash.

Installing FlashBeforeusingFlash,you’llneedtoinstallthesoftwarefromtheCD

you’vepurchased.Or,downloadthetrialversionorfullversionfromtheAdobe’swebsiteoryourschool’swebsite.ThedirectionsinthistutorialarewrittenforusewithAdobe’sFlashCS4forbothWindowsandMacintosh.Howevertheycanbeadaptedforusewithearlierversions.BeforebeingpurchasedbyAdobe,FlashwasownedbyMacromediasoolderversionshadMacromediainthetitlesuchasMacromediaFlash8.

Adobehttp://adobe.com

AIM Your Project with Flash: Chapter 2 - The Basics34

Opening FlashBeginbyopeningtheFlashapplication.

To open Flash:Windows - Click the Start menu, select Programs > Adobe > Flash.Macintosh - Open the Applications folder, double-click Adobe Flash

CS4, double-click Flash.Flash will load. A Welcome window will appear (shown above).

To create a new Flash document:Select Flash Document under Create New on the Welcome window.Or, pull down the File menu, select New.

A blank Flash document will appear on the screen.

To open an existing Flash document:Pull down the File menu, select Open.Browse for your document.

Exploring the Flash ScreenFlashusesanIDE(IntegratedDevelopmentEnvironment)wheredevel-

opersworkwiththeStage,Timeline,MediaObjects,ActionScriptcode,andotherelements.You’llnoticethattheFlashscreenlooksdifferentfrommostoftheapplicationsyouprobablyuse.

Stage Area. YourmainworkareaiscalledtheStage.Thisistheareawhereyouwillbeworkingwiththevisualaspectsofyourproject.Thestageareaisusedtodraw,write,andcreateobjectsandmovementfordif-

Figure 2-A. Flash Start Screens.


Figure 2-A. Flash Start Screens.

ferentlayersofyourproject.Thinkofitasascreenwhereyoucanorganizeresourcesandtryoutanimationideas.ThegrayareaaroundthestageiscalledthePasteboard.Youcantemporarilystorethingslikegraphicshere.Theseobjectswon’tshowwhenyouplayyourmovie.

Timeline.Likeanelectronicspreadsheet,theTimelineissetupinrowsrepresentinglayersandcolumnsrepresentingtimebyindividualframes.Aprojectcouldhavethousandsofframes,eachcontainingslightlydiffer-entinformationdependingonthelayerandtheplacementonthetimeline.ThisisthepartofFlashthatcausesthemostconfusion,sospendsometimethinkingaboutthis.

Thetimelineisusedtocoordinatedifferentlayerswhichcontainobjectssuchasgraphics,text,audio,andvideo.Whenyoucreateanewmovie,you’llseethevisiblelayers.Thinkofalayerasacleartransparencycontain-ingobjectsyoucreate.Youmayhavemanylayersasyouwishsuchasoneforatitle,arunway,anotherforacloud,andyetanotherforanairplane.Youwantseparatelayersbecauseyoumayonlywantthetitleandrunwayforthefirstfewseconds,butyou’llneedtheairplanethroughout.Thetime-lineareacanbeadjustedtomakeroomformorelayersasneeded.

Figure 2-B. Flash Document.

Media Object

Properties

Timeline

StageTools

Action Script

Library panel

Collapse/Expand


Timeline

Selectiontools

Texttool

Draw/Painttools

Color/Bonestools

Zoom/Pantools

Stroke/Filltools

Tool options

Quick Reference

Tools Palette

Work Area

item name

insert new layer

Property Panel

Playhead

frame rate

layer

Figure 2-C. Quick Reference.

new layer folder delete

layer

Library Panel

Action Script Used

Stage size

options

Controller

play project

Components


Thetimelineisalsousedtocontrolwhenandhowtheseobjectswillap-pearonthescreen.Thewindowdividesyourmovieintoindividualframes.Mostmoviesshow12framespersecond.Ascrollbarisusedtoseeaddi-tionalframes.Akeyframeisusedtodefineachangeinyouranimation.

Tools.Thechoicesonthetoolspalette(rightsideofscreen)willprob-ablylookfamiliarfromworkingwithothersoftwarepackages.It’salwaysagoodideatogobacktotheselectiontool(arrow)betweenusingtools.Thisway,youdon’taccidentlycreateormodifyanobject.

Property Panel.Acrosstherightsideofthescreentotheleftofthetools,you’llseepanelsthatprovideinformationaboutavarietyoftopics.Thedefaultpanelisthepropertypanelshowinginformationabouttheproject.Ifyou’reworkingwithagraphic,thepropertypanelwillshowinformationaboutthelinethicknessandcolorsbeingused.It’scontextspecific,soitwillshowdifferentinformationdependingonwhethertheobjectselectedisagraphic,text,orotheritem.Thepropertyinspectorisaneasywaytomadeanadjustmentincolor,linethickness,orfontsizewithoutneedingtogotothemenu.YoucanexpandorcollapseselectionsbyusingthetrianglenexttotheselectiontitlesuchasPUBLISH.

Library Panel.Youcaneasilymovebetweenpanelsbyclickingonthepaneltabs.TheLibraryPanelwillshowalistoftheavailablegraphics,but-tons,andmovieclips.

Planning a Simple ProjectLet’sbeginwithbycreatingtheobjectsforasimpleanimation(see

Figure2-D).We’llmoveanairplanedownarunawayandtakeoffintotheclouds.Youdon’tneedtomakeexactlywhatIdo,howeverit’softenhelp-fultostartwithanexampleyoucanrecreate.Ifyou’dliketoseemyversionof this animation, go to

http://eduscapes.com/flash/takeoff1.swf

Therearemanywaystoplanforanimation.Somepeopleliketocare-fullyorganizealltheirmaterials,whileothersprefertojumprightin.Ifyou’reaconcretethinker,it’shelpfultobeginwithalistoftheobjectsyou’llneedaslayersfortheanimationandasketchshowingthekeyframeswhereimportantmovementwilloccur.

Althoughit’ssuggestedthatyoufollowourexample,feelfreetotryyourownanimation.Here’salistofsomegood“starterprojects”:

• shootabasketballintoabasket• buildasnowperson• throwabaseballatabatter• driveacaronahighway• moveawagonovertheprairie


Drawing in Flash

TherearetwokindsofgraphicsusedinFlashprojects:bitmapsandvec-tor.

Bitmapsaremadeofmanydotsthatformapicture.Photosandmanyoftheclipartfilesyouseearebitmap.Theytakeuplotsofspaceanddon’tenlargeverywell.Howeverit’sokaytoimporttheseifthey’reimportanttoyourproject.

Vectorgraphicsaremadeofindividuallines,shapes,andlocations.Theyareinfinitelyscalableandlookgoodreducedorenlarged.Theyalsodon’ttakeupmuchspace.Flashcreatesvector-basedgraphics.

Let’sstartwithsomethingsimpleandcreative.Youdon’tneedtocre-atetheairplaneorhouse.Howeveryou’regoingtousedrawtoolstocreatesomeclouds,therunway,andgrass.Thepicturesarecalledgraphicassetsandwillbecomepartofourlibrary.

Atfirst,creatingacloudmayseemtough.Howeverit’sactuallyquiteeasyusingtheFlashdrawtools.We’llsimplecreateabunchofoverlappingcircles,deleteextralines,groupthepiecestogether,andadjustthethicknessoftheline(seeFigure2-E).

Figure 2-D. Plan for Airplane Project.


To use the oval tool to make a cloud:

Click the shapes tool and chose the oval tool on the Tools palette.

Go to the Colors section of the Tools palette, click the color next to the pencil tool, and choose the color black.

Go to the Colors section of the Tools palette, click the color next to the paint bucket, and choose the blank fill .

Move your cursor over the stage area. Press and drag diagonally to create an oval. If you want a perfect

circle, hold down the shift key while you drag.Create a bunch of overlapping ovals and circles.Click the selection (pointer) tool. Click on a curve inside the group of

ovals. Press the delete key to remove the line.Remove the rest of the lines so you’re left with the outline of a cloud. Note: You can also use the eraser tool to take out a line section.Pull down the Edit menu, choose Select All.Pull down the Modify menu, choose Group. The cloud is now one object.Double-click on a line in your cloud. Notice that the Properties panel

changes. If you don’t see the Properties panel, pull down the Window menu and choose Proper-ties.

Change the line thickness by chang-ing the number from 1 to 3.

To resize, right-click on a line of the cloud. Choose Free Transform. Drag from handles to resize.

Figure 2-E. Cloud made from ovals.


Onceyou’vecreatedyourcloud,youmaywanttospendsometimeexploringthedragtools.You’llnoticesomedifferencesfromotherdrawsoftwareyou’veused(seeFigure2-F).

Belowaresomethingstotry:

Draw a filled rectangle. Drag away the filling and you’ve got an empty rectangle and a filled rectangle. Drag the individual lines. They are all individual pieces.

Draw small circle inside your rectangle. Then, try dragging it away. No-tice that it leaves an imprint of the circle.

Choose the selection tool. Mouse over an unselected line. Then, drag from that line.

Saving Our WorkIt’simportanttoconstantlysaveyourwork.It’sagoodideatomaintain

aseparatefolderforeachofyourFlashprojectswhereyoucanstoretheprojectitselfalongwithanygraphics,audio,orvideoelementsyoumightbeusing.

To save your work:Pull down the File menu and choose Save. You’ll see a window with a default location for saving your file.Choose the location where you wish to save your work such as your

Documents folder. Click the New Folder button, name your new folder such as project1. Note: Mac users need to expand the Save Window to see the

New Folder option.Name your project such as takeoff. Your filename should be one word and keep it short. The file will

be save with the .fla file extension such as takeoff.fla.Click the Save button.

Figure 2-F. Explore draw tools.


Establishing LayersLikeothergraphicssoftware,Flashuseslayersasawaytoorganize

projectcontentsuchastext,graphics,audio,andvideo.Theseelementsareallstackedontopofeachother.Thetoplayerscoverthelowerlevels.Theselayersallowthedevelopertoshowandanimatedifferentelementsatdiffer-enttimes.

You’vecreatedonelayerofyourproject.We’llcallitcloud.Next,weneedtocreateotherlayersforothercontentinourproject.Ourprojectwillhavesixlayers:cloud,airplane,runway,house,grass,andwelcome.We’llcreatethelayers,thenaddtheelementstoeachlayer.

To rename Layer 1:Double-click the word Layer 1 in

the upper left corner of the Timeline.

Type in the word cloud.

To create a new layer:Click the new layer button in

the bottom-left corner of the Timeline.

A new layer will appear under Layer 1. It is called Layer 2. New layers will appear above previ-ous layer.

Double-click the word Layer 2 and rename it airplane.Create additional layers for runway, house, grass, and welcome. If you need more room to see all the layers you can drag from the

area below the scroll bar as show by the arrow below. You might want to save your project again.

Asyouworkwithlayers,you’llnoticethatwhenyouclickonalayeritbecomesselectedandapenciltoolappears.Eachlayeralsocontainsthreecolumnswithoptionsthatcanbechosen.Youcanmakeindividualselec-tionswithinthecolumn,soyoucanlocksomelayersandnotothers.

hide/showlayer lock/unlock

layer

unfill to turn objects into outlinesfill to show objects

selectlayer


Importing GraphicsYou’llprobablywanttouseotherprogramstocreatecomplexgraphics,

audio,andvideoelements.Flashprovidesaneasywaytoimporttheseas-sets.Beforeyouimportanasset,besuretoselectthelayerwhereyouwantittoappear.

Ournextlayeristheairplane.Ratherthantryingtocreateanairplanefromscratch,we’regoingtouseapieceofclipart.You’llfindthisgraphicontheweb(.giffile).Then,importthegraphic.

To download graphics from the web:Open a web browser and go to the following web address. http://eduscapes.com/flash/airplane.gifPull down the File menu and choose Save.Save the graphic in your project folder. Also, download the house graphic at the following web address: http://eduscapes.com/flash/house.gif

To import graphics into Flash:Click on the airplane layer in your Timeline. This will also select the first frame of the airplane layer. Your

cloud graphic will appear in the Stage.Pull down the File menu, choose Import, select Import to Stage. You’ll see an Import dialog box.Locate your project folder and choose the airplane.gif file. Click Import. The graphic will appear on the screen and in your Library. Click on the selection tool (arrow/pointer) tool from the Tools palette.Move the airplane graphic to the lower left area of the Stage. The graphic is too large for our project. It needs to be resized.Right-click on the graphic and choose Free Transform. Eight small dots/handles will appear around the graphic.Hold down the Shift key and drag from a dot/handle to proportionally

resize the image.

Click on the house layer in your Timeline.Import the house graphic and drag it to the lower center area of the

Stage.Resize the house so that it is much smaller than the airplane.


Locking LayersAsyoucreateandmoveelementsaroundonthescreen,it’seasytoac-

cidentlymoveyourgraphics.It’sagoodideatolockgraphicsateachlayer.Youcanalwaysunlockthemlater.

To lock and unlock a layer:Click the lock dot in the layer. A lock icon will appear.Click the lock icon in the layer. The lock icon will disappear.

Creating LinesFlashcontainssomefuntoolsforcreatinglines.We’lluselinestocreate

theillusionofarunwayandgrass.

To create a line for a runway:Choose the runway layer.

Choose the Line tool in the Tools palette.Click and drag across the bottom of the entire Stage. A line will appear across the Stage.Choose the selection tool (arrow/pointer).Click on the line.In the Properties panel, choose the black color and a line thickness

of 10. Change the line type to a long uneven line (option 5 down). It looks like a rural runway.

Lock this layer by clicking on the lock icon in the runway layer.

To create a line for grass:Choose the grass layer.Create a line across the bottom of the screen (slightly higher than

the runway) and select the line.In the Properties panel, choose the green color and a line thickness

of 20. Change the line type to the uneven dots (option 6).In the Properties panel, click the pencil tool next to the Style options

and have some fun! Adjust the different elements to make it look like grass.

Click OK.Lock this layer.


Using the LibraryWe’vespentlotsoftimeworkingwith

graphics.WhatmakesFlashexcitingistheabilitytoanimatethisstaticartwork.Thegraphicsyou’vecreatedandimportedwillbeusedoverandoveragainthroughoutthemovie.Sometimestheywillbevisibleand at other times they’ll be hidden from view.TheTimelineisusedtomanagetheseassets,howevertheLibraryisusedtostorereusableelementsforeasyaccess.

UsetheLibrarytostoreanyelementthatwillbeusedmultipletimeswithinyourproject.Eachgraphictakesspace.WhenimagesarestoredintheLibrary,theuseronlyhastodownloadtheelementonceevenifitisusedmanytimes.Thisreducesthesizeoftheprojectandsavesdownloadtime.EachtimeyoudragacopyofanitemofftheLibraryand onto the Stage, it’s called an instanceofthatobject.

ElementsintheLibraryarestoredasthreetypesofsymbols:graphicsymbols,buttonsymbols,ormovieclips.ThesesymbolscanbedraggedontotheStagewhenevertheyareneeded.

Graphic symbolsarevectorgraphicssuchasthecloudyoumadeandtheairplaneyouimported.

Button symbols areusedforinteractiveactivitiesandrespondtousereventssuchas“up”and“over.”

Movie clips canbeentireFlashmoviesinsideotherFlashmovies.Youcanalsoincorporatesounds,importedbitmapgraphics,andim-

portedvideoclips.YourLibraryiseasytoviewandexpand.Thetwographicsyouim-

portedarealreadyintheLibrary.Let’saddthegraphicswecreatedtotheLibrary.


To explore the Library: Look on the right side of your screen, your Library panel may

already be available. If not, you’ll need to show it.Pull down the Window menu, choose Library. You’ll see the two graphics you already imported. Click on your airplane or house to see a preview.

To add symbols to the Library:Choose the selection (pointer/arrow) tool.Click on the cloud layer and unlock the layer.Click on the cloud to select it. You may need to shift-click on the indi-

vidual elements to put up your entire cloud. The selected cloud should appear to have little dots on it.Pull down the Modify menu, choose Convert to Symbol. A dialog box appears.

Type the name: cloud.Pull down the Type option and choose Graphic. The system will track your new system by it’s name, type, and

registration point (a tiny dot within the symbol used to record it’s exact location).

Click OK. The cloud will now show in the Library.Add the runway and grass graphics to your Library. Remember, you’ll need to unlock the graphics to add as symbols.

Adding TextAlthoughwe’vespentmuchofourtimeworkingwithgraphics,it’s

alsopossibletoaddwordstoyourproject.Althoughwe’lljustbeaddingawelcomemessage,it’spossibletocreateparagraphsoftext.Textiscre-atedinsideatextboxthatcanberesized.Thetextwillautomaticallywraparoundandadjusttothesizeofthetextbox.We’llcreateatextboxandaddawelcomestatement.

To add text:Choose the welcome layer.Choose the Text tool in the Tools palette.Click anywhere on the Stage.Type: Have you ever wondered how airplanes fly?Choose the selection/point tool and click in the text box.


In the Properties panel, choose the font face: Arial; font size: 24; font color: red; and font style: bold.

Click and drag the text box so it ap-pears across the center of the Stage.

Lock this layer.

ReviewAtthispointyouhavealltheassetsyou

needtocreateagreatanimation.Rightnowyourstagelooksalittlestrange.However,soonyou’llbecreatinganexcitinganimation.

Besuretosaveyourworkbeforeyoucon-tinue.

Now,tryyourownproject.Createanewdocument, create and image, import and im-ageandpracticeusingthepaintanddrawtools.