FLASH Cib Instructor Notes

8/9/2019 FLASH Cib Instructor Notes

1/21

Adobe FlAsh Cs3 ProFessionAl

ClAssroom in A book insTrUCTor noTes


2/21

Adobe Flash CS3 Classroom in a Book

The lessons in this book require assets, including Flashdocuments, that are included in the Lessons older onthe books CD. Beore beginning to work with the les-sons, copy the les to each students computers harddisk.

Though Flash CS3 Proessional requires a minimumo 512 MB RAM, Adobe strongly recommends usingthis book with a computer that has at least 1 GB RAM,especially when using larger video les, as in Lesson 9.

You may wish to use all the lessons in this book, orparticular lessons. You can use the lessons in any order,but some tools and techniques are described in detailonly in the rst lesson in which they occur.

Introduce students to additional resources, such asAdobe Design Center and Adobe Developer Center,where they can access inormation provided by otherFlash users and by Adobe.

Getting Started

LESSON 1


3/21

LESSON 1


Lesson 1 uses a sample project to provide an overviewo the Flash workspace. Students are introduced to theTools panel, Library panel, Property inspector, andTimeline. They also learn about layers and keyrames.

Starting Flash and opening a leDemonstrate multiple ways o opening a document inFlash: double-clicking the Flash document in Exploreror Finder, starting Flash and choosing File > Open, andselecting the document rom the Welcome screen thatappears when you start Flash.

Emphasize the importance o saving the working copyo the le to the lessons Start older. In many lessons,Flash documents reerence other asset les, which mustbe in the same older as the Flash document.

Getting to know the work areaIdentiy and describe the ollowing areas o the work-space: Timeline, Tools panel, Stage, Library panel,Property inspector, and the Edit bar above the Stage.

I you have Adobe Creative Suite 3 installed, you canshow students the similarities between panels inFlash CS3 and panels in other Creative Suite 3applications. The Timeline is similar to the Timelinein Adobe Premiere Pro or Adobe Ater Eects.

Understanding the TimelineInvite students to move the playhead through (orscrub) the Timeline to see the animation. As you movethe playhead, Flash displays the contents o the rameon the Stage. Hide and show dierent layers on ramesto demonstrate how layers are stacked and that eachrame may contain content rom multiple layers.

Keyrames are essential in animation. A keyrame in-dicates a change, whether it be in the position or otherqualities o something on the Stage or the beginningor end o an audio le. Students will use keyrames inevery Flash project, so its important that they under-stand the keyrames purpose clearly.

Describe the dierence between inserting a keyrameand inserting a blank keyrame. When you insert akeyrame, the keyrame contains the rames originalcontents until you change it. When you insert a blankkeyrame, all content is removed rom the rame so thatyou can add new content.

Using the Property inspectorDemonstrate that the options in the Property inspectorchange to refect whats selected. The Property inspec-tor can display properties or the entire document, the

selected rame, or the selected instance o a symbol.Which options are available or an instance depend onwhether the symbol is a movie clip, graphic, or buttonsymbol. (Symbols are covered in more detail in Lesson3.) To apply values youve set in the Property inspector,press Enter or Return.

Using the Tools panelThe Tools panel contains several tools or selecting,drawing, editing, and navigating. Demonstrate thatsome tools are grouped together, and a tool may behidden beneath another. To select a hidden tool, clickthe triangle in the icon o the displayed tool, and thenselect the hidden tool rom the pop-up menu.

Beneath the tools is the tools options area. The optionsavailable depend on the selected tool. Demonstrate thatthe options area changes as you select dierent tools.When you select the Rectangle tool, the Object Draw-ing mode icon appears; when you select the Zoomtool, the Enlarge and Reduce icons are available;when you select the Pencil tool, the Pencil modeicons are available.

Lesson 1: Getting Acquainted


4/21


Lesson 2: Working with Graphics

Lesson 2 uses a sample project to introduce students tothe drawing tools and simple animation. The project isan animation o a bubbling liquid to be used as a logoor as a preloader. As they create the preloader, studentslearn how to use the Rectangle, Oval, and Line tools;import a bitmap ll; make selections; group objects;and manipulate shapes. They also learn about the di-erence between drawing modes in Flash.

Flash drawing modesBy deault, Flash uses the merge drawing mode when youdraw rectangles, ovals, or lines. In merge drawing mode,the drawn elements are called shapes. Overlapping shapesmerge together to orm a single element on the Stage.When you select a shape, the selected area appears dotted.Though the elements merge together, you can select eachseparately. Each side o a rectangles stroke is a separateelement, or example. To select a shapes ll and stroke,drag the Selection tool around the entire shape.

In object drawing mode, active when the Object Draw-ing icon is selected in the options area o the Toolspanel, rectangles, ovals, and lines are discrete elements,

even when they overlap. The discrete elements arecalled drawing objects. When you select a drawingobject, its ll and stroke are both selected.

In primitive drawing mode, active when you use theRectangle Primitive or Oval Primitive drawing tools,drawn elements are discrete objects, but you canmodiy their corner angles or inner radius.

Merge drawing mode oers advantages in creating un-usual, complex shapes. Object drawing mode lets youmove objects without concern that they will change in

relationship to other objects. Primitive drawing modemakes it possible to draw more complex shapes with-out having to merge multiple shapes together.

Invite students to draw and manipulate elements us-ing each o these drawing modes so that they becomeamiliar with the dierences and can recognize themas they work with them. You can convert a shape to anobject by selecting it and choosing Modiy > Combine

Object > Union. You can convert an object to a shapeby selecting it and choosing Modiy > Break Apart.

Creating a simple animationIn the lesson, students use a simple motion tween toanimate a bubble so that it moves rom the bottom othe glass to the top, changing size as it does so. You canalso use a Timeline eect to achieve the same result.Timeline eects provide simple animation options.To show students an alternative method o animation,demonstrate the Expand eect. (Choose Insert > Time-line Eects > Eects > Expand.)

The Expand eect expands, contracts, or expands andcontracts objects over time. This eect works best withtwo or more objects grouped together or combined ina movie clip or graphic symbol. Objects containing textor letters work well with this eect. You can expand theduration in rames; expand objects, squeeze them, orboth; expand direction; set ragment oset in pixels;shit the group center; or change ragment size.

Breaking objects apart

In this lesson, lines were created using the object draw-ing mode. To delete individual line segments, you needto break the lines apart, converting them into shapes.Emphasize or students the dierence between shapesand objects in Flash, and the advantage o shapes whenyou want to select shape segments.

Masking objectsA Halloween mask hides what it covers; a graphic maskreveals what it covers. Students who have used AdobePhotoshop may already be amiliar with masks.

In this lesson, the mask serves to keep the bubbles in theglass. The bubbles are revealed only where the mask exists,so they disappear when they reach the top o the glass. Bydeault, a mask aects only a single layer beneath it, but inthis lesson, students mask multiple layers. In later lessons,students will also animate masks to change the amount oan element that is revealed over time.

LESSON 2


5/21


Lesson 3: Creating and Editing Symbols

Lesson 3 uses a sample project to introduce symbols,instances, and imported Illustrator les as studentscreate a DVD interace. Students learn about buttons,rollover states, and transparency, as well.

Importing Illustrator lesFlash lets you import Illustrator AI les, and to a largeextent preserves the artworks editability and visualdelity. The AI Importer also provides a great degreeo control in determining how Illustrator artwork isimported into Flash, letting you speciy how to import

specic objects into an AI le.The Flash AI Importer provides the ollowing keyeatures: Preserves editability o the most commonly usedIllustrator eects as Flash lters. Preserves editability o blend modes that Flash andIllustrator have in common. Preserves the delity and editability o gradient lls. Maintains the appearance o RGB (red, green, blue)colors. Imports Illustrator Symbols as Flash Symbols. Preserves the number and position o Bezier controlpoints. Preserves the delity o clip masks. Preserves the delity o pattern strokes and lls. Preserves object transparency. Converts the AI le layers to individual Flash layers,keyrames, or a single Flash layer. You can also importthe AI le as a single bitmap image, in which case Flashfattens (rasterizes) the le. Provides an improved copy-and-paste workfowbetween Illustrator and Flash. A copy-and-paste dialogbox provides settings to apply to AI les being pastedonto the Flash stage.

You speciy how artwork is imported in the Importdialog box. You can select which layersand whichcontent on each layerto import. Flash can importIllustrator layers as Flash layers, as a single layer, askeyrames, or as symbols.

In this lesson, students import an Illustrator lewith layers that become Flash layers to make up the

background o the DVD interace. However, many othe same options are available when copying and past-ing artwork. I Illustrator is installed on the computer,open the Illustrator le and copy and paste, or drag anddrop, artwork rom it to the Stage in Flash to demon-strate how the options are similar.

About symbolsA symbolis a graphic, button, or movie clip that youcreate once in Flash and then reuse throughout thedocument or in other documents. A symbol can in-

clude artwork imported rom another application. Anysymbol that you create automatically becomes part othe library or the current document.

An instance is a copy o a symbol located on the Stageor nested inside another symbol. An instance can bedierent rom its symbol in color, size, and unction.Editing the symbol updates all o its instances, but ap-plying eects to an instance o a symbol updates onlythat instance.

Using symbols in documents dramatically reducesle size; saving several instances o a symbol requires

less storage space than saving multiple copies o thecontents o the symbol. For example, you can reducethe le size o a document by converting static graph-ics, such as background images, into symbols and thenreusing them. Using symbols can also speed SWF leplayback, because a symbol needs to be downloaded toFlash Player only once.

Movie clip symbols, button symbols, and graphicsymbols each have benets and limitations. Create oneo each, and then show students the dierences in theTimeline and in the Property inspector or each.

Button symbols automatically include rollover states in

the Timeline. Demonstrate each rollover state: Up, Over,Down, and Hit.

The Up state determines the buttons deault appearancewhen the mouse is nowhere near it. The Over state appears when the mouse rolls over thebutton.

LESSON 3


6/21


The Down state appears when the button is clicked. The Hit state denes the buttons active area, whichis the area that responds to the mouse rolling over orclicking the button.

Converting objects to symbolsIn the Convert To Symbol dialog box, you name thesymbol, select a symbol type, and speciy a registrationpoint.

A symbols name, and especially an instance name,should always be lowercase or camelcase. In camelcase,a name begins with a lowercase letter, but each concat-enated word is capitalized. For example,pourBottle is a

symbol name in camelcase. Avoid capitalizing symboland instance names because ActionScript reserves capi-tal letters or specic classes and other keywords.

The registration point determines the point at whichFlash reports the coordinates o the symbol, and romwhich it resizes or transorms the symbol.

Adding transparencyTransparency, or inversely, opacity, is determined bythe alpha value or a symbol or a color. Decreasingthe alpha value decreases the opacity and increases

the transparency. You can change the alpha value or asymbolwhich aects every instance o that symbolor or a single instance.

LESSON 3


7/21


Lesson 4: Working with Text

Lesson 4 uses an animated birthday card project tointroduce students to creating, ormatting, and animat-ing text in Flash CS3. Students work urther with key-rames, masks, and layers, and are introduced to lters.

Organizing layers in a TimelineLayers are displayed on the Stage in the order in whichthey appear in the Timeline, with the bottom layerappearing rst in the stack, the next layer up appear-ing on top o it, and so on, until the top layer in theTimeline is also the top layer on the Stage. As designers

plan projects, they consider the order in which theywant objects to appear. For complex projects, its goodpractice to create layer olders and think through theorder o the layers you want to use, rather than creatinglayers on the fy.

It is customary to create an Actions layer in Flash tocontain all o the ActionScript or the Timeline, andto place the Actions layer at the top o the Timeline sothat it is easy or the designer or others to nd and ac-cess to troubleshoot or revise the ActionScript.

Adding a sound leTo add an audio le to a rame in Flash, rst import itto the library. Then, select the rame at which you wantthe audio le to begin playing, and, in the Propertyinspector, choose the audio le rom the Sound menu.

Selecting the appropriate option rom the Sync pop-upmenu is important. I a sound le doesnt play whenyou think it should, check the Sync menu to ensureyouve selected the right option.

Event synchronizes the sound to the occurrence oan event, such as a button click. An event sound plays

when its rst keyrame appears and plays in its entirety,even i the SWF le stops playing. I another event oc-curs, the rst instance o the sound continues playingwhile the second instance o the sound plays. Start synchronizes the sound to the occurrence o anevent, just as the Event option. However, i the sound isalready playing, no new instance o the sound plays. Stop silences the specied sound.

Stream synchronizes the sound or playing on a web-site. Flash orces animation to keep pace with streamsounds. I it cant draw animation rames quicklyenough to keep up with the sound le, it skips rames.Stream sounds stop i the SWF le stops playing.Next to the Sync menu is a pop-up menu that deter-mines who many times the sound le plays. Repeat species the number o times the le plays;speciy a number. Loop repeats the sound continuously.

Note: Repeating stream sounds is not recommended,

because rames are added to the le and the le size isincreased by the number o times the sound is repeat-ed. You can also apply eects to the sound le. None applies no eect Left Channel/Right Channel plays sound in the letor right channel only. Fade Left To Right/ Fade Right To Left shits thesound rom one channel to the other. Fade In gradually increases the volume o a soundover its duration. Fade Out gradually decreases the volume o a soundover its duration. Custom lets you create custom in and out points o

sound using Edit Envelope

Using tweens to animate objectsMotion tweens can animate the movement o elementson the Stage, as in the case o the bubble in Lesson 1,but they can also animate the change o objects prop-erties, such as brightness or transparency.

Point out to students that an arrow appears in theTimeline ater you apply a tween to rames.

Creating text in FlashCreating text in Flash is similar to creating text inAdobe InDesign, Adobe Photoshop, or numerous otherapplications. Use the Text tool to create an insertionpoint on the Stage and begin typing, or drag the Texttool to create a text box or your text. To ormat text,select it with the Text tool, and then select ormattingoptions in the Property inspector. To manipulate a textbox as an object, select it with the Selection tool and

LESSON 4


8/21


make changes in the Property inspector or Transormpanel, or simply drag the text box handles to resize it.Resizing the text box does not resize the text itsel, but

it does refow the text in the text box. You can converttext to a symbol, and animate it similar to any othersymbol. You can also apply a lter, such as a dropshadow or glow, to text.

In this lesson, students create static text, which appearsexactly as its typed on the Stage. In Lesson 8, studentsuse dynamic text, which changes depending on viewerinput or events in ActionScript.

Animating text with masksFlash can recognize only one mask object on a mask

layer. Thereore, to mask the text eectively in this les-son you must draw rectangles in merge drawing modeand be sure to overlap them, creating a single maskshape. For each change o the mask, students must rstcreate a keyrame and then add to the mask.

Creating a blinking efectWhen you insert a keyrame, the rames contents arepreserved until you change them. When you insert ablank keyrame, the rames contents are erased. There-ore, you can use blank keyrames to create a blinkingeect or the low battery symbol.

Adding keyrames to rames 206, 213, and 220 rst en-sures that each o those keyrames will contain the lowbattery symbol. Adding blank keyrames to rames 203,210, 217, and 224 clears the content rom those key-rames, so that the low battery symbol does not appearuntil the next keyrame. That is, the battery symbolappears between rames 206 and 210, between rames213 and 217, and between rames 220 and 224.

LESSON 4


9/21


Lesson 5: Adding Animation

In Lesson 5, students animate the title page or a spacealien cartoon character as they learn about motiontweens, shape tweens, nested symbols, and motionanimated along a path.

Working with nested symbolsMovie clip symbols have their own Timelines, similarto the main Timeline. A movie clip symbol may haveother symbols nested within it. In act, in this lesson,the alien symbol contains the alien_body symbol,which contains the alien_head symbol, which, in turn,

contains the alien_head_eye symbol.

You can edit a symbol in place, in the context o otherobjects on the Stage, by double-clicking its instance onthe Stage. You can edit a symbol in isolation, so that itis all that you see, by double-clicking the symbol in theLibrary panel.

To edit a nested symbol in place, double-click the sym-bol that contains it. I a symbol is nested within severalother symbols, you need to navigate through all thosesymbols. When youre in a symbols editing mode,Flash displays the symbol name in the Edit bar abovethe Stage. You can reer to the Edit bar to see whichTimeline youre editing, and to see all the symbols itsnested in. To return to the main Timeline, click Scene 1in the Edit bar. To go to any other symbols Timeline inthe path, click that symbols name in the Edit bar.

Morphing objectsShape tweens dier rom motion tweens in thatshape tweens actually morph one object into another.Flash interpolates the values or shapes or the ramesbetween the rst keyrame and the second keyrame,creating the animation.

You can apply shape tweening to drawn shapes. Toapply shape tweening to groups, instances, or bitmapimages, you must rst break the elements apart. Toapply shape tweening to text, as with the letter O inthis lesson, break the text apart twice to convert the textto shapes.

Animating motion on a pathMotion guide layers let you draw paths along whichtweened instances, groups, or text blocks can be ani-mated. You can link multiple layers to a motion guidelayer to have multiple objects ollow the same path.A normal layer that is linked to a motion guide layerbecomes a guided layer.

For the best results, keep the motion guide smooth.Students may nd it easier to draw a motion guide us-ing a Wacom tablet or other pen pointer device, rather

than a mouse.

Options in the Property inspector determine how theshape tween is created: Orient To Path - The baseline o the tweened elementorients to the motion path. Snap - The registration point o the tweened elementsnaps to the motion path. Sync - The animation o graphic symbol instances issynchronized with the main Timeline. The number orames in a tween is recalculated to match the numbero rames allotted to it in the Timeline.

LESSON 5


10/21

10


Lesson 6: Creating Interactive Files

Lesson 6 emphasizes interactivity, especially throughthe use o buttons and audio les. Students manipu-late gradients, nest multiple kinds o symbols withina single symbol, and prepare a le or ActionScript.Lesson 7 introduces ActionScript ully, but the Lesson6 le contains ActionScript that is summarized in asidebar.

Creating buttonsThe buttons in this lesson are button symbols thatinclude nested movie clip and graphic symbols. Review

the kinds o symbols and the benets o each. But-ton symbols contain rollover states in their Timelines.Movie clip symbols can have drop shadows appliedand include Timelines that can be animated just as themain Timeline can be. Graphic symbols let you repeat asingle image multiple times without having to includethe data multiple times. Additionally, you can create agraphic symbol that contains multiple images, and usea dierent image in each instance o the symbol.

Aligning buttonsThe Align panel makes it easy to align or evenly spaceobjects horizontally or vertically. You can align objectsrelative to the Stage or relative to each other. Demon-strate the options in the Align panel, and encouragestudents to experiment so that they are amiliar withthe dierent options.

Activating the buttonsThe buttons rollover states work without ActionScript,but ActionScript is required i the button clicks areto have any eect otherwise. Though students do notcreate ActionScript in this lesson, they do learn howto name instances and prepare a le or ActionScript.Emphasize the importance o naming instances so

ActionScript can reer to them.

When naming instances, use lowercase or camelcase.Its oten helpul to name an instance with an extensionthat identies its symbol type. Flash designers typicallyname instances o movie clip symbols with an _mcextension, button symbols with a _btn extension, andgraphic symbols with a _gr extension.

Name instances in a way that is meaningul, so youllremember what youve called them when youre writingActionScript. Shorter names are easier to type withouterror, but longer names may be easier to remember andto identiy when youre editing the ActionScript later.

The ActionScript behind the scenesEncourage students to view the ActionScript that is in-cluded in the lesson le. Select rame 9 on the Actionslayer in the main Timeline, and then choose Window >Actions to open the Actions panel.

The ActionScript used in the lesson is described in thesidebar at the end o the lesson. Students will learnabout ActionScript in Lesson 7 and can reer back tothe ActionScript used in Lesson 6.

LESSON 6


11/21


12/21

1


Lesson 8: Using ComponentsLesson 8 introduces students to components, whichare pre-built movie clip symbols that you can custom-ize or interactive user interace elements and videoelements. In the lesson, students create two Text Areacomponents, one with ActionScript and one without,and a Tile List component.

About componentsYou can create components in Flash by dragging themrom the Components panel or by creating them inActionScript. To add components using the Flash inter-

ace, drag them rom the Components panel onto theStage, set their parameters in the Parameters panel orComponent inspector, and then assign behaviors andmethods using ActionScript.

Note: You can use the Behaviors panel to assign be-haviors to components i the documents ActionScriptPublish setting is set to ActionScript 2.0. In this book,we always use ActionScript 3.0, so behaviors in theBehaviors panel are not available.

When you drag a component rom the Componentspanel to the Stage, Flash imports an editable movie clip

to the library. Ater a component has been importedto the library, you can drag instances o it to the Stagerom either the Library panel or the Componentspanel.

You can set properties or each instance o a compo-nent in the Parameters tab o the Property inspectoror in the Component inspector. You can also changethe color and text ormatting o a component by set-ting style properties or it or customize its appearanceby editing the components skins. Name componentinstances to reer to them in ActionScript.

Students can learn more about components bycreating their own projects using components romthe Components panel. Examples o components areincluded in the sidebar at the end o the lesson.

LESSON 8


13/21

1


Lesson 9: Working with Sound and Video

In Lesson 9, students bring audio and video lestogether with ActionScript to create a dynamic, interac-tive wildlie preserve kiosk. As they work through theproject, students learn how to edit audio les, importand optimize video les, and add ActionScript to loadexternal les.

Editing a sound clipIn Flash, you can change the point at which a soundstarts and stops playing, or control the volume o thesound as it plays. In this lesson, students remove hal

o the waveorm o a sound to shorten the sound clip.

To edit a sound le, rst add it to a rame, and clickEdit in the Property inspector. To change the start and end points o a sound, dragthe Time In and Time Out controls in the Edit Enve-lope. To change the sound envelope, drag the envelopehandles to change levels at dierent points in thesound. Envelope lines show the volume o the soundas it plays. To create additional envelope handles (upto eight total), click the envelope lines. To remove anenvelope handle, drag it out o the window.

To display more or less o the sound in the window,click the Zoom In or Out buttons. To switch the time units between seconds and rames,click the Seconds and Frames buttons.

Preparing Flash video contentBeore you import video into Flash, consider what vid-eo quality you need, what video ormat to use, and howto download it. When you embed a video into a Flashdocument, it increases the size o the nal SWF le thatyou publish. The embedded video starts progressivelydownloading to the viewers computer whether or not

they view the video.

You can also progressively download or stream the vid-eo at runtime rom an external Flash Video (FLV) leon your server. When it starts downloading depends onhow you structure your application.

Note: Video progressively downloads rom the serverlike SWF les, which is not actually streaming.

Dynamically loading content has distinct advantagesover keeping all your content in a single SWF ile.For example, ile sizes are smaller and load morequickly, and viewers download only what they wantto see or use.You can display external FLV video using a compo-nent or a video object. A component makes develop-

ing applications with FLV video easy, because thevideo controls are prebuilt, and you only need tospeciy an FLV le path to play the content. The FLV-Playback component in Flash CS3 Proessional has asmaller le size than Media components in earlier ver-sions o Flash. It is usually a good idea to give viewerssome control (such as the ability to stop, pause, play,and resume the video, and control volume) over thevideo in a SWF le.

For more control over a video instance than the Videoclass allows, place video inside a movie clip instance.The videos timeline plays independently rom a Flash

timeline, and you can place the content inside a movieclip to control timelines.

Tips or creating Adobe Flash VideoFollow these guidelines to deliver the best possibleFlash video:

Work with video in the native ormat o your project until

your fnal output

I you convert a precompressed digital video ormatinto another ormat such as FLV, the previous encodercan introduce video noise. The rst compressor already

applied its encoding algorithm to the video, reducingits quality, rame size, and rate. That compression mayhave also introduced digital artiacts or noise. Thisadditional noise aects the nal encoding process, anda higher data rate may be required to encode a good-quality le.

LESSON 9


14/21


15/21

1


interlaced displays such as TVs. Interlaced ootageviewed on a progressive display can exhibit alternatingvertical lines in high-motion areas. Thus, all the Adobe

Flash Video presets in the Adobe Media Encoder havedeinterlacing turned on by deault.

Follow the same guidelines or audio

The same considerations apply to audio production asto video production. To achieve good audio compres-sion, begin with clean audio. I you are encoding mate-rial rom a CD, try to record the le using direct digitaltranser instead o through the analog input o yoursound card. The sound card introduces an unnecessarydigital-to-analog and analog-to-digital conversion thatcan create noise in your source audio. Direct digital

transer tools are available or Windows and Macintoshplatorms. To record rom an analog source, use thehighest-quality sound card available.

Embedding video in a SWF leEmbedded video lets you embed a video le withina SWF le. When you import video in this way, thevideo is placed in the Timeline where you can see theindividual video rames represented in the Timelinerames. An embedded video le becomes part o theFlash document.

When you create a SWF le with embedded video, therame rate o the video clip and the SWF le must bethe same. I you use dierent rame rates or the SWFle and the embedded video clip, playback is incon-sistent. To use variable rame rates, import the videousing either progressive download or Flash MediaServer. When you import video les using either othese methods, the FLV les are sel-contained and runat a rame rate separate rom that o all other timelinerame rates included in the Flash SWF le.You can import video clips into Flash as embedded lesin QuickTime video (MOV), Audio Video Interleavedle (AVI), Motion Picture Experts Group le (MPEG),

or other ormats, depending on your system.

Embedded video works best or smaller video clips,with a playback time o less than 10 seconds. I you areusing video clips with longer playback times, considerusing progressively downloaded video, or streamingvideo using Flash Media Server.

The limitations o embedded video include:

You might encounter problems i the resulting SWF

les become excessively large. Flash Player reserves a loto memory when downloading and attempting to playlarge SWF les with embedded video, which can causeFlash Player to ail. Longer video les (over 10 seconds long) oten havesynchronization issues between the video and audioportions o a video clip. Over time, the audio trackbegins playing out o sequence with the video, causinga less than desirable viewing experience. To play a video embedded in a SWF le, the entirevideo le must be downloaded beore the video startsto play. I you embed an excessively large video le, it

might take a long time or the SWF le to download inits entirety and or playback to start.

Playing back external FLV les dynamicallyAn alternative to importing video into the Flashauthoring environment it to use either the FLVPlay-back component or ActionScript to dynamically playexternal FLV les in Flash Player. You can play FLV lesposted as HTTP downloads or as local media les.

Create FLV les by importing video into the Flashauthoring tool and exporting it as an FLV le. You canuse the FLV Export plug-in to export FLV les romsupported video-editing applications.

To play back an external FLV le, post an FLV le to aURL (either an HTTP site or a local older) and add ei-ther the FLVPlayback component or ActionScript codeto the Flash document to access the le and controlplayback during runtime.

Using external FLV les provides the ollowing capabil-ities that are not available when using imported video: You can use longer video clips without slowing downplayback. External FLV les are played using cached

memory, which means that large les are stored insmall pieces and accessed dynamically; they do notrequire as much memory as embedded video les. An external FLV le can have a dierent rame raterom the Flash document in which it plays. For ex-ample, you can set the Flash document rame rate to 30ps and the video rame rate to 21 ps, which gives yougreater control in ensuring smooth video playback.

LESSON 9


16/21

1


With external FLV les, Flash document playbackdoes not have to be interrupted while the video le isloading. Imported video les can sometimes interrupt

document playback to perorm certain unctions (orexample, to access a CD-ROM drive). FLV les can per-orm unctions independently o the Flash document,and so do not interrupt playback. Captioning video content is easier with external FLVles because you can use callback unctions to accessmetadata or the video.

Working with Flash and Ater EfectsI you use Adobe Flash to create video or animation,you can use Ater Eects to edit and rene the video.For example, you can export Flash animations and ap-

plications as QuickTime movies or Flash Video (FLV)les. You can then use Ater Eects to edit and renethe video.

I you use Ater Eects to edit and composite video,you can then use Flash to publish that video. You canalso export an Ater Eects video as Flash content orurther editing in Flash.

Exporting QuickTime video rom FlashI you create animations or applications with Flash, youcan export them as QuickTime movies using the File >

Export Movie command in Flash. For a Flash anima-tion, you can optimize the video output or animation.For a Flash application, Flash renders video o theapplication as it runs, allowing the user to manipulateit. This lets you capture the branches or states o yourapplication that you want to include in the video le.

Exporting Flash video (FLV) rom Ater EfectsWhen you render nished video rom Ater Eects,select FLV as the output ormat in the render queue toexport directly to the Flash Video (FLV) ormat. Thislaunches the Flash Video Encoder application, whichprovides size, compression, and other output options.Any Ater Eects markers are added to the FLV le ascue points. You can then import the FLV le into Flashand publish it in a SWF le, which can be played byFlash Player.

Importing and publishing video in FlashWhen you import a FLV le into Flash, you can use

various techniques, such as scripting or Flash compo-nents, to control the visual interace that surroundsyour video. For example, you might include playback

controls or other graphics. You can also add graphiclayers on top o the FLV le or composite eects.

Composite graphics, animation, and videoFlash and Ater Eects each include many capabilitiesthat allow you to perorm complex compositing ovideo and graphics. Which application you choose touse will depend on your personal preerences and thetype o nal output you want to create.

Flash is the more Web-oriented o the two applica-tions, with its small nal le size. Flash also allows or

runtime control o animation. Ater Eects is orientedtowards video and lm production, provides a widerange o visual eects, and is generally used to createvideo les as nal output.

Both applications can be used to create original graph-ics and animation. Both use a timeline and oer script-ing capabilities or controlling animation program-matically. Ater Eects includes a larger set o eects,while Flashs ActionScript language is the more robusto the two scripting environments. Both applicationsallow you to place graphics and eects on separate layersor compositing. These layers can be turned on and oas needed.

In Flash, composites do not aect the video contentdirectly; they aect only the appearance o the videoduring playback in Flash Player. In contrast, when youcomposite with imported video in Ater Eects, thevideo le you export actually incorporates the compos-ited graphics and eects.

Because all drawing and painting in Ater Eects isdone on layers separate rom any imported video, it isalways non-destructive. Flash has both destructive and

non-destructive drawing modes.

Exporting Ater Efects content or use in FlashYou can export Ater Eects content or use in Flash.You can export a SWF le that can be played immediatelyin Flash Player or used as part o another Flash project.When you export content rom Ater Eects in SWF or-mat, the content is fattened and rasterized in the SWF le.

LESSON 9


17/21

1


Importing Flash SWF les into Ater EfectsFlash has a unique set o vector art tools that make ituseul or a variety o drawing not possible in AterEects or Adobe Illustrator. You can import SWF les

into Ater Eects to composite them with other videoor render them as video with additional creative eects.When Ater Eects imports a SWF le, its internal key-rames are preserved so that you can continue to usethem or timing other eects.

The Continuously Rasterized SWF Import eature inAter Eects allows you to bring SWF le content intoAter Eects as fattened art, with support or alphachannels. Because the rasterization is continuous, vec-tor art in the SWF le that is scaled scales smoothly inAter Eects. This import method allows you to use

the root layer or object o your SWF les as a smoothlyrendered element in Ater Eects, allowing the bestcapabilities o each tool to work together.

LESSON 9


18/21

1


Lesson 10 revisits the preloader graphic studentscreated in Lesson 2 as students learn how to script thepreloader and load a separate SWF le.

Working with preloadersPreloaders entertain viewers and keep them inormedwhile the primary content o a website is loading.Because website visitors are easily distracted and mayclick away rom a site i nothing seems to be happen-

ing, many complex sites use preloaders. A preloadermay be as simple as a progress bar, or it may be relatedto the content that is loading. Ask students to think opreloaders theyve seen or preloaders they might useor dierent kinds o sites. (To nd examples, try visit-ing the sites o graphic designers or sites that eaturemovie les.)

Previewing a preloaderA preloader only plays until the main content hasloaded, so i youre running it on the computer thatcontains the content, the preloader will disappear

quickly. To see what viewers will actually see, simulate adownload.

In simulating the downloading speed, Flash uses esti-mates o typical Internet perormance, not the exactmodem speed. For example, i you select to simulate amodem speed o 28.8 Kbps, Flash sets the actual rate to2.3 Kbps to refect typical Internet perormance. Theproler also compensates or the added compressionsupport or SWF les, which reduces the le size andimproves streaming perormance.

To test a movie:

1. Choose Control > Test Movie.2. In the preview window, choose View > DownloadSettings.3. Select a download speed to determine the streamingrate that Flash simulates. When viewing the SWF le,choose View > Bandwidth Proler to see a graph o thedownloading perormance. The let side o the proler displays inormation

about the document, its settings, its state, and streams,i any are included in the document. The right section o the proler shows the Timelineheader and graph. In the graph, each bar represents anindividual rame o the document. The size o the barcorresponds to that rames size in bytes. The red linebeneath the Timeline header indicates whether a givenrame streams in real time with the current modemspeed set in the Control menu. I a bar extends above

the red line, the document must wait or that rame toload.4 Choose View > Simulate Download to turn stream-ing o or on. I you turn streaming on, the documentstarts over and simulates a web connection.

Optimizing Flash documentsAs your document le size increases, so does its down-load time and playback speed. You can take severalsteps to prepare your document or optimal playback.As part o the publishing process, Flash automaticallyperorms some optimization on documents. Beoreexporting a document, you can optimize it urther byusing various strategies to reduce the le size. You canalso compress a SWF le as you publish it. As you makechanges, test your document by running it on a varietyo computers, operating systems, and Internet connec-tions.

Use symbols, animated or otherwise, or every ele-ment that appears more than once. Use tweened animations whenever possible whencreating animation sequences. Tweened animations useless le space than a series o keyrames. Use movie clips instead o graphic symbols or anima-

tion sequences. Limit the area o change in each keyrame; make theaction take place in as small an area as possible. Avoid animating bitmap elements; use bitmap imagesas background or static elements. Use mp3, the smallest sound ormat, whenever pos-sible. Group elements.

Lesson 10: Loading and Optimizing

Flash Content

LESSON 10


19/21

1


Use layers to separate elements that change during theanimation rom elements that do not. Use Modiy > Shape > Optimize to minimize the

number o separate lines that are used to describeshapes. Limit the number o special line types, such asdashed, dotted, ragged, and so on. Solid lines requireless memory. Lines created with the Pencil tool requireless memory than brush strokes. Limit the number o onts and ont styles. Use em-bedded onts sparingly because they increase le size. For Embed Fonts options, select only the charactersneeded instead o including the entire ont. Use the Color menu in the Symbol Property inspectorto create many instances o a single symbol in dierent

colors. Use the Color panel (Window > Color) to match thecolor palette o the document to a browser-specicpalette. Use gradients sparingly. Filling an area with gradientcolor requires about 50 bytes more than lling it withsolid color. Use alpha transparency sparingly because it can slowplayback.

Bitmap cachingBitmap caching helps you enhance the perormance o

nonchanging movie clips in your applications. Whenyou set the MovieClip.cacheAsBitmap or Button.cacheAsBitmap property to true, Flash Player cachesan internal bitmap representation o the movie clipor button instance. This can improve perormance ormovie clips that contain complex vector content. Allo the vector data or a movie clip that has a cachedbitmap is drawn to the bitmap, instead o to the mainStage.

Note: The bitmap is copied to the main Stage as un-stretched, unrotated pixels snapped to the nearest pixelboundaries. Pixels are mapped one-to-one with theparent object. I the bounds o the bitmap change, thebitmap is re-created instead o being stretched.

LESSON 10


20/21

0


In Lesson 11, students explore a range o options orpublishing a document, using the alien animation theycreated in Lesson 5.

Publishing overviewBy deault, the Publish command creates a Flash SWFle, an HTML document that inserts your Flash contentin a browser window, and a JavaScript le labeledAC_RunActiveContent.js that lets your SWF le playautomatically in active content-compliant browsers.(For ActionScript 2.0, Flash creates a similar JavaScript

le called AC_OETags.js.) The Publish command alsocreates and copies detection les or Macromedia Flash4 rom Adobe and later. I you change publish settings,Flash saves the changes with the document. Ater youcreate a publish proile, export it to use in otherdocuments, or or others working on the same projectto use.

You can publish the Flash document in alternative leormatsGIF, JPEG, PNG, and QuickTimewith theHTML needed to display them in the browser window.Alternative ormats allow a browser to show your SWF

le animation and interactivity or users who donthave the targeted Flash Player installed. When youpublish a Flash document in alternative le ormats,the settings or each le ormat are stored with thedocument.

You can export the Flash document in several omats,similar to publishing FLA les in alternative le or-mats, except that the settings or each le ormat arenot stored with the FLA le.

Alternatively, create a custom HTML document withany HTML editor and include the tags required to

display a SWF le.

Note: I you create a custom HTML document todisplay your SWF les in, ensure that it allows yourcontent to play as expected in active content-compliantbrowsers. For more inormation about active content,see www.adobe.com/go/activecontent.

Congure a server or Flash PlayerFor users to view your Flash content on the web, theweb server must be properly congured to recognizeSWF les.

Your server may already be congured properly. To testserver conguration, see TechNote 4151 on the AdobeFlash Support Center at www.adobe.com/go/tn_4151.

Conguring a server establishes the appropriate Multi-part Internet Mail Extension (MIME) types so that the

server can identiy les with the .sw extension as Flashles.

A browser that receives the correct MIME type can loadthe appropriate plug_in, control, or helper applicationto process and properly display the incoming data. Ithe MIME type is missing or not properly delivered bythe server, the browser might display an error messageor a blank window with a puzzle piece icon. I your site is established through an Internet serviceprovider (ISP), ask the ISP to add this MIME type tothe server:application/x-shockwave-fash with the .sw extension. I you are administering your own server, see yourweb server documentation or instructions on addingor conguring MIME types. Corporate and enterprise system administratorscan congure Flash to restrict Flash Player access toresources in the local le system. Create a securityconguration le that limits Flash Player unctionalityon the local system.

Using Adobe Device Central with FlashDevice Central enables Flash users to preview howFlash les will look and unction on a variety o mobile

devices.

In the past, it was dicult or Adobe Flash Lite developersto test the les they created on mobile devices. Testingcontent could take a signicant amount o time, espe-cially manually exporting and testing on target devicesand returning to Flash to make necessary changes.

Lesson 11: Publishing Flash Documents

LESSON 11


21/21

1


Device Central is the next generation o mobileemulation and includes new eatures such as proleupdates, memory and perormance options, and cus-

tom device sets.

Device Central provides mobile content developers andtesters with an easy way to create and preview mobilecontent on a variety o devices. Adobe Device Centraldisplays realistic skins o a wide range o mobile de-vices that show you what the devices look like and howyour content appears on those devices. This enablesyou to interact with the emulated devices in a way thatsimulates real-world interactions, including testingdierent perormance levels, memory, battery powerlevels, and types o lighting.

Device Central provides a library o devices to chooserom. Each device has a prole that contains inorma-tion about the device, including the media and contenttypes it supports (that is, the content that can be usedon an individual device such as screen savers, wall-paper, and stand-alone Adobe Flash Player). You cansearch through available devices, compare multipledevices, and create custom sets o the devices you usemost.

Device Central supports dierent media ormats in-cluding Adobe Flash, bitmap, video, and web ormats.

You can use dierent media ormats to create dierenttypes o content such as screen savers or wallpaper.

The Emulator tab in Device Central is designed tosimulate content on mobile devices in a realistic way.You can test various media types such as Flash, bitmap,and video, and apply them as dierent content types,such as stand-alone player, wallpaper, or screen saver.

Note: Testing with the Emulator tab cuts the cost andtime o testing on mobile devices, but should neverreplace testing on actual devices. Use Device Central

or initial tests as you develop content and then use realdevices or nal testing.

I you are testing Flash content, or a content le toappear on the Emulator tab on a specic device, thedevice must support the Flash Lite version and contenttype that the le uses. For example, i you have a SWFle created in Flash that requires Flash Lite 2 and you

try to test the le on the Emulator tab on a device thatonly supports Flash Lite 1.1, the le does not appear.(In this case, try going to the Available Devices list,

group the devices by Flash Lite version, and double-click one o the devices that supports Flash Lite 2.)

To test a Flash Lite document in a device, chooseControl > Test Movie.

LESSON 11