• Pin It

Achieve a Flash Movie with Transparent Background

When we set out to make a Flash movie in a layer on a DHTML page containing several layers, we usually encounter a problem of displaying. The first layer is above all the other layers no matter what their order is.

Browsers are the reason for this issue because they place embedded plug-in content, such as a Flash movie or Java applet, on the topmost layer. But newer browsers add the ability to use transparent backgrounds in the Flash content. Using the WMODE parameter we’ll be able to do layering of Flash content with DHTML layers. The WMODE parameter can be ‘window’ (default), ‘opaque’, or ‘transparent’.

So, for today’s tip we are going to learn how to make Flash movie with a transparent background.

It is important to know that the background of a Flash movie can be set to transparent which enables the background image or text to show through and allows the layering of Flash content with DHTML content.

Setting options to make the Flash movie transparent

We’re going to explain how it’s done in two ways.The first one in which we are going to use Flash for creating the HTML page and the movie. The second one contains HTML code that we can edit.

A. Using Flash

We’ll create the HTML for a Flash movie using the Publish Settings feature. This dialog box provides an option to affect the WMODE setting. The options selected will be added to the HTML source code automatically. Follow the steps and see for yourself the result.

1. Select the File menu -> Publish Settings

2. In the dialog box there is a Format tab: select the HTML (.html) option

3. Click the new HTML tab -> select the Window Mode menu

4. Select the Transparent Windowless option

5. Click Publish after finishing

That’s it. You can view the after effect.

B. Editing HTML manually

In order to edit an existing HTML file, we must add the WMODE parameters to the HTML code.

1. Add the following parameter to the OBJECT tag:

[html] <param name="wmode" value="transparent"> [/html]

2. Add the following parameter to the EMBED tag:

[html] wmode="transparent" [/html]

That pretty much covers the basic idea for setting the WMODE so that you can obtain a Flash movie with a transparent background.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+