从JavaScript调用Adobe Flex / ActionScript方法？ [英] Call an Adobe Flex/ActionScript method from JavaScript?
本文介绍了从JavaScript调用Adobe Flex / ActionScript方法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个项目将使用JavaScript来播放给定的视频文件。它运行在一个定制的MVC框架中，通过
/ static 前缀加载资产文件。 示例： http ：//helloworld/static/swf/movie.swf 使用 mxmlc 编译我的Flex应用程序$ c>二元选项 -static-link-runtime-shared-libraries = true ， -use-network = true 和 - debug = true 。
$ b Flex
$ b
<？xml version =1.0encoding =utf-8？>
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）;
$ b $ public function playVideo（）：void {
log（正在播放视频...）;
public function log（message：String）：void {
if（ExternalInterface.available）{
ExternalInterface.call（
function log（msg）{ if（window.console）{console.log（msg）;}}，
message）;
}
}
]]>
< / fx：Script>
< s：HorizontalLayout
paddingLeft =10
paddingRight =10
paddingTop =10
paddingBottom =10
gap =5/>
< / s：layout>
< / s：面板>
< / s：Application>
HTML
<！DOCTYPE HTML>
< html lang =en-US>
< head>
< meta charset =UTF-8>
< title> Hello World< / title>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js>< / script>
< script type =text / javascriptsrc =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，属性）;
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>
输出
记录...
从Flex调用...
解决方案
Flex MXML
<？xml version =1.0encoding =utf-8？>
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）;
尝试
{
Security.allowDomain（*）; //我需要添加这个
ExternalInterface.marshallExceptions = true;
ExternalInterface.addCallback（sendAlert，sendAlert）;
ExternalInterface.call（initCallBack）;
} catch（error：Error）{
consoleLog（ExternalInterface中的错误）;
consoleLog（Error+ error.message）;
$ b $ 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：HorizontalLayout
paddingLeft =10
paddingRight =10
paddingTop =10
paddingBottom =10
gap =5/>
< / s：layout>
width =300height =100
text =Hello World/>
< / s：面板>
< / s：Application>
HTML
<！DOCTYPE HTML>
< html lang =en-US>
< head>
< meta charset =UTF-8>
< title> Hello World< / title>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js>< / script>
< script type =text / javascriptsrc =https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js>< / script>
< script type =text / javascript>
var flexApp;
函数initCallBack（）{
flexApp = document.getElementById（HelloWorldFlex）;
if（flexApp！= undefined）{
try {
flexApp.sendAlert（Hello World）;
} catch（err）{
console.log（flex回调中出错了。
console.log（err）;
} else {
console.log（flex对象还不存在）;
}
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>
我在Flex 4.1上测试过，请注意我必须添加bin-debug文件夹（C ：\ flexworkspaces\project\bin-debug）到Flash安全应用程序（ http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager04.html配置）请注意，这个互联网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屋！
查看全文
