Chapter 5: Multimedia

AIM Your Project with Flash: Chapter 5 - Multimedia 93

Chapter 5:Multimedia

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

• addsoundtoaproject.• addvideotoaproject.• addadvancedvisualelementstoaproject. Developerscaneasilyincorporateaudio,video,andvisualelements

intotheirFlashprojects.Theseelementscanbeimportedfromawiderangeofothersoftwaretools.ActionScriptscanthenbeusedtocontroltheseele-ments.

Flashdevelopersshouldn’tviewaudio,video,andvisualelementsas“extras”tobeaddedastimepermits.Instead,theyshouldbeconsideredessentialcomponentsofeffectiveinformationalorinstructionalexperi-ences.Eachuserhasadifferentlearningstyleandpreferencesforparticularpresentationformatsandstyles.Ratherthanfocusingprojectsononetypeofenduser,provideavarietyofresources,tools,andexperiencestoad-dressthediversityofinterests.

Using Sounds in FlashFrommusictosoundeffects,therearemanydifferentwaystoincor-

porateaudioelementsintoyourFlashprojects.YoucanplayindividualsoundsfromtheTimeline,synchronizesoundstoanimation,andloopsoundssotheyplaycontinuously.

Figure5-AshowstwoexamplesofhowFlashcanbeusedinprojects.Intheanimatedatlasexample,theaudioplaysautomaticallyalongwiththeproject.IntheCommunityClubexample,usersclickabuttontoplaytheaudio.

AIM Your Project with Flash: Chapter 5 - Multimedia94

Explore examples of sound in Flash. http://www.eduscapes.com/flash/multimedia.htm#2

How do the audio elements contribute to understanding? What unique role do they play? What would happen if audio was not a part of the project? What would be lost?

Figure 5-A. Animated Atlas - http://www.animatedatlas.com/movie.htmlCommunity Club - http://teacher.scholastic.com/commclub/index.htm

Importing Sounds

Therearetwostepstousingsoundsinyourproject.First,importthesound.Second,decidewhereandwhenitwillplayinyourmovie.

Although Flash contains many tools for integrating sound, there’s no waytorecordaudioinFlash.Instead,you’llneedtorecordyourownsoundswithothersoftwareorlocateexistingaudiofiles.Consideranopen-sourceaudiorecordingandeditingpackagesuchasAudacity.

Soundscancomefrommanysources.Youcanusepublicdomainsoundsyoulocateontheweb,soundsfromclipartCDs,orsoundsyourecordyourself.

Developerscanimportsounds,syncsoundswithanimatedsequences,controlvolume,loopelements,andprovidesoundcontrols.Likegraphics,soundscanbeimportedwiththeFlashLibraryandusedmultipletimesinaproject.Asyouexploresounds,you’llnoticethattherearethreecharac-teristicsthatwillimpactquality:samplerate,bitrate,andchannels.

Sample Rate.Digitalsoundsaremeasuredinkilohertz(kHz).Unlessyouneedsuperhighquality,youdon’tneedmorethan22kHz.

Bit Rate.Sometimescalledbitresolution,8-bitsoundisfineformostprojects.

Channels.Monoisonechannelandstereoistwochannels.Monoisfineformostprojects.

Investigate


SoundsareimportedintotheFlashLibrary.Developerscanimport*.wav,*.aiff,and*.mp3audiofileformatsintoFlashprojects.You’llhavethebestluckwiththe*.mp3format.

Let’simportabiplanesoundintoourairplaneproject.

To import a sound.Click on the Stage or a keyframe in the Timeline.Save the biplane found from the following website: http://eduscapes.com/flash/biplane.wavPull down the File menu, choose Import, select

Import to Library. A dialog box will appear.Locate the sound you wish to import. Click

Open. In this case, biplane.wav. Nothing will change on the Stage, however

the sound file will be added to your Library.

Matching Sounds with Animation

Althoughtherearemanywaystosyncsoundswithanimation,we’llstartwithasimpleapproach.ThisinvolvesaddingasoundtotheKey-frameontheTimeline.ThisworksthesameinbothActionScript2and3.

You’llusethePropertiespaneltosetthesoundasevent or stream, start/stopasound,seteffects,andcustomize.

An event soundisdownloadedbeforeitstartsandplaysuntilaneventstopsitsuchasamouseclickorTimelineaction.Itmaylooparoundandplaymorethanoncetomatchtheanimation.Eventsoundsareoftenusedforroll-overbuttons.It’sagoodideatouseeventsoundsinmostsituationsunlessyouneedtosynchronizeyouranimation.

A start sound isthesameaseventsoundexcepttheyonlyplaythroughonce.

A stop soundisusedtostopasoundfromplaying.Forexample,youcouldturnoffthebackgroundsoundwhennarrationbegins.

A stream soundbeginsplayingassoonasitbeginsdownloading.Itwillsyncthesoundswiththeanimations.

InvestigateExplore digital audio resources found on the Internet. http://eduscapes.com/tap/topic122.htm

Create a folder of sample audio clips to incorporate into your practice projects.

Consider downloading trial software for recording or editing sounds.


UsingtheEditEnvelopeyoucanalsoedityoursoundincludingdelet-ingpartsofthesound.It’salsopossibletoadjusttheleftandrightchannelstogiveafeelingofmovement.

To insert a sound:Create a new layer for your sound and call it

biplane.Select Frame 1 of the biplane layer. You can insert the sound on any Keyframe

where you’d like the sound to begin playing.In the Properties panel, choose Name and se-

lect your audio file.In the Properties panel, choose the Effect:

Fade left to right. This effect moves the sound from the left

speaker to the right speaker so it sounds like it’s moving with the airplane.

Notice there are other choices your can make.Pull down the Control menu, choose Test movie.

Adding Sound to Buttons

Youmaywanttoaddsoundtoabutton.

To add sounds to a button.Create a button symbol.Import a sound into your Library.Double-click the button symbol to enter the Flash symbol editing

area.Click the New Layer icon to add a new layer.Name the new layer, sound.Right-click or Control-click the Down frame and choose Insert Key-

frame. This will insert a Keyframe for your sound.In the Properties panel, select your sound from the list. I can also set

the Effect to Fade from Left to Right, and set the Sync to Event.


Using ActionScript 2.0 with Sound

Formostprojects,usethepropertiespaneltocontrolthesound.How-everformorecomplexproject,youmayneedtouseActionScripts.Inmostcases, you’ll use either use attachSound or loadSound.

attachSound().ThismethodasksyoutocallanobjectfromyourLibraryandcreateainternallinktothesound.Thesesoundsareembeddedinthe*.swffile.

loadSound().Whenusingthismethod,youcallanexternalsoundfilethatmustbeloadedintothemovie.KeepinmindthatthissoundmustbeavailablethroughtheURLinordertowork.Thisapproachworksbestwhenyouaccessafilethatyouownandcontrol.

TheadvantageofActionScriptsisthatyouhavemorecontroloverthesoundsandcancallwhatyouneedfromtheLibrary.

Onceyoursoundsareimported,right-clickoneachoneandselectLinkage.SelectExportforActionScript,clickOK.MakesurethatyougiveyourbuttonsinstancenamesinthePropertypanelsuchasfrog_btn.Onceyou’veprovidedlinkageforallofthesoundsandgiveninstancenamestoallofthebuttons,you’rereadytowritetheActionScript.BelowaregeneraldirectionsfortryingtheActionScriptapproachtosounds:

To create an ActionScript for a sound:Create a new layer called Actions. Put the Actionscript in the frame where you want the sound to start.

croak_sound=new Sound();croak.attachSound(“croak”);frog_btn.onPress=function(){//stop this and other soundscroak_sound.stop(“croak”);rain_sound.stop(“rain”);//etc.

//play croak_soundcroak_sound.start();}

Youmaywanttoexperimentwithdifferentapproachestosound.Insomecases,youmaywanttheendusertocontrolthesound.Atothertimes,youwantyoursoundstomatchtheactionandtimingofyourproj-ect.Forexampleifyoursoundplayslongerthanyouwish,youmaywanttostopitataparticularframe.Todothis,selecttheframeimmediatelyaftertheplaceyouwantthesoundtostop.AddaKeyframe,thenopenActionScriptandplacea“stopAllSounds”behavior.

stopAllSounds ( );


Using Video in FlashVideoisanexcitingwaytoaddmovementandaudiotoyourprojects.

Flashcanusemanydifferentvideoformats.YoucanuseFlashtocreateorimportFlashVideo(.flv)files.IfyouhaveQuickTimeinstalledonyourcomputer,youcanimportfilesin*.avi,*.mpg,*.mov,and*.dvformats.ShortvideoscaneasilybeaddedtoanyFlashproject.Trytokeepvideodowntoabout10secondsifyouplantoplaythemofftheweb.

Ifyouwantlongervideos,considerstreamingvideofromtheweb.Unfortunately,thevideoswillneedtobeservedfromawebserverthathasthisoption.Youcanconnecttoan.flvvideofromyour.swffiletoplayvideofromawebserver.Thisisagoodideaifyouhavealongvideobe-causeitwillstartplayingwhileit’sstilldownloadingthefile.YoucanalsostreamvideofromaspecializedFlashvideoserver.

Figure5-BshowsanexampleofvideoinFlashprojects.IntheApollo11project,thevideosappearinasmallvideoscreenaspartoftheinforma-tionalaspectofthewebsite.

Figure 5-B. Apollo 11 - http://www.smithsonianeducation.org/students/idealabs/walking_on_the_moon.html

Explore how video is integrated into the following projects. http://www.eduscapes.com/flash/multimedia.htm#3

Notice the way users access and control the video clips. How could use integrate video into a project?

Explore digital video resources found on the Internet. http://eduscapes.com/tap/topic123.htm

For simple QuickTime movies, use Video & Image Starters Resource: http://tipt3.utoledo.edu/starters/

Create a folder of sample video clips to incorporate into your practice projects.

Investigate


Embedding Video in Flash

BeforeembeddingvideoinaFlashproject,youneedtobesurethevideomatchestheFlashdocu-mentintermsoftheframerate.Openthevideoinanyplayersoftwareand“getinfo.”Itwillgenerallyshowyoutheframerate.Flash’sImportVideowiz-ardhelpsyoudealwiththecomplexitiesofmatchingthevideo.You’llneedtoconvertyourmovietotheFLV/F4Vfileformat.

To convert your Flash document:Place the video file in the folder with your Flash

document.Open the Adobe Media Encoder.Click Add.Locate the video file (such as .mov).Choose Start Queue.Your document will be converted to the F4V file

format and saved in your project folder.

To embed a video in a Flash project:Click in the keyframe where you want your

video to play.Pull down the File menu, choose Import,

select Import Video.Choose On Your Computer button to import

your video.Browse for the video.Find and select a movie file and click Open.Click Continue.Choose the skin you’d like to use, click Con-

tinue.Review the specifications, click Finish.

When the Flash video is ready, the movie clip will appear in your Library! They can be used just like any other movie clip.Use the Components Inspectors to see the default specs.

Keepinmindthatthevideowon’tplayuntilit’stested.


Using Behaviors in ActionScript 2.0Behaviorsareaneasywaytocontrolaudioandvideoinyourproject,

buttheyareonlyavailableinActionScript2.0.

To control video using the Behaviors panel:Add a movie clip to your LibraryPull down the Windows menu and choose the Behaviors panel.Click the plus sign and choose Video.Enter the website address and click OK. The new event shows on the Behaviors list.

Figure 5-C. Screen 1 shows the project on the Stage. Screen 2 shows the project as a Test Movie.


Explore web resources for locating images: http://eduscapes.com/tap/topic20.htm

Try a project using photos from nature: http://www.eduscapes.com/nature/ http://tipt3.utoledo.edu/starters/

Investigate

Visual ElementsMuchofthepowerofFlashcomesfromitsabilitytohandlegraphics.In

additiontoanimation,therearemanyinterestingwaystoenhancevisualelements.Frommasklayerstophotobuttons,therearemanyinterestingwaystoaddvisualelementsintoyourprojects.Likeaudioandvideo,youcanfindmanysourcesforclipart,photographs,andotherimagesontheInternet.Alsoconsiderscannedimagesanddigitalcameraphotos.

Masking Visuals

Amasklayerhidesalltheobjectsonitsrelatedlayersexceptthosein-sideafilledortextobject.Frompeepholestospotlights,youcanusemaskstocreatesomegreateffects.Ifyouwanttousetext,besuretouselarge,blocktextforthebesteffect.

To create a masked visual:Create a new project.Name your layer something like

photo.Put a photograph or other visual

on this layer.Create a new layer called maskit. This new layer will appear right above the layer where you just

put your photograph. If you have many layers, you need to adjust them so the new mask layer is right above where you want your mask.

Create or insert a filled shape, text, or instance of a symbol you want to use on the new layer.

The filled part of the shape will be the “transparent” part of the mask where you’ll be able to see through to the photograph.

Right-click or Control-click the layer’s name and choose Mask from the pop-up list.

The layer will indent your photo layer under your maskit layer and lock both layers. Notice that the photo layer is indent.


If you want to make a change in the photograph or the mask shape, you’ll need to unlock the layer. Make the change. Then, lock it again.

To create animated masked layers:Unlock the mask layer.Create a shape tween such as from a small circle to a large circle.Or, add a movie clip to the mask layer!

Putting it All TogetherOnceyourprojectiswell-underway,considerhowitworksawhole.

Doesyourprojectloadquickly?Istheprojectattractiveandvisuallypleas-ing?Doesitmoveatafastpacewithoutbeingoverwhelming?Considersharingitwithfriendstoseewhattheythinkofyourwork.

Afteraquickformativeevaluation,makerevisionsandenhancementsthatwillmakeyourprojectmoreprofessional.Forexample,youwaywanttoadda“preloader”tothebeginningofyourproject.

Sometimesittakesawhiletoloadamovie.Preloadersprovideavisualwayforenduserstoseethatyourmovieisloadingandtoremindthemtobepatient.TherearepreloadersavailableforbothActionScript2&3.

To add a preloader to your project using ActionScript 2.0:Insert 5-10 frames at the very beginning of the timeline.Create a preloader layer.Create keyframes in the Actions layer.On the first frame of the Action, add the following script:

ifFrameLoaded (“finalframenumber”) {gotoAndPlay (“whateverframeIsYourFirstActualFrame”);}


In a keyframe at the end of the 5-10 frames you added, place the fol-lowing action:

gotoAndPlay(1);

In the preloader layer, create a series of keyframes and input a changing image or text. An example might be “Loading.” “Load-ing. .” “Loading . . .”

Lookforotherwaystoenhanceyourproject.Forexample,youmightaddsounds,visuals,orweblinks.Thekeyisdevelopaneffective,efficient,andappealingproductthatconveysyourmessage.


Incorporate multimedia elements into a Flash project. Incorporate each of the following three areas:

• Audio • Video • Visual (i.e., masking)

Save and upload both the .fla and .swf versions. In addition, write a short project plan to describes the purpose and audience for your multimedia elements. In other words, your project should serve a purpose.

The following criteria will be used in evaluating your activity: • Required elements • Project Plan • Effective, efficient, and appealing project

AIM Your Project with Flash:Multimedia

Chapter 5: Multimedia

Documents