I saw a blog entry today about how to use wmode for z-ordering Flash in your HTML that reminded me about a topic I’ve been wanting to bring up. With Flash 8’s ability to use transparent and opaque on a much broader set of browsers, some of the issues with how wmode work are going to become more serious.
There are three major problems with wmode IMHO:
Speed
There is no big surprise here, but when you force Flash to composite the HTML layers above and below, you are adding additional processor load. The main reason I bring this up is that a lot of folks are starting to use wmode=opaque even when it is not needed. If you have gone to the trouble of optimizing your application, why would you slow it back down a bit without really strong need?
Accessibility
In talking with Yahoo!’s accessibility product manager, I’ve discovered a LOT of interesting quirks of the Flash player. By far, the most interesting of which is that use of wmode makes your movie invisible to screen readers. This seems to actually be a well-documented issue in the accessibility world. What amazes me is that it is considered a FEATURE!
After attending an internal presentation on Flash and accessibility, I really see what an important role there is to be played, and what an amazing opportunity there is for Flash developers in accessibility. The person giving the presentation is blind, and the opportunity to hear Flash through a screen reader was really amazing. Without thinking about accessibility, Flash movies are really horrible. With just a little thought, and use of the accessibility object (which is a huge asset for Flash), you can really make something fantastic. But since this is an entry about wmode, I will save this particular soapbox for another day.
At this point as major chunks of sites are moving to Flash, it is important that your applications are visible to people using screen readers. Perhaps a solution to this is to detect when a screen reader is in use then use the external interface to call a function that re-instantiates the flash movie with a default wmode. It seems reasonable to say that if a screen reader is in use that the z-ordering compositing isn’t as important. Anyone want to write a library for that?
Inconsistent Performance
SWFs using wmode actually perform slightly different from SWFs that have a default wmode. The difference is that when you are running as transparent or opaque, events are delayed until an onEnterFrame. If you are running at a slow frame rate and drive your movie with setInterval or use any number of other events, you are back to your slow frame rate. If you would like to see an example of the difference in the way it runs, take a look here (must use IE). The real kicker is that SWFs in IE have this bug. SWFs in Firefox are just fine.
While this does irk me just because one of the best things about Flash is its cross-everything consistency, It has caused a problem for a specific application I’ve worked on. At one point I needed to instantiate a lot of SWFs in HTML. Each instance running at its own framerate starts to bog down the machine at some point just from the processing power it takes to idle a lot of transparent 12 FPS SWFs. My proposed work around was to make the SWFs run at 1FPS or less, and then drive the file with setInterval. This would allow me animate the files at the appropriate frame rate when needed, but otherwise idle at a super low framerate. This works fantastically with a default wmode. With a transparent SWF, the Interval only fired once per second right along with the onEnterFrame.
Digg this!
February 23rd, 2006 at 10:16 pm
Hi Justin, thanks for the write-up. Some additional notes:
– Andrew Kirkpatrick has specifically researched how different browsers act with combinations of screen readers, HTML tags, and browser features like WMODE offscreen compositing. It seems like the more things involve, the more the browsers vary.
http://weblogs.macromedia.com/accessibility/archives/2005/08/in_search _of_a.cfm
– The “multi SWF issue” varies with the browser too… Mac Firefox has some of the most pronounced issues with lots of background SWF… they each vary a bit in how they let extensions access the processor. Example:
http://weblogs.macromedia.com/emmy/archives/2005/11/firefox_15_avai.cf m
– I haven’t seen browsers document how they implement a WMODE request, but I’ve always figured it was a direction to the plugin to render its visuals to an area of browser compositing memory (instead of directly to screen)… I don’t think they have a way to shove their HTML/CSS pixels into whatever plugins may be on the page. (Rephrased, I’m pretty sure it’s the browser which receives Flash’s normal stuff, and that the compositing is not done in the Player.)
– WMODE-style compositing was first offered in IE3 or IE4 on Windows, I think… the Mozilla browsers added it for awhile, and then it got steady with release versions of Firefox… there have always been little differences in implementation though (one browser had upside-down printing when WMODE was invoked, for instance)… things are much more consistent than a few years ago, but it’s those underdefined areas of a spec where we see the most variance.
I’m with you on the need to “visualize” a presentation as a linear audio stream, just as it’s good to put ourselves in the shoes of someone with lesser English skills… lots of different people out there.
jd
February 24th, 2006 at 1:41 am
I also discovered problems with Flash 7 and wmode=”transparent” in Firefox and Mozilla. If you scroll the embedded html page, the click area for buttons and movieclips are not on the same height anymore as the visible button or movieclip. Also, at least on german keyboards, a lot of special characters are not accessible anymore for input fields. For example, you cannot access “@” anymore by pressing AltGr+Q. This has not been fixed with flash 8, as far as i am concerned.
February 24th, 2006 at 8:05 am
Hi Justin,
Given all this, what, then, are ways around having to use wmode? At the company for which I work, we use wmode in order to layer DHTML-based menus atop SWFs. We found that if we implement the menus in IE using iframes rather than divs, we no longer needed to set wmode. The reason why this worked is that iframes get their own hWnds.
Do you know if it is possible to alter wmode on the fly with JS, without having to reload the SWF?
Thanks,
Mike
February 28th, 2006 at 1:48 pm
“Do you know if it is possible to alter wmode on the fly with JS, without having to reload the SWF?”
Is this for any particular browser brand, version, platform combo, or are you seeking this info for all browser brands, in all their currently-popular versions, across the operating systems each support?
(Some browsers may support the toggling of markup invoking browser extensions, but I don’t know that they each document their support for this.)
April 6th, 2006 at 2:55 pm
I think you’re all wrong.
On PCs (and not on macs) transparent or opaque windowless mode is faster than the defalt mode. I do not setinterval, and I think it has to do with the way I code, but when I do this experiment with my flash movies, wmode is always about 10-20% faster in terms of performance. WMODE therefore is the best way I know to get your movie to perform at 100%. When you drop a movie into an html page, I always lose at least 10-20% on my speed ticker on default.
Here is the example:
slow mode:
http://starvingeyes.com/v5/problem/top3b.htm
fast mode:
http://starvingeyes.com/v5/problem/top3_wmode.html
Watch the blue ticker on the right. Both are 30 fps. The only thing different is the html code.
I do wish I knew a solution to the Firefox scrolling bug mentioned above. Please email me if you have one:
here is an example of the scrolling bug:
http://starvingeyes.com/v5/problem/scroll%20test.html
Any ways around having to use wmode to get 100%?
May 19th, 2006 at 5:02 pm
Is it possible to watermark your flash? I don’t want other people to use my flash. But I have to do it at run-time because same flash files are used by other programs. Do you guys know?
Adam, New Balance
July 18th, 2006 at 9:44 pm
[…] k harder” when rendering its pixels, which causes the performance hit. See the Wmode Woes entry of Justin’s Flash Blog for additional in […]
January 31st, 2007 at 11:46 pm
Thanks for blogging about this delightful freebie.
February 25th, 2007 at 6:31 pm
Part of the problem I’ve noticed it that YES the z-index layering and wmode=tranparent works with DHTML menus and the like… HOWEVER it causes what I’ll call “Flashing” when you scroll. Much like when you embed a Quicktime movie and then scroll the page… It blinks for a second while the browser redraws… do you guys get my meaning… I can’t figure a way around this…
March 22nd, 2007 at 4:06 am
Interesting tips. Ta
March 22nd, 2007 at 10:16 am
[…] will come along all the quirks that come along with changing from the default wmode - read Justin’s article ‘wmode woes’ for more information regarding. […]
June 6th, 2007 at 2:50 pm
I too was having problems with Flash 7 and wmode=”transparent” in Firefox and Mozilla.
October 16th, 2007 at 7:44 am
Different behaviuor of swf’s in different modes is suspicious.
October 17th, 2007 at 1:51 am
Sports Illustrated
I couldn’t understand some parts of this article, but it sounds interesting
November 6th, 2007 at 7:34 pm
Thanks for this excellent site. I need to learn how to use flash.
November 12th, 2007 at 7:19 am
Hi I have a problem using wmode that I have been unable to find a solution to. If I am using internet explorer 6 version 6.0.2900.2180 I cannot get flash movies to display at all if the wmode parameter is set to anything other than “window” (default). If I set it to opaque or transparent I just get a black square where the flash moview should be. If I remove the wmode paremeter or set it to “window” the flash movie displays fine. This is no good for me though as I want to be able to layer HTML over it, so wmode needs to be opaque. I cannot find a solution to this problem and it doesn’t happen with Firefox, Opera, IE7 or Safari.
February 12th, 2008 at 7:32 am
[…] e elastic movement. I hope to find a solution soon…. Update I’ve been reading this post and it looks like it’s something we have to live with. SWFs usi […]