RSS Feed

Peter Goodman's blog about PHP, Parsing Theory, C++, Functional Programming, Applications,

Accessible Flash

Over the weekend I worked on making flash applications more accessible... And I succeeded. My goal was to get the back and forward buttons working with flash and javascript. Imagine that you're on a small flash website that has all of the usual links in it: home, contact, about, etc. Now, think about being able to click on one of those links (within flash) and then being able to use the browsers back and forward buttons to navigate back to where you came from without refreshing the page or reloading the flash movie! Here's how it works...

var flash_obj, fid, curr_anchor;
var saf = navigator.userAgent.toLowerCase().indexOf('webkit') != -1;
var ie = /*@cc_on!@*/false;

I decided that instead of using anchors in the urls to manage this, I would take a pure iframe approach. This simplified things a lot. Most capable browsers (FF, Opera) handle iframe refreshes as history events so those browsers were easy to deal with. The tricky browsers to get working were Internet Explore (you guessed it) and Safari.

function initFlashAnchors(id)
{
    fid = id+'_frame';
    
    document.writeln(
        '<iframe src="blank.php" id="'+fid+'" name="'+fid+'" width="0" '+
        'height="0" frameborder="no" style="width:0;height:0;padding:0;'+
        'margin:0;border:0;"></iframe>'
    );
    
    if(saf || ie)
    {
        document.writeln(
            '<form method="get" action="blank.php" id="'+fid+'_form"'+
            ' target="'+fid+'" style="display:none;"><span>'+
            '<input type="hidden" name="a" value="" id="'+fid+'_input"'+
            ' /></span></form>'
        );
    }
    
    if(ie)
        flash_obj = window[id];
    else
        flash_obj = document[id];
}

Most browsers handle a frame refresh as a history event but IE and Safari require that it be the user who toggles the refresh in the iframe instead of javascript changing the iframe_obj.src. After a bit of research, I found that an easy way around this was to create a form that targeted the iframe that I had created. This solved the solution for back and forward history events.

document.getAnchor = function(anchor)
{
    try 
    {
        flash_obj.getAnchor(anchor);
    } 
    catch(e) { }
};

The key to the whole thing working is that when the iframe is refreshed, it toggles a function in the main window and that function then tells flash to change what section of the movie to be on. How I did this was by defining a function in the main window as document.myFunc = function() .... This meant that from within the iframe, I could simply call that function by gaining access to the parent window.

One thing that was necessary to make everything work perfectly from within the iframe was a simple setTimeout. It would mean that the frame has had time to load, and that everything was ready to be called.

You can check out the end result at http://flash.filearts.com/Anchors/ and download it from http://flash.filearts.com/Anchors.zip


Comments

There are no comments, but you look like you have something on your mind.


Comment