Macromedia Dreamweaver- adding flash video tutorial

Add Flash Video to a Web Page

(beginner)

Flash Video is a new way to add video content to your web-pages. It has a couple of advantages over Quicktime and Windows Media Player formats, the primary one is that Flash Video plays within the standard Flash plug-in version 8 or higher and the Flash player is the most widely installed media player today. A recent survey reported that over 97% of all internet connected computers have a version of the flash plug-in opposed to 84.3% for Windows Media Player and even less for the Quicktime plugin. Another advantage for Dreamweaver users; adding Flash Video takes just seconds and Dreamweaver can easily configure the code to down-load and install the flash plug-in if the viewer doesn't already have it.

In order to complete this tutorial you will need a Flash Video (.flv) file to work with. If you don't have a Flash Video file (.flv) you can download and use Cali.flv. by right-clicking on the link and choosing save link as from the resulting menu. (This movie features a clip of my dog Cali doing some movie work - while this isn't the highest quality file it will illustrate the concept).

Tip: Flash 8 (professional version) shipped with the Flash Video encoder which you can use to easily convert existing media files into Flash Video files.

Step 1: Create a New HTML Page

insert a new page with Dreamweaver Create a new page by either choosing File > New and selecting Basic Page > HTML from the General Tab. The hot-key combination for this task is Ctrl + n (win) or Cmd + n (mac).

Step 2: Add the Flash Video file

insert flash video Either click on the Flash Video icon found on the common pane of the insert bar or choose Insert > Media > Flash Video. Navigate to the .flv file you wish to use and click OK.

Step 2: Configure the Flash Video

configure flash video image Video Type: The Video type pulldown menu has two choices, Streaming Video and Progressive Download Video. In order to use the Streaming Video option you must have a server capable of delivering streaming media.

The progressive download option will work on a regular server and in fact works a lot like streaming content in that it will start playing as soon as a small portion of the file is downloaded and will continue to download in the rest of the file in the background. This keeps your viewers wait to a minimum.

Choose Progressive Download Video for the Video Type.

URL: This option allows us to specify the location and file name of the flash video we wish to use. Click on the Browse button to navigate to your .flv file (cali.flv if you are using the supplied file).

Skin: The skin option allows you to select from a variety of skins with different playback functionality. A Skin is basically a floating toolbar that allows you to do things like play, pause and rewind. In this instance choose Clear Skin (min width: 140). Tip: The (min width: 140 refers to the minimum physical size the movie must be in order to support that size of skin).

Width and Height: If we know the width and height of our file we can input it here but... even easier we can click on the detect size button and Dreamweaver will figure out how big the file is and imput those values in the Width and Height boxes.

Auto play: Check this option if you want the file to just start playing without requiring your viewers to click the play button.

Auto rewind: Check this option if you want your movie to rewind when it is finished playing.

Prompt users to download Flash Player if necessary: Checking this option will facilitate the download and installation of the current flash plugin from you webpage. In general it would take your view only a minute or two to download and install the flash plug-in if the code Dreamweaver inserts in the page detects the viewer does not have the correct verion of the plug-in. I can't see a situation where you would not want to leave this option enabled.

Click OK

Step 4: Test your movie

Choose File > Preview in Browser to test your movie or use the hotekys F12 to preview the page in your primary browser and Ctrl + F12 (win) or Cmd + F12 (mac) will launch the page in your secondary browser.