Flash CS4 Professional in 24 Hours- P13 docx

FIGURE 19.4 When you place a video on the Stage, Flash asks if you want to extend the Timeline to accommo- date the video’s length... Playing an Embedded Video As a review, a sound in a

If all you wanted is a video inside Flash, you could stop after the preceding

task However, embedding the video inside your movie the way you did in

step 2 in the preceding task is not always the best choice You use an .flv

Embed a Video TRY IT YOURSELF ▼

FIGURE 19.3

This screen enables you to choose how your video is embed- ded in your Flash movie.

FIGURE 19.4

When you place a video on the Stage, Flash asks if you want to extend the Timeline to accommo- date the video’s length.

Using VideoNext, you learn some of the ways to display videos—both embedded intoyour.swfand created as an .flvthat resides outside of your file In thissection, you see how to control the playback of your videos (like giving theuser a stop and play button), as well as using special effects such as mask-ing The creative side of displaying a video is more interesting than thetechnical details Because the technical details vary between embedded andexternal video, we’ve separated the two

Playing an Embedded Video

As a review, a sound in a keyframe that has its sync setting set to Event gins to play when that frame is reached, and it continues to play until it’sfinished—even if the Timeline slows down to display all the frames Soundswith the sync setting of Stream are locked to the Timeline This means you

be-FIGURE 19.5

When creating an flv, you can

select from a variety of skins.

for external playback in the “Playing External .flvVideos” section later thishour You’re welcome to repeat this task, but select “Load External Videowith Playback Component in step 2 The main difference is you see an addi-tional Skinning dialog before the last step, as shown in Figure 19.5 We stepyou through these later, but we want to mention it for comparison to theembed technique we just showed

need to make sure the sound has enough space in the Timeline to finish

The reason to review Stream sounds at this point is that an embedded

video placed in a keyframe needs enough space in the Timeline to finish

playing For example, if the video is 10 seconds long and the frame rate is

12 fps, you need 120 frames in the Timeline Flash tells you exactly how

many frames are needed if you drag an embedded video into a Timeline

that’s too short Another reason to remember Stream sounds is that by

de-fault all the audio in an embedded video is affected by the global publish

setting for stream audio, which you set by selecting File, Publish Settings

to open the Publish Settings dialog box, and then select the Flash tab.

The visuals in your video behave like Graphic symbols Embedded videos

are not really the same as Graphics, buttons, or Movie Clips because you

can’t tween videos or tint them through the color effects, as you can other

symbols You can nest the videos inside a Movie Clip and apply effects to

the clip However, of the symbol types, videos are most like Graphics in

several respects You can scrub to see a preview of videos Also, you must

extend the Timeline far enough for all the video frames to play, as you did

in step 6 of the preceding task

These concepts are discussed to help you understand a few of the technical

details that follow You’re about to see how easy it is to build controls for an

embedded video

Make a Playback Controller for an Embedded Video

TRY IT YOURSELF ▼

In this task, you add some standard video buttons that give the user a way

to control the video Follow these steps:

1 Create a new Flash File (ActionScript 3.0), and impor t a video using

File, Import Video Drag the video onto your main Timeline (if it’s not

already in the Timeline), and enable Flash to add needed frames

2 You’re about to create three buttons: Stop, Pause, and Play Put those

buttons in their own layer on the main Timeline Lock the layer the

video is in, and then make a new layer for the buttons

3 Instead of drawing your own buttons select Window, Common

Li-braries, Buttons Inside this Librar y is a folder called playback

rounded Drag each of the following buttons from that folder to the

Stage: Rounded Green Pause, Rounded Green Play, and Rounded

Green Stop You can align these buttons underneath the video any

way you want Use the Align panel to make them line up

4 Use the Properties panel to give your three buttons the following

in-stance names: pauseButton,playButton, and stopButton

One fair criticism of the previous task is it dirtied up the main Timeline

That is, the Timeline has as many frames as the video does Normally we’dsuggest putting the video inside a Movie Clip; enable that clip to grow aslong as it needs to be; then place the Movie Clip instance in the main Time-line where it only uses one frame The problem with that approach is whenFlash reaches the frame containing the Movie Clip, it must download all theframes contained in that clip before displaying anything If the clip has abig video, this could mean a long delay So, doing it the way you did in thetask is appropriate for embedded videos By the way, you can save the pre-ceding task as built, and then in Hour 21, “Designing a Website to Be Mod-ular,” use the MovieClipLoader to load the movie at runtime

Before we move on to playing external .flvvideos, all the cool stuff likemasking the video into an odd shape works with embedded videos This iscovered later this hour in the “Adding Special Effects” section

function doPause ( evt ) { stop()

} function doPlay ( evt ) { play()

} function doStop ( evt ) { gotoAndStop(1)

}

6 For a review of ActionScript, revisit Hour 16, “Basic Interactivity.”

Test the movie by selecting Control, Test Movie, and you’re able tocontrol the embedded video

Playing External flv Videos

Earlier this hour you learned that Flash can play external .flvfiles

Natu-rally, you need to first create the .flv The simplest way to produce an .flv

is to use the Adobe Media Encoder CS4 The tasks that follow concentrate

on how to play an external .flvonce it’s produced In the next task,

“Cre-ate an .flvand Use the FLPPlayback Component,” you generate the .flv,

and use it immediately Then in subsequent exercises, you can reuse the

.flvyou produced rather than sit through the compression stage again

Playing an external .flvdefinitely gives you the best results Most notably

the audio and picture remain synchronized Playing external .flvs is a bit

more involved, however For one thing, you have to remember to upload

both the .swfand the .flvfile, plus an additional .swfif you use one of

the FLVPlayback component’s skins You only get a preview of the video

frames when the video is embedded If you want to draw animations on

top of live action video, you need to work with embedded video, at least at

the stage where you’re producing the animated overlay You can delete the

embedded video once you get the animation done Be aware there are

addi-tional restrictions when playing .flvfiles

The following task probably seems suspiciously simple after the preceding

explanation The FLVPlayback component gives you great results with little

effort

Create an flv and Use the FLVPlayback Component

TRY IT YOURSELF ▼

In this task, you create an .flvand advanced controller with no

program-ming Follow these steps:

1 Make a new folder in a known location, so all the files you need to

track are easy to find

2 Create a new AS 3.0 file, and save it in the folder as

my_movie_player.fla Launch the Adobe Media Encoder Use this

dialog to encode a video file as an .flvfile Save this file to the

origi-nal director y you used in step 1

3 Open the Component palette by choosing Window, Component Click

on the Video folder in the palette, and drag an FLVPlayback

component on the stage

4 Choose Window, Component Inspector Under the Paramaters tab,

click Skin, and then the Magnifying Glass icon on the right You should

see the Skinning dialog, as shown earlier in Figure 19.5 Select the

skinSkinUnderPlaySeekFullscreen.swf Additionally, you can modify

the color to complement your video content if you want Click OK

for yourself by opening the Adobe Media Encoder and choosing Add to

se-lect a .movfile Then, click on the arrow under the Format column next to

your file, and choose H.264 instead of the FLV|F4V setting you chose lier Choose whatever you like for Preset, and click Start Queue to begin

ear-encoding your movie You end up with a new .mp4file

Adding Special Effects

Now for the fun part—once you’ve embedded a video or set up a nent of video object to display an external .flv, you can perform countlessspecial effects that can dramatically change the way a user experiences yourvideo We look at just a few

Compo-6 The source parameter needs to be changed to the .flv’s filename

7 Because this skin includes the Fullscreen button, you need to makesure that option is set correctly when you publish Select File, PublishSettings, and click the HTML tab From the Template drop-downmenu, select Flash Only-Allow Full Screen

8 Now for the fun par t—watch the video Instead of doing Test Moviethis time, do a Publish Preview because the fullscreen option onlyworks in a browser Select File, Publish Preview, Default (or pressCtrl+F12) When you’re done watching your video, there’s one laststep that’s impor tant to understand

9 Go back to your file folder, and notice in addition to the flv and themy_movie_player.swfbased on your .fla, there’s another .swf(SkinUnderPlaySeekFullscreen.swf) for the component There’salso the .htmlfile When you deploy this to the web, you need to up-load all three files, ever ything except the .fla You can read moreabout publishing in Hour 24, “Publishing a Creation.”

Rotoscope (Draw Frames of a Video)

TRY IT YOURSELF ▼

In this task, you combine frame-by-frame animation with live action video

Follow these steps:

1 Embed a video like you did in the task “Embed a Video” earlier this

hour At the end, we show you how to conver t this task to work with an

external flv, but you have to start by embedding the video If you plan on

playing an external .flv, select Modify, Document, and set the frame

rate to match the frame rate at which you’re going to render the video

2 If you’re planning on leaving this as an embedded video, place the

video object in the main Timeline If you’re planning on conver ting this

to an .flv, then first make a new Movie Clip, and put the video object

inside the clip In either case, make sure you click OK when the dialog

asks to add more frames to accommodate the video’s duration (as

seen earlier in Figure 19.3)

3 In the Timeline where the video appears, inser t a new layer, which

should appear above the video’s layer Ensure the new layer is both

above the video and extends the entire length of the video If not,

move the layer, and click a cell above the last frame in the video, and

press F5

4 Click the layer name of the empty layer to select the entire span of

frames, and press F6 You now have an empty keyframe above each

frame of the video where you can draw

5 Select the Brush tool, and pick a bright color Hold the mouse in one

hand, and put the other hand on the > key (that is, the period key)

Draw right into the empty keyframe of Frame 1 (perhaps draw an

out-line around an object in your video, such as a person’s face) After you

draw, press >, and draw another frame Even if you have hundreds of

frames to draw, you can do it quickly It’s definitely possible to inser t

pauses by removing the keyframes or even do tweens that match the

video, but it might be just as fast to simply draw ever y frame For this

exercise, feel free to stop after 10–20 frames, and come back after

you’ve had some practice to finish them all

6 If you’re going to leave the video embedded, you’re done Go ahead,

and test the movie If you want this animation to work with an external

.flv, you have two steps left First, remove the video from the

Time-line, and create an .flvbased on the same source Second, write the

code, so the animation syncs up with the external .flv

7 Instead of deleting the video, access its Layer proper ties, and set it to

Guide, so you always have the video for reference If the video object

isn’t being used anywhere, then it doesn’t add to the file size Drag

onto the stage an instance of the Movie Clip containing your

anima-tion Name this instance my_animation

ptgYou can do a lot more synchronizing animation with a video In the preced-

ing task, every frame of the animation is synchronized with a frame in thevideo Often, you only need to update an overlaying graphic once in awhile For example, you could display a caption containing the speaker’sname or bullet points that match what the speaker is discussing In such sit-

uations, you don’t need every frame synchronized Such cases are more

ap-propriate for cue points You can actually inject cue points into an .flvatthe time you encode it (see Figure 19.6), as you do in the next task

At the stage when you encode the .flv, two kinds of cue points are Eventand Navigation In both, you’re given the opportunity to insert additionaltextual data for each cue point The Navigation cue points additionally in-sert a keyframe that makes that cue point seekable That is, when usersclick the Next or Previous button in the FLVPlayback component, theyjump to these Navigation cue points Navigation cue points are appropriatefor any point in the video to which you want the user to be able to jump di-rectly, such as the beginning of each chapter in a story Event cue points areappropriate when you want something to appear or happen at a specificpoint in time while the video plays

If you’re doing a ton of captioning, there’s a third-party tool called ate (www.captionate.com), which we highly recommend It’s especially de-signed to make it easy to inject cue points with captions Perhaps most

9 From the Components panel, drag an instance of the FLVPlaybackcomponent onstage, and name the instance my_video Place your ani-mation on top of the video either by using the menu Modify, Arrange

or by putting the video and the Movie Clip in separate layers Finally,select the first keyframe in your file, open the Actions panel, and typethis code:

stage.addEventListener(Event.ENTER_FRAME, updateAnimation) function updateAnimation ( evt ){

var percentage = my_video.playheadTime / my_video.totalTime my_animation.gotoAndStop( Math.floor( percentage * my_anima- tion.totalFrames ) )

}

ptgimportant is that Captionate plays the audio to make it easy to decide

where to inject cue points It’s nearly impossible to use Flash for this

pur-pose because the video plays no audio at the Inject Cue Point stage

Inject-ing cue points usInject-ing Flash is still quite powerful, as you see next

You can download the source video (shoe-flip.mov) for this exercise from

the book’s website

1 Open the Adobe Media Encoder Click Add, and select the

shoe-flip.movyou downloaded

2 Select the movie you just added from the list under Source, and click

on the Settings button on the right You might want to remove the

other things from the list by highlighting them, and clicking Remove

3 In the Settings dialog, notice the Cue Point Name table Scrub using

the large pointer above the video’s Timeline to 6.29 seconds or near

6.29 Press the + (plus) button, and replace the name Cue Point with

the word miss Scrub to 14.28 or so, and press the + button, and

name this cue point catch1 Scrub to 17.29, add a cue point, and

name it catch2 Finally, scrub to 21.25, and add a cue point named

catch3 The complete set of cue points is shown in Figure 19.7 You

can click OK when you’re finished injecting the cue points

6 Now you can produce some graphics to appear when the sync pointsoccur Suppose you want a graphic to appear then fade away that ei-ther reads “oops” or “catch number 1” (or 2 or 3) To do this, star t bymaking four Movie Clip symbols, each with a static graphic image ortext to represent “oops,” “catch #1,” “catch #2,” and “catch #3.”

7 After you have created your four symbols, make a single symbol tohold them all Select Insert, New Symbol Name it Content, and makesure it’s using the Movie Clip behavior When you click OK in the NewSymbol dialog, you are taken inside the Content symbol Select Frame

1, open the Actions panel, and type the following code:

miss1occurs

9 Next, click in Frame 10, and select Insert, Timeline, Blank Keyframe(or press F7) Drag an instance of the “catch #1” symbol Click thekeyframe, and use the Properties panel to label this frame catch1.Repeat this step for the next two “catch” symbols (go out 10 frames,inser t a blank keyframe, drag the symbol onto the Stage, and label thekeyframe)

FIGURE 19.7

Use these cue point names and times Don’t forget catch3 at 21.25 (not shown).

Optimizing Quality and File Size

With all this talk of encoding options and coding tricks, it might be easy to

lose sight of the core goal: namely, to produce the best looking video that

downloads fast It might seem quaint to study traditional techniques from

decades ago, but that’s exactly what you should do if you want good-looking

video For example, use a tripod and shade the camera lens to reduce flare,

which can desaturate the colors Consider a few strategic cuts instead of special

effects that can make transitions long and arduous Photographers and film

makers can share a wealth of experience that all translates to digital video

We also have a few technical tricks that can reduce the file size without

hav-ing a huge impact on quality The two biggest factors that have an

immedi-ate impact on file size are the video’s frame rimmedi-ate and its pixel dimensions

For example, a 12 fps video is nearly exactly half the size as a 24 fps video

A lower frame rate is not only smaller, but it doesn’t look quite as good—

especially if there’s a lot of motion The best thing to do is to take a small

representative sample and test different framerates Keep going lower and

lower until the quality is unacceptable, then back off

Inject and Use Cue Points

TRY IT YOURSELF ▼

10 Return to the main Timeline by clicking Scene 1 in the edit bar, selecting

Edit, Edit Document (or press Ctrl+E) Open the Library, and drag an

instance of the Content symbol onto the stage near the my_video

in-stance of the FLVPlayback component Use the Properties panel to

name your instance of the Content symbol content_mc Naming that

instance might be a challenge if you don’t do it immediately after

drag-ging it to the Stage because the first frame is empty The instance

on-stage looks like only a white circle

11 Finally, click the first keyframe in your main Timeline, open the Actions

panel, and type the following code:

function cuePointReceived ( evt ) {

content_mc.gotoAndStop( evt.info.name )

}

my_video.addEventListener( “cuePoint”, cuePointReceived )

When the video plays and a cue point is encountered, it broadcasts an

event The preceding code listens for those events and, when events

are received, tells the content_mcinstance to jump to the frame label

that matches the cue point’s name In the downloadable files for this

hour you find a more extensive example, which also keeps the

content_mcupdated as you scrub the FLVPlayback component

Like any raster graphic, you can also render videos at different dimensions

Similar to how low frame rates make for a smaller video, smaller sions make the file smaller, too A great tip that can have a surprising effect:

dimen-Often, you can render a video at half its final size and then stretch it duringplayback For example, you want a video to display at 240×320 You canrender it at 120×160, but stretch the video holder (video object or compo-nent) to 240×320 Test it out! Make a video at 240×320 at a particular band-width, and make another at the same bandwidth but only 120×160

Naturally, the smaller one is sharper until you stretch it, but the paradox isthat often the stretched one looks way better than the same file-sized un-stretched one

Lastly, as a bit of a repeat from Hour 13, “Including Sound in Animations,”

stereo sound is twice as big as mono Be sure you need stereo before you clude it in your video By the way, when you embed video inside yourFlash movie, you set the compression level via the Publish Settings forStream sound

in-Using Outside Video Editors

In addition to using Flash to compress videos into the .flvformat, you canuse outside video editors to create .flvs directly (via a plugin that gets in-stalled when you install Flash) You can also use the stand-alone AdobeFlash Video Encoder as an alternative to using Flash to create the .flv Theidea is video professionals can best make final edits and other sweetening

in their favorite video editor, and then export directly to .flv In addition,you can use the stand-alone version of the Flash 8 Video Encoder to com-press raw videos into .flvs in batches Either way, you don’t have to tie upFlash compressing your videos

To use the plugin you need to launch one of the supported video editors onthe same machine where you have Flash installed The supported softwareincludes Adobe After Effects, Apple FinalCut Pro, and Avid Xpress DV

Once you’re finished editing the video, select something like File, Export, Flash Video(though the exact menus differ for each product) You see adialog identical to the Encoding dialog you saw when you used Flash to dothe compression

The stand-alone version should be installed in a folder adjacent to whereFlash is installed (C:\Program Files\Adobe for example) Again, theavailable options are identical to those found when using Flash to performthe compression However, the stand-alone version adds a batch featurethat, at your convenience, compresses a long list of videos you’ve added to

the queue This means you can take several videos, add them to the

queue—even add the same one but select different compression settings for

comparison—and then let them compress overnight Video compressors are

always slow, and the On2 VP6 codec is extra slow, but worth the wait,

when compressing

3D Animation with Video

We briefly touch on how to use your .flvfiles with 3D animation You

al-ready have the techniques you need to create an .flv, create a movie clip

with the .flvinside it, and to create and motion tween a 3D object We put

those all together to show you how to animate your movie

Animate a Video in 3D

TRY IT YOURSELF ▼

In this task, you create a video embedded in a Movie Clip that animates in

a 3D motion tween

1 We rush through this first bit because you already know how to do it

Open a new Flash file, and choose File, Import, Import Video Choose

the Embed FLV option, and select your .flvfile Click Continue

2 In the Embedding screen, this time choose Movie Clip for Symbol

type Leave ever ything else checked Click Continue, and then click

Finish on the next screen

3 You see your Movie Clip on the stage If you get the frame length

warn-ing, agree to extend the length of the clip as needed

4 Go to Frame 40 or so, and inser t a frame by pressing F5 While you’re

on that frame, click on the 3D Rotation Tool Move your movie clip in

some fashion Review Hour 11, “Simulating 3D Animation,” if you’ve

forgotten how the 3D tool works

5 Finally, inser t a motion tween in your Timeline Test your movie

That’s all there is to it Between being able to embed a video and animate it

in 3D, you should be able to create some fascinating effects

SummarySome messages are simply best suited for video Sometimes only video re-veals the personality of a subject When a demonstration is needed, there’sjust nothing like a video The majority of this hour dealt with the technicallimits of video Don’t let that stop you The cost, extra work on your part andextra download time for the user, can definitely be worth it when necessary

In this hour, you learned how to embed a video right into your file as well

as how to create a Flash video file (.flv) and play it externally Embedding

a video might be easier and does provide the ability to step through eachframe, but when the video is longer, the added file size to your main movieisn’t worth the cost of embedding it Keeping an external .flvnot only pro-vides the best synchronization and video quality, but the user only down-loads the videos they request There are many more topics worth studying

in Flash video, but this hour touched on the primary points

Q&A

Q I realize you recommend against using .avifiles, but that’s all I have

Should I first convert an .avifile to a QuickTime file by using a toolsuch as the QuickTime player?

A First, if the only source file is an .avifile, you might as well use that Ifit’s good quality, great; if it’s not, oh well—but conver ting it to a Quick-Time file can’t make it better

Q I’ve embedded a video with a great music track Why does the audiosound so terrible?

A You need to set how the audio is to expor t via the Stream compression

in the Flash tab of the Publish Settings dialog box See Hour 13 formore about sound compression The key is that the Stream setting iswhat affects the audio in an embedded video

Q I know that the compression stage can take a long time, but even afterI’ve compressed the embedded video, my Flash movie takes forever toexport Why is that?

A Audio takes a long time to compress, and it’s likely that Flash is pressing the audio at the time you publish You can temporarily changethe Audio Stream setting to Raw so ever y time you do a Test Movie, itgoes quicker Remember to set it back to a reasonable compressionlevel before you expor t the final time

Q Every time I attempt to compress a particular video, regardless of

whether I select to make an external .flvor embed the video, Flash

reports the audio can’t be imported What’s the problem?

A Depending on the type of audio track in your video, Flash might not

sup-por t it You need to get a new source file

Workshop

The Workshop consists of quiz questions and answers to help you solidify

your understanding of the material covered in this hour You should try to

answer the questions before checking the answers

Quiz

1 If On2’s VP6 codec yields better results than the Sorenson’s Spark

codec (which it does), why would you ever select Spark?

A You don’t want to pay the additional license fees that accompany

the VP6 codec

B You plan on delivering to Flash Player 7, and the VP6 codec only

works on Flash Player 8 or later

C You don’t like that the VP6-encoded videos are at least twice the

size of Spark-encoded videos

2 How do you change the compression on a video that you’ve already

embedded?

A You can’t Instead, you could re-embed and recompress at that time

B You access the video item in the Library, select its Properties

op-tion, and then click Recompress

C You need to modify the Video tab of the Publish Settings dialog box

3 On2’s VP6 is which of the following?

A An old technique where rock bands would begin to play “on two”

instead of “on four” as in “one, two, three, four.”

B The compression technology available in Flash and the

decom-pression technology used in the Flash player

C An option that costs extra to compress your videos with

super-compression