The Video Player

Video is something new to Flash MX, believe it or not. In past versions of Flash, you had to find a program that exported videos into a sequence of pictures that would then be exported into Flash. Some programs even exported your video as an SWF file that was simply many frames containing a sequence of pictures that gave the illusion of being video. Now, in Flash MX, we can import videos in formats such as QuickTime, AVI, MPEG, DV, and MOV and play them back as SWF files.

Importing Videos

Open a new Flash movie and save it as video0.fla. Go to File ￫ Import to bring up the dialog box that lists the video you want to import. Once you select the video, a few things might happen depending on the file type of the video.

If you choose to import a QuickTime file, you will see an initial dialog box asking if you want to embed the file in Flash or link to an external video file, as shown in Figure 8.17. The first option is the one you want; it inserts the video into Flash so that you can play it back as an SWF. The second option allows you to add Flash elements to a QuickTime movie and export it as a QuickTime movie. That's not our goal here. Select the Embed radio button and click OK; the Import Video Settings dialog box will open, as shown in Figure 8.18.

Figure 8.17: The initial dialog box when importing a QuickTime video

Figure 8.18: Set options that pertain to your video here. You'll encounter this dialog box any time you import a video, no matter the file type.

If you choose to import a Windows Media file type, such as MOV, MPEG, DV, or AVI, you skip the Import Video dialog box and go straight the Import Video Settings dialog box, shown in Figure 8.18.

The Import Video Settings dialog box holds many options that you should carefully consider.

Quality This option, in the form of a slider from 0 to 100, affects the quality of the video. For each unit you decrease the video's quality, you are also decreasing the video's file size, so some experimentation may be in order to find the perfect balance between file size and quality. The videos used for this chapter averaged about 5 MB and were exported at qualities between 50 and 90; their average file size is now 550 KB.

Keyframe Interval You should set this option to the frame rate in your movie, which is importing the video.

Scale You use this option to reduce the size of the video you are importing. Scale affects the size of the video when exported as an SWF, so you may want to conduct tests with it if you do not need the full size of the video. For example, one video I tested was over 10 MB when published as an SWF at 100% quality and scale. However, when I reduced the scale to 50%, the file size shrank to 3.5 MB. Take note that any sizing you do in Flash will not affect the file's size—meaning, if you import a movie at 100% size and use the Free Transform tool to make the video only 20 pixels by 20 on the stage, the file size will stay the same, as if it were full size. So, be sure to take this option into account when you do not need the full size of the video.

Synchronize Video To Macromedia Flash Document Frame Rate This check box controls the relationship between the video's frame rate and Flash's frame rate. Checking this box will put the two rates in a 1-to-1 ratio so that the video will play in Flash exactly as it does when played back in any other media player. Unchecking this box opens a drop-down list box with additional ratios, shown in Figure 8.19.

Figure 8.19: Selecting a frame rate ratio

Number Of Video Frames To Encode Per Number Of Macromedia Flash Frames The drop-down list box shown in Figure 8.19 holds seven options that represent the most commonly used ratios. Consider the left number (which I'll call LN) and the right number (RN). Selecting one of these ratios means that LN frames of the video will play for every RN frames that play in Flash. If you calculate the numeric ratio by dividing LN by RN, then the closer the ratio is to 0, the jerkier the video will be. The closer the ratio is to 1, the smoother the video will be. Considering this, 1:1 is the same as synchronizing the video to Flash's frame rate, and 1:8 is the jerkiest of the settings. You can take off quite a few extra kilobytes of the file's size by choosing a ratio that is close to zero.

Import Audio You have the choice of importing the video's audio. You might think that not having any audio would greatly reduce the file's size, but it does not have any affect. Uncheck this item only if you do not want to use any sound, without considering file size.

After customizing all of these settings, you can click OK and the video will be imported into your Flash file. There is only one constraint for the video once it is fully imported: the video's top-left corner must lie exactly on the movie's origin. This is critical when the component loads the video in and positions it. You can do this by opening the Info Panel using Command/Ctrl+I and setting the numerical values of the video's x- and y-position. Now, press Shift+F12 to publish the file as an SWF. Repeat this process as many times as you need to create SWF files of all your videos.

Note that it is not necessary to set the movie stage dimensions because when a movie is loaded its stage is not rendered.

Customizing Component Parameters

Component 

Once you have created all the media files, you can open the VideoPlayer.fla file, which is in the Chapter 8 folder on the CD, and save it to your local disk. The first thing you will want to do is customize the component's parameters, which are very similar to the audio player's:

Video Names An array that determines the names of each video. These names show up in the playlist and in the title display when the song is playing.

Video URLs An array that holds the URLs to each media file that is to be played in the audio player.

Video Position An x- and y-coordinate that determines where the center of the video should be positioned.

Shuffle? A Boolean value that determines if the playlist should be shuffled randomly so that the videos do not play sequentially.

Num Visible Videos A parameter that specifies the number of video items that are visible at any one time before you have to scroll through the items. Indirectly, it sets the size of the playlist because its size is based on the number of items that are displayed at one time.

Playlist Position An x- and y-coordinate that determines where the top-left corner of the playlist should be positioned.

FPS The frames per second setting you are using for your movie. To find this value, press Command/Ctrl+J in the authoring environment and look in the Frame Rate field. This parameter is very important because it is used to calculate the number of seconds the video lasts.

The only new parameter is an ordered pair of coordinates that are used to position the video. Later on, we will learn a very easy way to calculate the numeric values coordinate to enter into the Component Parameters panel.

Before we continue to customize the player by skinning it and whatnot, take a moment to publish the file and play around with the features. The video player, shown in Figure 8.20, is very similar to the audio player; in fact, the only additions to the controls are two buttons with double arrows on them. These buttons rewind and fast-forward the videos.

Figure 8.20: Test the movie to experiment with the various functions.

Skinning the Video Player Component

The next step in customizing this component is to skin it. If you look in the library, you will see that it is set up in much the same way as the audio player, with a few extra symbols and a few less folders. The two new buttons, Rewind and Fast-Forward, have been added to the Video Control Buttons folder.

The good news about skinning the graphic elements in this player is that it is the exact same as it was in the audio player. For the control buttons such as Play, Stop, Pause, etc., there are no requirements; you can put anything you want in them.

The graphics in the Video Playlist Graphics folder also have the same conditions that must be upheld. The playlist item must have its upper-left corner at the origin of the movie clip. The scroll up and scroll down buttons must also have their contents positioned such that the top-left corner is at each button's origin.

The Video Track Graphics folder contains all the elements that collect together to provide the user with a graphical representation of the video's status. A slider enables the user to jump to arbitrary points in the video, the slider moves over a background area, and two movie clips track the progress of the video and the video's downloading status.

Finally, the Video Volume Graphics folder holds the graphics that make up the volume slider.

When positioning the parts of the video player, you must keep in mind all the same rules and conditions of the audio player. However, we now have one more element to consider: the position of the video. The component parameter asked for the x- and y-coordinate of the center of where the videos appear. You might wonder why it does not ask for the position of the top-left corner, as most other parameters have in the past. Well, one consistent thing we want for this video player is for all the videos to show up in the same position, regardless of size. The only thing that should differentiate a 320×240 video from an 800×600 video playing in our player is the size. To ensure that all videos load into the same position, we must provide the x- and y-coordinate of where we want the center.

For the audio player, we made use of a filler graphic to pinpoint where the playlist should be positioned. We can use this same technique for finding the position of the video. Follow these steps:

1. Double-click the VideoPlayer component symbol in the library to edit it locally.

2. Create a solid color rectangle with Flash's Rectangle tool and give it the dimensions of a typical movie in your playlist.

3. Position the rectangle in the component at the point where you would like all of your videos to appear.

4. Open the Info panel by pressing Command/Ctrl+I and then record the information in the panel.

5. Close out the component and enter that data into the component's parameters.

You can either keep the filler graphic in place or remove it; it does not matter since the videos will be loaded on top of it.