JavaScript與ActionScript3那些事

本文轉載自查看原文 2013-04-03 15:16 10616 Javascript/ Actionscript/ Flex/Flash/AS3

接觸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>