1. Technology
You can opt-out at any time. Please refer to our privacy policy for contact information.

Creating Transparent Flash Movies with WMode and Div Layers


So you’ve seen the ads – the ones that crop up wherever they please, swirl all over the page as if they aren’t even a part of the web page that you’re visiting, and then confine themselves to a nice, comfortably unobtrusive area once they’ve finished getting your attention. They’re increasingly popular these days, and if you know much about animation, then you can probably tell that they’re done in Flash. But considering that these ads obviously don’t have any background other than the web page itself, while Flash doesn’t allow transparent document backgrounds…you may have been a bit confused as to how this was accomplished.

The answer is a little snippet of HTML called wmode, and something known as a div layer. Rather than working with these in Flash, you’ll instead edit the raw HTML code. The wmode tag controls the transparency of Flash objects, while div layers let you position things with more freedom than the standard constraints of paragraph tags and tables.

So whip up a Flash file that you’d like to layer transparently, publish it to an HTML file, and let’s take a look at the source code. I’ve just created a simple little animation using a motion tween and a motion guide.

©2014 About.com. All rights reserved.