Macromedia - Float Your Flash Movies Over Your Web Pages

Have you ever gone to a Web site and seen a Flash movie "floating" over the page's content? Haven't you wondered how they made the background of the movie transparent? It actually isn't that hard to do if you know the secret code and set up your files correctly. So whether you're planning some advertising of your own or just want to add something special to your site, we can show you how it's done.

See right through

In this article, we'll add a Flash movie to a Dreamweaver Web page that "floats" over the Web page's content. First, we'll create a graphic in Fireworks, and then animate it in Flash. Next, we'll save this file as an SWF and place this file in Dreamweaver. Then, we'll add some code to the Flash Object script to remove the background of the movie and create the transparent effect.

Note: Due to browser limitations, this technique only works when using Internet Explorer on Windows operating systems.

Depth charge

The first step in this process is to create the graphic for our movie. We wanted to add the illusion of depth to our graphic to make it look like it's popping off the screen. Fireworks seems the best choice to quickly add depth using shadows and bevels, but you could use any image editing program you prefer, or just create all of your graphics directly in Flash.

Now, launch Fireworks and create a new 200 x 200 pixel document with a transparent background. Then create, a design that incorporates some depth effects such as drop shadows and bevels. You can also play around with the Opacity values of the colors in your design, since this transparency will be preserved in Flash, Dreamweaver and Internet Explorer. We made the center of our graphic slightly transparent, which will allow the content of the Web page to show through and add more visual depth.

Once you've designed your graphic, save it as a PNG file. It's best to save this file to your main images folder of your Web site so it can be easily located by not only you but also Flash and the Web browser.

Get that graphic going in Flash

Next, launch Flash and create a new 800 x 240 pixel movie. The size of the Flash movie dictates the area in the Web browser that your SWF can move within. If you want a static image that won't move around the page, you can create a movie size that fits the size of the graphic. Since we want our graphic to move across the top of our site, we made the Flash movie wide and short.

Read the next tip Import your PNG.

Go back