The following example will demonstrate how to eliminate the alternative content “flicker” that occurs on page load when using SwfObject to embed your page’s SWF(s).
As it stands, Geoff Stearns’ SwfObject JavaScript has become the industry standard for embedding Flash content in a Web page. It’s simple to configure, backwards-compatible and solves the issue regarding Internet Explorer’s handling of ActiveX Controls due to the Eolas patent ruling.
Unfortunately, there is one small side effect involving the alternative content that is displayed if a Web browser doesn’t have JavaScript activated or the necessary Flash plug-in installed.
It’s only really noticeable when a page containing a Flash SWF embedded with SwfObject is loaded, and if you’re not looking directly at it, you might miss it. But trust me, during the QA testing phase of your project’s lifespan, your client will eventually notice it, and want you to do something about it.
Figure 1. Notice the brief appearance of the alt. image when the page reloads.
In figure 1, I created a small example to demonstrate the problem that I refer to as the “SwfObject Flicker”. Inside the example window, I have embedded a SWF using SwfObject, and included alternative content, in the form of a composite image of the SWF’s main content, in the example window’s XHTML. If you reload the page and keep your eyes on figure 1, you’ll probably notice a brief appearance (or slight flicker) of the alternative content image before SwfObject executes and the SWF loads in place in place of the alternative content. It’s harder to spot in a small example like the one in figure 1, however once you do see it, you can imagine how much more noticeable it would be if your SWF was the size of a masthead—or 90% of the browser window for that matter.
So how to get rid of it? Your client is definitely going to want the flicker gone, and the tricky part is that your solution can’t rely on any DOM JavaScripting tricks of any kind to do things like reposition, hide or display the alternative content on page load, due to the fact that if the user has their browser’s JavaScript turned off, the JavaScript you’ve written to control the behavior of the alternative content won’t execute, and those users will either be left without access to the alternative content, or they’re still going to see the flicker.
Fortunately, a colleague of mine (Patrick Dunphy over at Organic, Inc. in Toronto) came up with a simple solution doesn’t rely on any DOM JavaScripting to remove the flicker.
Instead of using a single JPEG, PNG or GIF file as an alternative content image, create a two frame animated GIF in which the first frame matches the background that the SWF is set on top of, and the second frame is the composite image of the SWF’s main content. Set frame 1 to a duration of time longer than that of the number of seconds it takes for SwfObject to activate and load the SWF into the page, and set the number of repeats to “once” so the animation doesn’t loop over and over again.
Figure 2. By using a two-frame animated GIF, the alt. content “flicker” is eliminated on page load.
That’s it. As long as frame 1 of your alternative content animated GIF matches the SWF’s background and doesn’t load frame 2 before SwfObject does its thing you’re money. No more SwfObject flicker and it’s Miller Time. Figure 2 demonstrates Patrick’s technique. Reload the page and note the results.
When looking at the examples in figures 1 and 2, please be sure to take a look at them with your browser’s JavaScript controls turned off so you can see the alternative content in the two examples as they would appear if the user didn’t have the appropriate Flash plug-in or JavaScript turned on.
This solution is great for Flash content in which a single composite graphic can be used to encapsulate the information in the SWF, but what happens if you need to provide some non-image XHTML elements (such as <p>, <a> and <ul> content) in the Flash area? Please read my next example to see “how to build a search engine friendly and disabilities-accessible Flash content companion site”, which solves the problem of seeing the flicker on the non-image XHTML elements in SwfObject’s alternative content area.
