Transparent overlay in Flash

Web Templates

Photo Galleries

Resources

Articles

Tutorials

Desktop Wallpaper

Flash 5 Tutorials

Transparent Overlay with Flash (advanced)

See what I'm talking about (IE6+): transparent overlay example

The Usability Factor - You've seen it on a few sites and thought it was neat--or maybe you thought it was aggravating and you hated it, but you still wanted to know how they did it. You probably said to yourself, "How'd they do that?" If you had a dial-up connection with an older OS and processor, chances are you wanted to disable it for good reason. No matter what you think about advertising, it is a necessary part of the business world, not inherently good or evil in itself, but judged as so by the methods used in it's implementation.

Flash files when combined with transparency, absolute positioning and DHTML layers can be used effectively if used in a responsible manner. Good judgment in the usability of a design is the difference between an experienced designer and a newbie with a home page.

Before you consider using a transparent Flash overlay, ask yourself, "What is the purpose to implementing this feature on this site?" To outdo your competitors? Impress your boss? Attract attention to your site for traffic or sales? To create something 'different' just because you can? Those may seem like good reasons, but if not implemented correctly, it could have just the opposite effect. More importantly, ask yourself if your visitors will benefit in any way from it's use before you dive in. Check your stats and find out what browser versions your visitors are using. Can you make something like this 'fit' your site appropriately? Although not appropriate for every site, this effect could be used to a degree of success on a number of sites. Some suggested uses:

-creative/artistic sites
-alternative for pop-up ads (if implemented wisely)
-educational sites (as a teaching example)
-to enhance or illustrate a site theme
-seasonal decor

If it won't benefit your visitors and if it doesn't pertain to your site material in any way, you would be wise to just leave it off. In most cases, you would not want to go to the extent of implementing this effect on all but a few sites and should not even attempt it if you're a beginner in Flash or web design. For that reason, the information given in this page is not extensive. You need to know a lot about design, scripting, usability, and how to interpret your stats before trying this. But if you think you can make it work well and that you're pretty sure how your visitors will react, read on.

Potential Pitfalls - A poorly written script pointed at the wrong file has the potential to loop or lock up a server (I learned this the hard way), therefore, a testing platform is recommended even for advanced developers. If you're going to test 'live', do it in sub directory first, not on the main site. :)

You would not want to use this effect on sites where your stats show that the majority of your visitors do not have either IE5 or IE6 and therefore would not even see it... a waste of time and effort on your part. You would not want to use this effect for ads unless you want to lose traffic or can make it disappear quickly-before it gets too annoying. A pop-up type ad that the user cannot disable is extremely aggravating, even in a new form. You will need to know how to work with layers and how to order your layers with the z-index script if you use multiple layers in the same page. You will also need some browser detect & redirect script in your page, which means you have to know what will work in many different browser versions--and what won't. You can find all the information you need by doing a search for some of those keywords on Google.com. Whenever possible, it's always best to give your user a choice, target the majority of your audience and have alternative options for lesser browser versions of your viewers.

Also, understandably, many people (including you, I'll bet) do not want to see something pop up on a page every time they visit, at least not over an extended period of time. It gets old after a few visits unless it's seasonal, extremely entertaining or informative - and most pop-ups are not, especially ads of any kind. If you use this effect, it's much advised to 1) make the opaque Flash animation disappear into the page after a few seconds or add close and replay buttons, 2) remove or change the Flash file after a short period of time, and 3) consider using cookies or another script to distinguish first-time from repeat visitors.

What you need to know:

-how to create and tween graphics and video in Flash and publish them in HTML
-JavaScript won't work if script is disabled in the viewer's browser settings
-DHTML only works in IE4+
-transparency is not supported by some browsers
-although transparency is supported in IE5.0, everything it overlays will become inoperable (although not true for IE5.5+). If links are covered, they will not be clickable in IE5.0. Either re-direct all IE5 users to a third page where the overlay does not cover any links or use a script to send them to the generic page with no overlay
-IE5.5 and 6 are the only current browsers that will support the full features of a full page transparent Flash overlay even when links are covered by the layer
-'interstitial' ads are full page or pop-up ads that appear when you click to go to another page and typically give you the choice of 'more information' or 'skip'.

How it's done - The Flash file you create for this purpose must have a transparent background. You can set the transparency mode for the file when you publish it from Flash or ad the code into the embedded movie in the HTML of the page. To set the transparency of the Flash file, add this code to the page HTML in the <object> tag:

<param NAME="wmode" VALUE="transparent">

To place the Flash file on a separate layer in the IE6 page, enclose it with the beginning and ending <div> </div> tags that includes the layer script and your Flash movie code in your HTML right above the ending </body> tag. example=
<div style="position: absolute; top: 0px; left: 0px; z-index: 0)"> (Flash code goes here) </div>

Put a browser detection script on the main page to redirect to 2 other pages. The code should detect IE6 and redirect to the page with the transparent overlay effect. Redirect all other versions of IE, all NS versions and all other browsers to a duplicate page without the overlay. You need 3 pages, the entry page with just a browser detect and redirect script, a transparency page with Flash overlay for IE6, and a generic page for all others. You can add a fourth page just for IE5 users as an alternative as long as the transparent overlay does not cover any clickable links. You'll need to rewrite your detect/re-direct script for it in the first page.

That's really all there is to it. If you can't figure it out from this general information, then you probably shouldn't be trying to do it. If you're confused, then you need to learn more about absolute positioning, layers, Flash, web design usability, DHTML, scripting and what functions different browser versions will support.