Join Anastasia McCune for an in-depth discussion in this video Adding video to the Flash project, part of Up and Running with Flash Professional.
Flash is the most common method of delivering video over the web. Sites like the New York Times and YouTube all rely on Flash to present video. Adding video to Flash is easy, but before adding it to Flash, the video itself must first be correctly formatted. The appropriate video format for Flash is Flash Video, which has an extension of .flv or .f4v. F4V is a newer Flash video format that supports the H.264 or High Definition video standard.
Your viewers have to have at least Flash Player 9 to view H.264 video. So if you already have a video in FLV or F4V format, you're all set and are ready to use it in your Flash files. If you have a video that's not in those formats, you're still covered, because when you purchase Flash Professional, you also get a stand-alone application called Adobe Media Encoder. You can use Adobe Media Encoder to convert MOV, MPEGs, AVIs, WMVs, and some other video file formats into Flash video.
Let's take a quick look at Adobe Media Encoder. So go ahead and find and open the application on your computer. Once it's opened, click Add, which looks like a little Plus (+) button to select what video we want to convert. Your screen probably looks a little different if you're not using Adobe Media Encoder for CS5.5 like I am. But take a look around and you should be able to find the Add button pretty easily. In the start folder in the Exercise Files for this unit, choose bikes.mov, or any other video file that you may have and want to use.
Go ahead and select the file and click Open. And next, you can click the Format dropdown to see the export options we have. We'll go ahead and stick with FLV. Under the Preset dropdown, let's select 512x288. If you're using Adobe Media Encoder CS5, you might like the choice second from the bottom, which is called Web Medium. But of course you can pick whichever setting you'd like. Under Output File, make sure that you like the spot where Media Encoder will put your converted file.
Having it point to the end folder in the Exercise Files for this chapter will work just fine. There's already an FLV there named bikes.flv in case Adobe Media Encoder isn't working for you. So you can either overwrite this file or create a new name for the one you're about to create. Next, click on the video title once and then go to the Edit Menu, then Export Settings. Here you can edit the length of your video, resize it, add cue points to it so it can sync with other things going on, on the screen, affect the quality of the final output, and more.
We're only going to make one edit. Here on this Play bar under the video preview we can see that our video is about 1 minute long. Let's crop it so it's about 45 seconds long by dragging this white arrow to the left until we get to about 45 seconds. It's just before where the bike rider starts talking. With that, I'll click OK, and then back on the main interface, click Start Cue to start the conversion. We can see the progress of the encoder down here in the Current Encode area.
And while this is working, know that the course Publishing Video with the Flash Platform by Lisa Larson-Kelley here in the lynda.com Online Training Library will give you excellent detail on all the options, ins and outs of using the Adobe Media Encoder, much more than the quick glance we took here. Once the video has done encoding, a green checkmark appears next to the name of the video, telling us that the video is done processing. So we're done with the Media Encoder, go ahead and close out, and now go over to Flash and start a new blank FLA document by clicking ActionScript 3.0.
Save your new file as video.fla. I'd suggest saving it in the same directory as the FLV video you just converted. So I'll save mine in the end folder in the Exercise Files for this chapter. Importing our video from here is easy. Go to the File Menu and choose Import, then Import Video. The Flash Video Import Wizard pops up and the first question you're asked is, where's your video file? Well, it's on our computer, not already deployed to a Web server somewhere, like the bottom choice mentions.
So click Browse and navigate to the FLV file you just created. 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, etcetera, to the stage. The video playback component will then point to and play your FLV file, which is sitting in the directory you just specified.
The FLV video will not actually be embedded into your Flash SWF, it won't appear in the library, but your SWF will know which video file to play. This is advantageous because, number one, it's very easy to change what video you want to play. You just simply change what FLV video your SWF is pointing to. You could even create a playlist of videos to loop through. 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 onto 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. Embedding video onto the 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 really not much reason to ever embed your video onto your timeline. So moving on, click Next to go to the next screen of the Video Import Wizard. Here's where you get to choose what that video playback component or video controls are going to look like.
Take a minute to look through the different options available to you in the dropdown and what they include. You can also change the background color of the player component here. I'm going to choose SkinUnderAllNoVolNoCaptionNoFull and make the Color be gray. When you're ready, click Next. The final page is a review page. Check that the location of the FLV you want to use is correct and note that the FLV file will be relative to the SWF file when it's all said and done. The summary says a Flash video component will be created on the stage and configured for local playback.
Okay, that sounds fine. And finally, it's telling us that the video component uses a skin file that will be published next to our FLA when we publish or test our movie, and we'll need to deploy that to our Web server. All right! We'll see that file in just a second and it will become more clear what it means. For now, we're ready, so go ahead and click Finish. Flash thinks for just a moment and then magically our video component appears on the stage. You can preview the video, you can play it, pause it, rewind it to the beginning, turn the volume on and off.
Open your Library and you'll see that all we have in here is an instance of the FLV playback component, which is 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. But we published for a reason. Go ahead and close your SWF file and now open your file explorer for your computer, navigate to the location where your FLA is. Here you can see the FLA file and the video.swf that you just published.
If you followed the steps in this video, your FLV video is also here. You'll also note the existence of the SkinUnderAll SWF. Remember that last line on the video review page that talked about a skin file? The FLV component can have many different skins, or looks, depending on which one you choose. And this is what defines it. The SWF file is used by video.swf to determine how the video playback component looks. In fact, you can click on the SWF file just to see what it looks like.
When you upload your video.swf file to your website, or wherever it's going to go, you also need to upload the SkinUnderAll SWF as well. You also of course 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. Simply click on the playback component on the stage and then open the Property Inspector. The Component Parameters area is where all the options are, so find and click on the little Pencil icon on the line that says skin.
Now you can choose a different skin for the player. I'll choose the very last option in the list, SkinUnderPlayStopSeekMuteVol and click OK. You can see that the look of the player updates immediately. If I publish my movie again and then close the resulting SWF, and now go back to my file explorer, you'll see that a new SWF file with the corresponding name for the new skin has been generated. And if this is going to be your final choice for the skin, then this is the SWF you'd need to upload to your Web server along with all your other files.
Back to Flash one more time, let's say we want to change what video we're going to play. Back in the Component Parameters area, click on the little Pencil on the source line. In the Content Path box, navigate to the Exercise Files for this chapter and choose the FLV file called surf and click OK. You've now changed the video that your playback component is pointing to, so go ahead and test your movie one more time to see the change. And the video plays. So we've now seen how to add video into your Flash pieces, so that's the end of our example here.
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. Again, if you'd like more detail about using the Flash Media Encoder or more detail on using the FLV playback component, check out some of the other courses about Flash video here in the lynda.com Online Training Library, such as Publishing Video with the Flash Platform by Lisa Larson-Kelley.
- Choosing the type of document to work with
- Changing document settings and orientation
- Importing bitmaps and vector files
- Organizing layers
- Understanding the timeline, frames, and keyframes
- Creating shapes
- Understanding the three symbol types (graphics, buttons, and movie clips)
- Defining motion and shape tweens
- Nesting timelines
- Using effects and masks
- Working with text
- Importing and adding audio and video
- Publishing your project