Section 12.3. Flash Video

12.3. Flash Video

Dreamweaver 8 includes an exciting new feature: the ability to insert video directly into a Web page, including VCR-like controls (or maybe that's now DVD-like controls) for start, stop, pause, and volume control. Unfortunately, Dreamweaver doesn't actually create the video, and you can't use just any video format like MPEG or AVI. You need a special type of file, called a Flash Video file. Flash video files end in the extension .flv and are created using one of several Macromedia products. If you bought Studio 8, you're in business; it includes the Flash 8 Video Encoder for creating these types of files. Otherwise, you need Flash MX 2004 Pro, Flash 8 Pro, or the Macromedia Video Kit with Sorenson Squeeze, a $99 product (www.macromedia.com/software/studio/flashvideokit/). In addition, Flash MX 2004 Pro doesn't actually export the video (thought the Video Kit does). You'll also need a pro, or semi-pro, video product like Final Cut Pro or Avid Xpress Pro (for a complete list of supported products, see www.macromedia.com/devnet/mx/flash/articles/video_primer_02.html#thirdparty).

Note: For a quick intro to creating Flash videos , visit www.macromedia.com/devnet/mx/flash/articles/flv_howto.html. Macromedia also provides a more comprehensive reference on their Web site: www.macromedia.com/devnet/mx/flash/video.html.

If that long list of requirements doesn't get you down, or you already have some Flash Video files you'd like to add to your site, Dreamweaver makes the process of adding the video easy:

Click the page where you'd like to insert the Flash video .

Like other Flash movies, you'll want an open area of your page to place the video.
Choose Insert Media Flash video .

Or, from the Common tab of the Insert bar, select Flash Video from the Media menu (see Section 5.6.1). The Insert Flash Video window appears (see Figure 12-7).
Select Progressive Download from the "Video type" menu .

Dreamweaver provides two options, but the second one, Streaming Video, requires some expensive software (the Flash Server) or a Flash video streaming service like Vital Stream (www.vitalstream.com), which starts at nearly $100 a month ouch.

Progressive Download means that the video doesn't have to download completely before it begins playing, so visitors to your site don't have to wait 30 minutes while your 40 MB movie downloads. Instead, they just wait until they've got enough movie so there won't be any delays in playback as the rest of the movie downloads.

Figure 12-7. The new Insert Flash Video command is probably the easiest way to add video to your Web site. All that your visitors need is the Flash player, which in most cases comes preinstalled in their browser.
Click the Browse button and select the Flash Video (.flv) file you wish to add to the page .

Due to some differences in how operating systems work, you're better off putting your Flash Video files in the same folder as the Web page. If you want to put your Flash video files elsewhere (even on a different Web server), use absolute links (see Section 4.1.2) to make sure your video appears.
Select a Skin .

The really useful part of this feature is the ability to add controls to your video: buttons for starting, pausing, and stopping the video; a progress bar; and various volume-adjustment controls (see Figure 12-8).

Figure 12-8. The "Clear" skin controls lie directly over the movie ("Clear Skin 3" is shown here). They disappear if the mouse isn't anywhere inside the movie, but they reappear the moment you mouse back over the video. Try each skin to see which fits your taste.

These controls are added to your video, and they're offered as nine different "skins"actually, three different types of controllers, each with three different graphical styles. Each skin includes controls for starting the video and controlling the sounds, and some include additional buttons for stopping and pausing the video, or a progress bar that lets you see how far into the video you are as you watch it.
Click the Detect Size button .

Flash Videos contain meta-data , additional information embedded inside the video file. Clicking the Detect Size button extracts the movie's width and height, adds the width and height of the various elements of the selected skin, and then automatically fills in the width and height boxes in the Insert Flash Video window (see Figure 12-7.) If your file doesn't include meta-data, you'll just have to type the width and height values yourselfthese define how much space on the page the Flash video fills. Note that entering these dimensions won't actually distort your videomaking it really, really thin, or really, really wide, for example. No matter what size you enter, the original aspect ratio ( proportions ) of the movie is preserved, and extra, empty space is added to fill any area not filled by the movie. For example, say your movie is 352 pixels wide and 288 pixels tall. If you entered width and height dimensions of 100 x 288, respectively, the movie wouldn't stretch like you're watching it in fun-house mirror. Instead, the movie would appear 100 pixels wide and 82 pixels tall, with 53 pixels of blank space above and below the movie.
If you want, turn on the "Auto play" checkbox .

Doing so makes the movie play as soon as enough video data has downloaded from the Web. Otherwise, your site's visitors need to press the play button to begin the video.
If you want, turn on the "Auto rewind" checkbox .

If you want the movie to automatically rewind to the beginning after the movie is done, turn on this checkbox. Your movie will then return to the first frame of the video after it's played through. But you may not always want to abide by the video-store credo "Be Kind, Rewind." If your movie ends with a dramatic message"Stay tuned for the next exciting installment of Blind Mole Rats from Mars. Appearing soon in the bargain bin of a video store near you!"you might prefer to leave the movie on its last frame when it's complete.
Turn on the "Prompt users to download Flash player if necessary" checkbox .

Flash Video is a relatively new and advanced technology. It requires your visitors to have at least version 7 of the Flash player. Many computer owners out there don't have this player installed, so turning on this checkbox provides them with a helpful messageand a link to the Macromedia site where they can download and install the latest Flash Player. If you want to customize the message those viewers see, type a new message in the Message box.
Click OK to add the Flash Video to your page .

This step installs the necessary code not only for the video, but for the "Flash detection" message from step 9 as well. You can check out the newly inserted video by pressing F12 (Option-F12) to preview the page in a Web browser.

Note: When you upload your Web page and Flash Video to your site (see Chapter 15), you also need to upload two additional files that Dreamweaver secretly added to your site behind your back: FLVPlayer_progressive.swf and the .swf (Flash movie) file for the skin you selected. It's named after the skin you choosefor example, Clear_Skin_1.swf, or Halo_Skin_1.swf. If you choose to include "dependent files" when uploading, as described on Section 15.2.1, Dreamweaver handles this task for you.

Figure 12-7. The new Insert Flash Video command is probably the easiest way to add video to your Web site. All that your visitors need is the Flash player, which in most cases comes preinstalled in their browser.

Figure 12-8. The "Clear" skin controls lie directly over the movie ("Clear Skin 3" is shown here). They disappear if the mouse isn't anywhere inside the movie, but they reappear the moment you mouse back over the video. Try each skin to see which fits your taste.