Presenting video with the Flash video component in Dreamweaver CS3

The Adobe Flash video component in Adobe Dreamweaver CS3 helps you easily insert and display video files in your websites. It's great for Dreamweaver users who are unfamiliar with Flash because you can insert Flash video (FLV) files on your web pages without actually using the Flash authoring tool. The Flash video component enables you to select from several different playback controllers that visitors use to control the FLV file playing on your web page. You can choose also between two different options for delivering your video: progressive download or streaming.

This article shows you how to use Dreamweaver CS3 to insert and display FLV files on your site. The Flash video component uses a wizard interface that enables you to choose display and delivery options and even preview the player's design (skin) before you insert it on a web page. Despite the automated way that code is inserted onto a web page, you do have control over the end result. Using the Flash video component isn't the only way to display FLV files on the web, but it's fast and easy.

Preview the "Tour the Farm" template site

In order to follow the steps in this tutorial, you must install Dreamweaver CS3 and download the farm_cs3.zip sample file from this tutorial's introductory page.

Extract the contents of the farm_cs3.zip sample file you downloaded to a new folder on your desktop called farm. The ZIP file contains an entire Dreamweaver template website, including Flash video (FLV) files. You will work with the files in the farmsite folder during this tutorial. You can compare your work to the finished files in the finished folder.

The website template that you use for the following exercises has a distinct farm theme (see the sample site). The farm site consists of nine main folders, seven templates, a few dozen static HTML pages, and a Cascading Style Sheet (see Figure 1). The purpose of the website is to create a gallery of images and videos for six common farm animals. Each animal has its own subfolder where you store HTML pages specific to that animal. For example, you store pages that display images or videos that relate to chickens in the chickens folder. You use the last three folders (called images, videos, and Templates) to organize the images, videos, and templates for the farm site.

The site has a basic three-column design, where the left column contains the main site navigation and the middle column displays content (text, images, and video). You nest templates in the right column to display thumbnail images for both videos and static images of animals (see Figure 2).

Using nested templates enables you to add new pages easily to the site and automatically have the subnavigation added for you. Also, making changes to the animal-specific templates causes the changes to cascade to any file using that template. So if you need to modify the subnavigation within the chicken template, all files based on that template are updated automatically.

In this exercise, you insert an FLV file with a controller into a supplied web page in several easy steps.

You have two options when you insert and display an FLV file in your HTML documents using the Flash video component:

• Progressive download video: If you choose this video type, the video is downloaded to the user's hard drive and starts playing before it fully downloads. The video is downloaded from beginning to end, unless the user closes the connection before the download is complete. The user must have Adobe Flash Player 6 r65 (or later) installed to see videos encoded with Sorensen Spark (included with Flash MX Professional 2004 or later). The user must have Flash Player 8 or later installed to see videos encoded with the On2 VP6 codec (included with Flash 8 or later). For more information on which versions of Flash Player work with the different video codecs, search "on2 VP6 video codec"(include the quotes) in Flash CS3 Professional Help (press F1). If you don't have a copy of Flash, seach the Flash LiveDocs.

Note: The FLV video included with the article source files uses the Sorenson Spark codec and can be viewed with Flash Player 6 r65 or later.

• Streaming video: If you choose this option, the video starts playing after a short buffer period, when a small amount of data downloads to the computer to ensure smooth playback. You must have Adobe Flash Media Server or a Flash Video Streaming Service available if you select this option. The user must have Flash Player 6 (or later) installed to see your video, too. For more details about streaming video, see the Flash Media Server Developer Center.

Note: For more information on using video on the web, see the Flash video learning guide.

Depending on which video type you select in the pop-up menu, the following steps will vary slightly. This tutorial assumes you've chosen the Progressive Download Video option to display your video files:

1. Launch Dreamweaver CS3. The first thing to do is define a Dreamweaver site for the supplied files. Doing so will allow Dreamweaver to accurately insert relative paths from the HTML page to the Flash video files.
2. Choose Site > New Site from the menu options. In the Site dialog box that opens (see Figure 3), set the Site Name field to Farm and browse for the \farmsite subfolder in the farm folder on your desktop, and then click OK.

3. Choose File > Open from the main menu and select the video01.html file within the chickens folder.
4. In either Design view or Split view, position your cursor within the editable content region and delete any existing text, such as [insert video here].
5. Select Insert > Media > Flash Video from the main menu to launch the Flash video component.
6. Select Progressive Download Video from the Select Video Type pop-up menu. The appearance of the Insert Flash Video dialog box changes to show the following options for this format (see Figure 4):
   • URL: Specifies the URL of the FLV file to embed in your HTML document
   • Skin: Specifies the URL of the skin to load
   • Width: Specifies the width of FLV display
   • Height: Specifies the height of FLV display
   • Constrain: Maintains the aspect ratio of the video if the width or height text boxes change the corresponding value
   • Detect Size: Detects the dimensions of the FLV file and automatically populates the Width and Height text boxes
   • Auto play: Specifies whether you play the video when the web page opens
   • Auto rewind: Specifies whether the playback control returns to the starting position after the video finishes playing
   • Prompt users to download Flash Player if necessary: When selected, this option embeds the required JavaScript code to detect the users' Flash Player version and prompts them to download a newer version, if necessary (if you do not select this option, the Message text box is disabled)
   • Message: Displays a message if a user's current Flash Player version isn't high enough to view the Flash content

7. Click the Browse button next to the URL text box. Navigate to the \farmsite directory on your hard drive, select chicken01.flv from the videos folder, and click OK. Note that if you have not created a Dreamweaver site for the supplied files, Dreamweaver will insert paths relative to your local computer. If you encounter this issue, either create a site or type in the paths by hand, as shown in Figure 4.
8. Select a skin from the Skin pop-up menu. For this exercise, select Clear Skin 3. The area below the Skin pop-up menu shows you a small preview of the specified skin's controller. Figure 5 shows the player skin in action.

9. Click the Detect Size button so Dreamweaver calculates the width and height of the current FLV file automatically, and then populates the text boxes with the correct dimensions of the video.
10. Select the Auto Play check box if you want the video to play automatically after the page loads. You need to ensure that the Auto Rewind check box is enabled if you want the video to return to the first frame after it completes.
11. Deselect the Prompt Users to Download Flash Player If Necessary option. The reason is that the Insert Flash Video wizard prompts an error from Dreamweaver when this option is selected. This is a known issue with the Insert Flash Video wizard whenever you use it inside an editable area of a Dreamweaver template.

Note: For more information on this issue, please see the following TechNote: Cannot insert Flash Video in template child pages.

12. Click OK to apply your settings. Dreamweaver will now generate and insert code that embeds the selected video into this web page.

Based on the settings that you chose for this exercise, Dreamweaver inserts the following code into your web page (the highlighted code is explained next):

What does this all mean? The parameters you specify in the Insert Flash Video wizard are inserted into this HTML snippet, which pass information to the SWF file using FlashVars (see the note below). The skin, called Clear_Skin_3, is copied to the same folder as the current HTML file, although it omits the file extension (.swf) in the HTML code. The second parameter, streamName, points to the FLV file you defined in the URL text box. It is a relative path and again omits the FLV file extension (.flv).

Note: FlashVars is a mechanism for passing variables to the SWF file through name-value pairs in the HTML. The name-value pairs end up as variables on the root timeline of the SWF file. This is a great way to import assets paths and simple parameters into your SWF file.

The next two parameters are Boolean (true/false) values, which are based on your selections in the wizard. If you want to modify the skin or path to the FLV file, then you can modify these values directly using Code view in Dreamweaver. You might need to edit the width and height parameters manually in both the param and embed tags. These values represent the width and height of the FLV document, respectively. However, if you use certain default or custom skins, you might need to modify these values if your skin contains a border and is larger than the dimensions of the FLV file.

Due to cross-browser issues, you need to define the FlashVars values in both a param tag as well as the embed tag so that the code works with Microsoft Internet Explorer–based and Netscape-based browsers

One last thing to notice is the JavaScript code surrounding the object and embed tags. This is new to displaying Flash SWF files in a browser. Dreamweaver (and Flash) copy a JavaScript file named AC_RunActiveContent.js to a relative path in relation to the HTML page containing the SWF file. The JavaScript file and the additional code seen above allow users to interact with the SWF file on the web page without having to click first to activate it.

You may see a prompt at various points stating that Dreamweaver is creating the dependant JavaScript file.

If you look at the chickens folder, you can see that several files are automatically placed there by Dreamweaver (see Figure 6). The Scripts folder is created dynamically containing the JavaScript  file described above. The Clear_Skin_3.swf and FLVPlayer_Progressive.swf are exported based on your settings in Dreamweaver. You may notice multiple skin files in the folder if you experimented with different skin settings. You can delete the unused skin files in the end.

If you look at the files and folders in Figure 6, you can see that Dreamweaver automatically added the Scripts folder to the farmsite directory and two Flash files in the chickens directory. The Scripts folder contains the JavaScript file just described. The Clear_Skin_3.swf and FLVPlayer_Progressive.swf are exported based on your settings in Dreamweaver. You may notice multiple skin files in the folder if you experimented with different skin settings. You can delete the unused skin files in the end.

Note: The actual SWF file you need to drive the Flash video component is a mere 10–12K, depending on whether you select the progressive download or streaming option. Using one of the default skins adds approximately another 4–11K, depending on the skin you choose.

Where to go from here

This tutorial demonstrates how easy it is to add video to existing web pages using Dreamweaver and the Flash video component. With only a few clicks of the mouse, you can embed an FLV file using the default skins.

With a bit of extra work (and Flash CS3) you can also create a custom skin that matches your website. To find out how to customize playback controllers using Flash, check out the Dan Carr's article, Controlling Flash video with FLVPlayback programming.

With a bit of creativity, you can create much better skins and projects using the Flash video component.

• For information on Flash video and Flash, refer to the Flash video learning guide.
• For more information on the FLVPlayer, see the FLVPlayer posts on Peldi's blog.
• For great Flash video templates, refer to the Flash Video Template site.

No animals were harmed in the making of this article.