How to make a Flash movie transparent


The background of a Flash movie can be set to transparent. This
allows the background color or image of the HTML page that contains
the Flash movie to show through and allows the layering of Flash
content with DHTML content.

The following browsers currently support windowless mode:

Windows and Mac OS X

Internet Explorer 3 or higher (Windows)
Internet Explorer 5.1* and 5.2* (Macintosh)
Netscape 7.0*
Mozilla 1.0 or higher*
AOL*
CompuServe*

* Macromedia Flash Player version 6,0,65,0 (Windows) or 6,0,67,0
(Macintosh) or higher required for this feature.

Note: Mac Classic is not supported for this
feature. Transparent backgrounds are also not possible in a Flash
standalone projector.

Note: If windowless mode is used, performance
can be affected to some degree. If fastest performance is a top
priority, you may consider other design options.

Preparing the HTML page to make the Flash movie
transparent

Three methods of creating an HTML page with the correct code are
outlined below.

Publishing from Flash

The HTML for a Flash movie can be created using the Publish
Settings feature in Flash. The Publish Settings dialog box provides
an option to affect the WMODE setting. The options selected in the
Publish Settings will be added to the HTML source code
automatically:

  1. Choose File > Publish Settings. Select the HTML tab.
  2. Choose “Transparent” in the WMODE
    setting to make the Flash movie’s background disappear in browsers
    which support this feature.
  3. Publish the document.

Using Dreamweaver

Follow the below steps, and Dreamweaver will insert the correct
HTML code automatically.

  1. In Dreamweaver, insert the Flash movie into an HTML page.
  2. Select the Flash movie in the Design View.
  3. In the Properties panel, choose Parameters.
  4. For the Parameter, enter “wmode” (without quotes). For the
    Value, enter “transparent”.
  5. Save the document. The HTML page is complete.

View a demonstration of these steps.

Editing HTML code manually

To edit an existing HTML page, add the WMODE parameters to the
HTML code.

  1. Add the following parameter to the OBJECT tag:
    <param name="wmode" value="transparent">
  2. Add the following parameter to the EMBED tag:
    wmode="transparent"
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s