How to show a preview image while Flash SWF is loading? - image

Question

I have some 3rd party Flash SWFs on my site that are up to 100KB in size. e.g. the Flash video player "JWPlayer" SWF is 98KB.
That's fine for people with Broadband, but not so good for the slow dial up bandwidth visitors. e.g at 40 kbits/s, we're talking 20 seconds to download.
The problem is that on slow connections, all the visitors are seeing is a static white screen, and so may close the page thinking it's dead. If I right click the area where the SWF is to go, an Adobe Flash Player Object is occupying the space, but the 3rd party SWF has not finished loading in yet.
I would like the website visitors to see a loading spinner GIF or something similar.
Unfortunately, none of the 3rd party SWFs have "preloader" element. And they are not open source, so I cannot add a preloader to them.
So, my question is...
Is there any way to display a loading image, prefereably a GIF animation, while the SWF is loading?
For example, is there any way to force the Adobe Flash Player to show an image while it is loading in the SWF?
I don't have any Flash coding skills, so a solution that doesn't include creating an extra SWF or a SWF within a SWF would, probably isn't best for me, but might be worth adding to the post in case other people have a similar problem.
I am using swfobject 2.2 to embed the SWFs, so a solution that takes that into account or at least doesn't break that would help.
Thanks very much for taking the time to read my post, even if you can't help.
Dave

Answer 1

Without knowing which 3rd party swfs you're using it could be tough, but here's a few things to think about:
One approach would be to hide the swf (or the div that the swf is inside) until it's loaded, and then reveal it once it's finished. You can have a spinner / loading image sit in it's place in the mean time. That said, what you really need is a javascript function that gets called once the load is complete. Once this happens, you can use jQuery to .show() or .hide() your spinner and swf respectively.
JWPlayer has some events that you can make use of. It looks like onReady would do the trick for you.
As for the other 3rd party swfs, I'd look around their documentation for similar javascript callbacks. I know the swfobject has an onLoad callback, as do a few other embed solutions like Swiff, assuming you can use them.
Good luck!
EDIT: The swfobject's callback might be called when the swf has successfully been embedded not necessarily loaded. Your best bet is to play around with this and see if it works - or use the 3rd party swf's callback functions wherever possible.
EDIT 2: Here's a flash loader example.
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
function startLoad() {
var mLoader:Loader = new Loader();
var mRequest:URLRequest = new URLRequest("url-to-your-swf.swf");
mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
mLoader.load(mRequest);
}
function onCompleteHandler(loadEvent:Event){
addChild(loadEvent.currentTarget.content);
//Here's where you specify your js function
ExternalInterface.call("flashLoaded"); // <-- where 'flashloaded' is a js function
}
startLoad();

Answer 2

In the end we decided to go for a mixed setup:
For users with low bandwidth, we set the flash parameter wmode to "transparent", and set the gif to be a background image (without a loading spinner these low bandwidth users think the page is doing nothing).
However, using wmode = transparent has a negative side effect in that that Flash won't use Hardware Acceleration. But for our low bandwidth users, the bitrates of e.g. our video are low enough that in most cases they don't really need Hardware Acceleration.
For high bandwidth users, we deliver e.g. higher bitrate video, and so Hardware Acceleration becomes more important. For these users we use wmode = direct, and do without a loading spinner GIF as the SWF loads quickly enough anyhow.
With the size of our SWF files and their XML files that must also be loaded, we have gone for a limit of 1 megabit bandwidth, where if users have a higher bandwidth we don't use a loading graphic, and visa versa. Other people may find other levels more suitable.
We'd prefer to be able to set the bandwidth limit a lot lower if possible, as on older PCs we could do with some Harware Acceleration of video that is 384 kbit/s, but removing the loading spinner of a user with a low bandwidth like that would mean them waiting too long with nothing happpening on the screen, and this seems worse than losing a few frames during video playback.
Here is a link to Adobe's description of the various wmodes and how different browsers handle them.
http://kb2.adobe.com/cps/127/tn_12701.html#main_BrowserSupportForWmodes
Hope this helps someone else someday.
Dave