Вот рабочий пример приложения, которое вызывает ваш flex, скажем, что из javascript.
Содержит 4 файла: ax.mxml, call_flfunc.html, ax.js и ax.css.
Вам следует поместить последние три файла и сгенерированный файл ax.swf в одну и ту же папку на вашем веб-сервере (или изменить их путь, на который они ссылаются), и он будет работать.
ax.mxml : структура вашего основного гибкого приложения
<?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 : HTML-контент, в который встроен ax.swf
<?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 : содержит все необходимые классы и функции javascript
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 : таблица стилей, примененная к странице call_flfunc.html
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;
}
Надеюсь, это понятно, и с этим можно работать.