ActionScript 3.0动画基础-1

作者: egoldy

性质: 翻译

阅读次数: 23289

发表时间: 2007-06-03 13:23:14

声明： 此文章为未出版的keith peters的ActionScript 3.0 making things move中文版样章。为书中的第二章。webstudio会在中文版出版之际，友情提供论坛forum支持。转载请注明出处，谢谢！

本章内容 
    1.动画基础 
    2.Sprites(精灵) 
    3.类和面向对象编程(OOP) 
    4.用户交互 

如果说第一章是有点哲学意义的动画概述，那么这一章则是关于ActionScript动画的一系列技术概述,尤其是ActionScript 3.0(AS 3)。这一章将涉及到动画循环、影片剪辑和精灵(sprites)、和用户交互。它所提供的大多数都是你需要的，用来理解后面本书中的 ActionScript 技术。 
2.1动画基础 
在开始之前，先让我们快速回顾一下第一章所述的内容。 
    动画是由帧生成的，每一帧都存放着多少有些不同的动态影像。 
    逐帧或补间(tween)动画每一帧都包含着一副图像或是一副图像的描述。 
    动态动画包含一副图像的初始化描述和用于改变第一帧描述的规则。 
这本书中的大多数内容重点是动态动画的规则，提供了一个技术列表用来改变图像的描述，来得到逼真的动画结果。在本章中，你将会明白如何架构初始化描述，如何在每一帧上应用规则,以及如何将它们整合在一起。你将可以创建大量的应用例子。 

2.2    关于ActionScript版本 

这本书的原版是在Flash 8刚刚发布后不久出版的。虽然在我印象中它被设计为ActionScript 2语法，但我决定尽量避开许多难懂的OOP理论。然而，实际上有许多代码是可以直接放置在时间线上使用。结果看上去有些ActionScript 1和 2混杂的现象。 
然而，这本书的第二版，我决定使用其所用Flash9 和AS 3.基于这一点，至少有三种方式来创建一个Flash 9,AS3影片。 

    Flash CS3 IDE(Flash CS3 用户环境) 
    Flex Builder 2 
    免费的Flex/AS 3命令行编译器和Flex 2 Software Development Kit(Flex 2 SDK). 

而在此Flash CS3 IDE中，在时间线上书写AS 3仍是可能的。其它两种方法至少需要用到AS 3 类文件。因些为了保持一致性，我决定抛开时间线。本书中的所有例子都将使用AS 3类来呈现。 
在这一章中，我将向你展示如何在每一种开发环境(我们刚刚提到的Flash CS3,Flex Builder 2,和免费的SDK)设置AS 3项目。在本书的其余部分，只有适当的类代码会被列示出来，并且它可以工作在所有的三种开发环境中。 
必要时，当描述一个简单概念时，我可能会给出一个小的代码片断来示范想法。虽然它没有完全明确的表明，但它可以被想象为将要插入到本章中列示出来的类架构中的代码片断。 
这次本书给出的类是书中范例比较重要的一部分,我将很快讨论他们，并且做了一些深入。尽管如此，这本书并不是一本深入的OOP参考书，关于类的内容只是必须的，最基本的，来让你创建，运行并完成本书中的范例。 

2.3    类和OOP 

我假设一些读者不知道什么是类或是“面向对象(object oriented)“这个术语，而有一些人可能已在ActionScript（或其它语言）中使用类多年了。因些为了避免漏掉任何人，我将尽量涉及所有的 基础内容。AS 2 OOP 老手可能也需要略读一下此节，因为在AS 3中有相当一部分的改变了。 
如果你认为你对类一点都不熟悉，那你可能错了。如果你曾在Flash中写过任何代码，你就有机会接触过一些类。一个类简单说是指一个对象的类 型。MovieClip是一个类它指向---你可能已经猜到---影片剪辑(movie clips)。文本域，影片剪辑，按钮，字符串，和数字都有对应的类。 
通常一个类有两项内容与之相关:属性(数据 或信息)和行为(动作，或是它可以做的事情)。属性本质上是存放与类相关的信息的变量，行为相当于是函数，而当一个函数是一个类的一部分时，我们通常称它为一个方法。 

2.3.1    一个基本类 

如果你已经使用Flash有一段时间了，你知道你已经可以在库中创建一个元件符号，然后在舞台上创建几个元件符号的实例。类似于元件符号与实例的关系，类是模板，而对象(也可以理解为实例)是指定类的表现个体。你可以编写一个简单的类如下：

package  {public  class  MyClass  {public  var  myProperty:Number  =  100;public  function  myMethod()  {trace("I  am  here");}}} 

让我们来分析代码。首先对于老的AS 2类来说有一些东西是新的:包(package)声明。包(package)，简单讲，是把相关的类组成一个组。稍后我将进一步讨论包 (package)，但是本书中的大部分范例不仅仅是使用包(package)。还有你需要象范例中那样包括包（package）关键词和大括号。这也被 称为默认包(package) 
下一部是类自身的定义。这里相对于你过去的另一处改变:类现在可以有访问修改符。访问修饰符是一个词，它示指哪些代码是可以访问的。这里的 public（公有）意味着这个类可以被类外部的任意代码访问。在本书的所有范例中，类都将是公有(public)。如果你想学习关于AS 3的更多内容，你可能会现一些关于没有public(公有)修饰词的类和同一个类文件中的多个类，但是这些内容已经超出了本书的范畴。 
你可以看到类有一个名称,MyClass,紧跟着是另一对打开和在类结尾处闭合的大括号。 
在类的内部只有两部分内容:一个名为myProperty的变量和一个名为myMethod的函数。这些将变成你所创建的任意类实例的属性和方 法。再次，对于属性和方法，public修饰词意味着这个对象之外的任何代码都可以访问这个属性和调用这个方法。如果你创建的属性和方法只用于类的自身使 用，你可以将他们标记为私有(private),它会阻止类外部任何代码的访问。AS 3中同时还加入了internal(内部)和protected（保护）修饰词。一个类的内部（internal）属性只能被同一个包(package) 中的其它类访问，保护(protected)属性意味着它只对这个类的子类可见（这一点与AS2中的私有(private)属性非常相似）。 
还有些模糊？再有一点，我过滤掉了复杂内容的一大部分，我现在描述的许多内容并没有全部用在本书中。书中的大部分范例使用的是很小的类，一旦你看到一些类的执行过程，你就会明白其中的意思。 
一个类在编写完成并且保存为一个外部的文本文件，命名为与类名称相同的名字，使用的后缀为.as,如MyClass.as。你可以在Flash CS3 IDE, Flex Builder 2,你喜欢的代码编辑器，或是其它任何的文本编辑器来编写类文件。 
如果你正在使用Flash CS3 IDE,你还需要创建一个FLA文件。如果你使用的是默认的包(package),你所创建的类文件必须与FLA文件保持在同一目录下。如果你使用的包 (package)架构，那么包架构的根目录应当与你的FLA是同一目录。另外，你可以将你的类保存在其它地方，然后将路径加入到你的类路径当中。类路径 只是一个简单的路径层次列表。当你在你的代码中指定了一个类的名称，Flash将会在那些目录中搜索你所指定名称的类。另外，在本书的范例中，你将直接使 用默认的包(package)，并且你需要保证类与FlA文件始终在一起。 

2.3.2    包(package) 

包（package）的主要作用是用来组织类。包是根据目录的位置，以及所嵌套的层级来构造的。在包中的每一个名称对应一个真实的目录名称，这些 名称通过点儿来隔开。例如，你有一个名为Utils的类，它在下面的目录中：com/friendsofed/makingthingsmove/。（通 常是将域名转化的包路径。这样可以确保包是独一无二的。）这个类将指向com.friendsofed.makingthingmove.Utils。 
在AS 2中，你需要使用完整的包名称来声明类，象下面这样:

class  com.friendsofed.makingthingsmove.Utils  {} 

在AS3中，包部分代码用来声明包，类部分代码用来声明类，如下：

package  com.friendsofed.makingthingsmove  {public  class  Utils  {}} 

2.3.4    构造函数 
你可以为你的类设置一个构造函数，它是一个与类名称相同的方法，当一个类的实例被创建时，这个方法将自动的被调用。你按下面的方面向构造函数传递参数。 
首先，创建类。

package  {public  class  MyClass  {public  function  MyClass(arg:String)  {trace("constructed");trace("you  passed  "  +  arg);}}} 

那么，假设你工作在Flash CS3 IDE下，在时间线上创建一个类实例如下：

var  myInstance:MyClass  =  new  MyClass("hello"); 

在测试影片时它将trace出“constructe” 和 “you passed hello”。如果你使用的是Flex Builder 2或是免费的SDK,那么你先记住我这里所说的话。稍后你会有大量的实践。 

2.3.5    继承 

一个类可以继承自，或是扩展，另一个类。这意味着它可以获取另外一个类的所具有的所有的属性和方法(除非属性或是方法被标记为私有 (private))。子类(正在继承的类)可以增加额外的属性和方法，或者是改变父级类(被扩展的类)中一些内容。它的做法是创建两个分开的类(在分开 的两个.as文件中)如下：

package  {public  class  MyBaseClass  {public  function  sayHello():void{trace("Hello  from  MyBaseClass");}}} 

package  {public  class  MySubClass  extends  MyBaseClass  {public  function  sayGoodbye():void  {trace("Goodbye  from  MySubClass");}}} 

记住每个类必须保持在它自已的文件中，文件名为类名称加上.as后缀，因些你有一个MyBaseClass.as文件和一个MySubClass.as文 件。如果你使用的是Flash CS3 IDE,创建一个新文件并将这两个类保存在同一个目录中。现在，在时间上创建两个类实例看看会发生什么：

var  base:MyBaseClass  =  new  MyBaseClass();base.sayHello();var  sub:MySubClass  =  new  MySubClass();sub.sayHello();sub.sayGoodbye(); 

第一个实例没有什么惊奇之处。但是注意第二个实例它有一个sayHello方法，尽客MySubClass没有定义过sayHello方法。但这个类继承 自MyBaseClass。还需要注意到它增加了一个新方法sayGoodbye，而基础类（MyBaseClass）并没有这个方法。 
接下来，假设你想从子类中更改基础类中已经存在的方法。在AS2中，你只需要简单的重新定义它。在AS3中，你必须在重新定义时使用override(覆盖) 关键词来覆盖它。

package  {public  class  MySubClass  extends  MyBaseClass  {override  public  function  sayHello():void  {trace("Hola  from  MySubClass");}public  function  sayGoodbye():void  {trace("Goodbye  from  MySubClass");}}}

注意那个sayHello,当从MySubClass调用时，现在已经有一个全新的信息，因为原有的方法已经被覆盖。实际过程中，当然，私有(private)方法是不能被覆盖的，因为它只允类自身内部访问。 

2.3.6    影片剪辑/精灵（Sprite）子类 

你可能或者可能从没有写一个类，然后在写另一个类扩展它。但是如果你使用AS3而且抛开了时间线来做任何东西，你都将要扩展影片剪辑 (MovieClip)或是精灵(Sprite)类。MovieClip类是所有ActionScript属性和方法的模板，ActionScript属 性和方法都是影片剪辑对象的一部分。它所包含的属性你可能已经很熟悉了，如剪辑的x和y的位置，它的缩放(scale)等等，而许多的属性已在AS3中有 了轻微了改变。AS3同时也加入了Sprite（精灵）类。在多数情况下，你可以把一个sprite(精灵)理解为一个没有时间线的影片剪辑。在多数案例 中，当你只用到代码控制物体时，而不使用时间线和帧时，那么此时适合使用比较轻便的Sprite(精灵)类。 
如果你编写的类扩展了MovieClip或是Sprite,它将继承对象固有的所有的属性和方法。那么你可以为你所创建的对象加入指定的方法或 是属性。例如，假设你想为一个游戏创建一个太空船对象。你可能想让它包含一些图像，在屏幕上有一个位置，来回移动，旋转，侦听enterFrame事件来 动画，侦听键盘和鼠标事件来交互。所有这些事情影片剪辑和sprite(精灵)都可以做到，因此理应继承它们中的一个。然后你可以加入自定义的属性象如速 度，燃料，破坏程度，以及自定义的行为如坠落，碰撞，射击和自毁。这个类在编写时开始大致象这样：

package  {import  flash.display.Sprite;public  class  SpaceShip  extends  Sprite  {private  var  speed:Number  =  0;private  var  damage:Number  =  0;private  var  fuel:Number  =  1000;public  function  takeOff():void  {//  .  .  .}public  function  crash():void  {//  .  .  .  }public  function  shoot():void  {//  .  .  .  }public  function  selfDestruct():void  {//  .  .  .  }}} 

注意在最开始你必须要先导入Sprite类，它存在于flash.display包中。如果你决定扩展MovieClip类，那么你同样需要从flash.display.MovieClip包中导入MovieClip类。 

2.3.7    创建你的document class(文档类) 

现在你已经掌握了足够多的关于类的信息，可以开始编写一个真正的有用的类。我我已经几次提到过在创建基于swf的AS3时如何导入类。因为在 AS3中有引入了一新的概念，document class(文档类)。基本上可以说，一个文档类(document class)就是一个扩展了精灵(Sprite)或影片剪辑(MovieClip)的类,并且做为你的SWF的主类。当SWF被载入时，这个类的构造函数 将会被调用。那将是你想要让影片做什么的进入点，如创建附加的影片剪辑，绘制图表，预载素材，等等。 
如果你正在使用Flash CS3 IDE在编写代码，是否使用文档类（document class）是可自由选择的。你可以只在时间线上编写代码。但是如果你使用的是Flex Builder 2,或是免费的Flex SDK, 它们并没有可以编写代码的时间线。唯一的方法就是把你的代码放置在类中。在那些工具中，每件事情都是围绕着强大的文档类（document class），没有它也就不会有SWF。 

下面是前面提到的文档类的基本结构：

package  {import  flash.display.Sprite;public  class  Example  extends  Sprite  {public  function  Example()  {init();}private  function  init():void  {//  sample  code  goes  here}}} 

如果你是一步一步的在学习本章，对你来说这里面好像没有什么新东西，但是你在这里的一个地方已经有了类的全部。我使用的是默认包(package),然后 导入和扩展精灵(Sprite)类。构造函数只有一行代码它调用init方法。它当然是一个好办法，可以将你的所有代码放入到构造函数中，通常这种方式也 被认为是一个最好的习惯来限制构造函数中的代码数量。因此我把它变为一个方法。在本书中，如果我给你一个用来试验的小的代码片断，你要在所讲述的类中将代 码片断插入到正确的init方法中。当影片在编译运行时，构造函数就会调用init方法，你的代码就会被运行。 

现在你所要做的事情就是如何使你的文档类(document class)与你将要创建的SWF链接起来。