从 JavaScript 调用 Adobe Flex/ActionScript 方法? - IT屋-程序员软件开发技术分享社区
首页 前端开发 从 JavaScript 调用 Adobe Flex/ActionScript 方法?
从 JavaScript 调用 Adobe Flex/ActionScript 方法?
[英] Call an Adobe Flex/ActionScript method from JavaScript?
本文介绍了从 JavaScript 调用 Adobe Flex/ActionScript 方法?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要知道为什么 JavaScript 不能与 Flex 对话.我有一个项目将使用 JavaScript 播放给定的视频文件.它在自定义 MVC 框架上运行，其中资产文件通过 /static 前缀加载.
示例 :http://helloworld/static/swf/movie.swf `
我使用带有选项 -static-link-runtime-shared-libraries=true, -use-network=true 的 mxmlc 二进制文件编译我的 Flex 应用程序 和 --debug=true.
弹性
<fx:脚本><![CDATA[导入 mx.controls.Alert;导入 flash.external.ExternalInterface;私有函数 init():void {日志(记录...")；如果(外部接口.可用){ExternalInterface.call("HelloWorld.initFlash");ExternalInterface.addCallback("playVideo", playVideo);}}公共函数 playVideo():void {log("正在播放视频...");}公共功能日志(消息:字符串):无效{如果(外部接口.可用){外部接口.call("函数日志(msg){ if (window.console) { console.log(msg); } }",信息);}}]]></fx:脚本><s:Panel id="myPanel" title="Hello World" x="20" y="20"><s:水平布局paddingLeft="10"paddingRight="10"paddingTop="10"paddingBottom="10"间隙=5"/></s:layout></s:面板></s:应用程序> HTML
<html lang="en-US"><头><meta charset="UTF-8"><title>Hello World</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><script type="text/javascript">$(函数(){var swfVersionStr = "10.1.0";var xiSwfUrlStr = "playerProductInstall.swf";var flashvars = {};无功参数 = {};var 属性 = {};params.allowscriptaccess = "sameDomain";params.quality = "高";params.bgcolor = "#FFFFFF";params.allowfullscreen = "true";attributes.id = "HelloWorld";attributes.name = "HelloWorld";attributes.align =左"；swfobject.embedSWF("HelloWorld.swf","闪存内容","100%", "100%",swfVersionStr, xiSwfUrlStr, flashvars, params, attributes );你好世界 = 函数(){返回 {initFlash:函数(){console.log("从 Flex 调用...");console.log($("#HelloWorld").get(0).playVideo("be6336f9-280a-4b1f-a6bc-78246128259d"));}}}();});<style type="text/css">#flash-content-container {宽度:400px；高度:300px；}</风格><身体><div id="布局"><div id="header"><h1>Hello World</h1></div><div id="flash-content-container"><div id="flash-content"></div>
</html>输出
记录...从 Flex 调用...
解决方案
我遇到了同样的问题，在 Chris Cashwell 提供的链接中，它显示了解决方案的基础.
Flex MXML
<?xml version="1.0" encoding="utf-8"?><s:应用xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:mx="library://ns.adobe.com/flex/mx"creationComplete="init()"><fx:脚本><![CDATA[导入 mx.controls.Alert;导入 flash.external.ExternalInterface;私有函数 init():void {consoleLog("Hello World");尝试{Security.allowDomain("*");//我需要添加这个.ExternalInterface.marshallExceptions = true;ExternalInterface.addCallback("sendAlert",sendAlert);ExternalInterface.call("initCallBack");} 捕捉(错误:错误){consoleLog("外部接口出错");consoleLog("错误" + error.message);}}公共函数 sendAlert(s:String):void{Alert.show(s);}公共函数 consoleLog(message:String):void {如果(外部接口.可用){外部接口.call("函数日志(msg){ if (window.console) { console.log(msg); } }",信息);}}]]></fx:脚本><s:Panel id="panel1" title="Hello World" x="20" y="20"><s:水平布局paddingLeft="10"paddingRight="10"paddingTop="10"paddingBottom="10"间隙=5"/></s:layout><s:TextArea id="textarea1"宽度=300"高度=100"text="Hello World"/></s:面板></s:应用程序> HTML
<html lang="en-US"><头><meta charset="UTF-8"><title>Hello World</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><script type="text/javascript">var flexApp;函数 initCallBack() {flexApp = document.getElementById("HelloWorldFlex");如果(flexApp！=未定义){尝试 {flexApp.sendAlert( "Hello World" );} 抓住(错误){console.log("flex 回调出错.");控制台日志(错误)；}} 别的 {console.log("flex 对象还不存在");}返回;}$(函数(){你好世界 = 函数(){返回 {初始化:函数(){var swfVersionStr = "10.1.0";var xiSwfUrlStr = "playerProductInstall.swf";var flashvars = {桥名称:弹性"，};无功参数 = {};var 属性 = {};params.allowscriptaccess = "总是";params.quality = "高";params.bgcolor = "#FFFFFF";params.allowfullscreen = "true";attributes.id = "HelloWorldFlex";attributes.name = "HelloWorldFlex";attributes.align =左"；swfobject.embedSWF("HelloWorld.swf","闪存内容","100%", "100%",swfVersionStr, xiSwfUrlStr, flashvars, params, attributes );}}}();HelloWorld.init();});<style type="text/css">#flash-content-container {宽度:400px；高度:300px；}</风格><身体><div id="布局"><div id="header"><h1>Hello World</h1></div><div id="flash-content-container"><div id="flash-content"></div>
我在 Flex 4.1 上测试过，请注意我必须将 bin-debug 文件夹 (C:\flexworkspaces\project\bin-debug) 添加到 Flash 安全应用程序 ( http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.htmlconfiguration ) 请注意，这个互联网 URL 实际上是一个修改 Flex 本地配置的应用程序.
日志可以显示在 Firebug 控制台中.
I need to know why JavaScript can't talk back to Flex.
I have a project that is going to use JavaScript to play a given video file. Its running on a custom MVC framework where asset files are loaded via the /static prefix.
Example : http://helloworld/static/swf/movie.swf `
I compile my Flex application using the mxmlc binary with options -static-link-runtime-shared-libraries=true, -use-network=true and --debug=true.
Flex
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.external.ExternalInterface;
private function init():void {
log("Logging...");
if (ExternalInterface.available) {
ExternalInterface.call("HelloWorld.initFlash");
ExternalInterface.addCallback("playVideo", playVideo);
}
}
public function playVideo():void {
log("Playing video...");
}
public function log(message:String):void {
if (ExternalInterface.available) {
ExternalInterface.call(
"function log(msg){ if (window.console) { console.log(msg); } }",
message);
}
}
]]>
</fx:Script>
<s:Panel id="myPanel" title="Hello World" x="20" y="20">
<s:layout>
<s:HorizontalLayout
paddingLeft="10"
paddingRight="10"
paddingTop="10"
paddingBottom="10"
gap="5" />
</s:layout>
</s:Panel>
</s:Application>
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
$(function(){
var swfVersionStr = "10.1.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
var attributes = {};
params.allowscriptaccess = "sameDomain";
params.quality = "high";
params.bgcolor = "#FFFFFF";
params.allowfullscreen = "true";
attributes.id = "HelloWorld";
attributes.name = "HelloWorld";
attributes.align = "left";
swfobject.embedSWF(
"HelloWorld.swf",
"flash-content",
"100%", "100%",
swfVersionStr, xiSwfUrlStr, flashvars, params, attributes );
HelloWorld = function(){
return {
initFlash : function() {
console.log("Called from Flex...");
console.log($("#HelloWorld").get(0).playVideo("be6336f9-280a-4b1f-a6bc-78246128259d"));
}
}
}();
});
</script>
<style type="text/css">
#flash-content-container {
width : 400px;
height : 300px;
}
</style>
</head>
<body>
<div id="layout">
<div id="header"><h1>Hello World</h1></div>
<div id="flash-content-container">
<div id="flash-content"></div>
</div>
</div>
</body>
</html>
Output
Logging...
Called from Flex...
解决方案
I had the same issue, in the link provided by Chris Cashwell it shows the base for the solution.
Flex MXML
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.external.ExternalInterface;
private function init():void {
consoleLog("Hello World");
try
{
Security.allowDomain("*"); //I need to add this.
ExternalInterface.marshallExceptions = true;
ExternalInterface.addCallback("sendAlert",sendAlert);
ExternalInterface.call("initCallBack");
} catch (error:Error) {
consoleLog("Error in ExternalInterface");
consoleLog("Error" + error.message);
}
}
public function sendAlert(s:String):void
{
Alert.show(s);
}
public function consoleLog(message:String):void {
if (ExternalInterface.available) {
ExternalInterface.call(
"function log(msg){ if (window.console) { console.log(msg); } }",
message);
}
}
]]>
</fx:Script>
<s:Panel id="panel1" title="Hello World" x="20" y="20">
<s:layout>
<s:HorizontalLayout
paddingLeft="10"
paddingRight="10"
paddingTop="10"
paddingBottom="10"
gap="5" />
</s:layout>
<s:TextArea id="textarea1"
width="300" height="100"
text="Hello World" />
</s:Panel>
</s:Application>
HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flexApp;
function initCallBack() {
flexApp = document.getElementById("HelloWorldFlex");
if (flexApp != undefined) {
try {
flexApp.sendAlert( "Hello World" );
} catch(err) {
console.log("There was an error on the flex callback.");
console.log(err);
}
} else {
console.log("The flex object does not exist yet");
}
return;
}
$(function(){
HelloWorld = function(){
return {
init : function() {
var swfVersionStr = "10.1.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {
bridgeName : "flex",
};
var params = {};
var attributes = {};
params.allowscriptaccess = "always";
params.quality = "high";
params.bgcolor = "#FFFFFF";
params.allowfullscreen = "true";
attributes.id = "HelloWorldFlex";
attributes.name = "HelloWorldFlex";
attributes.align = "left";
swfobject.embedSWF(
"HelloWorld.swf",
"flash-content",
"100%", "100%",
swfVersionStr, xiSwfUrlStr, flashvars, params, attributes );
}
}
}();
HelloWorld.init();
});
</script>
<style type="text/css">
#flash-content-container {
width : 400px;
height : 300px;
}
</style>
</head>
<body>
<div id="layout">
<div id="header"><h1>Hello World</h1></div>
<div id="flash-content-container">
<div id="flash-content"></div>
</div>
</div>
</body>
I tested it on Flex 4.1, please notice that i had to add the bin-debug folder (C:\flexworkspaces\project\bin-debug) to the flash security app ( http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.htmlconfiguration ) Please notice that this internet URL is in fact an app that modifies the Flex local configuration.
The logs can be displayed in the Firebug console.
这篇关于从 JavaScript 调用 Adobe Flex/ActionScript 方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
