Introduction

Flash MX added true video support and now Flash MX 2004 adds several video enhancements. The most dramatic visual improvement is how the Flash player 7 can now maintain a higher video frame rate. In fact, it's even possible to play videos at a higher frame rate than your Flash document's frame rate. Performance improvements, however, are really just icing on the cake--you just accept the enhancements and enjoy it.

In this article you'll learn about the improvements to your production workflow as well as the technical options now available when designing your Flash application. Specifically, this article covers:

• The new wizard-based import process for embedding video inside Flash.
  
• How Flash MX Professional 2004 offers video professionals the ability to export Flash videos directly from 3rd party video editing tools.
  
• How to keep your videos separate from your main application and progressively download them as needed.
  
• How to use Flash MX Professional 2004's Media Components to simplify video playback.
  

Which Way To Go

There are two ways to use video in Flash: Eeither import your source video and let Flash compress it or use an outside tool to create an .flv that you then playback in your Flash application using a script similar to playing one used to play an external .mp3. In fact, you could actually import an .flv into Flash as if it were a source video in which case only the audio would get compressed by Flash. (Using an outside tool to create a .swf has little or no value now that Flash can play .flvs.) In any event you either use Flash to compress or an outside tool. First we'll look at importing and compressing the video using Flash. Second, we’ll look at using other tools to create .flv files and then play them back inside of Flash.

The Wizard Is Your Friend

The new import wizard is not some cheesy feature just for newbies. Not only does it step you through the logical process always necessary when importing video but it also adds several new features. Specifically you can now:

• Make rough cuts to your video instead of importing it all.
  
• Specify a target bandwidth instead of using a trial and error method whereby you select a quality level, compress and see the resulting file size, divide by the duration and then repeat with a different quality level.
  
• Save all your compression settings so that you don't have to set all the dials by hand each time.
  
• Make sophisticated adjustments to effects such as tinting and cropping (and save those settings as profiles as well).

The best way to see all these options is by trying it yourself. The following tutorial exercise walks you through all the new settings.

1. In a new Flash file select File>Import>Import to Stage (or press Ctlr+R). Point to any source video file. For example, there's a file sample.mov that gets installed with QuickTime that will work fine for this walk through.
   
2. The first dialog asks whether you want to embed the video into your Flash document or to link the video to it ( in which case you can only export a QuickTime (movie with a Flash layer). Select the first option and then click Next as shown below.
   
   
   
   
3. Next you're asked if you want to import the entire video or if you want to edit the video first. Although this sample video is so short you'd probably never need to edit it, we can explore the editing options now and just return without making any changes. So, click Edit the video first then click Next, as shown in the figure below.
   
   
   
   
4. You should see one of the most basic video editors of all time (as the figure, below, shows). It's fairly straightforward but I do havethere are a couple important things to notes regarding its use:. You'll always need to add at least one clip to the list on the left. You do this by moving the in and out points (the triangles below the blue timeline) and then clicking Create clip. You can remove and reorganize the sequence of clips in the list on the left. Also notice the check box at the bottom left to optionally combine multiple clips into a single library item. Without that setting, you'll have as many video items in your library as you have clips. Ideally, you'll want your video cut before importing into Flash, but these editing options are nice in a pinch. For now just click Back so we can proceed without editing the clip.
   
   
   
   
5. This time, click Import the entire video and you'll see the base Encoding dialog box shown below.
   
   
   
   
6. I call this the "base" Encoding dialog because from here you can take one of two diversions before proceeding to encode your video. Whether you modify the Compression profile or create a new Advanced setting you always come back to this dialog box before completing the import. In the Compression profile drop down notice that you're given a few starter profiles. It might be interesting to for you to explore each one's settings by selecting the Edit button. For now, leave the default profile (DSL/Cable 256 kbps) and then click the Edit button.
   
   
7. The compression settings dialog is shown in figure 5. The big new feature here is that you can select to prioritize either a bandwidth kbps level or quality percentage and the other will adjust as needed. That is, the default for this setting is a target bandwidth of 225 kbps meaning quality will adjust as needed in order to maintain that bandwidth. If, on the other hand, you select to prioritize quality (by clicking that radio button) the bandwidth will adjust in order to maintain the given quality level. (Quick tip: even if you want the highest quality possible you should try a number less than 100%. This is like similar to how JPGs usually look just as good at, say, 97% but their file size shrinks significantly.)
   
   
   
   
8. Just to be complete, let me point out a few other details. The preview area gives you a rough idea of how your bandwidth or quality setting will affect image quality. (For the sample.mov move the current frame marker to the middle of the video to see something other than white.) The keyframes setting (only available when you prioritize quality) refers to how many keyframes per second get generated. The Synchronization options let you define how to handle the situation of a source video with a who's different framerate is different than from that of the Flash movie into which you're importing it. For example, a 10 second video at 30 fps has 300 total frames. In aA Flash movie set to 12 fps, however, uses only 120 frames every 10 seconds. Usually (provided you've first set your Flash document's frame rate to what you want) you will just opt for the option "Synchronize Video to Macromedia Flash Document Frame Rate" which means "I want the video to match my current frame rate (in Flash) even if that means frames are dropped during the import. If your video has a higher frame rate than your movie this option will result in a jumpier video. Keep in mind that when you don't synchronize the video, 'its audio track will likely drift. (By the way, later you'll learn how to play an external .flv video of any frame rate regardless of your movie's frame rate.) Now that we're done looking at the compression settings, click Back so that we don't save any changes. If you do want to save a set of compression settings first select "Create new profile..." from the compression drop down in the base encoding dialog box (Step 5, above) and click Next when you're done (where Flash will let you name the new profile).
   
   
9. You should be back at the base encoding dialog in Step 5, above. Now lets take a quick trip into the Advanced settings. First select "Create new profile..." in the Advanced settings drop down. You'll be taken to the dialog box shown in the figure below.
   
   
   
   
10. The advanced settings include color effects, cropping/scaling, and tracking options. Color Effects are pretty self explanatory, but remember the preview reflects changes as you make them. Also, realize that by scaling your video you'll always create a smaller file. Finally, the tracking options are really production helpers. Regarding the audio track, you can optionally import a separate sound library item. The import setting lets you automatically stuff the video into a Graphic or Movie Clip symbol (instead of defaulting to placing it on stage). For now, just click Back but realize you can also save your own advanced settings profiles just like compression settings.profiles.
    
    
11. Finally, you can click Finish on the base encoding dialog box. That is, we took a trip down both the compression and advanced settings but didn't make any changes. Obviously, you can tinker with these as your projects warrant.
    

Audio Compression You didn't see any audio compression options when importing the video because that's handled at the time you export the Flash movie. That is, your publish settings for Stream sounds is what gets used for an embedded video's audio.

The import wizard is a mix of sophisticated options and convenience features to improve your productivity. Once the video is imported into Flash there's really not much new over how you use it. Basically, it's like a Graphic symbol because the timeline where the video resides needs enough frames to accommodate the entire duration.

Next we'll look at both how to create and play native .flv files. You can create .flvs with Flash MX Professional 2004 (and a supported video editor) or one of the other third party tools that create .flvs (such as Sorenson Squeeze with Spark Pro or Wildform Flix). In addition, Flash Communication Server will record live webcam videos as .flv. If you don't have any of these options you can export an .flv from the video you just imported in the tutorial above. Just find the video item in the library, double click, and then click the Export button. (This way you can still follow the tutorial below where we play an external .flv video.)

Using the Flash Video Exporter with Third Party Video Editors

It turns out that you can still get the ultimate video quality using Sorenson Squeeze with Spark Pro. However a huge work flow improvement is now available to video professionals using tools including Avid Xpress/Media Composer, Apple Final Cut Pro, Adobe After Effects, Discreet Cleaner, and Anystream Agility. Basically, you can edit your video using any of these professional video editors and then export a Flash Video .flv file directly. The figure below shows the export dialog you'll see.

Many of the settings in the Flash Video Exporter dialog box are identical to those available when compressing using Flash. However, one notable addition includes the VBR (variable bit rate) encoding method. This will adjust the bit rate based on the nature of your video content. That is, a few spikes or dips in the bit rate can both support higher quality images as well as keep the file small. Two other options that you won't see in Flash's internal compressor is are the motion estimator and the deinterlace option. The motion estimator allows you to set the compromise between render speed and motion quality. The deinterlace option, on the other hand, is there to remove the interlacing present infor videos created for from television.

The fact you can easily play .flv files without ever importing them into Flash means that once the video stage is complete, the files are ready to display. The video person could just name the files and upload them for your application to display. If you use a tool like Sorenson Squeeze with Spark Pro you can still follow this basic sequence however there's one extra time consuming step: you You must first render the video and then compress it into an .flv file. It's nicer to let the video editor output .flv directly. However, two advantages of Squeeze is are the 2-pass VBR encoding (that which takes twice as long because it analyzes then compresses) and the additional audio compression options (including Fraunhofer MP3). Having said this, it's still way easier to use the new Flash Video Exporter.

Before I show you how to play external .flv files, I should mention that you can also import them into Flash. That is, you can still gain the extra features in the Flash Video Exporter but and still import into Flash. In such a case the .flv imports very quickly because Flash isn't compressing it. However, remember that because Flash compresses the audio at publish time, it's best to only import .flvs with little or no audio compression and adjust Flash's audio compression settings through the publish settings. (to avoid generation loss due to recompression).

Playing External FLVs

You can play external .flvs using script or using the new Media Components. Besides eliminating one step in your production workflow, external .flvs will play at a frame rate independent of the movie that hosts them. We'll first look at scripting it by hand (something you can do in either version of Flash). It turns out Flash MX can play external .flv files too but only through the Flash Communication Server.

You'll see the code to play external .flvs in Flash MX 2004 is nearly identical to the code when using the Communication Server. Here's a quick tutorial to show you how to play .flvs.

1. Create an .flv file using one either the Flash Video Exporter or one of the other tools. You can also export the video you imported in the previous tutorial. Name the video file my_movie.flv.
   
   
2. Create a new Flash document and save it in the same folder as my_movie.flv.
   
   
3. Because we'll be loading the .flv at runtime our Flash we need a video object on stage onto which the video will get attached. Sort of like how when you perform a loadMovie() and target a clip instance. From the Library panel's options menu select New Video (as shown below).
   
   
   
   
4. Drag the video object onto the stage and use the Properties panel to give it an instance name my_video.
   
   
5. Finally, deselect the video instance and add the following code to the Actions panel:
   

   my_nc = new NetConnection();
   my_nc.connect(null);
   my_ns = new NetStream(my_nc);
   my_video.attachVideo(my_ns);
   my_ns.play("my_movie.flv");
   

   The my_nc is an instance of the NetConnection object and it is used when creating the my_ns NetStream instance in line 3. That is, all NetStreams are channels within a NetConnection. Line 2 is a bit funky as it connects to null. In an actuallya Flash Communication Server app you'd specify the address of your server. Finally, line 4 associates the my_video instance with any media that plays through the my_ns NetStream. Lastly, the play() method starts the video.

You'll find several other methods available to the NetStream object. The only catch is that many of the methods are designed for the Communication Server. They work in Flash too, but sometimes you need to make sure the file is entirely downloaded. For example, if you issued my_ns.seek(45) it would attempt to jump to 45 seconds into your video. But this only works if the video is downloaded.

In order to get more information about the NetStream, there's an onStatus event that triggers and gives you detailed status information. You can use the following code (anywhere about above the play() method in line 5 above) to monitor what's going on:

my_ns.onStatus = function(info) {
    for (var i in info){
        trace(i+" = "+info[i]);
    }
};

For example, I saw this in my output window when the video was done playing:

level = status
code = NetStream.Buffer.Empty

That means, if I wanted to trap this event I could use code like the following:

my_ns.onStatus = function(info) {
    if(info.code=="NetStream.Buffer.Empty"){
        //display a play button because the video is done
    }
};

It turns out that you really have to wait for both the status "NetStream.Play.Stop" as well as "NetStream.Buffer.Empty" but they come at separate times. In the downloadable file, you'll see a much more reliable approach that hides and displays the play button properly.

You'll see in the following section on the Media Components how you can manually add cue points (that get triggered when the video plays). Flash Communication Server (FCS) already has a way to embed string event names while you record a video stream. The reason I mention this here is that those embedded events will also trigger when you play the .flv without FCS. To see this you need to do two things: use FCS record an .flv while embedding events at key moments in time; and, set up a script that responds to those events when you playback the .flv. For example, you can watch a video guided tour at my website (www.phillipkerman.com). You'll see and hear the video, but also--because I embedded events that included my mouse position and mouse clicks--you'll see a cursor graphic that moves around exactly as it did while I recorded the video.

Here's the basic code to embed events into a recorded stream. Note: You need Flash Communication Server to record .flvs this way (the free Developer version works fine.)

//generic FCS connection, stream, and publish
my_nc = new NetConnection();
my_nc.connect("rtmp:/app_name");
my_ns = new NetStream(my_nc); 
var my_mic = Microphone.get();
var my_cam = Camera.get();
my_ns.attachVideo(my_cam);
my_ns.attachAudio(my_mic); 

record_btn.onPress=function(){
    my_ns.publish("myRecordedStream","record");
}

stop_btn.onPress=function(){
    my_ns.publish(false);
}

//extra stuff to embed events while recording
owner=this;

owner.onMouseDown=function(){
    my_ns.send("onClick");
}

owner.onEnterFrame=function(){
    my_ns.send("onMoveMouse",_xmouse, _ymouse);
}

Note that I used onEnterFrame instead of onMouseMove to reduce the total number of events added to the stream. Also, note that I just came up with two event names "onClick" and "onMoveMouse". You can add as many as you want--just use the send() method. Finally, notice that I'm passing two parameters (_xmouse and _ymouse) with with the second send().
Take video file named "myRecordedStream.flv" (from inside your "app_name" folder and you can use Flash MX 2004 to play it back along with the embedded events. Here's the code:

my_nc = new NetConnection();
my_nc.connect(null);
my_ns = new NetStream(my_nc); 

my_ns.onMoveMouse=function(x,y){ 
    mouse_mc._x=x; 
    mouse_mc._y=y;
}

s=new Sound(this);
s.attachSound("mouseClickSound");

my_ns.onClick=function(){
    s.start();
}

my_video.attachVideo(my_ns);
my_ns.play("myRecordedStream.flv");

You'll need a sound in your Library with the linkage "mouseClickSound" as well as a clip instance named "mouse_mc" to see this work.
Although using ActionScript to play .flvs is powerful, it's still just a tad bit more work than necessary. That is, if you have the Media Components that ship with Flash MX Professional 2004. We'll look at those next.

Using the Media Components

The Media Components provide the code and graphics to make a complete device for your users to play .flv or .mp3 files. You can populate their parameters manually or access advanced controls using script. In addition, there are sophisticated features such as clear displays of both the current position and the percentage downloaded.

The three Media components include the complete MediaPlayback component plus broken out parts for just the MediaDisplay and just the MediaController. So, I suppose it's really just one component that you can break apart as needed. For example, you could put the controller on the other side of your screen or display a video with no user controls.
The following simple example demonstrates how to play the .flv video used earlier. Later we can look at the advanced options.

1. Create a new .fla and save it in the same folder where my_movie.flv resides.
   
   
2. Drag an instance of the MediaPlayback component onto the stage.
   
   
3. To populate this component you need to access the Component Inspector's Parameters tab (not the Properties panel) because it uses a .swf interface as the figure below shows.
   
   
   
   
4. Simply type the name of our video, my_movie.flv, into the URL field. Also, because only Flash Communication Server can ascertain the duration of an .flv (but because I know this one is 5 seconds long) set the Video Length property to 5 seconds (the four zeros should read: 0 0 5 0).
   
   
5. That it! You can test the movie. There are other settings to tinker including the scale of the component instance itself which should be resized so that it's larger.

Advanced Options for Media Components

There are several additional features of the Media Components. Here you'll explore synchcue points as well as using the MediaDisplay and MediaController independently.
Sync Cue points let you trigger scripts when an exact point in a video plays. For example, you might want to synchronize closed captioning to display every sentence the actor says. There's are two parts to using sync cue points: sSetting them and using them. Actually, you can add one step in front of those two: collecting synchcue points. That is, you may need a system to first determine where synchcue points should occur. We'll look at the entire process from gathering to inputting to triggering scripts. Along the way we'll discover a few of the hidden properties and methods built in to the Media components. Ideally you can find an .flv that's longer than 5 seconds to use in the following exercise.

1. Save a new file in the same location as your new (longer) .flv.
   
   
2. Drag a MediaController component onto the stage and use the Properties panel to give it an instance name myMedia.
   
   
3. Set the URL to match the .flv file name and set the Video Length if you know it. (By the way, you can just watch the video once and note the duration displayed on screen.)
   
   
4. To gather the times for the sync put the following code in the first frame of the movie:
   

   _root.onMouseDown=function(){
       trace(myMedia.playheadTime);
   }

   The idea is that we can watch the video and click at the key moments where we want our sync cue points. The output panel will display the times that we can then copy into the MediaController's sync cue point list. You'll have to judge your own video content to pick logical synchcue points. For example, if I have a video of someone counting I might want to display a large graphic numeral in synchsync with each number read aloud. The point is you need to go gather a few synchcue points and the playheadTime property will help you gather them.
   
   
5. Take your gathered sync cue points and for each one think of a one word name. Then fill in the sync cue point list for the myMedia instance using the plus button. The finished list might look like the one in the figure below.
   
   
   
   
6. Delete or comment out the code used to gather sync cue points (from step 4) and put the following code in its place:
   

   myObj=new Object();
              
   myObj.cuePoint=function(p){
       trace("received sync cue point named: "+ p.target.name);
   }
              
   myMedia.addEventListener("cuePoint", myObj);
   

   This code sets up an event listener that responds to the cuePoint event (built into the MediaController component). (For more information about this new way components work check out the article xxx on version 2 components.[provided you have such an article]) Notice that the parameter received (p) has a target property with itselfwhich, in turn, has a name property. That name will match the names you filled in for synchcue points. (If you want to dig through other properties received just use a for-in loop like from step x in the xx exercise above.)
   You could replace the trace statement with something like:
   

   contentClip.gotoAndStop(p.target.name); 

   or
   

   someTextField.text=p.target.name;

   The point is, you now have a way to know when the cue points are reached and it's up to you to decide what to do with that information.

Summary

This tutorial answers the question "what do you do for an encore?" That is, video was great in Flash MX but now it's even better. You saw how the import process is improved with a wizard and a way to save profiles; how you can play native FLV files natively without needing to import into Flash; and (if you have Flash MX Professional 2004) how you can use third party video editors to create FLVs plus the set of new media components you get to play external videos in Flash.

By the way, think of this tutorial as a starting point -- not the last word. There's way more you can do to optimize video and additional capabilities of the media components have additional capabilities not covered here. Look for more advanced articles on these subjects soon.