Transparent Flash and DHTML Layers

Designing Transparent Graphics for Flash Overlay

When you want a Flash animation to sit on top of live web content without blocking the page behind it, the first step is to create an image that truly has a transparent background. The tools most designers gravitate toward for this job are Fireworks MX and Photoshop. Both give you fine control over the alpha channel, which is the key to keeping the underlying HTML visible.

Open your chosen graphics editor and start a new document that matches the dimensions of the space you plan to occupy on the page. For many overlay designs a width of 1024 pixels and a height of 360 pixels works well, but feel free to adjust to your layout. Import the illustration or photograph you want to use. If you’re going for a stealth bomber look, the image you referenced in the original article, you can drop it in, but any element that fits the narrative will do.

Once your artwork sits in the canvas, the next crucial step is to isolate the foreground from any background that came with the original file. In Fireworks, the “Clip” or “Mask” command will let you select the shape you need and create a clipping mask. In Photoshop, the Quick Selection tool or the Pen tool can help you isolate the subject. Remove or hide the background layer so that nothing remains beneath the subject. If you had a separate background layer, delete it entirely; this guarantees that only the subject will be visible when exported.

When the subject is perfectly isolated, examine the pixel grid at the edges of the image. Transparent pixels appear as a checkerboard pattern in most editors. Double‑check that there are no stray colored pixels where there should be transparency. If you notice any, use the Eraser or Refine Edge tools to clean them up. A clean edge is vital for a seamless overlay that doesn’t produce visible seams on the page.

With the graphic ready, it’s time to export. Choose the PNG format, specifically the 32‑bit PNG option. The 32‑bit setting includes an alpha channel that preserves the transparency information. In the export dialog, deselect any matting or background color options; you want the file to remain as a true transparent PNG. Name the file appropriately - something that reflects the content, like “stealth_bomber.png” - and save it in your project folder.

It’s tempting to let Flash handle everything, but using a pre‑created PNG keeps the workflow modular and allows you to tweak the image later without touching the Flash file. If you prefer to stick entirely to vector shapes, you can create the silhouette in Flash directly, but the PNG approach gives you the flexibility of pixel‑perfect imagery that might be necessary for complex photography or illustration.

After exporting, double‑check the file by opening it in a web browser. Load the PNG directly in the browser window; the background should be invisible, and the subject should display cleanly. This quick check confirms that the transparency is intact before you bring the file into Flash. It also saves time later if you run into rendering issues.

At this point your image is fully prepared to become the visual foundation of your Flash overlay. You can now move on to the Flash side of things, where you’ll combine this PNG with animation, scripting, and the special publish settings that allow the movie to overlay content in the browser without blocking it.

Publishing Transparent Flash and Layering it with DHTML

Open Flash MX (or a newer version if you prefer) and create a new FLA file. In the library panel, drag your prepared PNG into the library and place it on the stage. This will serve as the base layer of your animation. From here you can add any animation, motion tween, or interaction you’d like. If you need the PNG to move, you can apply motion tweens to it just like any other display object.

When your animation is complete, the next step is to set up the publish settings that will let the Flash file display with a transparent background. In Flash, go to File > Publish Settings, then click the HTML tab. In the “Window Mode” drop‑down list, select the option that says “Transparent Windowless.” This tells the Flash player to render the movie with an alpha channel, allowing HTML elements behind the movie to remain visible.

Hit the “Save” button on the Publish Settings dialog, then publish the movie. Flash will generate a SWF file and an accompanying HTML wrapper. Open that HTML file in a text editor to see the code that Flash produced automatically. It should contain an OBJECT tag with a PARAM entry for wmode set to “transparent” and another PARAM for bgcolor that matches the background you want (often #FFFFFF for white). Inside the OBJECT tag there’s also an EMBED tag that mirrors these parameters.

Now it’s time to integrate the SWF into your web page using DHTML. For this example, use Dreamweaver MX to keep the process simple, but you can hand‑edit the HTML if you prefer. Create a new HTML document and in the Design view choose Insert > Layer. Dreamweaver will add a DIV element to your page that you can position absolutely. The DIV acts like a virtual layer that you can move around the page as if it were a graphic.

Give the DIV an ID that describes its purpose, for example “#jet.” In the Properties bar you can set its width, height, and positioning. The width and height should match the dimensions of the SWF file you published. Position the DIV by setting its left and top values so the overlay appears exactly where you want it on the page. For a stealth bomber that covers most of the screen, you might set left to “-200px” and top to “50px,” depending on your layout.

Once the DIV is in place, copy the entire OBJECT/EMBED block that Flash generated earlier and paste it inside the DIV. This block is the actual instruction that tells the browser to load and run your SWF file. If you want to fine‑tune the parameters, double‑check that the wmode attribute is set to “transparent” in both the PARAM and EMBED tags. Also verify that the bgcolor param matches the background you want behind the overlay; for a white background it should read “#FFFFFF.”