Question

I’m developing a site which will hold a rather large flash game. The problem is that when someone is playing the game and then goes to another page he’ll have to reload the flash game when he goes back a couple of seconds / minutes later in the same browsing session. Of course the assets are cached but it still takes a couple of seconds for everything to load.

So I’m trying to figure out the best way to combat this (besides getting the flash dev to improve the games loading time). I came up with the following:

Create one rather empty page, which holds some javascript and 2 iframes, one of them being the website and the other being the website with the flash game loaded. Now the javascript on the parent page is used to switch between browsing the website and playing the flash game. From a user perspective they are in a regular website (ie. they are completely oblivious to the fact that it’s loaded in an iframe).

This still brings some issues in terms of overlapping dialogs over the flash game, but I can work around those by opening them in the parent.

My only worry is that this just doesn’t feel right, it feels like I’m hacking my way around the problem and I’m afraid it’s going to blow up in my face at some point.

So 2 questions

• What’s your feeling on my approach? Foresee any problems other than the one mentioned (z-index)?
• Is there a better way of going about this? Surely I’m not the first person to have ever wanted a flash clip to persist for as long as a visitor is on a website.

Thanks

Answer 1

If you have a page which people can freely leave (i.e the internet) you’re going to have this problem. If it’s a page they need to flick between, then a separate tab/window is preferable – an iframe will give you more headaches than are necessary!

You can use javascript on the flash page to intercept the user closing/redirecting, and make a prompt which warns the user that they’ll need to reload etc. In an online flash editor I used exactly this technique – every time the user did something which needed saving, I used ExternalInterface:

public final class ExternalJS
{

    public static var callJS:Boolean = true;
    public static var jsFunc:String = 'setSaved';

    public static function setSaved(isSaved:Boolean):void
    {
        if(callJS && ExternalInterface.available)
        {
            ExternalInterface.call(jsFunc,isSaved);
        }
    }
}

With this, there’s a corresponding JS function on the page:

var saved = true;
        function setSaved(isSaved){saved = isSaved;}
        window.onbeforeunload = function()
        {
            if(!saved)
            {
                return "Leaving this page will require it to be reloaded if you visit again, are you sure you wish to navigate away?";
            }
        }

This will create a prompt with this text, and standard ok/cancel options. Short of redesigning your site, this strikes me as the best option.

Hope this helps.

PS For your purposes you probably don’t need the Flash code, or even the condition in Javascript, simply use onbeforeunload event to create a prompt.