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

  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  阅读(23014)  评论(4编辑  收藏

个人简介

var ME = {
	"name": "土豆/Artwl",
	"job": "coding",
	"languages": [
		"JS", "HTML",
                "CSS", "jQuery"
		"MVC",".NET",
		"设计模式"
	],
	"hobby": [
		"阅读", "旅游",
		"音乐", "电影"
	]
}
TOP