Using Video

Next you'll learn some of the ways to display videos both embedded into your .swf and created as an .flv that resides outside of your file. In this section you'll see how to control the playback of your videos (like giving the user a stop and play button) as well as using special effects such as masking. The creative side of displaying a video is much more interesting than the technical details. But, because the technical details vary between embedded and external video I've separated the two.

Playing an Embedded Video

As a review, a sound in a keyframe that is set to Event begins to play when that frame is reached, and it continues to play until it's finished even if the Timeline slows down to display all the frames. Stream sounds are locked to the Timeline. This means that you need to make sure that 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 the audio portion. For example, if the video is 10 seconds long and the frame rate is 12 fps, you need 120 frames in the Timeline. Flash will tell 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 default 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 selecting the Flash tab).

The visuals in your video behave like Graphic symbols. In fact, 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. 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 4 of the preceding task).

These concepts are just discussed here 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.

Try It Yourself: Make a Playback Controller for an Embedded Video

In this task, you'll add some standard video buttons that give the user a way to control the video. Follow these steps:

1.	Create a new movie and import a video as you did in the task "Import a Video" earlier this Hour. That is, make sure you select embed on the deployment dialog that appears when you import and compress the video. Then drag it onto your main timeline and let Flash add frames needed.
2.	You're about to create 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 Libraries, Buttons. Inside this Library is a folder called 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 (consider using the Align panel).
4.	Open the Actions panel and select the rounded green pause instance. Then type the following code: on(release){ stop(); } For a review of ActionScript, revisit Hours 15 and 16.
5.	Keep the Actions panel open but select the rounded green play button instance and type this code: on(release){ play(); }
6.	Finally, for the rounded green stop button, type this code: on(release){ gotoAndStop(1); }
7.	Select the keyframe, and type this code into the Actions panel: stop();
8.	Test the movie, and you'll be able to control the embedded video.

By the way, it's very easy to add step forward and step backward buttons. Just use this code for your step forward button:

 on(press){    nextFrame(); } 

And this for your step back button:

 on(press){    prevFrame(); } 

One fair criticism of the previous task is that it sure did dirty up the main timeline. That is, the timeline has as many frames as the video does. Normally I'd suggest putting the video inside a Movie Clip; let that clip grow as long as it needs to be; then place the Movie Clip instance in the main timeline where it will only use 1 frame. The problem with that approach is that when Flash reaches the frame containing the Movie Clip it must download all the frames contained in that clip before displaying anything. If the clip has a big video this could mean a long delay. So, doing it the way you did in the task is appropriate for embedded videos. By the way, you can save the preceding task as built and then, in Hour 20, use the MovieClipLoader to load the movie at runtime.

Before we move on to playing external .flv videos, I should mention that all the cool stuff such as masking the video into an odd shape works with embedded videos. This is covered later this hour in the Special Effects section.

Playing an External .flv Videos

Earlier this Hour you heard that Flash can play external .flv files. Naturally, you need to first create the .flv. There are four general ways to produce an .flv:

• Import a video into Flash Professional 8 and select one of the first three deployment options listed (that is, not the option to embed the video). The advantage of doing it this way is that it also configures a component for you.

• Use an outside application to produce the .flv. Either the Flash 8 Video Encoder (that ships with Flash Professional 8) or the third-party products On2's Flix or Sorenson Media's Squeeze 4.2 for Flash.

• Export directly from a supported video editor on a machine with the Flash Video Encoder (which ships with Flash Professional 8) installed. (More about this option and which applications are supported are in the section, "Using Outside Video Editors.")

• Use any version of Flash 8 (including Basic) to first embed the video and then export an .flv via the video item in the library. By far, this renders the lowest quality but it works if you don't have Flash Professional 8 and want to follow some of the tasks that would otherwise require the Pro version.

The tasks that follow concentrate on how to play an external .flv once it's produced. In the next task, "Create an .flv and Use the FLVController Component," you'll use Flash Professional 8 to generate the .flv and use it immediately. In "Create and Play an .flv the No-Frills Way," you'll use any version of Flash to export an .flv and then play it externally without any components. Realize you can use any .flv (even if it's not the best quality possible) and then replace it later with a better one.

By the Way: What's Wrong With Videos Produced in Flash Basic 8?

When embedding video inside Flash Basic 8 the minor disadvantage is that you must select a compression profile from a variety of presets Flash Professional 8 has the advanced settings where you can fine tune things. In every other way, embedded videos are the same for either product. However, embedded videos (even if you export it as an .flv from the Library) always use CBR (Constant Bit Rate). A video using VBR (Variable Bit Rate) is always better quality than an identically sized CBR video. That's because every frame in a CBR is the same size. A VBR will use more bandwidth of the frames that need it (say, ones with detail) and make up for the increased size by sacrificing frames that don't need the bandwidth (perhaps blurry or frames with lots of motion). Producing .flvs using the first three options above (that is, not embedding and exporting) use VBR.

However you produce the .flv, playing an external .flv will definitely give 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 .swf and the .flv file (plus an additional .swf if you use one of the FLVPlayback component's skins). Plus, 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'll 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). All I'm saying is that there are additional restrictions when playing .flv files.

The following task will probably seem suspiciously simple after the preceding explanation. You'll need Flash Professional 8 for this task, but in it you'll experience the easiest, fastest, and most advanced way to play .flvs.

Try It Yourself: Create an .flv and Use the FLVPlayback Component

In this task, you'll create an .flv and advanced controller with no programming. Here are the steps:

1.	Make a new folder in a known location so that all the files you'll need to track are easy to find.
2.	Create a new file and save it in the above folder as "my_movie_player.fla." Select File, Import, Import to Stage. Point to a source video file such as a QuickTime.
3.	On the Select Video dialog, click Next; on the Deployment dialog, select "Progressive download from a web server" and click Next; on the Encoding dialog, select "Flash 8 - High Quality (700kbps)" (and, if the video is really long, trim the length by dragging the end point triangle next to the preview to the left), then click Next.
4.	You should see the Skinning dialog as in Figure 18.5. Select the skin "ArcticExternalPlaySeekMute.swf" (or, any one that strikes your fancy with a name ending "...ExternalPlaySeekMute.swf"). Click Next. Finally, feel free to read the Finish Video Import dialog and then click Finish.
5.	Sit back and wait for the compression to complete. (It can take a long time as the VP6 codec is very asymmetric meaning it takes a long time to compress and much less time to decompress.) When it's done compressing open the folder where you saved your movie and notice a new .flv file.
6.	Back inside your Flash movie you should notice the FLVPlayback component sitting onstage. Select that Component instance and open the Parameters panel. There are lots of parameters you can feel free to modify including the skin (in case you want to use a different skin than the one selected in step 4). The main parameter, which has already been set for you, is the contentPath (which, you can also change if you change the .flv's file name).
7.	Now for the fun part. Test the movie. Pretty sweet how that component works. When you're done watching your video there's one last step that's super important to understand.
8.	Go back to your file folder and notice that in addition to the .flv and the my_movie_player.swf based on your .fla, there's another .swf (ArcticExternalPlaySeekMute.swf) for the component. You need to upload all three (plus an .html file when you publish) when you deploy this to the Web. (More about publishing in Hours 19 and 24, but don't forget that piece for the component plus the .flv file.)

As great as the FLVPLayback component is, you still might want to make your own controls. The FLVPlayback component can be set to no-skin and you can use ActionScript to make your own buttons control the video. While it's actually a very powerful component (even without the skin) you still need Flash Professional 8 to use it. If you only have Flash Basic 8 you can still play external .flvs produced elsewhere just not using the FLVPlayback component.

I should note, too, that the FLVPlayback component requires your users have the Flash 8 Player. This is also a requirement any time you select the On2 VP6 codec. If you want to deliver to the Flash 7 Player not only do you have to select a different codec (Sorenson Spark) but you have to either use one of the Media Components (also only available in Flash Professional) or use no component.

The following task shows how to play an external .flv without using components.

Try It Yourself: Create and Play an External .flv the No-Frills Way

If you already have an .flv produced with Flash Professional 8 or one of the third party tools, you can skip to step 3.

1.	Embed a video as you did in the task "Embed a Video." That is, select File, Import and from the second import dialog (the one for Deployment) select Embed Video. If you want this task to work in Flash Player 7, be sure to select a supported profile from the Encoding dialog (everything else you do here won't require Flash Player 8).
2.	Once the video is embedded, find the video object in the Library. Double-click on it to access its properties. Click the Export button and save a .flv named my_file.flv. You can close this Flash file now because you were just using it temporarily.
3.	Start by making sure your .flv is named my_file.flv. Create a new movie and save it in the same folder as the .flv.
4.	Create a video object on the stage. Open the Library window and, from the library's options menu, select New Video. Drag the video object onto the stage and name the instance my_video. You can resize the instance to match your actual .flv's dimensions.
5.	Create two button instances and name them stop_btn and play_btn, respectively.
6.	Open the Actions panel and click the first keyframe in the timeline, then type this code: my_nc = new NetConnection(); my_nc.connect(null); my_ns = new NetStream(my_nc); my_video.attachVideo(my_ns); play_btn.onPress = function(){ my_ns.play("my_file.flv"); } stop_btn.onPress = function(){ my_ns.play(false); }

There's a ton more you can do with the NetStream object, such as monitor how fast a video is downloading. The only catch is that, unlike using the FLVPlayback component (which also has much more to it), you'll have to do most of the coding by hand. You're welcome to read all about in a Flash Video paper I wrote at www.phillipkerman.com/wholestory.

Special Effects

Now for the fun part. Once you've embedded a video or set up a component of video object to display an external .flv, you can perform countless special effects that can dramatically change the way a user experiences your video. We'll look at just a few.

Try It Yourself: Rotoscope (Draw Frames of a Video)

In this task you'll combine frame-by-frame animation with live action video. Here are the steps

1.	Embed a video like you did in the task "Embed a Video" earlier this hour. At the end, I'll show you how to convert this task to work with an external .flv, but you have to start by embedding the video. If you are planning on playing an external .flv select Modify, Document and set the framerate to match the framerate 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 the converting 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 say "OK" to the dialog asking to add more frames to accommodate the video's duration (as earlier in Figure 18.3).
3.	In the timeline where the video appears, insert 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, just 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'll 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 > button. Draw right into the empty keyframe of frame one (perhaps draw an outline 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 insert pauses (by removing the keyframes) or even do tweens that match the video, but it might be just as fast to simply draw every 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've got two steps left. First, remove the video from the timeline and create an .flv named my_file.flv (as you did in "Create an .flv and Use the FLVController Component" if you have Flash Professional 8 or as you did in "Create and Play an External .flv the No-Frills Way" if you only have Flash Basic). And second, write the code so that the animation syncs up with the external .flv.
7.	Instead of actually deleting the video, simply access its layer properties and set it to Guide so that you'll always have the video for reference. If the video object isn't being used anywhere then it won't add to the file size. Drag on to the stage an instance of the Movie clip containing your animation. Name this instance my_animation.
8.	From the options menu in the Library select New Video. Drag an instance onstage and name the instance my_video. Select the first keyframe in the movie, open the Actions panel and type this code: my_nc = new NetConnection(); my_nc.connect(null); my_ns = new NetStream(my_nc); my_video.attachVideo(my_ns); my_animation.stop(); my_ns.play("my_file.flv"); var framerate=12; onEnterFrame=function(){ my_animation.gotoAndStop(Math.floor(my_ns.time*framerate)); } Note that you'll need to set the framerate variable to match your movie's actual framerate (shown here as 12). The code that runs every enter frame ensures the my_animation clip remains in sync with the time of the NetStream (that is, the external video).

There's a lot more you can do with synchronizing animation with a video. In the task above, every frame of the animation was synchronized with a frame in the video. Often, you only need to update an overlaying graphic once in a while. For example, you could display a caption containing the speaker's name or bullet points that match what the speaker is discussing. In such situations you don't need every frame synchronized. Such cases are more appropriate for cue points. In Flash Professional 8 you can actually inject cue points into an .flv at the time you encode it (Figure 18.6) or use the Media Components to set cue points (shown when you do the next task in Figure 18.7).

Figure 18.6. You can inject cue points right into the .flv when you encode using Flash Professional 8.

Figure 18.7. The MediaPlayback lets you set cue points from inside Flash.

Inserting cue points is fairly intuitive. In fact, there's a third-party tool called Captionate (www.captionate.com) which I'd highly recommend for injecting .flvs with cue points and complete captioning data. In all cases, the code to actually make something happen when the cue points are triggered is slightly more involved. One exception is cue points for which you set the type column to Navigation. When you use the FLVPlayback component users can jump to those cue points using the next and back buttons. In the following task you'll set up a Movie Clip to display bullet points in synch with a video. After you have it set up, you can take one of three approaches: synch to cue points injected into the .flv, manually input cue points into the MediaPlayback component, or do everything manually (the old-school way).

Try It Yourself: Use Cue Points

You can download an .flv for this exercise from www.phillipkerman.com/teachyourself/samplefiles/.

1.	Create a new Flash file and save it adjacent to the colors.flv you downloaded.
2.	Select Insert, New Symbol and name it Bullets and pick Movie Clip then press OK.
3.	You should be inside the Bullets Movie Clip. Create some static text that reads "Blue." Click the keyframe and use the Properties panel to type blue into the frame label field. Insert a blank keyframe in frame 2.
4.	In frame 2 we'll do something a bit more fancy. Namely, we'll place a symbol which itself contains an animation that plays once and stops. Start by creating some static text that reads "Pink Stuff." Select the text and choose Modify, Convert to Symbol. Name it "Pink Text" and make sure it's a Movie Clip. Now, with that instance of Pink Text selected, select Modify, Convert to Symbol (again). Name it "Animated Text" and make sure it's a Movie Clip. Now, double-click the instance of Animated Text. Inside this clip click on frame 10 and insert a keyframe (press F6). While frame 10 is selected, open the Actions panel and type the code: stop(); Go back to frame 1 and move the instance to the left and set the alpha to 10%. Click the keyframe in frame 1 and from the Properties panel select Motion. Go back up one level (so you're inside the Bullets symbol). Finally, give frame 2 (of the Bullets symbol) the label pink. Now when the user arrives in frame 2 they'll see the "Pink Stuff" text animate into place and stop.
5.	Inside the Bullets symbol, go to frame 3 and insert a blank keyframe (press F6). Type some static text that says "Green Leaves". You're welcome to make this animate too just make sure you nest any animation. When you're done be sure to give the third frame (here inside the Bullets symbol) the label green.
6.	Place an instance of the Bullets symbol on stage and give it an instance name bullets.
7.	Here's the cool part. You can take any one of the following three steps: You can follow step 8 that uses the new FLVPlayback to sync the bullets to the cue points that I already embedded into the .flv. Alternatively, go straight to step 9 to use the older Media Components to input the sync points manually (which will work with any .flv). Finally, if you don't have Flash Professional 8, you can jump to step 10 where you can use a video object and use an array definitely the most home rolled approach (but it works with Flash Basic 8).
8.	Approach 1: Drag an FLVPLayback component on to the stage and place it next to the bullets instance. Give the FLVPlayback an instance name playback. Select the first keyframe and type this code into the Actions panel: playback.contentPath = "colors.flv"; bullets.stop(); myListener = new Object(); myListener.cuePoint = function(evt) { bullets.gotoAndStop(evt.info.name); }; playback.addEventListener("cuePoint",myListener);
9.	Approach 2: Drag a MediaPlayback component onto the stage and place it next to the bullets instance. (Remove the old playback instance if you performed step 8.) Give the MediaPlayback an instance name playback. Select Window, Components Inspector and select the MediaPlayback instance. Click the plus button three times to add three sync points. Name the three sync points blue, pink, and green respectively. Set the times to 0:0:0:0, 0:0:4:4, 0:0:7:2 respectively. The populated component inspector should look like Figure 18.7. Finally, select a keyframe in your movie and type this code into the Actions panel: playback.contentPath = "colors.flv"; bullets.stop(); myListener = new Object(); myListener.cuePoint = function(evt) { bullets.gotoAndStop(evt.cuePointName); }; playback.addEventListener("cuePoint",myListener);
10.	Approach 3: From the Library's options menu, select New Video. Drag an instance of the video object on to the stage. Give it an instance name my_video. Open the Actions panel, select a keyframe and type this code: bullets.stop(); my_nc = new NetConnection(); my_nc.connect(null); my_ns = new NetStream(my_nc); my_video.attachVideo(my_ns); myPoints=[0, 4.4, 7.2]; myLabels=["blue", "pink", "green"]; onEnterFrame=function(){ if ( my_ns.time > myPoints[myCounter] ){ bullets.gotoAndStop(myLabels[myCounter]); myCounter++; } } //every time you want to restart the video, do these three lines: myCounter=0; bullets.gotoAndStop(1); my_ns.play("colors.flv");

If you don't mind requiring Flash Player 8, the first approach (step 8) is best. If you have Flash Professional and don't use the On2 codec you can deliver to Flash Player 7 using the second approach (step 9). Finally, with Flash Basic 8 you're limited to the last approach (step 10). In that case, you can decide whether the On2 codec warrants requiring Flash Player 8.

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 may seem quaint to study traditional techniques (developed 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. The point is there's a wealth of experience photographers and film makers can share that all translate to digital video.

I also have a few technical tricks that can reduce the file size without having a huge impact on quality. The two biggest factors that have an immediate impact on file size are the video's framerate and its pixel dimensions. For example, a 12 fps video will be nearly exactly half the size as a 24 fps video. A lower framerate will not only be smaller, but it won'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.

Just like any raster graphic, you can also render videos at different dimensions. Similar to how low framerates make for a smaller video, smaller dimensions make the file smaller too. But here's a great tip that can have a surprising effect. Often, you can render a video at half its final size and then stretch it during playback. For example, you want a video to display at 240x320. You can render it at 120x160 but just stretch the video holder (video object or component) to 240x320. Test it out! Make a video at 240x320 at a particular bandwidth and make another at the same bandwidth but only 120x160. Naturally, the smaller one will be sharper until you stretch it. But the paradox is that often the stretched one looks way better than the same file sized unstretched one.

Lastly, as a bit of a repeat from Hour 10, "Including Sound in Animations," stereo sound is twice as big as mono. Just be sure you really need stereo before you include it in your video. By the way, when you embed video inside your Flash movie, you set the compression level via the Publish Settings for Stream sound.

Using Outside Video Editors

Flash Professional 8 comes with both the Flash 8 Video Encoder and a plugin to let other video editors create .flvs directly. These get installed automatically when you install Flash (or you can run the installer later) and it works in conjunction with various popular video editors. The idea is that video professionals can best make final edits and other sweetening in their favorite video editor and then export directly to the Flash video format (.flv). In addition, you can use the stand-alone version of the Flash 8 Video Encoder to compress raw videos into .flvs in batches.

To use the plugin you just need to launch one of the supported video editors on the same machine where you have Flash Professional 8 installed. The supported software includes Adobe After Effects, Apple FinalCut Pro, Avid Xpress DV, and Discreet Cleaner among others. Once you're finished editing the video, simply select something like File, Export, Flash Video (though the exact menus differ for each product). You'll see a dialog identical to the Encoding dialog you saw when you used Flash to do the compression.

The stand alone version should be installed in a folder adjacent to where Flash 8 Professional is installed (C:\Program Files\Macromedia\ for example). Again, the available options are identical to those found when using Flash to perform the compression. However the stand alone version adds a batch feature that will, at your convenience, compress 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 when compressing.