Here is a working sample application that calls your flex sayWhat funciton from javascript.
It contains 4 files: ax.mxml, call_flfunc.html, ax.js and ax.css.
You should put the last three files and the generated ax.swf file in the same folder on your web server (or modify their path where they are referenced), and it will work.
ax.mxml: your main flex application's structure
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="300" height="300" backgroundColor="#bee3f6"
creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function sayWhat():void {
Alert.show("Hi");
}
public function onCreationComplete():void {
Security.allowDomain("localhost");
// binds this.sayWhat to the external interface, so when from
// javascript is called the compiled swf object's sayWhat function,
// it will be transferred to this.sayWhat.
ExternalInterface.addCallback("sayWhat", sayWhat);
// The next line tells the external interface (the parent application:
// browser window), that this application has finished loading, its
// ready to be used.
// In js there has to be a global method with this name.
ExternalInterface.call("onFlashAppInited");
}
]]>
</mx:Script>
</mx:Application>
call_flfunc.html: the html content into which the ax.swf is embedded
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>AX</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="ax.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="app">
<div id="app-header">
<input type="button" value="Call Flex function"
onclick="onButtonClick()" />
</div>
</div>
<!-- tmp is a not displayed div element used just to hold the swf
until it gets rendered inside the app div -->
<div id="tmp">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="ax"
width="300" height="300"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="ax.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#bee3f6" />
<param name="allowScriptAccess" value="always" />
<embed src="ax.swf" quality="high" bgcolor="#bee3f6" width="300"
height="300" name="ax" align="middle" play="true" loop="false"
quality="high" allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer"> </embed>
</object>
</div>
<script type="text/javascript" src="ax.js"></script>
</body>
</html>
ax.js: contains all the necessary javascript classes and functions
function Util(){
this.ua = navigator.userAgent.toLowerCase();
this.isOpera = this.ua.indexOf("opera") > -1;
this.isSafari = (/webkit|khtml/).test(this.ua);
this.isIE = !this.isOpera && this.ua.indexOf("msie") > -1;
this.isIE7 = !this.isOpera && this.ua.indexOf("msie 7") > -1;
this.isGecko = !this.isSafari && this.ua.indexOf("gecko") > -1;
this.ieVersion = parseInt(this.ua.substring(this.ua.indexOf("msie") + 4));
if (this.ieVersion == 0) {
this.ieVersion = 100;
}
}
Util.prototype = {};
var util = new Util();
/**
*
* @param id
* @param swf
* @param width
* @param height
* @param scriptAccess
* @param allowFullscreen
* @return
*/
function FO(id, swf, width, height, scriptAccess, allowFullscreen){
this.id = id;
this.movie = swf;
this.height = height ? height : 180;
this.width = width ? width : 240;
this.scriptAccess = scriptAccess ? scriptAccess : "always";
this.allowFullscr = allowFullscreen ? "true" : "false";
this.obj = document.createElement("embed");
this.obj.src = this.movie;
this.obj.width = this.width;
this.obj.height = this.height;
this.obj.name = this.id;
this.obj.id = this.id;
this.obj.align = "middle";
this.obj.type = "application/x-shockwave-flash";
this.obj.setAttribute("quality", "high");
this.obj.setAttribute("bgColor", "#bee3f6");
this.obj.setAttribute("play", "true");
this.obj.setAttribute("loop", "false");
this.obj.setAttribute("allowScriptAccess", this.scriptAccess);
this.obj.setAttribute("allowFullscreen", this.allowFullscr);
this.obj.setAttribute("pluginspage", "http://www.adobe.com/go/getflashplayer");
}
FO.prototype = {
id :null,
width :null,
height :null,
movie :null,
scriptAccess :null,
allowFullscr :null,
obj :null,
addParam : function(name, value){
var p = document.createElement("param");
p.name = name;
p.value = value;
this.obj.appendChild(p);
}
};
var app = document.getElementById("app");
var appInited = false;
function onButtonClick(){
if (appInited)
flashApp.sayWhat();
else
alert("Flash app not inited!");
}
function init(){
if (util.isIE)
flashApp = document.getElementById("ax");
else
flashApp = new FO("ax", "ax.swf", 300, 300).obj;
app.appendChild(flashApp);
}
function onFlashAppInited() {
// alert("Flash app inited!");
appInited = true;
// remove the temporary swf container: tmp
document.body.removeChild(document.getElementById("tmp"));
}
window.onload = init;
ax.css: the style sheet applied to the call_flfunc.html page
html, body {
width: 100% !important;
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
text-align: center;
}
body {
overflow: auto;
text-align: center;
}
object, embed {
margin: 0px !important;
padding: 0px !important;
}
#app {
margin-left: auto;
margin-right: auto;
margin-top: 2%;
width: 1000px;
height: 545px;
text-align: center;
}
#app-header {
margin-left: auto;
margin-right: auto;
width: 1000px !important;
text-align: center;
height: 23px;
line-height: 23px;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
#tmp {
display: none;
visible: false;
}
I hope it's understandable, and you can work from it.
