接觸JavaScript和ActionScript3也有近5年的時間了,它們都是應用比較廣泛的腳本語言,經過這幾年的工作和學習,靜下來的時候想總結一些東西,作爲技術上的沉澱以及培訓所用,所以就有了這篇文章。先來看看二者的同性與差異性:
共同點:
a)、二者語法相似,都遵循ECMAScript標準(點擊查看ECMAScript5.1中文版);
b)、均可在客戶端上運行,是構建RIA應用的較爲流行的編程語言;
差異:
a)、二者操作的顯示不同:JavaScript操作DOM對象,ActionScript3.0操作的是DisplayObject;
b)、運行環境不同:JavaScript需要JavaScript引擎進行解析、執行,ActionScript3需要Adobe的flash player(AVM2)進行解析;
c)、ActionScript3.0引入OOP概念,可使用extends實現繼承,而JavaScript只能使用基於原型的方式來實現;
d)、應用的領域有所不同:JavaScript目前主要應用於web頁面(PC端、手機終端等),而ActionScript3.0在網頁遊戲上的應用則比較多;
題外話(個人想法僅供參考):單從報酬上來講,as3的浮動比js要大,如果你參與開發的一款網頁遊戲月充值流水超過了五百萬(到各大頁遊平臺上看看開服量,單服月充值按5~10W來算,如果開到100組,廣告成本頁遊大概在2~15元/註冊人),一般獎金都還比較可觀(項目的前後臺主程可能多一些,分配比例各公司肯定有自己的協議)。但大多數“創業型”的小公司進行網頁遊戲開發,難以發展壯大,關門的居多,這就意味着風險較高。而招前端的,大公司的大門隨時爲你敞開着(薪資也還不錯)。希望我在三十歲以前,有機會寫一篇親歷參與“創業”的經歷,從js前端轉as3前端的歷程,也算是送給自己三十歲生日的一份禮物:)
關於創業、轉崗、管理,有機會一併寫出自己的想法,現在還不太成熟,扯遠了,還是單純回到技術上來吧。既然是那些事,那麼JavaScript與ActionScript3肯定是有一些交集的,這裏以基於瀏覽器的應用場景來進行歸納:
1、as3獲取網頁傳遞過來的參數;
2、js與as3的相互調用;
從“渲染swf” 開始講起,先使用JS判斷當前瀏覽器是否安裝了flash player,然後獲取其版本,是否滿足最低flash player的版本,然後動態創建dom節點,並追加到頁面中。點擊查看《JavaScript檢測flash player的版本號》
渲染swf,一般使用swfobject.js (注意swfobject.js的版本,ver1.5與ver2.0+用法上差異較大),相關文檔在這裏>>
頁面傳遞給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、ff下flash的mousewheel事件失效(wmode=transparent)>>
js與as相互調用,一個比較典型的應用:跨瀏覽器的音樂播放器(列表使用js呈現,swf對外“公開”播放、暫停、停止等方法)
最後,提供示例代碼下載>>