Is it possible in Flash to launch a JavaScript function (which uses AJAX) in a page that contains the Flash object itself?

Question

Here's our goal: in a website, show a nice menu "à la" iPhone in Flash and when we click on a menu, show a part of the site "under" the Flash menu.

Two options:

1. create a page with the Flash menu that has an iFrame and with Flash, open the menu in that iFrame;
2. create one page with a div on its bottom, with Flash, launch a JavaScript (if you have any better idea please tell me !) function that downloads via AJAX the desired menu.

My #1 objective is to have only one page. Ideally it would embed the Flash object and launch a JavaScript function.

PS: I hate iFrames. iFrames are evil to me.

Don't hesitate to correct my question to make it proper English !

Thanks,

Olivier

Answer 1

Yes, this is very possible using ExternalInterface in the Flash document. That link explains the whole process.

A bigger question is that it sounds like you are using Flash to duplicate an iPhone animation and I imagine (unless you are doing the "Flip" animation) that it could easily be reproduced with normal JavaScript animation, possibly with a library like jQuery or MooTools to help normalize browser differences. You can even do the 3D animations in Safari 4.

Answer 2

An older method that is sometimes still useful is the getURL method. A good writeup of the differences is here: http://www.psyked.co.uk/actionscript/actionscript-geturl-vs-externalinterface-when-why.htm. In general, ExternalInterface is preferred, but sometimes you want to interact with the page with a function that not defined.

Usage:

getURL("javascript:myFunction(arguments);");

As Doug said, you may be able to use a JS library to recreate the iPhone animations. This would have the added benefit of your menu being navigable for search engines if this is a concern.

Answer 3

An alternative to Doug's suggestion is the old 'fscommand()' function. In your Flash code, you put "fscommand('name', 'value');" replacing name and value with whatever information you want to fire out to the web page.

On the web page, you need to have a JavaScript function which listens to the 'FSCommand' event of the Flash object, like this (IE sample, see docs for other browsers):

function OnFSCommand(name, value)
{
  // whatever you need to do with name & value
}

var swf = document.getElementById(name-of-my-Flash-object);
swf.attachEvent("FSCommand", OnFSCommand); // IE-only - see docs for other browsers