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

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

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 核心語言有很多新特性：

　　1、運行時異常處理機制

　　2、運行時類型

　　3、密封類

　　4、閉包方法

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

　　6、正則表達式

　　7、命名空間

　　8、新基元數據類型

Hello World

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

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

　　注：此處還可以選擇“文件”菜單，點擊“新建”命令進行新建。

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

　　把組件命名為btnHelloWorld，并設置label值為“Hello World”，如下圖所示：

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

　　輸入類名稱“HelloWorld”(可自定義)，然后保存（Ctrl + S）或點擊輸入框后面的“編輯類定義”按鈕，會彈出圖中的提示框，點確定即可。然后再次點擊輸入框后面的“編輯類定義”按鈕，IDE會自動創建一個HelloWorld類，并打開AS代碼編輯界面：

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

　　4、給按鈕組件注冊點擊事件。

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

　　這里要注意的是，如何取到文檔中添加的那個bthHelloWorld按鈕呢？不同于JS中我們用ID或TagName或Name去查找，在AS中界面上定義的組件可以直接用實例名稱。

　　代碼如下：

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

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

　　6、運行，查看效果

　　按 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中可以用其他方式實現不彈窗的文件寫。

　　1、文件讀取

　　文件數據的讀取是用 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;
}

　　2、文件寫入

　　寫文件直接用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類似，不同的有兩點：

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

　　2、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;

　　1、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");

　　2、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");
}

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

　　1、頁面上引入的swf中allowScriptAccess 參數的值要改為 always ，否則AS調JS會不起作用（權限問題）：

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

　　2、如果直接用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可以點擊這里查看。

posted @ 2013-10-30 11:29 artwl 閱讀(31093) 評論(4) 收藏舉報

刷新頁面返回頂部

var ME = { "name": "土豆/Artwl", "job": "coding", "languages": [ "JS", "HTML", "CSS", "jQuery" "MVC",".NET", "設計模式" ], "hobby": [ "閱讀", "旅游", "音樂", "電影" ] }