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代码如下:

  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代码如下:

  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可以点击这里查看

版权

作者:Artwl

出处:http://artwl.cnblogs.com

本文首发博客园,版权归作者跟博客园共有。转载必须保留本段声明,并在页面显著位置给出本文链接,否则保留追究法律责任的权利。




本文转自Artwl博客园博客,原文链接:http://www.cnblogs.com/artwl/,如需转载请自行联系原作者

相关文章
|
2月前
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
5天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
9天前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
15 2
前端JS读取文件内容并展示到页面上
|
6天前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
|
8天前
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5
|
21天前
|
存储 JSON JavaScript
学习node.js十三,文件的上传于下载
学习node.js十三,文件的上传于下载
|
2月前
|
JavaScript API 图形学
一个案例带你从零入门Three.js,深度好文!
【8月更文挑战第1天】本教程无需任何Threejs知识!本教程以入门为主,带你快速了解Three.js开发
69 2
一个案例带你从零入门Three.js,深度好文!
|
2月前
|
JavaScript 数据安全/隐私保护
如何在Vue组件中调用封装好的外部js文件方法
这篇文章介绍了如何在Vue组件中调用封装好的外部js文件方法,包括在Vue项目中全局引入外部js文件,并在组件中通过this.$myMethod()的方式调用外部js文件中定义的方法。
如何在Vue组件中调用封装好的外部js文件方法
|
2月前
|
JavaScript 前端开发 NoSQL
使用Node.js进行后端开发入门
【8月更文挑战第10天】恭喜你完成了Node.js后端开发的入门之旅!这只是个开始,Node.js的世界远比这广阔。随着你对Node.js的深入学习和实践,你将能够构建更复杂、更强大的后端应用。不断探索、学习和实践,你将在Node.js的道路上越走越远。
|
2月前
|
机器学习/深度学习 JavaScript
node.js实现遍历所有文件夹里面的js文件,提取所有的url
node.js实现遍历所有文件夹里面的js文件,提取所有的url