视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
ActionScript3 Flash编程无基础入门教程整理版
2025-09-24 00:10:13 责编:小OO
文档
ActionScript3 Flash编程无基础入门教程

如果你觉得51as.com上的很多文章看太深奥,或者你是一个没有任何程序基础想学as,或者你连flash都不会。那么这篇文章就是你茫茫大海上的明灯,让你找到学习as的方向。

做过Flash动画的Flash爱好者们都知道,要做好一个Flash动画,AS是必不可少的,即使只是很简单的几句代码也能起到整个Flash画龙点睛的作用。这里我只简单的介绍一下AS的基本常识。

首先我们要了解AS要写在什么地方,什么时候AS会被触发执行。

1、帧:

写在关键帧上面的AS,当时间轴上的指针走到这个关键帧的时候,就写在这个帧上面的AS就被触发执行了。常见的例子有在影片结尾的帧写上 stop() 等。操作方法就是点选关键帧,然后打开AS面板。

2、按钮:

不同于帧上面的AS,按钮上面的AS是要有触发条件的。要把AS写在按钮上,操作方法是点选目标按钮,然后打开AS面板。举个例子能说的更明白。

假设有一个动画,要让它在播放完同时停止,那么,你要做的就是在这个动画的最后一帧写AS

stop(); 

再假设有个按钮,效果是按下按钮后停止播放,那么步骤如下。

做一个按钮,放到主场景,点选按钮,然后打开AS面板。现在如果也在按钮上写

stop(); 

那么,输出的时候就会提示错误。正确的应该这样写

on(release){

stop();

这里要比帧的动画多这些代码: on(release){} , 整个代码翻译过来就是: 

当(松开){

停止

红色的代码表示鼠标的触发事件事件之一,这里用的是 release 松开,按钮的常用事件: 

release 松开 

releaseOutside 在按钮外面松开 

press 按下 

rollOver 鼠标进入按钮的感应区 

rollOut 鼠标离开按钮的感应区 

现在很明确了:写在按钮上面的AS一定就是这种格式的:

on(事件){要执行的代码} 

3、MC(电影剪辑)

如果你看懂了上面的内容,那么写在MC上面的AS和写在按钮上的大同小异。操作方法就是点选MC,然后打

开AS面板。看个例子

onClipEvent(load){

stop();

同样,MC需要一个事件来触发AS的执行。翻译这段代码就是

当剪辑(载入){

停止

红色代码同样表示一个事件。MC的事件有下面这些:

load 载入,当MC出现的时候执行。也就是除非卸载这个MC,否则load事件内的代码只执行一次 

unload 卸载,当MC卸载的时候执行 

enterFrame 存在的每个帧。在MC存在的每个帧都要执行一次代码。如果你的场景有100个帧,有个MC从41帧开始出现到100帧才消失,那么这个MC上面的代码执行了60次 

mouseDown 按下鼠标,在场景内任何地方都算。和按钮不一样的地方 

mouseMove 移动鼠标,只要移动鼠标就执行代码 

mouseUp 松开鼠标 

同样你要明确:写在MC上的代码一定总是这种格式:

onClipEvent(事件){代码} 

看到这里,如果你明白的写在 帧、按钮、MC上的代码有什么不一样,任务就算完成了

AS 对象篇

重点 :点语法学会表达对象

学会用绝对路径和相对路径表达对象

虽然AS不是真正的面向对象的编程,但是它也有对象的概念。这个概念贯穿整个AS的始终,所以,对对象的理解,比对语法或者其他的理解更为重要。现在开始吧:

首先,我们来了解一下路径,路径分两种:绝对路径和相对路径。做过html的朋友应该知道这个概念。但这里我还是要详细解释一下,我认为对路径的理解要深入,我初学的时候就是磕在路径上。

在讲路径之前,有必要先讲一下(.)语法 : 举例说明,这里要表示房间里的桌子上的一本

书,用 . 语法这么表示:

房间.桌子.书 

如果要再细到书上的页上面的字,很显然

房间.桌子.书.页面.字 

看明白了吧?我也不懂得怎么说,. 语法就是这样表示对象的,点的前面是其后面的父级。如房间是桌子的父级,桌子的子级就是书。

还是不明白?这样吧,你把 . 里写成“里面的”就可以了,这样就是

房间(里面的)桌子(里面的)书(里面的)页面(里面的)字 

这样容易多了吧?

现在我开始说路径了,其中也要夹杂的对象的说明,看:

从例子入手。新建一个Flash文件,然后创建一个MovieClip,MC命名为“MC”,放在主场景里面,然后再创建一个按钮,放在“MC”里面,然后从库里面拖一个出来放在主场景,分别给这两个元素实例命名

(Instance Name , 注意是实例名不是MC的名字):MC->myMC button->myBtn

现在我们假设主场景是房子,MC是桌子,按钮是书,那么分别怎么表达房子,桌子,书呢?如下

_root 房子

_root.myMc 房子.桌子

_root.myMc.myBtn 房子.桌子.书 

这里的 _root 是Flash的关键字,表示主场景的 Timeline (时间线)。

很容易理解对不。这里的 房子,桌子,书 都是我们要理解的“对象”。

当你找到这个对象后,才能对对象进行操作,才能给对象施加方法。比如,我现在要打扫房子,打扫是方法,但对象是房子,表达式是这样 : 

房子.打扫() 

如果你不能正确的表达房子这个对象,你的打扫也就不能正确的实施了。

*说明:这里为什么要在打扫后面加()呢?因为打扫是方法不是对象,为了让Flash知道这是个方法,我们必须加上(),要不然它会以为房子里面有“打扫”这个东西。

现在,我们可以很容易的对房间里面的各个东西进行操作,如

房子.打扫();

房子.木桌子.整理();

房子.玻璃桌子.打碎();

房子.书桌.书.看(); 

等等,相信你把它们"翻译"成AS代码没什么问题吧  比如要主场景停止播放,就是

_root.stop(); 

要MC停止播放,就是

_root.myMc.stop(); 

现在说说相对路径。还是上面的例子。假如给你下了一个命令:修理房子里面的红色的椅子。那么怎么表达呢?就是:

房子.红色椅子.修理() 

无论给你下命令的人在哪里告诉你的,你都会知道要修理的椅子是哪一张。但是他如果这么说:修理你现在坐的这张椅子。红色的?还是蓝色的?这就要取决于你坐在哪个椅子上了。那么相对的表达式就是

我坐的椅子.修理(); 

这里为什么不这么写呢:

房子.我坐的椅子.修理() 

这么写是错的,因为我坐的椅子是不固定的,我说不定把椅子搬到房子外面去坐,那这个表达式就错了,因为椅子根本就不在房子里面。

换过来用Flash实例说明。现在我想让主场景下的 myMC 在一开始就不要播放,而是先停止。那么你有什么办法呢?

我你猜想到的办法可能就是在主场景放入这个MC的那个帧写上:

_root.myMc.stop(); 

这个是对的。但是一旦 myMc 的名字一变,你就得跟着改这句话了。

有没有办法不管这个“MC”的实例名不管怎么改,都会被我们同样一句的AS找到?当然可以,前提是你的AS必须“坐在这个MC上”。

进入Mc的编辑状态 , 在 Mc 的 Timeline 的第一帧写上 

this.stop(); 

这里的this也是Flash的关键字 , 这个 this 指AS所在的这条 Timeline .

现在不管你这个MC放在哪里,命名是什么,我都不管,反正肯定会停下来。为什么,因为AS正“坐在MC上”。

如果你在这里写上

_root.stop(); 

那就错了。为什么?仔细想想。

这个 this 就是相对路径的关键字之一。你必须要仔细理解它。

另外的一个关键字就是 _parent 。如果你理解了 this , 那么 _parent 并不难理解。举例:

还是哪个假设 房子(_root) , 桌子( mc_zhuozi ) , 书 (mc_shu) 他们的关系是(括号内为mc实例名)

房子.桌子.书

_root.mc_zhuozi.mc_shu 

在 mc_zhuozi 的 timeline 里面写

_parent.打扫(); 

意思就是打扫房间;

在 mc_shu 的 timeline 里面写

_parent.打扫(); 

意思就是打扫桌子。

_parent 也就是父级。桌子的 _parent 就是房子的 timeline , 书的 _parent 也就是 桌子的 timeline。点的后面的对象 的 _parent 就是点前面的对象。  

AS 语法篇

首先要让大家明白的是:AS 语法的大小写是敏感的。

如: gotoAndPlay() 正确 gotoAndplay() 错误 。

关键字的拼写必须和语法一致,要做到很容易,因为在Flash的AS面板里面,关键字会有不一样的颜色显示。

很多Flash小鸟们也许要开始埋怨,记不住咋办?我这里有个办法,就是背。不要流下委屈的泪水,俺们都是这么走过来的。多用两次你就记住了。

这里说一下,我们要从开始就养成编程的好习惯,如在每个语句后面都加上分号,有可能的话,尽量给复杂的语句加上注释。注释的例子

//这个是注释,但是只能有一行

/* 这个也是注释,可以写很多行 */ 

接下来,介绍几个类型的语法。

1、几个常用的控制场景的方法,如

play(); //让时间轴的指针播放

stop(); //停止时间轴的指针在程序触发时候的那个帧

gotoAndPlay(); //让指针跳转到某个帧,然后继续播放

gotoAndStop(); //让指针跳转到某个帧,停止在那个帧

nextFrame(); //往下走一帧

prevFrame(); //往前走一帧

上面的都是方法。

方法?解:打个比方,我们管吃饭叫作一种方法,用来解决肚子饿这个问题。我们管stop()叫做一种方法,用来解决时间轴指针停下来的问题。我们管上面的几个东西叫方法,用来解决时间轴指针运动的问题。

2、控制属性的语法。有很多,我列几个

_x

_y

_alpha

_width

_name

.....等等属性

上面的都是属性

属性?解:打个比方。我们管你的身高叫做属性,用来标识你的高度。我们管你的体重叫属性,用来标识你的质量。我们管 _x 叫属性,用来标识目标的X轴坐标。我们管_alpha叫属性,用来标识目标的透明度.......我真罗嗦啊,唉。

3、控制语句流程的语法,如

if (条件){

//条件满足执行这里的代码

}else{

//条件不满足执行这里的代码

}

for(i=0;i//执行这里的代码N次

}

while(条件){

//当条件满足时一直执行这里的代码

}

等等。这些都是基本的语法,也是AS的基础。

4、其他方法和自己定义的方法。

这里我不能把所有的语法都一一列出来介绍,因为实在是太多了,具体可以参考Flash自带的帮助手册。

我们只能在以后的应用中慢慢熟悉。这里,你有个基本概念就行了。到后面我会给每句话都加上注释。

回顾一下,今次要大家记住的东西:

AS 语法的大小写是敏感的。 

方法的概念。 

属性的概念。 

[转帖]AS基础精典教程

作者和出处俱不详,版权归原作者所有

次给大家带来MOOCK在世界性FLASH大会:FF2K1大会上的演说,要说到Action的权威,当然要数MOOCK,他写的ASDG(一本书)是可以和FLASH自带的AS字典相提并论的宝贝。虽然他是这样一个高高手,但是他的

这个演讲却是非常的浅显,如果你某处读起来觉得难,那也一定是chocobo翻译得不好。(有些地方实在是太浅,我受不了就改了 )

这篇文章预算的演讲时间很长,所以读起来也会觉得较长,你可以分开来读。

还有,本文是关于FLASH5的AS的,毕竟FLASH4的AS已经淘汰。 

第一章:由O开始 

为了示范,MOOCK将会做一个多选题问答的动画来做为例子。

这个例子以4种不同版本的方法来实现。

对于用户来说,4种版本使用起来将没有区别,只是对于我们开发者来说,研究的就是如何改进这些FLASH代码的结构与组织。

改进的重点在于:

*更便易的维护

*更便易的扩展

*更快捷的建设

要牢记的是,学习编程是一个过程(process)而不是一个事件(event)。

如果你第一次学习到的时候不能照着完成也不必担心。

接下来,MOOCK说到为了照顾没有多少编程经验的菜鸟,会由最最最简单的开始。 

关于计算机语言:

编程语言是用来发信息给电脑,从电脑接受信息的

编程语言也有词汇表和文法,如人类的语言类似

通过编程语言我们可以告诉电脑去做什么,也可以从他那获得信息 

关于语法和逻辑

学习编程的思想比学习一种语言的语法重要

假设FLASH是懂我们语言的单词的,我们对FLASH说:“Flash, 让一个球在屏幕里面弹来弹去吧”FLASH会什么都做不了,FLASH要我们用他的世界懂的东西,例如:movie clips, buttons, frames,来描述它要做的事

那我们再说一次:“Flash, 让一个名字叫ball_one的movie clip在屏幕里面弹来弹去吧”

我们已经用MC这个FLASH懂的东西来描述了,但FLASH还是什么都不做,因为它需要更多的信息:

*这个球有多大

*它放在哪里?

*一开始它首先往哪个方向运动?

*它初始的速度是多少

*它在屏幕的那一个范围之内弹来弹去呢?

*弹来弹去要持续多久呢?

看来我们需要有逻辑结构地告诉FLASH它应该怎么去做

1、一个球指的是一个叫ball_one的圆形MC,直径50像素

2、还有一个方形MC叫square,边长300像素

3、将ball_one放在square上某处

4、以一个随机的角度,75像素每秒的速度开始移动ball_one

5、如果ball_one接触到square的某边,就弹回

6、一直不停地运动下去,直到我们让它停

如果FLASH真的懂我们语言的单词,他应该知道如何开始做了 

总结一下关键点:

无论是使用什么语言,编程思想的艺术都在于用如何将逻辑步骤列出

在你开始将要做的事用计算机语言描述之前,用我们人类的语言描述一次会很有帮助

即使你将他们翻译成任何的计算机语言,他们的逻辑步骤应该是一样的

电脑不懂用假设完成去你的想法,他们没有思考能力(chocobo:就是你要把要求完全无遗漏地写出来让它运行)  

第二章:基础 

首先了解如何在FLASH输入程序

在FLASH菜单Window里面Actions可打开ACTION面板,ACTION面板分右面的脚本窗,和左面的工具窗,脚本窗就是放脚本的地方,而工具窗用于快速地输入各种ACTION,运算符,函数,属性,对象

MOOCK建议大家使用专家模式,在FLASH菜单的Edit的Preferences的Actions panel里面选Expert Mode,以后每次打开ACTION面板都会自动设置为专家模式(专家模式可直接输入代码,初学者学下去就会知道,很多代码无法在普通模式里输入) 

AS的一些概念

所有代码都需存于某个地方,可以是frame(帧), button(按钮), or movie clip(电影夹子)。

只要你选择了某按钮或MC,你之后输入的代码就存放在它的上面了,注意此时ACTION面板上方提示为Object Actions。同理你也可以将代码存放于帧,不过此时提示为Frame Actions。

当你在专家模式的时候仍无法输入代码,你首先要检查你是否选择了frame, button, 或MC来存放代码。 

然后我们象学所有语言一样吧,来个HELLO WORLD吧

在ACTION面板输入

var message = "HELLO WORLD";

trace (message); 

然后我们按CTRL和ENTER键,看到结果了吗?

以下两章比较基础。MOOCK是骗演讲费吗?

第三章:解读

第一行代码:var message = "HELLO WORLD";

告诉FLASH记住一个名字叫message的容器(通常在计算机里称为变量(variable),在FLASH里面,变量可以装文字,和可以装数字)里面装了这样的数据(datum),内容为:"HELLO WORLD"

“=”等号是一个常用的运算符号(operators),在FLASH里面它不是代表相等,而是代表赋值

var 命令的含义是宣布给整个电影,此变量的内容是什么。 

第二行代码:trace (message); 

就是要FLASH显示message里面的内容,为什么FLASH能输出内容呢,因为当你按CTRL+ENTER又或者在网上

打开这个电影的时候,你输入的每一段Action Scrpit代码,都会通过FLASH的解释器(interpreter)来解读然后执行。

如果解释器能解释你的代码,他会运行它,并返回你要返回的结果,如果解释器看不懂你的代码,他也会返回错误代码——告诉你错误的原因 

通常,我们发给解释器的命令不只命令这么简单,还包括命令的内容例如trace (message); 这个trace输出命令的内容就是message,计算机里就称为参数(argument或parameter),如果一个命令支持多个参数,参数之间一般用“,”来分割。

第四章 还有一些概念

表达式(expression):(2 + 3) * (4 / 2.5) - 1可称为一个表达式,"a"+"b"也是表达式,需要解释器运算才得到结果的值,一个相反的概念,不需要运算的直接引用的,称为literal

条件(conditionals):(look at a series of options and make a decision about what to do based on the circumstances)

不翻译了,大概意思就是美女穿着新衣上街,会先看看外面会否下雨,这就叫条件判断啦 

if(天气=="下雨"){trace("还是带把雨伞吧")}

循环(loop):如果要输出5个数字,你是写5遍trace命令吗?更多的就不行了吧

你可以用while和for命令来完成重复的动作

事件(events):放在frame里面的代码只要电影播放到就会执行,放在MC、button的代码则只在解释器发现预先设置好的事件被触动的时候执行。最典型的就是一下鼠标点击按钮造成press时间啦。

函数(functions):将一组程序打包成一句命令来调用他,其实FLASH里面的很多命令就是函数:trace、play、gotoAndStop等等都是。

第五章 开始第一个版本的选择题的制作

多选题共有两道

如图,大家应该养成一个好习惯,用一个的层来放置代码,并把该层放到最上面会更便于修改。第二层则放置Label。不要觉得麻烦,只要你想到世界上大部分好的闪客都是如此做的,你就不会嫌麻烦了。

以下的层放的是选择题的内容,如上图 

开始创建题目

在question 1层的第一帧,写上题目"When were movie clips introduced into Flash?" (什么时候FLASH开始引入电影夹子的概念?)

再写上三个选项:Version 1, Version 2, Version 3

跟着我们再做一个用来选择的方框按钮,从Library里面拖出这样的三个按钮,分别放到各个选项的前面。

第二题的创建我们用第一题来做个模版,选择question 1层的第一帧,选择菜单上的Edit>>Copy Frames

再选择question 2的第十帧,Edit>>Paste Frames 将第一题复制过来了

当然问题要改成"When was MP3 audio support added to Flash?" (什么时候FLASH开始支持MP3格式导入?),答案也要改成Version 3, Version 4, Version 5 

数据初试化

虽然是个很简单的FLASH,但是象其他复杂的FLASH一样,先告诉FLASH要用到的数据,例如题目的答案等,这是个好习惯,越复杂的FLASH,受惠越多

正常来说定义数据应该LOADING结束之后的。

为了把题目定在第一题,ACTION还需要一句stop();

选择第一帧,在ACTION面板里面输入代码

// init main timeline variables

var q1answer;  // user's answer for question 1 第一题用户的答案

var q2answer;    // user's answer for question 2 第二题用户的答案

var totalCorrect = 0;  // counts number of correct answers 答对的题数

var displayTotal;  // text field for displaying user's score 显示用户分数的变量

stop(); // stop the movie at the first question

你会发现//开头的那一行代码都变了色,//代表的是注释,是用来辅助阅读代码用的,对代码执行没有影响(是的,你在里面写笑话,写小说都可以,不会影响你的FLASH的^-^)

我们定义了四个将要用到的变量,用途已经在注释里面写了,写注释也是一个好习惯 

关于命名变量名

变量起名displayTotal,意思是 display total,因变量名不能使用空格和破折号,所以用第二个单词的开始字母大写,以此分隔单词

一些程序员也喜欢用下划线:display_total

记住一定要给你的变量起一个一眼就能识别意义的名字 

添加label

我们知道第二题是在第10帧的,我们只需要一句AS:gotoAndStop(10); 就可以执行第二个问题了

不过MOOCK告诉你这不是好习惯,因为动画的内容是不断改变的,所以我们应当习惯使用label,即使帧数如何变化,只要label指向正确,不需要修改ACTION都可以继续运行(chocobo再提醒你吧,不要使用相同的label,即使在不同是Scene当中)

好了,我们在label层的第1、10、20分别F6创建关键帧,给他们写上init、q2、quizEnd 

要给按钮写上代码了

在三个按钮里面分别写入代码,大同小异的:

按钮一:

on (release) {

q1answer = 1;

gotoAndStop ("q2");

按钮二:

on (release) {

q1answer = 2;

gotoAndStop ("q2");

}

按钮三

on (release) {

q1answer = 3;

gotoAndStop ("q2");

这三段代码用人类的语言描述,就是:当用户点击某个按钮选择答案后,把他选择的答案记录到q1answer变量中去,然后进入下一题。

on这个单词代表随后的就是一个要触发的事件

release是指在按钮上松开鼠标这样一个事件

当动画执行到这里的时候,三个按钮都会分别监听用户有没有做在按钮上放开鼠标这个动作,一旦发生,按钮就会自动执行大括号{}里面的代码了

若用户选第一个,{}中是:

q1answer = 1;  //用q1answer变量记住用户选择的是第一个答案

gotoAndStop ("q2");  //进入下一题

上面我用了注释的方法来解释两句代码,你必须习惯,因为不是所有源程序都有教程,但是好的源程序都会有注释

第二题的按钮与前面相似,只是变量换为q2answer,选择完进入结束的画面,例如第一个,改为:

on (release) {

q2answer = 1;

gotoAndStop ("quizEnd");

结束的画面

结束应该做什么,当然是告诉用户分数啦,写在第20帧,就是label为quizEnd的那帧的代码:

// tally up the user's correct answers

if (q1answer == 3){

totalCorrect = totalCorrect + 1;

}

if (q2answer == 2){

totalCorrect++;

  //totalCorrect++其实是totalCorrect = totalCorrect + 1;一个更简洁的写法,几乎少打了一半的字母啊。

// show the user's score in an on-screen text field

displayTotal = totalCorrect; 

用人的语言描述:如果第一题选3,答对数加一,如果第二题选2,答对数加一,把答对题目数赋予另一变量

现在答对的题数是放到变量displayTotal中了,怎么显示?

在quiz end第20帧处建关键帧,键入"Thank you for taking the quiz! Your score final score is: "/2"(谢谢回答问题,你最后成绩是答对了 /2道题)

在"/2"之前那个空白的地方放上一个文本框,菜单Text>>Options显示文本面板,把Static Text下拉改为

Dynamic Text,顺便把Border/Bg的钩去掉,最后在Variable那一栏填上要显示的变量名displayTotal 

你是不是和chocobo一样不耐烦了?快下载http://www.moock.org/webdesign/lect...oockQuizzes.zip ;吧,里面的quiz.fla就是本章的内容,其他的fla的内容也将会在后面讲到  

第六章 再来补充一点AS知识 

数据分类是很有必要的,象8005154556这样的一个数字是没有多大意义的,但是如果将他归类到电话号码:800-515-4556,那就有意义了。(这是WHO的电话啊?是不是MOOCK的?呵呵)

AS里面数据的类型相对其他语言已经算少的,有:

*字符串String 由一系列的characters组成,可以包含字母,数字和符号,一般用双引号""扩住(记住不要写了全角的“”)

* 数字Number

* 布尔值Boolean 用于条件判断的时候,只有两个值true和false

* Null and Undefined 这也是数据的类型之一,Null代表变量还没有内容,Undefined是连变量都未定义

* 数组Array 用来按顺序地存放一组数据

* MovieClip 这也是数据的一种吗?你就当它是FLASH特有的一种数据吧,装的就是一个个MC INSTANCE(解释一下吧,MC从library拖到场景中就是一个的instance,一个MC可以创立多个instance),还有MC里面的其他数据

* Object 可以是FLASH已经内部定义的,或者是用户写程序时自定义的一类数据 

再分类一下

number, string, boolean, undefined, and null,这些属于简单的数据类型,特征是只有一个值

array, object, movieclip. 就可以包含不止一个值 

chocobo:其实array也应该算是object,上面这些概念的东西总是有些沉闷,没关系,留下印象,以后用到了,自然会回过来真正了解一遍的

第七章 可以重复的函数(function)

不是用几个例子来示范吗?怎么还不讲例子啊?是的,下一个例子要用到函数,所以再补充点函数知识。

(上当了吧?chocobo也上当了,开始翻译的时候没想到这篇东西这么长的,这才讲完第一个例子呢 55~)

一个函数是下面这个样子的:

function funcName () {

statements

}

在ACTION面板里面,function这个单词是变色的,FLASH认识这个单词,它代表后面的就是描述函数的内容

funcName是函数的名字,当你以后要用这函数的时候,就要敲这个名字了(是的,建函数就是为了以后反复调用它)

()小括号里面是参数,什么是参数一会再讲

{}大括号里面的就是函数所要完成功能的一句句代码。

当我们建立函数之后,函数并不运行,只在你用函数的名字调用它出来,才正式开始运行 

例如我们有这样一个函数

function sayHi () {

trace("Hi!");

当我们在FLASH某帧需要sayHi的时候,输入AS:

sayHi();

是不是和最常见的stop();还有play();一样啊?因为它们都是函数嘛 

sayHi函数真是智,来个有意义的函数吧。先在场景里放好一个名字叫ball的instance(千万记得要给instance输入名字,否则函数运行没结果别找我)

在第一帧输入这样一个函数:

function moveBall () {

  /* 怕有人不懂,解释一下,_x代表ball的横坐标,ball._x +=10 的意思是ball._x 

= ball._x + 10 ,这样省略的写法还有 -= *= /= 等等 */

ball._y += 10;

再做一个按钮,按钮的AS:

on (release) {

moveBall();

好的,运行,从AS你可以看到,每点一下按钮,执行一次函数,而函数让小球下斜下移动。(FLASH的坐标轴,原点在左上角) 

为什么要建立函数呢,就是想更有效率,现在有这个函数已经不用每移动一下写一次AS了,但还是不够,我们需要更有扩展性(flexibility)的函数

这个函数只能移动叫ball的MC,只能向固定的方向移动固定的距离,我们需要可以移动任何MC,向任何方向移动任何距离的函数,这样可以省却很多输入AS的工夫(这就叫一劳永逸,呵呵)

我们的新函数有三个地方是每次调用都不一样的

1、移动的那个MC的名字

2、水平移动的距离

3、垂直移动的距离(呵呵,用极坐标,也可以把2、3说成移动的距离,和移动的角度,不过大家都不习惯极坐标)

为了告诉函数这些变化的地方,我们需要参数(parameters),参数在定义函数的时候就要输入,我们的函数改写好了:

function moveClip (theClip, xDist, yDist) {

theClip._x += xDist;

theClip._y += yDist;

当我们要实现原来函数功能的时候,现在调用新函数就变成

moveClip (ball, 10, 10); 

定义函数的时候function moveClip (theClip, xDist, yDist) {

这里的theClip等参数(parameters)只是定义,本质上说是不存在的,因为没有内容嘛

当我们用moveClip (ball, 10, 10);调用的时候,ball就输入到theClip中去了,这里的ball称为

arguments(偶读得书少,不会翻译)

arguments可以是一个变量,也可以是一个表达式(例如"a"+"b",先得出结果再传输给函数)只要用逗号隔开各个参数就行 

函数如何结束呢

正常来说,函数运行完 {}里所有语句结束,我们也可以用一句AS:return; 让它中途结束,例如:

function say(msg) {

return; 

trace(msg);

}

这个函数被调用的时候将什么都不做就结束 

return还有更重要的用途:

function sqr {  // Squares a number 平方

return x * x;

}

a=sqr(2);  //a将会被赋予2的平方 4

return更重要的用途就是返回数据 

在AS里面,有个内建的函数Math.sqrt(就是说你敲入的时候会变色),其功能和我们刚才做的sqr函数是一样的,现在你该知道内建函数也没什么神秘的,我们一样可以做出相同功能的来。

第八章 第二个版本选择题的制作

读到这你发现什么,我是发现了,MOOCK不是在教AS,他简直是在上编程课。 

在第一个版本的制作里你发现了什么缺点?是的,输入了很多次AS,很麻烦。

我们要做的是用函数来集中我们的代码,只有集中了才好修改,越复杂的程序越是如此(想象一下在很多个MC之间查代码,真是头痛,当然是集中一块好)

这个多选题,我们就归结成两个函数吧answer和gradeUser 

代码(可以直接看源程序,在上面地址那个ZIP里面的quiz-version2.fla):

大部分的代码都被集中到第一帧了,千万不要被一大堆代码吓着了,代码这么长,只是为了让阅读者看得更清楚而已。(其实越短的代码才越可怕呢,呵呵)

// Stop the movie at the first question

stop (); 

// Initialize main timeline variables 定义变量

var displayTotal;   // Textfield for displaying user's score

var numQuestions = 2;  // Number of quiz questions

var q1answer;  // User's answer for question1

var q2answer;  // User's answer for question2

var totalCorrect = 0;  // Number of questions answered correctly 以上和例一一样

var correctAnswer1 = 3;   // The correct choice for question 1 第一题的正确答案

var correctAnswer2 = 2;   // The correct choice for question 2 第二题的正确答案 

// Function to register user's answers 这个函数的功能是提交答题者的答案

function answer (choice) {

answer.currentAnswer++; 

/*现在answer.currentAnswer是1,正在提交的是第一题,下一次answer.currentAnswer就变成2,代表提交的是第二题*/

set ("q" + answer.currentAnswer + "answer", choice); 

/*不复杂不复杂,"q" + answer.currentAnswer + "answer"第一题的时候就是q1answer,第二题是q2answer,把参数choice传过来的值放到两个变量里面而已*/

if (answer.currentAnswer == numQuestions) { 

// 判断是不是两题都答完了,是就转到问题结束帧

gotoAndStop ("quizEnd");

} else {

gotoAndStop ("q" + (answer.currentAnswer + 1));

}

// Function to tally user's score 这个函数是改题的

function gradeUser() {

/* Count how many questions user answered correctly 将两个答案和正确答案比较,对就totalCorrect加一 */

//此处用了一个for循环,大家如有疑问的,可以查AS字典,在帝国就有中文版

for (i = 1; i <= numQuestions; i++) {

/*下面用的eval有必要说一下,它的作用是将字符串和变量组成一个新的变量名,是个很方便的功能*/

if (eval("q" + i + "answer") == eval("correctAnswer" + i)) {

totalCorrect++;

}

// Show user's score in an on-screen text field 将答案显示出来,与第一个例子同

displayTotal = totalCorrect;

好了,第一帧的函数写好了,之后每个答案的选择按钮就简单了

例如第一题的选项一,就写:

on (release) {

answer(1);

第二题的写法同上(如果你的选择题有很多道,做法都是一样的,只要复制第一题,然后把题目改了就行)

最后在quizEnd帧里面调用改题的函数gradeUser(); 

分析第二个例子是代码,你会发现比第一个例子精简了很多。 

而集中在同一帧的代码,将:

* 更容易修改

* 更容易升级

* 更少的出错机会

* 更容易查错

* 更精简(更少的字节数)

第九章 数组(arrays)

在下一个新版本的多选题里,我们将使用什么AS的特性,来让它更好呢?那就是数组。

数组就是一系列的数据(MOOCK又开始上课了,chocobo的英文和计算机都不算好,为免误人子弟,概念性的东西尽量精简)

例如这样两个变量储存的数据:

fruit1 = "oranges";

fruit2 = "apples"; 

它们是互相的,使用起来很不方便,我们需要的是数组,以下是数组的定义方法,用“&#;”框住,用“,”分隔开每个元素:

fruitList = ["oranges", "apples"]; 

现在两个数据是放到同一个数组里面了,我们开始详细解说数组

数组里面每一个数据称为元素(element)。

而每一个元素都有个数字代表所处的位置,数字叫索引(index),注意! 第一个数据的索引是0,第二个才是1

要按索引来提出数据,我们要用一个运算符&#;,例如使用fruitList第一个元素赋值给a:

a=fruitList�;

又例如将a的值赋给fruitList第一个元素:

fruitList�=a; 

当然&#;里面也可以放表达式、变量:

var index = 3;

// Set numApples to 2

var a = fruitList[index]; 

下面是个使用表达式的例子:

// Create a myFrames array. Note the legal formatting. 建立一个记录LABEL的数组

var myFrames = ["storyEnding1

"storyEnding2

"storyEnding3

"storyEnding4"]; 

// Set randomFrame to a randomly picked element of myFrames

// by calculating a random number between 0 and 3

// 随机从数组中提取一个LABEL

var randomFrame = myFrames[Math.floor(Math.random() * 4)]; 

// Now go to the random frame

// 然后跳到该LABEL播放

gotoAndStop(randomFrame); 

而数组包含数据的个数称为长度(length),例如fruitList.length 就等于2 

对数组最常用的处理就是从数组中选出有用的数据了,来看一个运用循环的例子:

// Create an array 建立数组,里面放了一些歌的类型

var soundtracks = ["electronic", 

"hip hop

"pop

"alternative

"classical"]; 

// Check each element to see if it contains "hip hop"

// 一个循环,检查每一个元素是否等于"hip hop"这个类型

// 另外,请留意此处MOOCK对FOR的写法,J=0之前有一个VAR,这好象可有可无,其实是一个好习惯!

for (var j = 0; j < soundtracks.length; j++) {

trace("now examining element: " + j);

if (soundtracks[j] == "hip hop") {

trace("the location of 'hip hop' is index: " + j);

break; 

// 跳出循环,找到了就不用再找了

}

关于数组的方法(method)

方法就是从属于某一对象(object)的函数,通常都是对该对象进行处理的函数

好象太抽象了?我们还没讲到什么是对象,其实数组是对象的一种,我们就暂且将数组的方法理解为一个专门处理数组内数据的结构和内容的工具吧

例如一个叫push()的方法就是一个工具,用于为数组添加一个元素,并且加在该数组的最后使用起来并不复杂,看例子就知:

// Create an array with 2 elements

var menuItems = ["home", "quit"]; 

// Add an element 加一个元素

// menuItems becomes ["home", "quit", "products"]

// 现在数组的结构变成["home", "quit", "products"]

menuItems.push("products"); 

// Add two more elements 这次是加两个

// menuItems becomes ["home", "quit", "products", "services", "contact"]

menuItems.push("services", "contact"); 

跟push()相反从最后弹出一个元素的方法是pop()

而跟push()类似,但是是将一个元素加到数组的开头的方法是unshift(),与之相反的是shift()

方法sort和reverse,用于重新排列数组的元素

方法splice用于从数组中间删除某元素

方法slice和concat可以在某些数组的基础上生成另一个新的数组

方法toString和join可以将整个数组变成单一个字符串 

以上方法都可以从AS字典里面查到  

第十章 第三个版本的选择题 

首先,此版本沿用了上一版本的函数answer和gradeUser

在这一版本中,用户的答案与正确答案将使用数组来存放 

看看我们的新代码:

stop();

// *** Init main timeline variables 

var displayTotal; 

// Text field for displaying user's final score

var numQuestions = 2; 

// Number of questions in the quiz

var totalCorrect = 0; 

// Number of correct answers

/*上一版本中,用户答案使用了两个变量来存放,但是试想如果是10题、100题呢?使用数组将更容易管理,也更容易处理*/

var userAnswers = new Array();

 // Array containing user's guesses 这是定义数组的语句,但是还未输入数据

var correctAnswers = [3, 2];

 // Array containing each correct answer 这一句既定义数组,同时输入数据,因为正确答案是已知的 

// *** Function to register the user's answers

function answer (choice) {

// Tack the user's answer onto our array 将数据PUSH进数组,因为是顺序答题,所以用方法PUSH

userAnswers.push(choice);

// Do a little navigation, baby

// 如果答案数超过题目总数,自然就跳到quizEnd帧了

// 注意在本例中,已经不用上例的answer.currentAnswer而是使用userAnswers.length来控制问题是否结束

/* 我们甚至可以用correctAnswers.length来代替numQuestions,记录正确答案数组的长度,不就是题目总数吗?*/

if (userAnswers.length == numQuestions) {

   gotoAndStop ("quizEnd");

} else {

gotoAndStop ("q"+ (userAnswers.length + 1));

}

// *** Function to tally the user's score

function gradeUser() {

// Count how many questions were answered correctly.

//开始改题,这里就不用再用上个版本的eval啦,那个东东实在是难懂兼难用,这个版本相对就很清晰明快

for (var j = 0; j < userAnswers.length; j++) {

if (userAnswers[j] == correctAnswers[j]) {

totalCorrect++;

}

}

// Show the user's score in a dynamic text field

displayTotal = totalCorrect;

电影的其他部分不用改动(这就是使用FUNTION的好处啦,升级多快~) 

OK,进入下一章之前想想目前版本的点

* 题目,每次修改题目都要进入FLASH的场景修改,麻烦

* 按钮,每题就要做三个按钮

这都是麻烦的地方,我们要更精益求精地修改,让我们的多选题,轻易地从两题变成10题、100题

接下来我们要做的是

* 进一步改进我们存放数据的结构

* 让我们可以动态地生成每一道题目,只需输入数据,而不需要在FLASH里面作就可以自动生成 

所以——我们需要面向对象编程!(object oriented programming) 

chocobo:嘻嘻,众菜鸟是不是都倒了,AS基础教程竟然开始讲OOP了,呵呵,没关系啊,上面的教程一直都这么浅,以后也深不了

第十一章 一点面向对象编程知识 

At is heart, OOP simply means that you treat portions of your program as self-contained, but interrelating modules called objects. 

这是什么呀?我不翻译了,概念的我们就先不懂吧,对象主要构成包括属性(properties)和方法(methods)

一个对象通常都以现实世界里的某个东东做蓝本

例如我们可以定义一个对象叫球

那么这个球将会有这样的属性:半径、X坐标、Y坐标、颜色

同时,也会用属于球自己的方法例如:移动球、计算球的面积 

当然,我们还可以定义一些相对抽象的对象,例如我们要做的多选题 

所有的对象都属于某类(class),类的意思其实是用于创建对象的模版 

一个实例(instance)就是某一个类的特定某一个case(好复杂,概念性的东西我翻不过来啦,反正实例就类创建出来的某一个对象) 

还是再举例吧

* 例如我们有个一个叫Chair的类

* 这个类定义了一个东西需要它有四条腿,一个坐垫

* 然后我们就可以用Chair这个类来定义我们的不同对象(可理解为椅子的款式),每个对象就有它特有的高、宽、材料、重量、颜色,正是这些属性使每个对象互相区别。 

所有的椅子互相区别,有自己的属性,但是他们又有同样的结构:四条腿、一个坐垫 

OK,那AS里面的类和对象呢?

是的,AS里我们可以自己创建对象,也有可以使用的内建对象

内建的类(你可以用它来创建对象)包括:Array, Boolean, Color, Date, MovieClip, Number, Object, Sound, String, XML, XMLSocket 

内建的对象(已经可以直接使用的对象)包括:Arguments, Key, Math, Mouse, Selection 

内建的类、对象当然都是在FLASH里面有自己功能的东西。而正是这些功能非常常用,FLASH才内建了这些类和对象,例如:

Mouse.hide(); /*Hide the mouse pointer 将鼠标隐藏,你经常用吧?现在才知道其实是内建的Mouse对象的一个hide()方法吧?*/

在学习如何创建自己的类和对象之前,先来了解一下内建类和对象是怎样工作的吧 

与数组的结构类似,对象是容器们(containers)的容器(container)

一个对象,用各个的属性来存放数据,只不过数组区分每个容器是用数字,而对象则是用属性名,要调用一个数组里面某个数据,我们需要它是索引值,而要调用对象的属性,则要知道属性名

看看以下这个例子,这是个叫BALL的对象“

BALL对象有两个属性:radius 和 color

而两个属性分别赋值为:50 和 0xFF0000 (这是AS里面表达16进制的方法) 

概念清楚了,说一AS里面使用对象要注意的地方

首先,对象的属性很灵活,它储存的数据可以是strings(字符串), numbers(数字), booleans(布尔值), null(空), undefined(未定义), functions(函数), arrays(数组), movie clips(电影夹子), or even other objects(甚至是其他的对象,包括自定义的). 

调用属性,可用点语法:objectName.propertyName

例如我们赋值给BALL里面的属性radius:

ball.radius = 100; 

我们也可以用符号&#;来访问属性,但是&#;里面的属性名需用双引号扩住,同上例:

ball["radius"] = 100; (所以说数组也是对象一种,访问方法也一样,并没有搞特殊化)

与点语法比较,&#;更灵活,可以动态地改变属性的名字,里面可以是变量或表达式,例如:

var propName = "radius";

ball[propName] = 100; 

这点是点语法无法办到的 

纯粹的OOP中,我们几乎不会直接访问对象的属性

我们一般都使用方法(methods) ,来改变属性

例如改变mySound这个声音对象的音量属性

AS的用法应该是mySound.getVolume(100);

而不是mySound.volume=100;

但是为了简单,多选题这个例子里不一定遵循这个原则,事实上AS里面很多对象都不可以办到这点,所以有人说AS不是面向对象语言。 

关于对象的方法

方法method其实是一些附属于对象的函数,其作用主要是访问对象中的数据,或完成某种功能

所以调用方法和调用普通函数类似:objectName.methodName() 只是前面加上了对象的名字

例如上面的BALL对象,我们需要它的面积,使用 getArea 这个方法:

ball.getArea(); 

预习一下,在下一个例子中,虽然MOOCK不打算建立自己的方法,但是将使用内建于MovieClip对象的两个方法:

*MovieClip.attachMovie()

此方法是将Library(CTRL+L按出来的那个)里面的symbol复制一个instance到场景中

[chocobo:给不懂概念的人紧急补习,放在库(Library)里面的叫符号(symbol),拉到场景中就叫实例(instance),一个符号可创建多个实例,符号改变则实例随之改变]

与之类似的是MovieClip.duplicateMovieClip(),但是该方法需要事先在场景里已经有一个实例 

*MovieClip.removeMovieClip()

此方法与上面相反,是删除场景里面的instance的 

大家看到了,在下一例中,我们将使用MovieClip这个内建对象,因为它就可以满足我们的需要,不必新类型的对象了

我们先来熟悉一下MC这种对象 

它有很多属性_height(高度)、 _alpha (透明度),MC的属性大家可以在AS字典里面查到,在AS面板里这写属性也是变色显示的

同时MC的方法,例如 MC.play(); 等也可以查到

当我们在MC里面的时间线使用这些属性、方法的时候,可以省略不写前面部分,直接写play(); 

MC可以互相嵌套,MC当中又有MC,就出现类似: mc1.mc2.play(); 的情况

为了调用包含自己的上一级MC的方法、属性,AS里面用_parent,例如:

在mc1包含mc2 ,在mc2中想使mc1播放:_parent.play(); 

还有另一个保留字:_root指代该电影的主时间线

例如想在某个mc里面让整个电影播放:_root.play(); 

想在某个MC中让另一mc1播放:_root.mc1.play(); 

还有,MC中定义的变量,将作为MC的一个属性可被访问

在mc1里面写了一句 var a=1;

我们将可使用 mc1.var来调用它 

关于类(class)

这个概念大家还是不大懂吧?类就是定义一个对象将拥有什么的方法跟属性的东东,类似MC里instance与symbol的关系,instance的结构就是由symbol决定的,每个instance又可以不一样

AS里面没有专门定义类的例如class这样的关键字,我们使用函数来定义类,这种函数称构造函数

constructor function,函数的作用就是产生我们定义好的类的实例(就是对象)

举例最实在:

// make a Ball constructor 最简单的构造函数

function Ball () {

// do nothing 里面是空的

现在我们可以定义新类型Ball的对象了

myBall = new Ball(); 

语法就是前面是新对象实例名,等号后是new加构造函数名

myBall就拥有了Ball定义的一切结构了(虽然Ball里面是空的,嘻嘻) 

不过不是所有对象创建都用new,例如mc创建就用的是attachMovie()或duplicateMovieClip() 

好了,我们的构造函数总不能空的,如何定义类,让新对象有自己的属性呢?

使用this这个关键字,看例子,新的构造函数:

function Ball () {

this.radius = 10;

this.color = 0xFF0000;

this.xPosition = 35;

this.yPosition = -4;

以后我们定义出来的新对象,都拥有半径,颜色、XY坐标属性啦

慢着,怎么每个新对象都一模一样啊?

再改,用函数的参数来定义动态的属性:

// Make the Ball constructor accept

// property values as arguments.

function Ball (radius, color, xPosition, yPosition) {

this.radius = radius;

this.color = color;

this.xPosition = xPosition;

this.yPosition = yPosition;

我们可以定义不同属性的对象了

myBall = new Ball(6, 0x00FF00, 145, 200); 

本教程关于还有创建方法以及如何在类之间继承方法和属性没讲,无论如何,OOP都不可能在这么短时间之内说清楚,但这不妨碍我们做下一个例子了。  

第十二章 第四个版本的选择题 

第三个版本的时候我们已经设想好,新版本中题目将是动态生成的,不用我们在FLASH的场景里面一题一题输入了,我们要做的只是输入题目和题目答案的数据就够了。

很明显,每一条题目都将是一个对象(不然我们学这么多对象的知识干嘛?),而这些所有的题目,会用一个数组来存放 

再重提一下,可配合源程序学习 http://www.moock.org/webdesign/lect...oockQuizzes.zip ;

好,开始设计题目的模版

模版就是一个MC,包含两个TEXT FIELD,里面不用填东西,分别起变量名为:(FOR小鸟:TEXT FIELD就是按工具条里T按钮拉出来的文本框,同时还要在文本面板(ctrl+t)里将其改为Dynamic Text,变量名则在面板的Variable处改)

* qNum (以后将显示题目的编号)

* qText (以后将显示题目的正文)

我们还要在库里面做标识,点一库面板(ctrl+l)右上的Options>> Linkage ,选第二个Expert this 

symbol,identifier填上questionTemplate,至此,题目模版完成 

 再制作选项的模版

选项模版应包括一个选择用的按钮

还有该选项的内容,一个起名为answerText的TEXT FIELD

在本例的后面,将为每一个动态生成的选项一个唯一的名字,譬如: "answer0", "answer1",..."answern". 

答题者所选定的答案将由这个名字来决定,调用一个MC的名字,用的是_name这个属性

所以答题的按钮上面的AS为:

on (release) {

// Trim the prefix "answer" off this clip's name

/* 下面使用了String.slice()方法,例如_name为answer0,它将被处理成0,slice的具体语法请查阅AS字典*/

// 按钮提交什么由该MC的名字决定的,我作个标记 @@ ,记得一会看回来

choice = _name.slice(6, _name.length);

/* 与前面的例子一样,最后将答案提交给answer函数处理,不过现在我们是在某一MC里面用外面主时间线的函数了,所以得加上_root*/

_root.answer(choice);

最后,Options>> Linkage,标识名:answerTemplate,制作模版的工作就完成了 

下面将是放在第一帧的程序主体,可要打起精神来了: 

// Stop the movie

stop();

// Init main timeline variables

var displayTotal;      

 // Text field for user's final score

var totalCorrect = 0;    

  // Number of questions answered correctly 

// Array containing the user's guesses 记录作答答案的数组

var userAnswers = new Array(); 

// Number of the question the user is on 记录正在作答中题目的编号

/* 要注意的是,它是由0开始的,第一题的编号是0,因为我们要用到数组,数组的第一个编号是0,所以这里我们也用0 */

var currentQuestion = 0; 

// The Question constructor 

// 以下是新类型对象question的构造函数,包含三个属性:正确答案,题目正文,各个选项

function Question (correctAnswer, questionText, answers) {

this.correctAnswer = correctAnswer;

this.questionText = questionText;

this.answers = answers;

// Import the source file containing our array of question objects 

/* 咦?应该是输入各条题目的数据先啊,放哪去了?因为嘛,数据输入是个与编程无关的过程,为了让

代码更优雅,这些繁琐的东西扔别地方去了,AS太长,会使查阅相当麻烦,分开存放也是好习惯!*/

/* #include是引用外部AS命令,可以将AS分开储存于各个后缀名为AS的文件中,输入题目的代码就是放到了questionsArray.as中(记得和FLA放在同一目录下喔)*/

#include "questionsArray.as" 

/* 我改变了一下教程的结构,把questionsArray.as的内容也插入进来了,因为跳过这段的话,看起来会有疑问*/

// 以下内容系存放questionsArray.as中的 

// 输入数据其实是建立对象

// MOOCK用一个数组还存放这些对象,这样对象才更易于管理

// 不要被括号给弄昏了,输入对象参数的中间还有中括号,是因为输入题目的参数“各个选项”是一个数组

// 因为是存放于数组中,每个对象之间记得应有逗号分隔

// Remember to place a comma after each object

    // in the array except the last 

questionsArray = [

new Question (2,"Which version of Flash first introduced movie clips?

["version 1", "version 2", "version 3

new Question (2,"When was Action formally declared a ing language?

["version 3", "version 4", "version 5"]), 

new Question (1,"Are regular expressions supported by Flash 5 Action?

["yes", "no"]), 

new Question (0,"Which sound format offers the best compression?

["mp3

new Question (1,"True or False: The post-increment operator (++) returns the

value of its operand + 1.

["true", "false"]), 

new Question (3,"Action is based on...

["Java", "Java", "C++", "ECMA-262", "Perl"])

]; 

// 离开questionsArray.as部分,我们继续 

/* Begin the quiz 出题目!调用makeQuestion函数来完成,我们只需要给这个函数一个参数:题目的编号,函数就会按编号提取数据,结合我们刚才做的模版生成题目。*/

makeQuestion(currentQuestion); 

// Function to render each question to the screen

// 下面就是makeQuestion函数

function makeQuestion (currentQuestion) { 

// Clear the Stage of the last question

/*这句是清理上一题生成的MC,这句从第二题开始生效,questionClip就是题目的MC名,MC从哪来的?看下面就知道了*/

questionClip.removeMovieClip(); 

// Create and place the main question clip

// 利用模版questionTemplate生成一个叫questionClip的MC,这个MC就是我们的问题

attachMovie("questionTemplate", "questionClip", 0);

// 设定MC的位置

questionClip._x = 277;

questionClip._y = 205; 

// 把题目编号输入MC的qNum文本框中

questionClip.qNum = currentQuestion + 1; 

/*questionsArray[currentQuestion]就是数组questionsArray里的第currentQuestion个对象,例如currentQuestion是0,那么就是我们的第一条题目*/

// questionsArray�.questionText就是第一条题目对象的问题属性

// 然后问题输入MC的qText文本框中

questionClip.qText = questionsArray[currentQuestion].questionText; 

// Create the individual answer clips in the question clip

// 以下循环将结合选项模版生成这一条题目的各个选项的MC 

/* questionsArray[currentQuestion].answers记得吗?选项这个属性可是个数组,所以我们把它的长度作为循环的次数,这个数组有多大,我们就生成多少个选项 */

for (var j = 0; j < questionsArray[currentQuestion].answers.length; j++) {

// Attach our linked answerTemplate clip from the Library.

// It contains a generalized button and a text field for the question.

/* 用answerTemplate做模版生成MC,MC名为"answer" + j ,即第一个选项MC名为answer0,第二个为answer1,选项的名字可是关系到按钮选什么的,如果你忘了,看看上面有 @@ 标记的地方 */

// 同时它们的深度为j,每次不同 

// 但和上面不同的是,我们要把选项MC生成到题目MC里,这样我们清除题目MC的同时也清除了选项

// 所以写成questionClip.attachMovie

questionClip.attachMovie("answerTemplate", "answer" + j, j); 

// Place this answer clip in line below the question.

// 设定MC的位置,第一个高度为70,之后顺序加15

questionClip["answer" + j]._y += 70 + (j * 15);

questionClip["answer" + j]._x -= 100; 

// Set the text field in the answer clip to the appropriate

// element of this question's answer array.

/* 下面语句的:questionClip["answer" + j]可不是指数组,j=0的时候,它代表questionClip.answer0,具体解释可见上一章。*/

/* 这句语句的作用是把questionsArray[currentQuestion]这个对象数组里面的answers[j]数组,输入到对应的选项MC的answerText文本框中,就是该选项的内容 */

questionClip["answer" + j].answerText = questionsArray[currentQuestion].answers[j];

//生成选项的循环结束 

// Function to register the user's answers

// 以下是记录答题者答案的函数,记录在数组userAnswers中,和上一例同

// 每一个选项如果被选都会调用此函数,并用参数choice传来作答的答案

function answer (choice) {

userAnswers.push(choice); 

// 判断是否题目全部完成,是的话清楚掉题目MC,并跳转到quizEnd帧

if (currentQuestion + 1 == questionsArray.length) {

questionClip.removeMovieClip();

gotoAndStop ("quizEnd");

} else {

// 在这里改变题目的编号,然后调用makeQuestion函数再次生成新的题目

currentQuestion++;

makeQuestion(currentQuestion);

   }

// Function to tally the user's score

// 改题的函数

function gradeUser() {

// Count how many questions the user answered correctly

for (var j = 0; j < questionsArray.length; j++) {

// 将答题数组userAnswers[j]与问题数组questionsArray[j]的属性correctAnswer逐个比较

if (userAnswers[j] == questionsArray[j].correctAnswer) {

totalCorrect++;

}

}

// Show the user's score in an onscreen text field

// 显示答对与题目数比

displayTotal = totalCorrect + "/" + questionsArray.length;

好了,我们来总结一下这个例子吧

我们已经完成了第三个版本结束时候定下来目标,更快捷的建设,更便易的扩展

我们的题目跟选项都是动态生成的,也就是说生成10、100题或更多题目也只需要修改questionsArray.as这个文件就可以了

如果说生成两题这个例子用时要长于上面的例子,那么生成100题,你会发现用这个例子将是最快的。还有,在100题里面修改其中一题,也是最快的。 

看完了例子,希望大家不是只明白了代码的含义,最重要是理解运用对象来编程的方法

同样的例子,其实还可以用其他的对象结构来完成的

更有效地组织数据也是编程艺术的一部分 

为了更进一步改进我们的例子,最后一个,就是第五个版本,将用XML代替那个存放对象的数组(也就是在questionsArray.as里那个),它实在太难懂了,是不是啊?呵呵

XML,名字是不是很COOL啊,其实,FLASH里面用XML不难(其他地方的应用就……所以千万别说XML不难,是FLASH里面用不难),呵呵,好吧,开始吧。  

第十三章 XML 

XML是一种标记语言,通常用于储存,组织和传输数据 

XML文档主要由一系列的元素(elements)和属性(attributes)组成,看下面一个XML的例子: 

Colin Moock

O'Reilly

这个例子就是由元素 BOOK, TITLE, AUTHOR, PUBLISHER 组成的 

在元素里就包含了一个属性:SALUTATION 

这些元素怎么让浏览器解释是什么意思呢?它需要DTD,一套决定这些标记的意义的规则。(例如我们常听说的WML、SVG,它们都是XML,但对应不同的DTD) 

XML与HTML想比要求格式更严格,格式要求:

* tags 一定要嵌套 (就是说有就一定要有)

* 一定要有一个根元素 (例如例子中的 BOOK)

* 开始部分要用XML声明标记 : 

但是AS里面的XML不需要DTD(这就是我说FLASH里面用XML不难的原因,哈哈) 

从我们面向对象的角度来看,我们XML的内容可以当做为对象,下图就是我们建立XML对象的层次结构 

FLASH已经内建有XML类让我们可以定义自己的XML对象,同时XML对象还有很多方法。 

我们还是更进一步用例子分析吧,如果我们建立了如上图的XML对象,那么FLASH首先会自动建立一个元素

document.下面才是我们自己的元素。 

本来是第一个元素的BOOK成为了document.第一个节点(node),不过我们把它继续当我们XML数据的根也无妨 

当一个节点包含于另一个节点时,这个节点称为另一节点的子节点(child),反之另一节点称为其的父节点(parent) 

例子中BOOK就是document.child,document.是BOOK的parent 

再看图,BOOK有7个子节点,是不是和你想象不同?多了四个节点#text,因为FLASH把标记之间的空格和回车也读成一个节点了。 

几个子节点的关系成为兄弟(siblings),如果要找AUTHOR的下一个兄弟(next sibling),FLASH就会给你找来#text 

这可不是我们想要的,解决的方法

* 直接在XML里面把空格回车都删除掉,就是说一个TAG紧挨着一个

* 用AS把无用的子节点删除

* 在FLASH读入XML源数据之前,将该XML对象的一个属性ignoreWhite设置为true,但是该属性只在R41版本的PLAYER生效(注:网上可以更新的版本为R41,但是随FLASH附带的FLASHPLAYER的版本是R30) 

再回到我们的例图,三个子节点下面还有子节点,最尾的节点也可以叫叶节点。 

但是图里面还有个东西我们没找到,就是AUTHOR的属性SALUTATION,属性不是该节点的子节点,要访问我们属性,要用XML.attributes 

概念先说这么多,现在看看我们怎么把XML源程序输入进FLASH 

首先定义一个新的XML对象了:

mydocument.nbsp= new XML(); 

这个对象是空的,我们通过appendChild, par***ML, 和 load 三种方法来输入数据

当然我们也可以在定义的时候就输入数据:

mydocument.nbsp= new XML('

hello world!

'); 

这时候我们的mydocument.有了一个叫P的子节点,P的叶节点是hello world!

之后我们就可以访问这个XML对象了,firstChild这个XML属性指向第一个子节点,childNodes是XML对象的子对象,指向所有的子节点

mydocument.firstChild  // Accesses P

mydocument.childNodes�    // Also accesses P 两个AS语句指向的都是节点P

要访问叶节点的内容需要属性nodevalue

我们要显示P节点的子节点的内容,就要写成:trace(mydocument.firstChild.firstChild.nodevalue); 

要给它赋值:

mydocument.firstChild.firstChild.nodevalue = "goodbye cruel world"; 

要删除P节点,用方法removeNode:

mydocument.firstChild.removeNode(); 

新建一个节点叫P,用方法createElement创建元素:

newElement = mydocument.createElement("P"); 

再将该元素加进去作为一个节点,用方法appendChild:

mydocument.appendChild(newElement); 

做一个叶节点方法类似:

newText = mydocument.createTextNode("XML is fun"); 

mydocument.firstChild.appendChild(newText); 

更详尽的方法还是查阅AS字典吧.

第十四章 最后一个版本选择题 

上一个版本面向对象的代码对我们这个基于XML的版本很有帮助,上一个版本我们是用对象的数组来存我们的数据,这个版本里面,我们使用外部的XML文件

下面先看看XML文件的结构:

version 1

version 2

version 3

version 4

version 5

version 6

version 3

version 4

version 5

yes

no

mp3

aiff

wav

true

false

java

java

c++

ecma-262

perl

这个XML里面,QUIZ是我们的根元素

每一题都放在QUESTION元素内,题目正文为其属性TEXT,正确答案为其属性ANSWER(ANSWER=1代表选第二个答案)

每一题的选项则是QUESTION的子节点CHOICE

其实根本就不用解释,大家直接看都能看懂

使用了外部XML之后,我们升级题目只需改动XML文件即可,而上一个版本,修改外部AS文件之后还是需要

EXPORT一次。 

这个版本里面,将保留上个版本大部分的代码,除了输入题目数据的部分,将用XML来代替。

 以下代码写到questionsArray.as中覆盖其原来内容

首先仍然定义一个数组来存放数据

var questionsArray = new Array(); 

然后我们定义一个XML对象来存放XML数据

var quizDoc = new XML(); 

之后是建立将XML解释为我们存放题目的对象格式的函数buildQuestionsArray(),同时将它连接到新建的XML对象的onLoad函数,让XML下载完成之后执行这个函数

quizDoc.onLoad = buildQuestionsArray

然后是执行下载XML的AS

quizDoc.load("quiz.xml"); 

最后我们详细解说一下解释XML的函数

// *** builds an array of question objects based on the dom tree in quizDoc

function buildQuestionsArray () {

// first, strip unwanted whitespace nodes from the tree.

// 除去无用的节点,上一章已经有介绍无用节点是如何出现的

stripWhitespaceDoublePass(quizDoc); 

// now assign a convenient reference to the root QUIZ node

// XML文件的根节点QUIZ节点就是 quizDoc.childNodes ,这里将其指名为quizNode,以便运用

var quizNode = quizDoc.childNodes 

// for each question node that is a child of the QUIZ node...

// 下面的循环将逐个提取QUIZ节点的子节点,即每条题目

for(var k = 0; k < quizNode.childNodes.length; k++) {

// make an array of the text nodes from each CHOICE node

// 为每条题目建立一个选项数组

var choicesArray = new Array();

// 下面的循环则是将题目的子节点,即各选项的nodevalue输入到choicesArray数组中

for(var j = 0; j < quizNode.childNodes[k].childNodes.length; j++) {

choicesArray[j] = quizNode.childNodes[k].childNodes[j].firstChild.nodevalue;

// construct a question object for each QUESTION node,

// and store it in questionsArray

/*用题目正文、选项数组、正确答案(正确答案目前还是字符串,所以用Number函数将之转为数字)作为参数,建立Question对象(定义Question对象的代码已经在上个例子中解释了)*/

// 将新建的Question对象作为questionsArray数组的一个元素

questionsArray[k] = new Question (

Number(quizNode.childNodes[k].attributes.answer),

quizNode.childNodes[k].attributes.text,

choicesArray);

// done loading and processing the quiz questions

loadMsg = ""; 

// begin the quiz

// 调用函数makeQuestion,之后的进度就同上一个例子了

makeQuestion(currentQuestion);

// *** Strips whitespace nodes from an XML document. 

// *** by passing twice through each level in the tree

/* 下面函数用于除去无用的空白节点,参数是需要处理的XML的根元素(我们已经将其指名为XMLnode了)*/

function stripWhitespaceDoublePass(XMLnode) {

// Loop through all the children of XMLnode

// 循环依次将根元素的子元素提取出来

for (var k = 0; k < XMLnode.childNodes.length; k++) {

// If the current node is a text node...

// 如果该节点是一个文本节点,就开始以下检查 ...

if(XMLnode.childNodes[k].nodeType == 3) { 

// ...check for any useful characters in the node.

var j = 0;

var emptyNode = true;

for(j = 0;j < XMLnode.childNodes[k].nodevalue.length; j++) {

// A useful character is anything over 32 (space, tab, 

// new line, etc are all below).

/* 因为空格、TAB或换行等空白无意义字符的ASCII码都小于32,检查若大于32,即为有数据的节点,同时用break;跳出检查的循环*/

if(XMLnode.childNodes[k].nodevalue.charCodeAt(j) > 32) {

emptyNode = false;

break;

}

// If no useful charaters were found, delete the node.

// 若该节点没有数据,就是解释时的错误,将其删除

if(emptyNode) {

XMLnode.childNodes[k].removeNode();

}

}

// Now that all the whitespace nodes have been removed from XMLnode,

// call stripWhitespaceDoublePass on its remaining children.

/* 但是还没完,我们只检查了所有子节点,而没有检查子节点的子节点,所以以下的循环将所有子节点也送到本函数再继续检查 */

/* 这种函数自己调用自己的方法,称为递归,它将一直检查子节点的子节点的子节点的……一直到该节点没有子节点为止 */

for(var k = 0; k < XMLnode.childNodes.length; k++) {

stripWhitespaceDoublePass(XMLnode.childNodes[k]);

}

现在,我们可以把SWF和XML组成的题目交给一个不会编FLASH的老师了,他只要就会用记事本修改XML文件就行了。  下载本文

显示全文
专题