Create interactive Demos and Tutorials in minutes Click Here

Transparent Flash and DHTML Layers

You can't go to a major web site anymore and not have an ad pop-up on you, layered over all your text. Usually they're done in Flash, complete with animation and interactive features. Nissan has produced some of the coolest buy far. Microsoft has a new one out promoting their mobility capabilities that takes over your whole screen (click here and refresh till it shows). These ads get your attention, they're way cool and to beat it all, they not that hard at all. It can all be done using Flash, Dreamweaver and Fireworks (ok, Photoshop if you insist!). You never have to type in a single bit of code if you don't want to.

If you're not sure what I'm talking about check out this in WebProNews.com. I like picking on my buddy Garrett if you already haven't noticed, so I stuck this on an issue of WebProNews that I redesigned for him so that I could steal some of his readers.

Ok, lets get started. Open Fireworks MX and make the images you want to layer over. I used a stealth bomber, you can use anything. You can even skip this process all together and do it all in vectors using Flash. Now clip out your image, maybe even add a drop shadow. Now make sure your background color is set to transparent (delete the background layer for all you Photoshop users), and export your image as a 32-bit PNG with no matting. Here's a link to my bomber. You'll notice that once you throw this on the stage in your flash movie that the transparencies begin to reveal how they'll work.

Now you're all done in your image editor, so fire up Flash MX. Once in Flash, import your newly created PNG file into your library and create your movie just as you would normally. You can add all the scripting, animation and interaction you want, just like you would a normal Flash movie. So how do you get it use the transparencies? Well, go into your publish settings and hit the HTML tab. Under "Window Mode" simply select "Transparent Windowless". Now save you movie and publish it. If you'll open the HTML Flash makes for you when you publish you can go ahead and change the background color of you're HTML and it should show threw your flash movie.

Ok, now to the DHTML and the layering of your Flash movie in your HTML document. I'm not going to show you any of the code behind this because you can let Dreamweaver MX do it all for you. Open a new HTML document and in your menu go to "Insert > Layer" and you'll notice in your design view a little box will appear. This is your layer. Essentially what this does is create a DIV tag that allows you to place any type of HTML code as if it were a layer in an image editor. You can literally place it anywhere in the browser. Inside that box you can put any type of HTML code imaginable, but in this instance we're using Flash. If you highlight this DIV tag you'll notice you can change it's width and height. You can also change whether it's visible or not. This comes in handy when you don't want your layer visible until the user clicks a link telling it to display.

This part is import so listen closely. To embed you Flash into the layer, I suggest cutting and copying the code from the HTML Flash made when you published your movie in-between the DIV tag. Why? Because there are a few tags and attributes Dreamweaver MX doesn't put in by default. But just if you curious, one tag is the one that tells your browser that the SWF has been published as "TRANSPARENT WINDOWLESS", which should look something like this:

<PARAM NAME=wmode VALUE=transparent>

And in the <EMBED> tag:

wmode=transparent

The other tag is the tag for the background color, which should look some thing like this:

<PARAM NAME=bgcolor VALUE=#FFFFFF>

and for the <EMBED> tag:

bgcolor=#FFFFFF

Your finished code will probably resemble something like this with the width, height, coordinates and file name relative to your:

<div id="jet" style="position:absolute; width:1024px;
height:336px; z-index:1; left: -460px; top: 160px; visibility:
visible;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-
444553540000"
codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0"
WIDTH="1024" HEIGHT="356" ALIGN="">
<PARAM NAME=movie VALUE="jet.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<param name="LOOP" value="false">
<EMBED src="jet.swf" WIDTH="1024" HEIGHT="356" loop="false"
ALIGN="" quality=high wmode=transparent bgcolor=#FFFFFF
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
</div>

You can also add this attributes in the Properties bar when you select the Flash object in your design view, or you can paste them in from what I just gave you as well. Once everything is in place, you should be ready to roll. Hope this helps!