• Integrating Flash Video into Your Web Page

    Flash Video is an ideal format for distributing video over the web. The compression formula used by Flash reduces video file sizes substantially without significant loss of quality. And since both Flash and Dreamweaver are products of Adobe/Macromedia, it’s very easy to embed a Flash Video file into a Dreamweaver-created web page for more effective presentation.

    EXPORTING TO FLASH VIDEO FROM EXISTING QUICKTIME (OR OTHER COMPRESSED) FILES

    If you already have an existing video clip in some other format (such as QuickTime or MPEG), it’s easy to make a copy of it in Flash Video.

    Go to the dock and launch the Flash 8 Video Encoder.

    f8flashencodeicon

    The application icon looks like the one above. When the program opens, the window below opens.

    f9flashvideoencodersettings

    Click on the Add button to load your video file, or simply drag it into the encoder window. The name and location of the clip should appear under Source File with a Status of Waiting.

    Click next on the Settings button. Adjust the size of the Flash Video file per the instructions above. Once you’ve saved your settings, click the Start Queue button (”queue” because you can convert multiple files at the same time). Your Flash Video file will be saved in the same location with the same file name as the original.

    EMBEDDING FLASH VIDEO INTO A WEB PAGE WITH DREAMWEAVER

    Important Note: If you are creating or editing a page made from a template, the Flash video file will not work unless you insert a generic Flash Video placeholder in the templateitself. In order for embedded Flash files to work on a web page, Dreamweaver must modify the <head> section of your page with javascript that makes a call to the Flash player on the viewer’s computer. The <head> section of web pages created with a template is locked on the assumption that multiple users might be accessing the template. Dreamweaver assumes the creator of the template wouldn’t want others to modify it.

    So go to your template, insert the Flash Video code as described below, then delete the placeholder itself from the main contents cell. The javascript you need will remain in the template’s <head> section. Save the template and agree to apply changes to all pages created with your template.

    Open Dreamweaver and create a new html page, or open an existing page for editing. When you’re ready to add a video clip, place the cursor where you wish the video to appear.

    f10insertflashvideo

    Go to the Insert menu, mouse over Media, then click on Flash Video. The window you see below will open. Dreamweaver offers several options for embedding your file. First you have to determine the Video type. If you are able to store your video on a Flash Communication Server, you can choose Streaming Video. Otherwise, follow the example below to allow for downloading. Click on the Browse button to locate your Flash Video file.

    f11customizeflashvideo

    Dreamweaver comes pre-loaded with three “skins” to dress up your video with playback controls of different widths. Experiment. Choose the skin that works best for your web page. A sample of the controls will appear under the Skin menu.

    Now you must tell Dreamweaver the dimensions of your video clip. The easiest way is to click on the Detect Size button.

    Normally you do NOT want to select the Auto play check box. Doing so causes your video to begin playing as soon as your web page loads. Auto rewind causes the player embedded in your web page to return to the first frame of video once playback has finished. It’s good practice to prompt users to download the Flash Player even though 90+ percent of web surfers already have it installed on their computers.

    Clicking on the OK button inserts the Flash Video placeholder you see below into your web page.

    f12flashvideoinserted

    Notice that the Properties window in Dreamweaver allows you to change the size, skin and other options after you’ve inserted the Flash Video file into your page.

    Save your page and Preview it in one of your browsers (e.g. Firefox or Safari). The page should open and the Flash Video file should load. See the example below.

    f13previewflashvideo

    Test the clip in the web page. Does your video play? Can you hear the audio track? Do the other controls available with your chosen skin work as well? If the answer to these questions is “Yes,” you’re ready to publish the page to the web.

    Put your HTML file as you normally would.

    You must also upload (Put) your Flash Video file along with two other .swf files created by Dreamweaver: one for the Progressive Download player and one for the Skin you chose.

    Put these from the Files window just as you would still pictures on your page.

    f14putallflashvideofiles

    Congratulations! You’ve created a web page that doesn’t require the viewer to open a separate browser window for watching video.

    ----------Posted on March 21, 2012 by in Help Files

You must be logged in to post a comment.