Creating your first website – Part 3: Adding content to pages

Insert a Flash video file

Next you'll insert a Flash Video file using the asset provided:

1. With the index.html page open in the Document window, click once above the graphic that you placed in the center column of the three-columned table.

   In the previous section, you added some space before you inserted the graphic—this is where you should click (see Figure 16).

   

   Figure 16. Click once above the graphic that you placed in the center column of the three-columned table.

2. Select Insert > Media > Flash Video.

3. In the Insert Flash Video dialog box, select Progressive Download Video from the Video type pop-up menu.

   A note about Flash Video: The Insert Flash Video command in Dreamweaver lets you insert Flash video content in your web pages without using the Flash authoring tool. The command inserts a Flash component, which displays the Flash video content you select—as well as a set of playback controls—when viewed in a browser.

   The Insert Flash Video command gives you the following options for delivering video content to your website visitors:

   • Progressive Download Video downloads the Flash video (FLV) file to the site visitor's hard disk and then plays it. Unlike traditional "download and play" methods of video delivery, however, progressive download allows the video file to start playing before the download is complete.
   • Streaming Video streams the Flash video content and plays it on a web page immediately. To enable streaming video on your web pages, you must have access to Adobe Flash Media Server (formerly Flash Communication Server), the only server that can stream Flash video content.

   For more information about using Flash video, see Adding Flash video content in Dreamweaver Help.

4. In the URL text box, specify a relative path to the cafe_townsend_home.flv file: Click Browse, navigate to the cafe_townsend_home.flv file (located in cafe_townsend root folder of your site), and select the FLV file (see Figure 17).

   

   Figure 17. Specify a relative path to the cafe_townsend_home.flv file.

5. Select Halo Skin 2 from the Skin pop-up menu.

   A preview of the selected skin appears below the Skin pop-up menu. The Skin option specifies the look and feel for the Flash video component that contains the Flash video content. (For more information on how to select different skins for Flash Video components, see the Flash Video Topic Center.)

6. In the Width and Height text boxes (see Figure 18), do the following:

   • In the Width text box, type 180.
   • In the Height text box, type 135 and and then click once inside the Message text box at the bottom of the dialog box. (You won’t be doing anything in the Message text box. You’re just clicking there to remove the insertion point from the Height text box.)

   

   Figure 18. Set the width and height of the video.

   Tip: You can click Detect Size to determine the exact width and height of the FLV file. Sometimes, however, Dreamweaver cannot determine the dimensions of the FLV file. In such cases, you must manually enter the width and height values.

   The value in the Width and Height text boxes specifies the width and height in pixels of the FLV file. You can adjust these values arbitrarily to change the size of the Flash video file on your web page. When you increase the dimensions of a video, the picture quality of the video usually decreases.

   Note: The "Total with skin" value shows the width and height of the FLV file combined with the width and height of the selected skin.

7. Leave the default selections for the remaining options:

   • Constrain maintains the same aspect ratio between the width and height of the Flash video component (selected by default).
   • Auto play specifies whether to play the video when the web page is opened (deselected by default).
   • Auto rewind specifies whether the playback control returns to starting position after the video finishes playing (deselected by default).
   • Prompt users to download FP if necessary specifies whether or not you want users to see a download prompt if they don't have the necessary version of Flash Player required to play the video (selected by default).

8. Click OK to close the dialog box and add the Flash video content to your web page.

   The Insert Flash Video command generates a video player SWF file and a skin SWF file that are used to display your Flash video content on a web page. (You may need to click the Refresh button in the Files panel to see the new files.) These files are stored in the same folder as the HTML file to which you're adding Flash video content (in this case, the cafe_townsend root folder). When you upload the HTML page containing the Flash video content, Dreamweaver uploads these files as dependent files (as long as you click Yes in the Put Dependent Files dialog box).

9. Save the page.

Page 5 of 8

Previous Page

Next Page