Quick Tip: Layering Flash over Flash

Bookmark and Share

Recently I was asked to help on a project which involved a lot of Flash work. During one of the meetings someone suggested that we absolutely position a small Flash file over top of a larger background Flash file. Since none of us had actually done that before, I was given the task of figuring out if this would work in all of major browsers.

After a couple hours of testing I concluded that it will indeed work. In order to do so, the background Flash file MUST be transparent (accomplished by setting wmode="transparent"). Once that's done you can layer whatever you like over top of it including a 2nd transparent Flash file, a solid-color Flash file, or any kind of HTML content.

Browsers tested were:
IE 5.2 (Mac)
IE 5.5
IE 6
IE 7
Firefox 1.5
Firefox 2
Safari 1.3
Safari 2
Camino
Opera 9
Netscape 7
Netscape 8

Tags

//

Careful: wmode transparent SWFs will sometimes flicker in Safari if you are using alpha effects.

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=1801

AFAIK, "wmode:opaque" is a better choice, at least for the "background" SWF, if it's possible with your site's design (ie, there's nothing HTML/img needing to show through the background).

opaque accomplishes the same task (letting flash be overlaid with content), but without the frustrations of the bugginess that "transparent" has (like with ExternalInterface callback registration, etc).

Also, a plug... always use SWFObject for embedding your flash content. Or try one of the many great add-on libraries that extend SWFObject, including SWFFit and CheckPlayer.

No TrackBacks
TrackBack URL: http://www.codescene.com/cgi-bin/mt/mt-tb.cgi/62

Leave a Comment

Free the web - Boycott Internet Explorer 6