ActionScript 3.0动画基础-2

ActionScript 3.0动画基础-1

ActionScript 3.0动画基础-2

ActionScript 3.0动画基础-3

ActionScript 3.0动画基础-4

本文作者:egoldy 文章出处:http://www.webstudio.com.cn 文章性质:翻译 阅读次数:3699 发布时间:2007-06-14

声明： 此文章为未出版的keith peters的ActionScript 3.0 making things move中文版样章。为书中的第二章。webstudio会在中文版出版之际，友情提供论坛forum支持。转载请注明出处，谢谢！ 接上一篇... 2.4设置ActionScript 3.0应用程序 回顾我之前所讲到的内容，有三种创建AS3 swf方法： 1.Flash CS3 IDE 2.Flex Builder 2 3.免费的Flex /AS 3命令行编译器和Flex 2 SDK 这些方法的每一种都是以一个文档类(document class)开始，以一个SWF结束，但是如何设置和使用每一种工具是不同的。我们每次拿出一种，从最简单的（Flash CS3 IDE）,到最复杂的(免费的命令行和SDK)。我将使用下面的文档类，它只是简单的在舞台上绘制一个红色的圆，以用来作些验证。 代码:   package  { import  flash.display.Sprite; public  class  Test  extends  Sprite  { public  function  Test()  { init(); } private  function  init():void  { graphics.beginFill(0xff0000); graphics.drawEllipse(100,  100,  100,  100); graphics.endFill(); } } }   注意我刚刚给出的是一个标准的类结构，只是在init方法中带有几条绘制命令。 2.4.1使用Flash CS3 IDE Flash CS3 IDE是最容易执行你的文档类(document class)的工具。只需要简单的保存之前的类到你所选择的目录下，文件名为Test.as。然后打开Flash CS3,创建一个新的FLA文件将它保存在与类所在的同一目录下。确保FLA发布为Flash9和AS3 。在属性面板上，你应注意到一个的新的文本域称为Document Class（见图2-1）。只需要简单的输入你的类名称:Test。 图2-1. 设置文档类 注意你输入的是类名称，而不是文件名称，因此不需要加入.as后缀名称。然而，如果你的类在一个包中，你需要输入完整的包路径---例如，com.friendsofed.chapter2.Test。 现在你可以象你多年前使用的Flash一样，简单的测试或是发布你的影片。Flash将会查找你的类并将它编译为SWF。当这个SWF运行时，构造函数和init方法将会被执行，那么你将得到你的可爱的红色的圆形。 当在使用一个文档类(document class)时，尽量避免在你的FLA的时间线上加入任何代码—即便只是注解---因为这样可能会引起与编译器加入的代码产生冲突,会阻止你的影片正常的编译或是运行。 2.4.2使用Flex Builder 2 我已经说过使用Flash CS3 IDE是简单的创建AS 3应用程序的方法。然而，事实上多数情况是因为许多的Flash设计师或是开发人员，他们已经使用了多年的Flash，并且非常熟悉的原因。 真实的情况是，使用Flex Builder 2创建AS3应用程序可能真正的简单，一旦你安装了它你就可以得到它自身的一些工具。你甚至不需要考滤创建多个文件(.as和.fla)和确认他们是否保存在了正确的位置。你要做的只是创建你的类并编译它们。 假设你已经安装了Flex Builder 2并且已打开正在运行，首先创建一个新的ActionScript项目。在新弹出的ActionScript项目对话中，输入一个项目名称然后点击结束(finish)。稍后，当你比较熟练时，你可以在继续研究其它的对话窗口，它提供给你许多种自定义项目的其它方法，但是现在你需要准备好的是你的项目名称，它将要变成你的文档类(document class)的名称。（注意”document class”这个术语并不会真正在Flex Builder 2的工具中出现。我只是在三种开发环境中保持一致的说法）。 Flex Builder 2将会为你的项目创建一个目录(一些目录和子目录的方式),并且会为你创建更多的类的结构。你所需要做的就是加入init 方法然后从构造函数中调用它，以及在init方法中加入你想加入的代码。 然后点击工具栏上的运行(run)按钮；就是有一个绿色的园环里面有一个箭头的那个按钮。它将会把你的类文件编译成一个SWF文件，并创建一个html文件来承载它，同时在你的默认浏览器下运行。非常的简单，eh? 如果你希望为你的SWF影片指定不同的参数，如帧频率，大小或是背景色，在导航区(Navigator view)右击你的项目名称，然后选择属性。在属性对话窗口中，选择ActionScript Compiler。在窗口的当前页中，你会看到一个文本域为Additional Comiler Arguments(加入编译器参数)。在这个文本域中，你可以输入下面的参数来改变你发布的SWF的属性:     default-size  width  height     default-frame-rate  fps     default-background-color  0xRRGGBB 只需要将它们都写成一行，添上你想要准确数值，如图2-2所示。 图 2-2. 加入编译器参数 有许多的其它命令行参数你都可以在这里加入，它们都可以在Flex Builder 2和AS3的文档中找到。但是上面例出是是你最常用到的。 你也可以在文档类(document class)内部通过metadata来设置这些数值。这些方法将在下一节的结尾处讲解。 2.4.3使用免费的命令行编译器    好，很报谦的说我不能收回上面所说的话并且告诉你这种方法与其它方式相比同样简单。它是一个完全的自定义编译AS 3方式。但是更好的一点是，它也是完全免费的！象大多数命令行工具一样，它也具有可以被其它应用程序调用的好处，因此你可以从你最喜欢的编辑器中设置或运行它的快捷方式，如做为Apache Ant创建一个过程的一部分，等等。在这一节中我只是简要的描述如何使编译器编译过程。希望你一旦掌握它，你可以解决怎样让编译器与其它开发工具集成工作。当这本书正在写的过程中，FlashDevelop，免费的ActionScript编辑器，可以在www.flashdevelop.org得到，已经开始开发对于AS3.0 的支持。当这本书上架时，毫无疑问它是全可以支持AS3的。 你需要做的第一件事情是从www.adobe.com上先下载免费的Flex 2 SDK。它是一个zip压缩包，你可以将它们释放到你喜欢的地方。最好是将它放在一个非常容易访问的地方，如pc机上c:\flex_2_sdk,或者在Mac机器上 /Applications/flex_2_sdk。 编译器自身其实有三个版本。有一个mxmlc.exe，用于windows系统执行编译，mxmlc,用于Mac 应用程序。这两者都在你所安装的主目录下的bin目录下。最后，还有一个mxmlc.jar,其实是Java的编译器，它将工作在Mac或Pc上。Java编译器在lib目录下，与bin是同一级的目录。如果你准备好研究Java,你可以试一下Java版本，但是对于如何调用和处理文件路径都会有许多不同，因此为了更容易解释，我将直接讲解bin目录下的程序，我发现它工作起来会更容易一些。    （值得注意到的是Adobe确实在Mac和PC版本市场上做的非常好，两种版本几乎是以同样的方式运行的。除PC版本有.exe文件扩展之外，其它大部分是难以区分的，这使得我们在编写工作上更加容易！） 现在你已经安装好了你的编译器，你可以创建并保存好你的类。因为免费的SDK没有任何类型的编辑器，你需要使用你认为比较舒服的编辑器，并保存为无格式的文本文件。然后打开一个命令窗口或是终端，导航到你保存有类文件的路径下，然后运行编译器，将你的类路径作为参数传递给编译器，如下： C:/flex_2_sdk/bin/mxmlc.exe  Test.as 或者是在Mac系统中如下样子： /Applications/flex_2_sdk/mxmlc  Test.as 当编译器工作时它会抛出一系列的信息，直到结束。如果在编译过程中有错误，它会告诉你相关的内容，以及哪个位置，当发生错误时它会精确指示出哪一行和哪一个字符。 现在你在与类相同的目录的下就会得到一个SWF文件，名为Test.swf。运行这个SWF，你将会看到一个红色的圆形。祝贺你，你现在已经是一个很强的AS3用户了。 当然，每次你在测试影片时你需要键入比较长的mxmlc路径，因为这个原因，一些人不愿意去使用命令行工具。让你认识到你已经有许多种方法可以让它自动化是很重要的。例如，几乎每一个好点的编辑软件都会允许你将一个工具设置为快捷方式或是工具按钮，通过参数设置来完成。你只需要将编译器的路径设置为工具，当前文档的路径设置为参数即可，这样你就可以做到一键编译了。 另一种自动化编译的方式是使用批处理文件或可以重复你手动输入内容的AppleScript文件。你只需要运行那个批处理文件或是脚本文件，它会为你做所有的工作。如果你真的很想了解，你可以深入Apache Ant,它是专为此目的而设计的一个程序。创建一个描述你的编译器路径和传递给编译器的各种参数内容的xml文件，Ant会解析它并运行程序。它真的可以做很多事情，因此如果你在使用AS 3做大型的开发，Ant是非常值得学习的。 现在已经有许许多多的编译器可以选择使用了，每一个都有他或她自已的开发环境偏好设置，因此我不能逐一详细的介绍如何设置这些编辑器。但是，如果你查看我的个人Blog,地址是www.bit-101.com/blog,你将会发现一些关于FlashDevelop编辑器与As3集成使用的信息和其它的一些工具。 你可能已经注意到了关于设置编译器的描述中，没有关于设置基本的文档(document)属性如SWF的大小，帧频，或是背景色的方法。可以有两种方法来完成设置。第一种方法是通过在命令行上加入参数如下： -default-background-color=color -default-frame-rate=fps -default-size=width,height 你只需要在命令中将它们加在类名称的后面如下:PC机 (路径)mxmlc.exe  Test.as  -default-background-color=0xff0000 Mac: (path)mxmlc  Test.as  -default-size=800,600 注意你可以加入你所需要的更多的参数，只是在命令行中使用空格隔开。这就是自动化操作得心应手之处。 另一种设置基本文档(document)属性是通过在类中正确的位置上加入metadata。Metadata是由一些可以编译的声明组成，它们并不是真正的ActionScript声明，但是确何在编译过程被编译器使用。SWF metadata标签允许你在类文件中设置前面四种属性，如下： [SWF(backgroundColor="0xffffff",  width="800", height="600",   frameRate="31")] 这一行放置在包(package)内，紧贴在声明的前面。 2.4.4trace注意事项 在许多范例中，特别是这本书的前面，我直接告诉你trace出一些值或是信息，如在前面的MyBaseClass和MySubClasses范例中。如果你正在使用Flash CS3 IDE，这些范例都会正常的工作，你除了需要trace声明之外不需要在写相关的其它内容，你所trace的信息都会显示在Flash的输出面板上。 如果你正在使用Flex Builder 2，你也可以直接书写trace。有一个不同的地方是你需要调试（debug）运行你的影片，而不是直接运行它。这非常简单只需要点击工具条上的调试(Debug)按钮而不是运行按钮。你的影片将会在外部的浏览器上运行，但是如果你切换回Flex Builder,你的trace信息将显示在控制台（console）上。 最后，如果你使用的是免费的Flex 2 SDK,你需要做点工作以使它可以trace出信息。可能最简单的方法是使用第三方的trace面板。它们通常包括两部分：一个是可执行程序或包含一个用于显示trace信息文本的SWF，另一个是一个自定义的trace类。你需要将trace类放在你的类路径中，当编译时使用-source-path命令行参数加上类路径。例如，假设你把trace类放在C:/AS3Classed/中。当在编译时你可以按如下命令行书写: -source-path="C:/AS3Classes/" 它将会允许编译器在你的项目中编译trace类。 那么，当你想要trace时，你只需要调用指定的trace面板方法。例如，不能按下面的方式书写： trace("Hello  world"); 你可能需要这样写： Logger.debug("Hello  world"); 当trace类嵌套在一个包(package)中时你可能需要先导入它。当然，你需要先查阅关于如何使用trace面板的相关文档。我发现一个很漂亮而且也是非常易用的叫XPanel,可以在www.ajaxmaker.com/xpanel/xpanel.htm上行到。 如果你在使用免费的SDK和一个trace面板，记得要先在它的范例中查看它是使用什么方法来取代原有的trace方法来进行trace的。 2.4.5缩放影片 最后一个是我们在编码前要注意的设置问题：如果你是在Flash IDE或是独立的Flash Player中测试影片，它将会进行100%的缩放或以自身实际大小来显示。但是如果你在一个浏览器中或其它程序中显示SWFs，它可能会发生一些缩放来适应所有的空间，会扭曲你的影片中的内容。如果有这样的事情发生，你可以在类的init()方法中加入如下两行： stage.scaleMode  =  StageScaleMode.NO_SCALE; stage.align  =  StageAlign.TOP_LEFT; 这样将会阻止影片的缩放并且始终在窗口的左上角播放。如果你使用上面的代码，要确保导入flash.display.StageScaleMode和flash.display.StageAlign 类。在本书的范例中没有使用这些代码，因为在所有的例子中它们并不适用，但是你需要知道当需要时你可以使用它们。而且他们不会影响其它任何效果。 未完待续