从设计师的角度走近ActionScript
出自9RIA.com WIKI
从设计师的角度走近ActionScript
:点击此处查看或参与讨论吧^_^
设计师和动画师们用Adobe Flash为web应用和桌面程序创建了很多非常棒的视觉内容。很多人充分利用了Flash对Adobe CS系列的支持--兼容的文件格式,而另一些人则把时间轴的功能发挥到了极致。尽管如此,这里还是有一个众多Flash用户无法回避的事实:他们需要学习 ActionScript。
首先,我可以很负责任的告诉你:学习AS并不会占用你学习Flash,Adobe CS系列或任何现有工作的时间。事实上,学习AS会使你在使用Flash时如虎添翼。白天,我在Adobe工作。晚上,我在旧金山州立大学教授 AS3。当我遇到第一次接触AS的学生时,我往往在教他们编写代码之前先帮他们弄清一些概念。这样做会使AS3的学习过程更加合理,他们学习起来也精神百倍,非常投入。下面,就让我们正式开始吧。
需求
为了更好的理解这篇文章,你需要这些软件:
Flash CS4 Professional
Fireworks CS4 (可选)
生命和时间轴是线性的,AS不是
我每天遇到的大部分Flash用户都是时间轴的专家。他们对此了如指掌,可以轻松的驾驭。 时间轴的一个部分 “时间” 就在它的名字之中。为什么说时间轴是线性的呢?因为它有一个起点和一个终点,你可以随便把它移动到不同的点上,不过不管你怎样做它始终还是只能朝一个方向移动。
AS跟时间轴是不同的,这可能会搞晕一些新程序员。虽然计算机程序本身确实是一行一行执行的,但是你的项目中的所有的程序一起执行时就不是从第一行一直执行到最后一行了。我用AS可写不出能命令程序返回到指定的行数的代码,但是我在时间轴中用帧就可以办到。
当我需要把代码放在时间轴的第一帧(也叫帧脚本 )或者创建一个文档类(包含代码的独立AS文件)时,我可以选择很多方式,比如:
- 创建从第一行执行到最后一行的简单代码。
- 创建叫做函数的代码集合
- 创建类来定义舞台上不同图片和动画的内容和行为。
当你深入AS时,你会发现线形代码只能满足很小项目的需求。但是一般的AS项目一开始时就有好几个代码段了。例如,我在开始开发项目的主要部分时,我可能想从用户那里得到一些信息,结果是,我编写的代码就是基于用户提供的操作的。 举个例子,让我们创建一个关于“ 调查问卷”的简单项目。用户可以看到的内容是:问题本身和4个选项(ABCD),还有一个30秒的倒计时器。 现在这个项目包含一个显而易见的流程 :
- 显示问题和回答选项
- 用户尝试回答问题
- 显示用户的回答是否准确
虽然这个流程是线形的,但是我编写代码的方式却不是。一般来说,我编写AS的代码都是基于项目事件的。 事件是一个动作,它可以由应用程序本身产生,也可以由用户点击鼠标,敲击键盘来产生。聪明的做法是将项目中即将发生的事件在流程图和提纲中提前定制好,这样做可以让你对应用程序中发生的事件有一个全局的把握。 下面有个例子:
- 显示问题和答案。开始30秒倒计时。
- 如果时间到了,就给用户显示正确答案。
- 如果用户点击了正确答案,则停表,向用户表示祝贺。
- 如果用户点击了错误答案,则停表,显示正确答案。
当我们为这个简单的项目创建AS时,我们需要编写代码使这4个事件发生。和其他语言不同,AS代码在执行过程中不会因为项目需要得到用户反馈而暂停。所有的代码同时都可以访问到。如果我们为特定事件编写代码,我们就可以让所有的事情按正确的顺序发展。
舞台上的对象可以触发事件,你在代码里创建的对象(寄存在内存中)也可以触发事件,但是不会显示在舞台上。为第一种事件触发举个例子:当按钮和影片剪辑被点击或鼠标经过时就会触发相应的事件。 我们的计时器可以看做是第二种事件触发机制。它本身不会显示在舞台上(虽然我们可以让它显示),而是保存在内存中。计时器一直跟踪着时间的变化。当时间到了30秒,计时器就会触发一个事件并通知应用程序。 有了这些事件,就知道如何改进我们的提纲了:
- 当应用程序开始时,显示问题,回答选项和开始计时。
- 当鼠标点击四个选项中的其中一个时:
- 看看用户是否选择了正确的答案。
- 如果用户选择了正确的答案,则停止计时并向用户表示祝贺
- 如果用户点击了错误答案,则停表,显示正确答案
- 如果超时,就给用户显示正确答案。
虽然这个提纲和以前的基本相同,但是我们现在能更多的考虑到应用程序中的动作和事件了。你将会发现当你学会AS和事件的基本响应(也叫事件处理)时,定制事件和动作将会令你事半功倍。
有关对象
在Flash中,你可以在舞台上创建影片剪辑,图形,按钮,动画和其他元素。它们都是AS中的对象。不管你是否使用AS,它们都是构建Flash项目的基石。
影片剪辑和按钮可能是你已经使用过的对象,但事实上,文本域,数据值,计时器以及项目本身也都是对象。让我再用“ 调查问卷”举个例子,首现我们把它拆分成舞台上和AS中的对象。
也许先画个草图或者使用Adobe Fireworks做个布局原型可能会有所帮助。
你可以使用Fireworks定义好布局,摆放好每个对象,然后再导入到Flash中。(参见图例1)
图例 1. “ 调查问卷 ”的草图(使用Fireworks CS4)
看看我们现在都有什么。我们有文本域来显示问题,还有4个按钮,每一个按钮都包含了一个回答选项的文本域。按钮就是我们的ABCD选项。还有一个给反馈信息(用户的选择是否正确)的地方。这里没有显示在舞台上的是计时器。 这里还有一个我们需要认识到的对象就是“值”。我以前说过,数据值和按钮,文本域一样也是对象。我们需要知道的是在“ 调查问卷”中存在着一个特殊的数据值:究竟那个回答才是正确的呢?我们的对象列表中不仅要有可见的对象,还要加上不可见的对象,因为它们都是项目的一部分。
- 问题文本:文本域
- 选项A:按钮
- 选项文本: 文本域
- 选项A:按钮
- 选项文本: 文本域
- 选项A:按钮
- 选项文本: 文本域
- 选项A:按钮
- 选项文本: 文本域
- 倒计时器: 计时器
- 反馈文本: 文本域
- 正确答案: 数据
现在我们已经定义好了应用程序中的事件和对象。
整合
有了这些可见的不可见的对象,我们就可以开始为我们即将创建的项目做一个完整的定义了。这个定义就叫做计划书。要想编写一个好的计划书,我们需要完全定义出:这些基于事件和动作的对象将在应用程序中扮演怎样的角色。
当使用Flash时,我们可以在舞台上创建一些对象,然后编写代码来控制这些对象。 项目中的可见对象 已经存在舞台上,
但是还是有一些不可见的对象需要我们来创建。这些东西都得写在计划书里。
好吧,我们根据先前的提纲一步一步来实现:
当应用程序开始时,显示问题,选项和开始计时。
这一步我们需要做得事情是:
- 在问题文本域显示问题。
- 显示四个选项按钮。
- 在每个按钮上显示选项文本。
- 创建倒计时对象,设置时间并开始计时。
- 创建正确答案对象,并基于选项ABCD来设置它的值。
有了这个,我们就已经定义了应用程序的开始,也叫初始化。现在该轮到事件了。我们早先的提纲中包含这些事件:
当鼠标点击某个选项时,看看点的是不是正确答案:
- 如果选中正确答案,停止计时,然后向用户表示祝贺。
- 如果选择了错误答案,则停止计时,然后显示正确答案。
在这个事件中,我们需要记住的是我们有4个不同的按钮。唯一能区分这些按钮的就是按钮中的文本。问题中的选项包含着正确答案的数据对象,我们需要把结果显示在用户反馈区域中:
- 当用户点击ABCD时,看看用户选择的选项的值是否和正确答案的数据对象相匹配 :
- 如果值匹配,则隐藏错误选项,然后在用户反馈区域显示祝贺信息。
- 如果值不匹配,则 隐藏错误选项,然后在用户反馈区域显示相关信息。
我们还有最后一个事件需要详细说明一下:
- 如果用户回答超时,则显示正确答案。这和用户选择错误一样,不过触发事件的是计时器而不是用户。
- 如果用户回答超时 ,则 隐藏错误选项,然后在用户反馈区域显示相关信息。
现在我们已经有了完成计划书所需要的主要元素。很显然对于一个简单的“调查问卷”,这看起来太罗嗦了,但是对于一个大项目,一个详细的计划书可以令你事半功倍,因为你已经对项目中的对象,事件和动作了如指掌。
接下来该怎么做?
为了帮助你快速入门AS,你可以看看我的Adobe TV系列教程: Doug Winnie一对一教您AS。这个系列教你如何使用AS来操作对象,创建事件处理函数,和计时器,以及创建一个简单的完整项目。
我希望在读完这篇文章后,你可以对如何学习AS有一个初步的认识,并且可以从对象和事件的角度来思考你的项目。
创建计划书和使用Fireworks设计原型将会加速你的AS学习进程,并帮助你在将来成为一个高效的开发人员。结合这篇文章,Adobe TV教程以及其它资源来学习AS将会大大提高你的Flash项目的交互性能。
关于作者
Doug Winnie是Adobe System中管理工作流程的产品组经理。他任务是将Adobe产品,平台和技术之间的 信息共享和工作流程 应用 发挥到极致。刚到Adobe时,Doug领导着设计师和用户体验开发小组。 他对使用Flash,Flex,Dreamweaver和其它开发平台进行项目开发有着极大地热忱。你可以通过他的博客近一步了解他。
更多精彩翻译文章,尽在 我的博客,欢迎大家访问,谢谢支持