Flash External Interface javascript problems

17/12/08

Over @ Nine Four we’ve been working on the new website for our good friend Simon Burgess over at Sugarsnap.

It’s a great little showcase website for Simons Video production and Direction. The basic functionality was for a video based flash player (think of YouTube or the BBC’s iPlayer). A lot of agencies in the past have taken this approach and produced a 100% flash based website. We were keen to ensure the website gave us a better foundation than this so the build started on a html version.

Using our normal ingredients, Expression Engine, jQuery and a small twist of flash the build began. In no time we’d worked up the initial functionality and had a html menu that with permanent links taking us to each case study. We did this as we wanted to ensure good search engine optimisation so the whole site had to work at html with no JavaScript or flash. The other bonus of taking this approach is all the data is in a database and this will make future version of the site a lot more flexible. It doesn’t really matter on the final deliverable, be it flash or jQuery.

The next step was to add the relevant jQuery to the menu. We wanted this to allow us to scroll through the folio items, then once the user clicked and item it should scroll to the top of the list. This then tells flash (using JavaScript and flash’s External Interface) to load the given portfolio piece.

It worked a treat…. that is until a few people started getting nothing! A week or so past and we had no concrete solution. Initially we thought it was a problem with the flash player, a security setting or JavaScript. The flash External Interface and Javascript is always a little tricky to get right. I’d used it in the past but that entailed using the very old object embed method, which would have given us in-valid markup. So we chose to use SWFObject to embed the flash file, was it this…

Then thought it was a problem with Vista machines only and stumbled across several problems with flash JavaScript and SP3 (Windows Services Pack 3).

The final test was to take the static file, without the JavaScript or jQuery and embed it in a page…. this didn’t work either, gutted!

Luckily by this time we had a laptop to test it on and after a few quick tests we managed to work out it was flash. Flash was not loading the XML. The odd thing was there was no real consistency, the computers that this didn’t ranged from XP and vista, running Firefox 2 and 3 and IE7. All other platforms and browsers work o.k.!

The problem was this:

It just didn’t work using and absolute path, but when we switched it to a relative path it worked:

…Phew!