Integrating video

Once you have a video converted to a format that Flash can work with, integrating the video into your Flash projects is a simple step-by-step process. I am going to start a new blank FLA document by clicking ActionScript 3.0, and I will save the new file as video.fla. I'd suggest saving it in the folder for the exerciseFiles for this chapter since that's where the video we're going to use is located. The first thing I'm going to do is change our Stage dimensions to 640x520 so we have room for the video, which is at 640x480, and the video controller bar that we haven't added in yet.

To import the video, I will go to the File menu and then choose Import, then Import Video. The Flash Video Import Wizard pops up. The first question you are asked is, Where is your video file? It's on our computer, not already deployed to a web server somewhere like this bottom choice mentions. So I'll click Browse and navigate to the video file in my exercise files. For the next set of radio buttons, you can choose between Load external video with playback component or Embed FLV in SWF and play in Timeline.

For most cases I would recommend Load external video with playback component. By choosing this, you're telling your FLA file to add a video playback component with controls like play, stop, pause, volume control and so on to the Stage. That video playback component will then point to and play the FLV file, which is sitting in the directory that we just specified. The FLV video file will not actually be embedded into the Flash SWF. It won't appear in the library, but your SWF will know which video file to play.

This is advantageous because it's very easy to change what video you're going to play. You simply change what FLV video your SWF is pointing to. The second advantage is the file size of the actual FLV video isn't bundled up into your SWF. If you chose the second option of Embed FLV in SWF and play on Timeline, your FLV is actually physically added to your Timeline and into your library. If your video file is huge, your SWF file is huge, and it could take a really long time to download for your end viewers.

The SWF file remains small if all we have is a small playback component that just points to the FLV file. Also, if there's a problem in loading the FLV file, at least the user has the playback component and whatever else is on your Stage to look at while they are waiting. Anyway, embedding video onto your Timeline would be appropriate only in cases such as the video is very, very short, or if for some reason you want to be able to see what the video is doing on each and every frame. With the availability of cue points and other controls that exist for video, there's not many cases where you'd want to embed video onto the Timeline.

So moving on, I am going to click Next to go to the next screen. Here's where you get to choose what that video playback component or the video controls are going to look like. Take a minute to look through all the different options available to you in the dropdown and what they include. For instance, some of them, like SkinOverAll, have the control bar that appears over the video. Others, like this one with the really long name of the SkinUnderAllNoVolNoCaptionNoFull, have the controller appear underneath the video.

You can also change the background color of the player component here. I am going to stick with gray. Now I will click Next, and the final page is a Review page. I will check that the location of the FLV I want to use is correct. That looks good. It says here that a Flash Video component will be created on the Stage and configured for local playback. Okay, that sounds fine. Finally, it's telling us that the video component uses a skin that's been copied next to the FLA and that file will need to be deployed to your server.

Okay, we will see what that file looks like in just a second, and it will become more clear than what it means. For now we're ready, so I am going to go ahead and click Finish. Flash thinks about it for just a moment and then magically, our video component appears on the Stage. I am going to select Fit in Window so we can see everything. So here you can preview the video. You can play it, pause it, and rewind it to the beginning. (clip playing) (Talia Wilson: We all enjoy the sun for light, warmth, and even bringing cheer on a dreary day.) So you can see the other controls here.

You can fast-forward and rewind and you can play with the volume as well, on or off. Open the library and you will see that all we have in here is an instance of what's called the FLV playback component. That's the video controller. Notice that the FLV file itself is not in the library; we're just pointing the playback component to it. So go ahead and publish your movie and the SWF file behaves about the same as expected. (clip playing) I published that for a reason.

I am going to go ahead and open my file explorer and navigate to the location where the FLA is. Here you can see the FLA and the video.swf that we just published. If you follow the steps in this video, the FLV file is also here. You'll also note the existence of SkinUnderAllNoVolNoCaptionNoFull. Remember that last line on the Review page of the Video Import Wizard and it talked about a skin file? Well, that's it. It's a SWF file. The FLV playback component can have many different skins, or looks, depending on which one you chose. This is what defines it.

The SWF file is used by your video.swf file to determine how the video playback component looks. So when you upload your video.swf file to your web site, or wherever it's going to go, you need to upload not only video.swf but skinUnderAllNoVol so the video player will appear. You will also need to upload the FLV file. Back in Flash, say you don't like the layout of your video component anymore and you want to change it. I will simply click on the playback component on the Stage and open the Property inspector.

The Component Parameters area is where all the options are. I am going to find and click on the little pencil icon on the line that says skin and choose a different skin for the player. I am going to choose the very last option in the list called SkinUnderPlayStopSeekMuteVol and click OK. You will see that the look of the player updated. I will publish the FLA file again and immediately close the resulting SWF. (clip playing) Back in the file explorer, you can see that a new SWF file with a corresponding name for the new skin has been generated.

If this is going to be your final choice for the skin then this is the SWF file that you'd need to upload to your web server along with all the other files. Back to Flash one more time. Let's say we want to change what video we are going to play. Back in the Component Parameters area, I'll click on the little pencil on the source line. In the Content Path box you can now navigate to any other video file that you have, to change what video is going to be displayed. When using video, you can have as many other items on your FLA Timeline as you wish, but do follow the best practice of having your video player on its own layer.

If you'd like more detail about using the Flash Media Encoder or more detail about using the FLV playback component, check out some of the other courses about Flash video here in the lynda.com online training library. One is Publishing Video with the Flash Platform, by Lisa Larson-Kelley.