ActionScript 3.0入門：Hello World、文件讀寫、數據存儲(SharedObject)、與JS互調

　　近期項目中可能要用到Flash存取數據，並與JS互調，因此就看了一下ActionScript 3.0，現把學習結果分享一下，但願對新手有幫助。

目錄

　　ActionScript 3.0簡介

　　Hello World

　　文件讀寫

　　數據存儲(SharedObject)

　　與JS互調

ActionScript 3.0簡介

　　ActionScript 3.0 是一種強大的面向對象編程語言，ActionScript 3 符合 ECMAScript Language Specification 第三版。它還包含基於 ECMAScript Edition 4 的功能，好比類、包和名稱空間；可選的靜態類型；生成器和迭代器；以及非結構化賦值（destructuring assignments）。隨着 Web應用程序項目需求的增加，也要求 ActionScript 引擎有重大的突破。ActionScript 3 引入了一個新的高度優化的 ActionScript Virtual Machine（AVM2），與 AVM1 相比，AVM2 的性能有了顯著的提升。這使 ActionScript 3 代碼的執行速度幾乎比之前的 ActionScript 代碼快了 10 倍。（本段內容來自百度百科）

　　ActionScript 3.0 核心語言有不少新特性：

　　一、運行時異常處理機制

　　二、運行時類型

　　三、密封類

　　四、閉包方法

　　五、使用E4X理論處理XML數據

　　六、正則表達式

　　七、命名空間

　　八、新基元數據類型

Hello World

　　這裏用一個簡單的例子演示如何開發ActionScript 3.0 程序（IDE爲Flash CS6），內容包括添加組件，註冊事件，跟蹤輸出。

　　一、打開Flash CS6，新建一個ActionScript 3.0 文檔，保存爲HelloWorld.fla

　　注：此處還能夠選擇「文件」菜單，點擊「新建」命令進行新建。

　　二、在新建的文檔上添加按鈕組件

　　把組件命名爲btnHelloWorld，並設置label值爲「Hello World」，以下圖所示：

　　三、添加文檔類（即ActionScript 3.0 代碼文件）

　　輸入類名稱「HelloWorld」(可自定義)，而後保存（Ctrl + S）或點擊輸入框後面的「編輯類定義」按鈕，會彈出圖中的提示框，點肯定便可。而後再次點擊輸入框後面的「編輯類定義」按鈕，IDE會自動建立一個HelloWorld類，並打開AS代碼編輯界面：

　　把文檔保存爲HelloWorld.as，與HelloWorld.fla在同一目錄下。

　　四、給按鈕組件註冊點擊事件。

　　註冊事件要引入 flash.events.MouseEvent 包，註冊事件要用 addEventListener(事件類型， 事件處理方法)，這個跟JS中的基本一致。

　　這裏要注意的是，如何取到文檔中添加的那個bthHelloWorld按鈕呢？不一樣於JS中咱們用ID或TagName或Name去查找，在AS中界面上定義的組件能夠直接用實例名稱。

　　代碼以下：

　　五、添加跟蹤代碼：在點擊按鈕時，輸出Hello World！

　　AS中的跟蹤代碼用trace(string)，類型於JS中的console.log()，代碼以下：

　　六、運行，查看效果

　　按 Ctrl + Enter 快捷鍵運行，而後點擊界面上的按鈕，觀察輸出面板中的輸出：

　　至此，HelloWorld DEMO已經完成。怎麼樣，有JS基礎的同窗是否是以爲很容易上手？

　　不過目前介紹的只是Flash ActionScript 3.0中的冰山一角。

文件讀寫

　　AS 3.0 中的文件讀要用到 flash.net.URLLoader 和 flash.net.URLRequest 和 flash.net.URLLoaderDataFormat 包，文件寫要用到 flash.net.FileReference 包。另外，對於文件的寫更像是文件下載，會彈出一個選擇路徑的窗口。在AIR中能夠用其餘方式實現不彈窗的文件寫。

　　一、文件讀取

　　文件數據的讀取是用 URLLoader 加載一個 URLRequest 。

　　URLLoader可用來加載文本文件、二進制數據或外部變量的值。使用方法以下：

var dataLoad:URLLoader = new URLLoader();

//文件路徑
var dataFilePath: String = "demo.txt";

//構造URLRequest
var dataRequest: URLRequest = new URLRequest(dataFilePath);

//設置數據格式
dataLoad.dataFormat = URLLoaderDataFormat.TEXT;

//註冊加載完成事件
dataLoad.addEventListener(Event.COMPLETE, loadDataComplete);

//開始加載
dataLoad.load(dataRequest);

//數據讀取完成後進行處理
private function loadDataComplete(e: Event):void{
    var fileData:String = dataLoad.data;
}

　　二、文件寫入

　　寫文件直接用FileReference的save便可，代碼以下：

var f:FileReference = new FileReference;
f.save(內容, 文件名);

　　我寫了一個DEMO，界面以下，界面繪製方式跟上面界紹的同樣。

　　AS代碼以下：

package  {
    
    import flash.display.MovieClip;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import flash.net.URLLoaderDataFormat;
    import flash.net.FileReference;
    import flash.text.TextFormat;
    
    
    public class ReadWriteDemo extends MovieClip {
        
        private var dataLoad:URLLoader = new URLLoader();
        private var dataFilePath: String = "demo.txt";
        private var dataRequest: URLRequest = new URLRequest(dataFilePath);
        
        public function ReadWriteDemo() {
            btnFuncInit();
            // constructor code
        }
        
        private function btnFuncInit():void {
            var titleTF:TextFormat = new TextFormat();
            titleTF.size = 30;
            lblTitle.setStyle("textFormat", titleTF);
            
            var btnTF: TextFormat = new TextFormat();
            btnTF.size = 20;
            btnLoad.setStyle("textFormat", btnTF);
            btnSave.setStyle("textFormat", btnTF);
            btnClear.setStyle("textFormat", btnTF);
            txtContent.setStyle("textFormat", btnTF);
            
            btnLoad.addEventListener(MouseEvent.CLICK, loadData);
            btnSave.addEventListener(MouseEvent.CLICK, saveData);
            btnClear.addEventListener(MouseEvent.CLICK, clearData);
        }
        
        private function loadData(evt:MouseEvent):void{
            dataLoad.dataFormat = URLLoaderDataFormat.TEXT;
            dataLoad.addEventListener(Event.COMPLETE, loadDataComplete);
            dataLoad.load(dataRequest);
        }
        
        private function loadDataComplete(e: Event):void{
            txtContent.text = dataLoad.data;
        }
        
        private function saveData(evt:MouseEvent):void {
            var val: String = txtContent.text;
            var f:FileReference = new FileReference;
            f.save( val, "demo.txt");
        }
        
        private function clearData(evt:MouseEvent):void {
            txtContent.text = "";
        }
    }
    
}

View Code

　　代碼中有部分是控制格式的，能夠不看。

數據存儲(SharedObject)

　　若是不依賴服輸務端，AS中的數據存儲通常用的是SharedObject（譯爲本地共享對象），SharedObject跟瀏覽器中的cookie相似，不一樣的有兩點：

　　一、SharedObject默認沒有過時時間，cookie默認隨瀏覽器關掉就失效

　　二、SharedObject存儲數據默認限制爲100k，cookie要小一些，大多數瀏覽器支持最大爲 4096 字節的 Cookie。

　　SharedObject的使用比較簡單，示例代碼以下：

//建立一個名爲test的本地共享對象； 
var so = SharedObject.getLocal("test"); 

//給共享對象添加一個username的屬性並存儲數據 
so.data.username="artwl"; 

//添加該屬性不會將它保存到硬盤。只有影片被卸載或使用語句so.flush()強制保存信息。 
so.flush(); 

//如今能夠用trace語句獲取一下username的值； 
trace(so.data.username); 

　　DEMO界面以下：

　　AS代碼以下：

package  {
    
    import flash.display.MovieClip;
    import flash.events.MouseEvent;
    import flash.net.SharedObject;
    import flash.text.TextFormat;
    
    public class ShareObjectDemo extends MovieClip {        
        public function ShareObjectDemo() {
            btnFuncInit();
            // constructor code
        }
        
        private function btnFuncInit():void {
            var titleTF:TextFormat = new TextFormat();
            titleTF.size = 30;
            lblTitle.setStyle("textFormat", titleTF);
            
            var btnTF: TextFormat = new TextFormat();
            btnTF.size = 20;
            btnLoad.setStyle("textFormat", btnTF);
            btnSave.setStyle("textFormat", btnTF);
            btnClear.setStyle("textFormat", btnTF);
            txtContent.setStyle("textFormat", btnTF);
            
            btnLoad.addEventListener(MouseEvent.CLICK, loadData);
            btnSave.addEventListener(MouseEvent.CLICK, saveData);
            btnClear.addEventListener(MouseEvent.CLICK, clearData);
        }
        
        private function loadData(evt:MouseEvent):void{
            var mySo = SharedObject.getLocal("setting");
            var setting = mySo.data.setting;
            if (setting != undefined && setting.length) {
                txtContent.text = setting;
            } else {
                txtContent.text = "暫無數據";
            }
        }
        
        private function saveData(evt:MouseEvent):void {
            var val: String = txtContent.text;
            var mySo = SharedObject.getLocal("setting");
            mySo.data.setting = val;
            mySo.flush();
        }
        
        private function clearData(evt:MouseEvent):void {
            txtContent.text = "";
        }
    }
    
}

View Code

與JS互調

　　ActionScript 與 JS 互調多是不少前端開發者比較感興趣的地方。

　　須要引入import flash.external.ExternalInterface;

　　一、ActionScript調用JavaScript的方法

　　這裏要用到ExternalInterface類的call方法：

　　ExternalInterface.call(functionName:String,...arguments):
　　fuctionName:要調用的JavaScript函數名
　　arguments:參數，可選

　　1）不帶參數的狀況：

//JavaScript：
function Show() {
　 alert("I am a js function");
}

//ActionScript直接用一條語句調用
ExternalInterface.call("Show");

　　2）帶參數的狀況：

//JavaScript：
function Show(message) {
　　alert(message);
}

//ActionScript：
ExternalInterface.call("Show","I am a message from AS");

　　二、JavaScript調用ActionScript的方法

ExternalInterface.addCallback( functionName:String, closure:Function):void　
functionName:要註冊的函數名
closure:對應的執行函數

　　示例：

//ActionScript：ExternalInterface.addCallback("Show",OnShow);

private function OnShow(message:String):string{
    return message;
}

　
//JavaScript:
function CallAS() {
    //swfobj是頁面引入的swf對象
    swfobj.Show("i am a message from js");
}

　　這裏有幾點須要注意（都是這兩天踩過的坑）：

　　一、頁面上引入的swf中allowScriptAccess 參數的值要改成 always ，不然AS調JS會不起做用（權限問題）：

<param name="allowScriptAccess" value="always" />

　　二、若是直接用Flash CS6的「文件」->「發佈預覽」->「HTML」命令生成HTML頁面，引入的object會有兩層，默認只有外層的object標籤上有id屬性，咱們要本身在內層object也加上id屬性（值能夠本身寫），這樣作的目地是，咱們不知道瀏覽器最終渲染時用的是哪一個object，因此要本身判斷，HTML代碼以下：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="440" height="290" id="FlashJSDemo" align="middle">
    <param name="movie" value="FlashJSDemo.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <param name="play" value="true" />
    <param name="loop" value="true" />
    <param name="wmode" value="window" />
    <param name="scale" value="showall" />
    <param name="menu" value="true" />
    <param name="devicefont" value="false" />
    <param name="salign" value="" />
    <param name="allowScriptAccess" value="always" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="FlashJSDemo.swf" id="FlashJSDemo1" width="440" height="290">
        <param name="movie" value="FlashJSDemo.swf" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="play" value="true" />
        <param name="loop" value="true" />
        <param name="wmode" value="window" />
        <param name="scale" value="showall" />
        <param name="menu" value="true" />
        <param name="devicefont" value="false" />
        <param name="salign" value="" />
        <param name="allowScriptAccess" value="always" />
    <!--<![endif]-->
        <a href="http://www.adobe.com/go/getflash">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="得到 Adobe Flash Player" />
        </a>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

　　這裏內部object的屬性 id="FlashJSDemo1"就是我本身加上去的。

　　在JS中要這樣判斷：

var FlashJSDemo1 = document.getElementById('FlashJSDemo');
var FlashJSDemo2 = document.getElementById('FlashJSDemo1');

//這一句就是判斷用的是哪一個object
var FlashJSDemo = FlashJSDemo1.setName != undefined ? FlashJSDemo1 : FlashJSDemo2;
FlashJSDemo.setName(name);

　　注：這裏的setName是我在AS中定義的，供JS調用的。

　　在我機子上，用chrome瀏覽器的測試結果是最終setName綁到了內層object上。

 

　　本文DEMO能夠點擊這裏查看。