AS3.0学习笔记(1)

即日起我们推出一部新的连载系列——《AS3.0》,原有的“假期系列”改为周末仍以假期形式不间断放出。

ActionScript是针对Adobe Flash Player运行时环境的编程语言。它实现了Flash在动画制作、图像处理、数据处理以及人机交互等方面的众多功能。ActionScript是由Flash Player中的ActionScript虚拟机AVM来执行的,与Java类似,AS的程序代码通常被IDE内嵌的编译器编译成“字节码格式”并放入swf最终文件中,最后由Flash Player统一执行。

自ActionScript的第一个完整版v1.0与Flash 5共同发布以来,AS就随着Flash的不断更新而变得越来越强大,从MX时代起AS就被Macromedia确立为RIA战略的重要工具。 AS3.0是随着Flash 9的发布而正式亮相的,我们今后连载所使用的编程环境也是Flash CS3(v9),但我们更多的只是关注语言本身,并不会过于脱离主题。内容也是严格依据adobe官方manual和livedocs编写,如果对本文有任何疑问的话,可以直接前往adobe.com查阅相关文章。

尽管adobe宣称AS3.0同样适合无程序设计语言基础者学习,但为了能够更效率地写出有用的程序,请至少拥有一种语言基础,例如C语言。当然,如果你在此基础上还拥有Javascript基础那么学习起来将感到一些似曾相识,如果你还系统学习过Java—那么看半个小时manual你就可以直接上手AS3.0了!

 

请再次注意,由于作者本人几乎没有接触过AS3.0以前的版本,因此本文的版本衔接并不能满足一些读者的需要。另外对于RIA的另一个重要工具Flex我们暂时还不会涉及,因此以后的例解程序并不会出现关于AS3.0在Flex中的应用。

 

一、构建自己的AS应用程序

 

现在讨论如何利用Adobe Flash CS3 professional创建一个应用程序,通常我们会有两种做法:

1、将代码存储在时间轴中的帧中;

2、将代码存储在ActionScript文件中;

前一种方法较为简单,在代码复杂度不高、没有重用需求的情况下经常使用。首先开启Adobe Flash CS3 Professional应用程序,在引导界面中选择“Flash文件(ActionScript 3.0)”,如果没有引导界面,可以选择菜单“文件-新建”,随后直接点击“确定”。

现在点击图层中某一帧,例如当前flash文档“图层1”的第一帧,按“F9”,此时会弹出脚本编辑器,在编辑窗口中填入相关代码即可(如图1-1)。 1-1

在创建大型应用程序时,为了方便代码维护,或者希望代码能够在其他程序中得到重用,此时采取前文所说的第二种方法:选择菜单“文件-新建”,选择“常规”选项卡中的“ActionScript文件选项”,点击“确定”就可以进入脚本编辑页面了。

图1-1

 

在了解了上述内容后,让我们来制作一个简单的应用程序,本程序将采用第二种代码存储方式进行构建,其中涉及到了关于IDE本身的一些基本操作,以及面向对象程序设计的一些知识。当然,本文的重点并不在这些方面,该程序段仅仅起到演示作用。

程序例1-1

步骤1、首先启动Flash并新建一个ActionScript文件,选择一个指定文件夹并将其保存为HelloWorld.as文件。

步骤2、在编辑区内输入以下代码,并保存。

package //定义一个”包”,我们会在今后详细讨论 

{

    public class HelloWorld //声明一个类HelloWorld

    {

private var sthSaved:String; //声明一个String类型变量sthSaved

public function HelloWorld() //类的构造方法

        {

            sthSaved = ”Hello World!by hanyi.name!”;

        }

        public function getSaved():String  //使对象返回sthSaved值的方法

        {

            return sthSaved;

        }

    }

}

步骤3、新建一个Flash文件(ActionScript3.0),保存至与.as文件相同的文件夹中,并取名为HelloWorld.fla。

步骤4、现在在一个传统的Flash工作界面中,首先点击界面左侧工具栏的“文本工具”(快捷键为“T”),用鼠标点击拖动在舞台中创建一个文本字段,并在下方“属性”标签栏(ctrl+F3)内选择“动态文本”,并调整其“宽”、“高”分别为300、50,并设定实例名称为“textOutput”,如图1-2。

1-2

步骤5、单击时间轴第一帧,并按“F9”,在脚本编辑框内写入如下代码。

var object:HelloWorld=new HelloWorld(); //定义对象object

textOutput.text=object.getSaved(); //设置文本框显示的内容

步骤6、ctrl+c保存文档,此时文档创建结束。按下ctrl+enter即可测试影片。此时测试舞台上应出现“Hello World!by hanyi.name!”。

 

在上述程序中,有一些其他语言程序员值得注意的地方。其中package包的概念和用法,与Java类似,在后面的部分中会详细介绍。注意变量的声明方式:var 变量名:类型这样的用法,这在声明类的方法时同样适用。尽管以上程序中的效果可能在Flash中仅仅用两个简单操作就能实现,但是比较完整地体现出了AS运行的方式。下面我们对上述程序作出一些改进,这些改进主要体现在交互功能方面。

 

程序例1-1改进版

 

步骤1、打开HelloWorld.as文件,对源文件做以下修改。

package //定义一个”包”,我们会在今后详细讨论 

{

    public class HelloWorld  //声明一个类HelloWorld

    {

private var sthSaved:String; //声明一个String类型变量sthSaved

private var exam:ShortTest;

public function HelloWorld()  //类的构造方法

        {

            sthSaved = ”Hello World!by hanyi.name!”;

        }

public function getSaved():String  //使对象返回sthSaved值的方法

        {

            return sthSaved;

        }

public function startAnswer():String //声明ShortTest类对象,并初始化显示器

{

exam = new ShortTest();

return exam.showQuestion();

}

public function input(answer:int):String //返回结果

{

if(exam.updateResult(answer))

return ”Congratulations!”;

else

return ”Sorry,Try again!”;

}

 

    }

}

class ShortTest //包外类

{

public function updateResult(finalResult:int):Boolean //接收传入的答案,并判断正误

{

if(finalResult == 18)

{

return true;

}

else

return false;

}

public function showQuestion():String //显示题目

{

var question:String = ”2*9=?”;

return question;

}

}

 

步骤2、打开HelloWorld.fla文件,对第一帧上的脚本作以下修改。

var object:HelloWorld=new HelloWorld();

var flag:Boolean;

textOutput.border=true;

textInput.border=true;

textOutput.text=object.getSaved();

textInput.text=”continue…”;

 

textInput.addEventListener(KeyboardEvent.KEY_UP, keyPressed); //监听键盘事件

 

function keyPressed(keyevent:KeyboardEvent):void //委托事件处理

{

    if (keyevent.keyCode == Keyboard.ENTER)

    {

if(flag==false)

{

textInput.replaceText(0,textOutput.length,”“);

         textOutput.text = object.startAnswer(); //进入答题

flag=true;

}

else

{

textOutput.text = object.input(int(textInput.text)); //显示答案

textInput.replaceText(0,textOutput.length,”“);

}

    }

}

 

步骤3、在textOutput下方重新插入一个文本工具,属性选择“输入文本”,实例名称为“textInput”,其他选项与textOutput相同。

 

步骤4、测试影片,首先选定下面的“continue…”框并按enter,此时出现题目,在下方文本框中输入答案,并按enter,检查结果。

 

本例作为例1-1的改进版本,功能上主要体现在交互性的增强。另外需要注意HelloWorld.as文件内包外类ShortTest,这表示ShortTest仅具备被.as文件内其他类访问的权限,并不能被包外数据访问。另一方面,AS3.0的事件委托机制与Java是极其类似的,该程序最终结果显示如下图。 

1-3

1-4

1-5