JavaScript与ActionScript3的异同及交互详解

JavaScript与ActionScript3基础对比

JavaScript和ActionScript基于何种标准？

ActionScript与JavaScript共同遵循ECMAScript标准。因此，熟悉JavaScript条件判断（如if语句）或循环结构的开发者，可以直接将知识迁移至ActionScript。需注意，两者均严格区分大小写。

接下来分析两者的相同点与不同点：

共同点包括：

a) 语法结构相似，均遵循ECMAScript标准（参考ECMAScript5.1中文版）；

b) 均运行于客户端，是构建富互联网应用（RIA）的主流编程语言；

差异点包括：

a) 操作对象不同：JavaScript操作DOM对象，而ActionScript3.0操作DisplayObject；

b) 运行环境不同：JavaScript依赖JS引擎解析执行，ActionScript3需由Adobe Flash Player（AVM2）解析；

c) 面向对象机制不同：ActionScript3.0引入类继承（extends），而JavaScript仅支持基于原型的继承方式；

d) 应用领域不同：JavaScript主要用于Web页面（PC及移动端），ActionScript3.0则多见于网页游戏开发；

补充观点（仅供参考）：从收入角度看，AS3薪资波动较大。若参与开发的网页游戏月流水超五百万（按单服月充值5~10万、开服100组、注册成本2~15元估算），奖金通常可观（主程分配较多，具体依公司协议）。但多数创业型小公司开发网页游戏难以壮大，倒闭率高，风险较大。相比之下，前端开发在大公司就业机会稳定且薪资不错。希望三十岁前能亲历创业，记录从JS前端转AS3前端的历程，作为三十岁生日的礼物。

基于浏览器的JS与AS3交互场景

关于创业、转岗及管理想法暂不展开，回归技术主题。JavaScript与AS3在基于浏览器的应用场景中存在交集，主要归纳为：

1. AS3获取网页传递的参数；

2. JS与AS3的相互调用；

从渲染SWF开始，首先使用JS判断浏览器是否安装Flash Player并获取版本号，确认是否满足最低版本要求，随后动态创建DOM节点并追加至页面。

渲染SWF通常使用swfobject.js（注意版本差异，ver1.5与ver2.0+用法不同），相关文档可查阅官方资料。

SWF参数传递与获取

页面传递给SWF的参数主要有两种方式：

1. 路径参数：<param name="movie" value="xxx.swf?v…"/> <embed src="xxx.swf?v…" />

2. 使用flashvars：<param name="flashvars" value="…" /> <embed src="xxx.swf" flashvars="…" />

AS3中获取参数可通过root.loaderInfo.parameters或stage.loaderInfo.parameters；

Flex生成的SWF可通过Application.application.parameters直接获取；

若使用AS3的“壳”加载Flex生成的SWF，假设AS3“壳”中定义如下代码：

public var param_obj:Object;
param_obj = this.loaderInfo.parameters;

那么Flex生成的SWF获取参数的方法为：

var system_Obj:Object = Object(SystemManager(SystemManager.getSWFRoot(this)).getTopLevelRoot());
var obj:Object = system_Obj.param_obj;

示例代码（AS3）：

package { import flash.display.Sprite; import flash.events.Event; import flash.external.ExternalInterface; /** * ... * @author Meteoric_cry */ public class Main extends Sprite { public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point initView(); } private function initView():void { var obj:Object = this.loaderInfo.parameters; var kk:String = obj['kk']; if (ExternalInterface.available) { ExternalInterface.call('alert', kk); } } } }

HTML代码：

<!DOCTYPE html><html><head><title>test</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><div id='myId'><p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p></div><script type="text/javascript" src="swfobject.js"></script> 1: 2: <script type="text/javascript"> 3: var flashvars = { 4: 'kk' : '你才是kk' 5: }; 6: 7: var params = { 8: menu: "false", 9: scale: "noScale", 10: allowFullscreen: "true", 11: allowScriptAccess: "always", 12: bgcolor: "", 13: wmode: "direct" // can cause issues with FP settings & webcam 14: }; 15: 16: var attributes = { 17: 'id' : 'xx', 18: 'name' : 'xx' 19: }; 20: 21: swfobject.embedSWF("http://b.com/js_swf/jsas.swf", "myId", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);</script></body></html> 

跨脚本调用配置与实现

参数“allowScriptAccess”有三个可选值：always、sameDomain、never。

默认值为sameDomain，即允许同域下的SWF调用JS函数。若设置为never则完全禁止调用，设置为always则无限制，SWF可直接调用。

若将页面参数allowScriptAccess设为“sameDomain”，可能出现如下情况：

若页面需加载远程SWF文件，且需SWF被JS调用，则代码中需添加：

Security.allowDomain("*"); 
Security.allowInsecureDomain("*");

随后进行注册：ExternalInterface.addCallback('jsCallback', jsCallback); 否则调用将失败（不抛出异常）。

AS3调用JS的方法为：ExternalInterface.call。

JS调用AS3需先在AS3内“注册”，且必须等待SWF加载并完成注册后才能调用其方法。

AS3内注册方法：ExternalInterface.addCallback(‘fnName', fnName);

其中fnName为SWF对外“开放”的接口，JS可直接通过(document[‘swfName'] || window[‘swfName']).fnName()调用，与调用JS函数相同，传递参数直接在函数调用符“（）”内加入相应参数即可。

IE下可通过查看节点工具查看SWF“公开”的方法，其他浏览器无法直接查看。

此前我也撰写过一些关于AS与JS相关的文章：

Flash在网页应用中的特殊应用场景>>

Chrome、Firefox下Flash的mousewheel事件失效（wmode=transparent）>>

JS与AS相互调用的一个典型应用：跨浏览器音乐播放器（列表由JS呈现，SWF对外“公开”播放、暂停、停止等方法）。

以上介绍了JavaScript与ActionScript3的异同及交互方法，希望对大家有所帮助。如有疑问请留言，小编会及时回复。感谢对本站的支持！