Home / Articles / Adobe Creative Suite / Embedding Flash Video with Dreamweaver

Embedding Flash Video with Dreamweaver

Article Description

YouTube is cool, and it's a really easy way to get your videos online. You can even link from your web site to your video on YouTube. But wouldn't it be better if you—not YouTube—controlled how the video displayed? David Karlins shows how to use Dreamweaver to embed a video clip into your own web page, presented with your own customized display skin, and surrounded by your own content.

Embedding SWFs in a Web Page

As I noted at the beginning of this article, Flash SWF movies are a different animal from Flash video (FLV) files. Entire sites can be defined as a complex SWF file. Here, I’ll just focus on how to embed a SWF animation or banner.

At our starting point, someone has designed a banner or animated object in Flash that you want to embed in a Dreamweaver web page. That Flash object should be saved to the SWF format. This is the widely supported web-readable format for Flash objects.

To insert a SWF Flash movie in Dreamweaver, follow these steps:

  1. Click at the insertion point in your web page where the object should be placed.
  2. Choose Insert > Media > Flash to display the Select File dialog box.
  3. Navigate to the Flash (SWF) file you want, and click the Choose button in the dialog box to insert the Flash object.
  4. After you’ve inserted the Flash (SWF) object, you do most of your formatting with the Property inspector:
    • Use the Loop and Autoplay check boxes to enable (or disable) looping (repeating) or autoplay (animation plays when a page is loaded). The V Space and H Space fields allow you to define vertical (V) and/or horizontal (H) spacing between the Flash movie and other objects on the page.
    • The Quality pop-up menu lets you compress the Flash file (choose Low) for faster downloading and lower quality.
    • In the Scale pop-up menu, the Default setting maintains the original height-to-width ratio of the original animation (that is, it prevents the animation from being distorted) when the Flash object is resized. On the other hand, the Exact Fit option in the Scale pop-up menu enables you to stretch the animation horizontally or vertically if you change the original height and/or width.
    • Use the Align pop-up menu to align the Flash object left or right, so text flows around the animation.
    • The Bg (short for Background) pop-up menu defines a background color. The background color is active if you resize the Flash object and maintain the height-to-width aspect ratio by choosing the Default setting in the Scale pop-up menu.
    • The Reset Size button restores the Flash object to its original size.
    • The Edit button opens Flash (if you have it installed) to edit the Flash object.
  5. With your embedded Flash banner or animation appropriately sized and its attributes defined, preview how the selected Flash object will look in a web page by clicking the Play button in the Property inspector. The Play button displays the Flash object in the document window. Toggling to Stop, as shown in Figure 4, displays the editable gray box.
Figure 4

Figure 4 Previewing a Flash object in a web page in Dreamweaver.