Adding Video and Sound - Using Media Components

(Page 7 of 9 )

A major new feature in Flash MX Professional 2004 is the ability to progressively download FLV files. In Flash Pro, the following three media components aid in this process:

• MediaController

• MediaDisplay

• MediaPlayback

The MediaController component must be used in conjunction with the MediaDisplay component because its only purpose is to provide controls for the media display. The MediaPlayback component is a complete media display and controller in a single component.

 Converting Media to FLV Files

The media components are set up to progressively download FLV files. The first step in using these components is to convert a video file in a format supported by Flash (such as AVI or MOV) to the FLV format. Fortunately, Flash Pro can export any supported video file to the FLV format. You can create FLV files directly using Flash Communication Server or a third-party application such as Sorenson Squeeze. Table 10.6 shows all the file types you can import into Flash Pro and export as FLV movies.

Table 10.6 Supported Video

Extension	File Type
AVI	Audio Video Interleaved
MPEG/MPG	Motion Picture Experts Group
MOV	QuickTime movie
WMV/ASF	Windows Media file

The AVI, MPEG, and MOV files require QuickTime 4+ installed for either Windows or Macintosh computers. On Windows computers, DirectX 7+ allows for AVI, MPEG, and WMV movies. Windows users can easily create a video using the Windows Movie Maker found in the Accessories folder, and Macintosh users can do the same using iMovie, which is shipped with Macs.

To convert video media to FLV format, use the following steps:

0. Open a Flash document and select File, Import to Library.

0. When the Video Import Wizard opens, select Import the Entire Video and click Next.

0. In the Encoding window, select the compression profile you want to use, and in the Advanced settings, be sure that Audio Track is set to Integrated.

0. Click Next and then Finish. You should now see the video file in the Library panel.

0. Select the video in the Library and right-click (Control-click on the Mac) to open the context menu. Choose Properties in the context menu.

0. In the Embedded Video Properties dialog box, click the Export button. The default save format is FLV. Provide a filename and click Save. (The .flv extension is added automatically.)

Once the FLV is saved on your hard drive or server, you can access it like any other external file.

 Adding FLV Files and Working with a Preferred Media Size

Once you have a file in FLV format, all you need to do to get started is to drag a MediaDisplay component to the Stage, open the Parameters tab of the Component Inspector, and in the URL box, add the path to the FLV file. For example, if you save your Flash file in the same folder as an FLV file named media.flv, all you would enter into the URL window is media.flv. Figure 10.7 shows the settings in the Component Inspector.

Figure 10.7
Media Display settings for an FLV file.

The default aspect ratio of movies is 4:3, length to height. The most common USB Webcam aspect ratio is 160 by 120, and digital camcorders and IEEE 1394 (FireWire) Webcams are 320 by 240. The default window size of the Media Display window is 300 by 200, which is most likely not the size you want. (It is out of the 4:3 aspect ratio.) However, by selecting the Use Preferred Media Size option in the Parameters tab in the Component Inspector, you can automatically resize the component to the preferred size for the recorded file. For example, Figure 10.8 shows two different FLV files, one formatted at 160 by 120 and the other at 320 by 240.

Figure 10.8
Different size videos in the same application.

Each of the two videos was run on the same application. The solid rectangle area behind the image on the left shows the default 300-by-200 size of the MediaDisplay component.

---

Watch Out for Distortion - In designing a site that incorporates a streaming FLV file, you should resize the MediaDisplay component to reflect the format size in which you will be displaying the video. If you resize a smaller format to a larger output window, the video's quality is severely degraded; however, if you reduce the size of a larger video format to a smaller window, the output is fine. Keeping the 4:3 aspect ratio is important so that the video doesn't appear warped.

---

Both the MediaDisplay and MediaPlayback components connect to FLV files in the same way. However, whereas the playback controls are built in to the MediaPlayback component, the MediaDisplay component needs to be associated with the MediaController component to achieve any control over the playback of FLV files. This association is accomplished using ActionScript. Both the MediaController and MediaDisplay components need an instance name. Then, using the ActionScript format

controllInstance.associateDisplay(MediaDisplayInstance);

you can associate the two components with one another. Using the controller, you can pause, rewind, and start the video in the display. In addition, the controller provides volume control.

This chapter is from Macromedia Flash MX Professional 2004, by Bill Sanders (Sams, 2004, ISBN: 0672326051). Check it out at your favorite bookstore today. Buy this book now.

 

Next: Working with Media Classes >>
 

More Flash Articles
More By Bill Sanders

Comments On: Adding Video and Sound

· Thanx for taking the time to write this verry useful tutorial.. you helped me so...   >>> Post your comment now!