SitePoint Forums - View Single Post - force f...

tianhao 2010-01-07

展开全文

Nov 16, 2006, 14:57

#44

mhulse

.?*o draziW tnioPetiS o*?.

Join Date: Jun 2004

Location: "Then I figure the most good good guy will win."

Posts: 1,613

[solution] Flash, Suckerfish, (d)html hidden, wmode opaque/transparent...

TinyURL for this post: http:///yk3jdg

I have noticed these types of questions popping-up from time-to-time... so I thought I would ~~dedicate a thread~~ (twas moved to this thread) with all the answers that I am aware of... Hopefully it will save others time in the future:

By default, Flash is always on top.

Applying a wmode of opaque or transparent is the solution [for most situations].

Read this... more specifically view this example.

Quote:

Conclusion

This article has shown you reasons you may want to use opaque mode in your Flash movies. Opaque mode allows your DHTML drop down menus to stay in front of your Flash movie as well as hiding non-essential Flash from screen readers. Yes, transparent mode will also allow your DHTML drop down menus to render properly and will hide non-essential Flash, but due to possible performance issues, that's best left for opaque mode. Use transparent mode to show elements stacked beneath your Flash movie and when actual transparency is needed.

I suggest folks use SWFobject (See also: UFO).
Example using SWFobject with a wmode setting of opaque:

Code:

<script type="text/javascript">
                    var so = new SWFObject("images/news.swf", "news", "160", "60", "6", "#000000");
                    so.addParam("wmode", "opaque");
                    so.write("flashcontent");
                    </script>

SWFobject resources: homepage, ~~mailing list, list archives~~ FORUM, and Why SWFobject is better than the rest.

UPDATE: UFO looks like a great (unobtrusive) alternative to SWFobject -- For more info, see "Related/interesting links" section below.

IMPORTANT: If you decide to manually embed your Flash object, remember to put the opaque (or transparent) code in both places:

Code:

<object ... >
                    <param name="wmode" value="opaque">
                    <embed ... wmode="opaque" ... >
                    </object>

ATTENTION! Safari users:

I quickly slapped-together an example page, and tested Safari using these computers:
- iBook g4 using OS 10.4 and Safari 2.0.4(419.3)
- MacBook Intel OSX 10.4.8, using Safari 2.0.4(419.3)
Although not perfect, it appears that Safari functions better using a wmode of "transparent".

Unfortunately, this finding conflicts with the conclusion of this article: "... Yes, transparent mode will also allow your DHTML drop down menus to render properly and will hide non-essential Flash, but due to possible performance issues, that's best left for opaque mode. Use transparent mode to show elements stacked beneath your Flash movie and when actual transparency is needed."

If you are not happy with how Safari handles wmode, see "Alternative fixes/hacks/workarounds" section below for a list of other possible solutions.

ATTENTION! Linux users:

Quote:

Will WMODE, or windowless mode, be supported with this release of Flash Player 9 for Linux?
No, support for WMODE requires changes to the browser; Adobe is working with Mozilla to enable this functionality for Firefox. For more information and to track the issue, please see Bugzilla 137189.

RESOLVED, see Bugzilla 137189.

Alternative fixes/hacks/workarounds:

iFrame shim:
- Possible solution for Linux (and Safari? Other?) users.
- To be considered a last resort solution.
- iFrame shim example page.
- Google: iFrame shim.
"Hide the flash object or select box when the menus open. I usually put a placeholder in for the object that is obstructing the menu so that the document flow doesn't change." -- Jordan West of Westward Web Development, via webdesign-L.com.
Avoid using "flyouts" completely.
Design a menu system that does not use "flyouts."
Design your site so that Flash does not interfere with crucial GUI elements like the navigation.
Accept the problem -- It is still somewhat usable, right?
"Build your navigation into the offending Flash piece" -- Andy W., via WSG listserv.
Here is an example site: not a dropdown, but still good use of a Flash menu and swfObject -- view the source.
Use PHP/JS to browser sniff/dynamically change the wmode (transparent for Safari, and Opaque for all the rest.)
Other?

Adobe KB Technotes and FAQ:

Some other helpful threads:

Related/interesting links:

Unobtrusive Flash Objects (UFO)

Quote:

UFO is a DOM script that detects the Flash plug-in and embeds Flash objects (files with the .swf extension). It has its roots in the Web Standards community and is designed to support W3C standards compliant, accessible and search engine friendly web design. It also contains several features and best practice techniques that other scripts currently don't have.

An example using the UFO embedding method with wmode set to transparent, by Tony Crockford. (Browsercam) -- Thanks Tony!

Layering flash and html tutorial, by Nick Cowie.

Objecty

Quote:

Objecty makes it dead simple to put video and audio on the web. It's meant to re-swizzle the whole paradigm. (Or something.)

Update 06/27/07: MS Silverlight: Windowless Property. Hat tip: John Dowdell.

Quote:

Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of Microsoft .NET–based media experiences and rich interactive applications for the Web. -- Link

Update 06/28/07: Safari 3 Public Beta: "The world’s best browser. Now on Windows, too."

Related [deprecated?] topics:

Flash Satay: Embedding Flash While Supporting Standards. See also: Why SWFobject is better than the rest
Javay was another method, but I can not find a link (used to be in comments of ALA Satay article above)... still, swfObject is the best way to embed Flash (imho).

www. embeds Flash like so:

Code:

<script type="text/javascript">RunFoo();</script>

And here is the js:

Code:

function RunFoo() {
                    document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="400" height="300">\n');
                    document.write('<param name="movie" value="hc_web/index_page/visitors_summer04.swf" />\n');
                    document.write('<param name="quality" value="high">\n');
                    document.write('<embed src="hc_web/index_page/visitors_summer04.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="300"></embed>\n');
                    document.write('</object>\n');
                    }

I think the above hillmancurtis method was the essence of the Javay method... though I can't fully remember.

Edit:

Original Javay ALA comment found here.

WMODE, a brief history:

Quote:

Background: Towards IE4 or so, Microsoft introduced the ability to have browser extensions draw into the browser's own compositing buffer rather than directly to screen, enabling effects like layering and transparent backgrounds. Netscape Navigator followed with WMODE support a few years later, and now most browsers can accept plugin content as drawing inputs. -- John Dowdell, via webdesign-L.com.

More tips/suggestions/corrections/additions are welcome.

Cheers,
Micky

Last edited by mhulse; Aug 10, 2007 at 10:30.