JavaScript與ActionScript3那些事

接觸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對外“公開”播放、暫停、停止等方法)

最後,提供示例代碼下載>>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章