timmy willison

So my colleague @blahed said I should write a blog post about this problem I had.  I said it would be short post and it would go something like this….”Don’t use Flash”.  But I guess I’ll expound.

Let’s put it this way.  Flash is like your fist.  And IE is like the rusty nail that gives you tetanus and makes you die.  Working with one is bad…working with both causes infections in your intestines.  And it hurts.

Recently, I needed to embed a swf and all I wanted it to do was play when it became visible and stop when it wasn’t visible.  But if you’ve ever had to write an actionscript interface for your swf (for instance play and pause functions you can call from javascript), you may have run into problems with ExternalInterface.addCallback.  There is a wonderful post that explains all of the pitfalls when using this function here.

Basically it says you can’t put the swf inside a form (which wasn’t my problem), you should use something like swfobject to embed your swf (which I was through jquery.media), and, here’s the kicker, THE FLASH FILE MUST BE VISIBLE ON THE PAGE. That’s right.  If you’re functions aren’t working…it may be because the swf isn’t visible.  You might be asking, “Does this go for all browsers?”  Of course not dummie, only IE.  Instead, I made the swf autoplay whenever it is attached to the DOM and I had to just attach and detach it whenever it should play or stop.

Here’s that jQuery (stopOldMovie starts out as the callback from $.media, then I can call it without params once the movie is saved as loopMovie):

var loopMovie;
/** Append the movie */
function playOldMovie () {
    loopMovie.appendTo('#webcam-loop');
}

/** Stops/detaches the movie */
function stopOldMovie ( orig, newDiv ) {
    if ( loopMovie === undefined ) {
        loopMovie = $(newDiv).detach();
    } else {
        loopMovie.fadeOut(400, function() {
            $(this).detach().show(); // fadeOut applied display:none so .show afterwards to remove this rule
        });
    }
}