Flash AS 入门到精通教程.docx
- 文档编号:8463102
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:125
- 大小:338.25KB
Flash AS 入门到精通教程.docx
《Flash AS 入门到精通教程.docx》由会员分享,可在线阅读,更多相关《Flash AS 入门到精通教程.docx(125页珍藏版)》请在冰豆网上搜索。
FlashAS入门到精通教程
FlashAS入门到精通教程
-
2006-11-0613:
09:
50发表评论
用Flash制作动画,光凭时间轴和图层来演绎画面,即使动画再精彩,也只能让观赏者盯着屏幕,沿着时间线的进度被动的欣赏。
如果要想动画具有交互性,根据观赏者的选择来控制播放的顺序或者呈现不同的内容就非得依靠Flash的动作脚本语言了。
动作脚本英文为ActionScript,简称AS
运用Flash动作脚本语言,能实现时间轴无能为力的一些特殊效果;运用基本技法与动作脚本语言相结合制做出来的动画效果,往往更加精彩纷呈;运用动作脚本语言,还可以让一些复杂繁琐的制作过程得到有效的简化。
要学好Flash动画,学习和掌握动作脚本语句是非常重要的。
然而,一提起编程语言,难免让人联想到一行行枯燥乏味的代码,一段段高深莫测的理论,往往使初学者在“AS”那神秘殿堂的大门前望而却步。
事实上,Flash动作脚本语言并非想象的那么难以接近,这个教程,将针对没有接触过任何程序语言的初学者,不安排专门的章节集中罗列枯燥的理论和代码规范,采取从最常用的简单语句入手,用具有实用性和趣味性的实例来解读语句,在每一讲中点点融会理论和代码规范,逐步掌握更复杂功能的方式,带领初学者“轻松入门、拾级进阶、攀援而上”。
说明:
这个教程是按照Flash2004内嵌as2.0版本的语法规范要求写作,其中所用到的语句力求符合面向对象编程的语法格式。
在教程中不特意讲解每个实例的制作步骤,重点介绍语句的运用。
特别说明:
教程中所涉及的源文件,只能使用Flash2004打开。
第一部分:
入门基础
FlashAS入门-认识“动作”面板
FlashAS入门-为“关键帧”添加动作
FlashAS入门-为“按钮”添加鼠标事件
FlashAS入门-为“影片剪辑”添加鼠标事件
FlashAS入门-“影片剪辑”属性调整及路径解析
FlashAS入门-条件判断语句“if、else”
FlashAS入门-duplicateMovieClip和removeMovieClip
FlashAS入门-“for”循环语句
FlashAS入门-鼠标跟随
FlashAS入门-onClipEvent()事件处理函数
第二部分:
进阶部分
FlashAS实例进阶-循环按钮
FlashAS实例进阶-声音控制
FlashAS实例进阶-打字效果
FlashAS实例进阶-导航条
FlashAS实例进阶-图片滚动效果
FlashAS实例进阶-制作时钟
FlashAS实例进阶-遮罩效果实例讲解
FlashAS实例进阶-图片闪白切换
FlashAS实例进阶-键值捕获
FlashAS实例进阶-FLASH载入等待Loading
第三部分:
掌握AS
FlashAS入门-自定义函数
FlashAS入门教程-事件处理函数及画线语句
FlashAS入门教程-圆和椭圆函数的应用
FlashAS入门教程-碰撞检测hitTest函数
FlashAS入门教程-乱数排列(随机数)方法
FlashAS入门教程-setInterval函数应用举例
FlashAS入门教程-三个实例讲解
FlashAS入门教程-多维数组和双重循环
FlashAS入门教程-loadMovie应用举例多画面与画中画
FlashAS入门教程-调入外部文本和加载外部mp3文件
FlashAS入门-认识“动作”面板
-
2006-10-2403:
32:
09发表评论
这篇教程为“FlashAS入门教程”的一部分。
查看全套教程>>>>。
这一部分,我们将用具体的实例向大家介绍制作Flash动画最常用的一些语句,每一讲尽量用相对单一的语句来实现特别的效果,在学习运用语句的过程中,同步向大家分散介绍语法概念、格式规范以及动作面板上常用工具的功能和使用方法,力求做到理论与实际运用相统一,感性认识与理性认识相结合,在轻松的学习中掌握好AS基础知识,为下一步的“拾级进阶”、“攀援而上”打好基础。
轻松入门——1.1认识“动作”面板
这部分不在课堂上细讲,请学员自己先了解。
在Flash中,动作脚本的编写,都是在“动作”面板的编辑环境中进行,熟悉“动作”面板是十分必要的。
按【F9】键调出“动作”面板,可以看到“动作”面板的编辑环境由左右两部分组成。
左侧部分又分为上下两个窗口。
如图1-1所示。
左侧的上方是一个“动作”工具箱,单击前面的图标展开每一个条目,可以显示出对应条目下的动作脚本语句元素,双击选中的语句即可将其添加到编辑窗口。
下方是一个“脚本”导航器。
里面列出了FLA文件中具有关联动作脚本的帧位置和对象;单击脚本导航器中的某一项目,与该项目相关联的脚本则会出现在“脚本”窗口中,并且场景上的播放头也将移到时间轴上的对应位置上。
双击脚本导航器中的某一项,则该脚本会被固定。
右侧部分是“脚本”编辑窗口,这是添加代码的区域。
可以直接在“脚本”窗口中编辑动作、输入动作参数或删除动作。
也可以双击“动作”工具箱中的某一项或“脚本编辑”窗口上方的【添加脚本】工具,向“脚本”窗口添加动作。
图1-1动作面板界面
在“脚本”编辑窗口的上面,有一排工具图标,在编辑脚本的时候,可以方便适时的使用它们的功能。
如图1-2。
图1-2动作面板工具栏
在使用“动作”面板的时候,可以随时点击“脚本”编辑窗口左侧的箭头按钮,以隐藏或展开左边的窗口。
将左面的窗口隐藏可以使“动作”面板更加简洁,方便脚本的编辑。
如图1-3。
图1-3隐藏左面列表窗口
好了,动作面板就介绍这些,有个印象,不要求记住,工具栏上每个工具的作用和功能将在以后的课程中边用边熟悉。
这篇教程为“FlashAS入门教程”的一部分。
查看全套教程>>>>。
FlashAS入门-为“关键帧”添加动作
-
2006-10-2503:
30:
52发表评论
这篇教程为“FlashAS入门教程”的一部分。
查看全套教程>>>>。
源文件下载
本节应掌握的知识要点:
①添加脚本的方式;②stop()、gotoAndstop()动作;③应用【添加脚本】工具
;④认识帧动作标志“a”;⑤语法规范:
小括号“()”和分号“;”。
在Flash中添加动作脚本可以分为两种方式,一是为“帧”添加动作脚本,二是向“对象”添加动作脚本。
“帧”动作脚本,是指在时间轴的“关键帧”上添加的动作脚本。
“对象”动作脚本,是指在“按钮”元件和“影片剪辑”元件的实例上添加的动作脚本。
请注意,“图形”元件上是不能添加动作脚本的。
这一讲,我们将学习在关键帧上添加stop();、gotoAndstop()动作,来控制影片的播放。
stop()的作用是停止动画播放。
gotoAndstop()的作用是通知播放头跳转到某一帧并在该帧停止。
请看示例动画“实例1-1”。
>>>>>点击查看动画效果<<<<<
实例1-1 添加帧动作脚本stop()、gotoAndstop()以控制影片播放。
按常规,动画的播放是随着时间轴上播放头的移动而顺序循环播放的,这个动画上面有一只来回奔跑跳跃的小松鼠,在动画播放时,如果没有遇到停止的指令,就会不停的循环往复奔跑。
打开源文件看看,这个动画中,在时间轴上的第1帧、第10帧、第20帧分别添加了stop()动作,当动画播放到相应帧时即会按照帧动作的指令自动停止下来。
第30帧上添加了gotoAndstop(50)动作,当动画播放到第30帧时,即会按照该帧上的语句指令,跳转并停止在第50帧上。
这里我们用添加帧动作实现了让动画按要求停止播放,但是,一旦停止了下来就无法再自动重新播放,此时单击动画右下角的play按钮,就可以使动画继续播放了,这就是动画中简单的交互。
我们将在下一讲中学习在动画播放的过程中,利用按钮来实现人为的对动画进行播放控制,实现简单的交互效果。
现在,我们来学习添加语句的步骤:
选中需要添加动作脚本的关键帧,这时“动作”面板的标题栏上显示的标题是“动作-帧”,如图1-4,然后单击动作面板“脚本”编辑窗口左上角【添加脚本】工具
,在弹出菜单上找到相关条目里面的语句,双击即添加到了“脚本编辑”窗口中。
如图4。
也可以直接在“脚本编辑”窗口中输入语句。
图1-4在“脚本编辑”窗口中添加动作
本节涉及的语法及规范:
小括号“()”:
在“AS”中,这个小括号“()”的作用之一是用来在其中定义函数或者动作的参数,如本节实例中用到的gotoAndstop(50),也有不用参数的动作,如本节用到的stop()。
分号“;”:
在“AS”中,分号“;”是用来作为语句结束的标记,在FlashAS脚本中,任何一条语句都是以“;”号结束的。
虽然有时省略了“;”号,Flash也可以成功的编译这个脚本,但这是不规范的。
帧动作标志“a”:
当关键帧上添加了动作脚本之后,该帧上就会出现一个小写的字母“a”,如“实例1”时间轴上的第1帧、第10帧、第20帧,这个标志表明在该帧上添加了动作。
课后练习:
这一节的内容很简单,运用这一节的知识,并利用实例1-1的源文件做一个简单的课后练习,要求是:
动画开始播放后,小松鼠跑到第10帧然后直接跳到第30帧,到第40帧后又直接跳到第60帧。
效果如“练习1-1”。
>>>>>点击查看动画效果<<<<<
练习1-1
这篇教程为“FlashAS入门教程”的一部分。
查看全套教程>>>>。
FlashAS入门-为“按钮”添加鼠标事件
-
2006-10-2403:
35:
09发表评论
这篇教程为“FlashAS入门教程”的一部分。
查看全套教程>>>>。
本节源文件下载
本节应掌握的知识要点:
①为按钮添加鼠标事件;②为影片剪辑定义实例名;③大括号“{}”和点语法“.”;④“绝对路径”概念;⑤对象的后缀;⑥【语法提示】工具
、【插入目标路径】工具
和【自动套用格式】工具
的应用。
上一节我们学习了为关键帧添加动作,以实现让动画按要求停止播放的效果,这一节将学习为按钮添加鼠标事件来控制动画的播放状态和控制影片剪辑的播放,实现简单的交互。
要学习的语句是on()事件处理函数;指定触发动作的鼠标事件。
语法格式:
on(mouseEvent){
}
“()”小括号中的mouseEvent参数是鼠标事件,常用的有以下几种鼠标事件:
Press 当鼠标指针经过按钮时按下鼠标。
release 当鼠标指针经过按钮时按下再释放鼠标按钮。
releaseOutside当鼠标指针在按钮之内时按下按钮后,将鼠标指针移到按钮之外,此时释放鼠标按钮。
rollOut鼠标指针滑出按钮区域。
rollOver 鼠标指针滑过按钮。
请看示例动画“实例1-2”。
>>>>>点击查看动画效果<<<<<
实例1-2 为按钮添加鼠标事件
画面上方,仍然是那只欢跳的小松鼠在画面上不停的来回奔跑。
来回奔跑的动作是在主场景时间线上设置的动作。
画面下方,显示有我们熟悉的“属性”面板,从这里可以看到,画面上这只跳跃的小松鼠是一个名称为“松鼠”的影片剪辑元件,我们给这只小松鼠定义了一个实例名为“shu_mc”。
要用动作控制影片剪辑的播放状态,为对象命名是必须的一个步骤。
画面中间有3组按钮,当鼠标滑过按钮时,将显示该按钮上添加的动作,请大家先注意看看三组按钮上的语句,再分别点击各个按钮,试试它们有什么不同的作用。
点击蓝色按钮,可以控制场景的播放与停止,但是不能控制影片剪辑“shu_mc”的播放与停止;
点击绿色按钮,可以控制影片剪辑“shu_mc”的播放与停止,但是不能控制场景的播放与停止;
点击红色按钮,可以同时控制影片剪辑“shu_mc”和场景的播放与停止。
看一下前两组按钮上的语句,以“stop“按钮为例。
其差别是,绿色”stop”按钮上的动作前面添加了“_root.shu_mc”:
on(release){
_root.shu_mc.stop();
}
为按钮添加动作的方法是,选中场景上要为其添加动作的按钮,这时“动作”面板标题栏上显示的标题是“动作-按钮”,这表明当前要为其添加脚本的对象是按钮。
在脚本编辑窗口中添加动作。
本节涉及的语法及规范:
这个语句里面的大括号“{}”以及路径“_root”和点语法。
是这一讲接触的新知识。
大括号“{}”:
用来放置结合在一起依次执行的语句块,这里是当发生“release”鼠标(点击并释放)事件时执行令当前场景上的影片剪辑“shu_mc”停止播放的动作。
在红色按钮中,则把停止场景播放的“stop()”语句和停止影片剪辑播放的“_root.shu_mc.stop()”语句结合在一起实现同时控制两者播放状态的作用。
绝对路径:
Flash中目标路径有两种,绝对路径和相对路径,我们今天接触的“_root.shu_mc.stop()”是绝对路径,指定了发生stop动作的绝对地址和对象,这个绝对地址就是当前场景_root,对象就是影片剪辑“shu_mc”,即让当前场景“_root”上的实例名为“shu_mc”的影片剪辑对象“stop”停止播放。
FlashAS入门-为“影片剪辑”添加鼠标事件
-
2006-10-2403:
47:
06发表评论
这篇教程为“FlashAS入门教程”的一部分。
查看全套教程>>>>。
源文件下载
本节应掌握的知识要点:
①为影片剪辑添加鼠标事件;②路径的理解,③语句的注释文字以及语法着色;④【视图选项】工具
运用;⑤【脚本参考】工具
的运用。
前面,我们学习了在关键帧和按钮上添加动作以控制影片的播放,这一节将用上一节学习过的语句,在影片剪辑上添加动作来控制主场景时间轴以及影片剪辑自身的播放。
请看实例1-3。
>>>>>点击查看动画效果<<<<<
实例1-3为“影片剪辑”添加鼠标事件
画面上,还是这只可爱的小松鼠在不知疲倦的来回奔跑,背景是我们已经熟悉了的动作面板,左下角显示了当前选择的对象是名称为“松鼠”的影片剪辑,这表明【代码编辑】窗口中显示的语句是直接添加在“松鼠”影片剪辑上的,注意,这个名称不是在“属性”面板中为对象指定的实例名,而是库中影片剪辑的名称。
把鼠标移到小松鼠上面,分别对照着画面上显示的鼠标事件来试试,可以看到,通过不同的鼠标事件,分别实现了控制场景播放以及影片剪辑播放的效果。
动作很简单,是上一讲学过的,而且都是添加在位于主场景上的对象上,其区别除了语句所添加的对象不同以外,路径的指向也有所区别,这是这一节需要理解的知识点。
我们来分析一下这一句:
on(release){
play();
}
这个语句没有指明路径,当添加在按钮上时,它控制的是包含有按钮对象的当前时间轴,即按钮的父时间轴;当添加在影片剪辑对象上时,它控制的是影片剪辑对象自身的时间轴,由于控制自身时间轴不需要指明路径,因此也不必在“属性”面板中命名。
如果要在影片剪辑上添加控制当前场景的动作,则需要指明路径,如:
on(rollOut){
_root.play();
}
如果要在按钮上添加控制位于同一场景的影片剪辑,则需要在属性面板中为影片剪辑命名,并指明路径,如:
on(release){
_root.shu_mc.stop();
}
路径概念非常重要,在编写动作脚本时,如果路径的指向不正确,就实现不了预期的效果。
为影片剪辑添加动作的方法是,选中场景上要为其添加动作的影片剪辑,这时“动作”面板标题栏上显示的标题是“动作-影片剪辑”,这表明当前要为其添加脚本的对象是影片剪辑,然后在脚本编辑窗口中添加动作。
为语句添加注释:
为语句添加注释也是增加代码可读性的一个好习惯,这样不仅有利于别人解读代码,也有利于自己对代码进行分析和记忆。
注释的格式是用双斜线“//”开头,后面书写文字,可以放在语句的后面、上面或者下面。
如实例3所示。
[语法着色] :
FlashAS的集成开发环境中具有语法着色的功能,即在程序中,Flash会将“关键字”、“标识符”、“注释文本”、“字符串”用不同的颜色来分别显示。
默认情况下,“关键字”显示为深蓝色,如“play、on()、_root”等等,“标识符”显示为黑色,如“shu_mc、”,“字符串”显示为天蓝色,如"abc"、"123",“注释文本”显示为灰色。
可以利用语法着色来阅读代码.和发现错误。
【视图选项】工具
运用:
在【视图选项】里,勾选“查看Esc快捷键”,可以在动作工具箱中显示语句的快捷键;勾选“查看行号”,可以在动作面板中显示每一条程序的行号,如实例3所示,如果脚本出现了错误,可以很方便的根据“输出面板”的出错提示查找到出错的语句,当代码很长的时候,使用行号就更显其优越性了;勾选“自动换行”,当某一条语句太长时,会自动提行显示。
【脚本参考】工具
:
利用这个工具可以在编写脚本时,适时提供关于脚本的参考信息,方法是,将光标放在需要查询的关键字中,点击【脚本参考】工具,即会打开相关条目的参考信息。
如图1-8所示。
图1-8脚本参考工具运用
课后练习:
素材源文件下载
利用提供的课后练习源文件,在“控制”按钮、“小松鼠”影片剪辑和“小球”影片剪辑上分别添加语句完成以下效果:
1.当鼠标在“控制”按钮、“小松鼠”影片剪辑或者“小球”影片剪辑上滑过时,小松鼠和小球分别停止在场景的左右两端;
2.当在“控制”按钮、“小松鼠”影片剪辑或者“小球”影片剪辑上按下鼠标时,小松鼠和小球分别按照相反的方向运动;
3.当在“控制”按钮、“小松鼠”影片剪辑或者“小球”影片剪辑上点击(按下并释放)鼠标时,小松鼠踏在小球上从场景左端开始来回运动。
也就是说,要求在按钮、小松鼠和小球影片剪辑上分别添加语句来实现相同的控制效果。
效果如“练习3”。
>>>>>点击查看动画效果<<<<<
练习3
课后练习提示:
(这个练习对于初学者有一定的难度,最好在不看提示之前,先独立思考试着做一做)
1.这个练习的关键是路径,请仔细理解教程第3、4节关于路径的说明,以及第4节中关于在影片剪辑和在按钮上附加鼠标事件时,对路径指向的不同之处所做的分析;
2.用按钮或者用另一个影片剪辑对象控制其他影片剪辑时,不要忘记了为影片剪辑实例命名;
3.场景上的松鼠图层上有4个关键帧,每一个关键帧上都有一个小松鼠影片剪辑的实例,在对小松鼠命名和添加语句时不要忽略了这一点。
这篇教程为“FlashAS入门教程”的一部分。
查看全套教程>>>>。
FlashAS入门-“影片剪辑”属性调整及路径解析
-
2006-12-0708:
58:
12发表评论
这篇教程为“FlashAS入门教程”的一部分。
查看全套教程>>>>。
源文件下载
本节应掌握的知识要点:
①影片剪辑属性调整;②相对路径、绝对路径的应用;③赋值运算符“=”应用;④了解算术组合赋值运算符“+=”、“-=”、“*=”、“/=”。
属性概念是我们生活中随处可见的,各种物体都有自己的属性,比如我们的食用水,它的自然属性是透明、无色、无味的液体,这些属性通过一些加工手段是可以改变的,加入调色剂可以使它的透明度和色泽发生变化,加入调味剂可以改变它的味道,放入冰箱冷冻可以让它凝固成冰块。
在Flash中,影片剪辑对象也有自身的许多属性,比如坐标位置、透明度、大小、旋转角度等等,运用动作脚本语句可以对其属性进行修改调整。
路径概念在前面已经接触过了,我们将在这一节里加深理解。
请看示例动画“实例1-4”。
>>>>>点击查看动画效果<<<<<
实例1-4 “影片剪辑”属性调整
我们先分析画面层次结构:
画面很简单,在黄蓝色相间的主场景(_root)上,右下角放有几组按钮,中间有一个实例名为“huan_mc”的影片剪辑,“huan_mc”影片剪辑中还嵌套了一个实例名为“shu_mc”的影片剪辑,shu_mc影片剪辑里有一个圆形、一只小松鼠和4只按钮。
把鼠标分别移到各个按钮上,可以显示按钮上设置的动作,点击主场景上的按钮和shu_mc影片剪辑里的按钮,可以分别控制各级影片剪辑的相应属性。
从绝对路径控制影片剪辑属性:
下面我们先来看看通过主场景上按钮的release事件对影片剪辑huan_mc进行属性控制。
主场景上的一组蓝色按钮控制的是huan_mc的透明度属性:
_alpha:
透明度属性,以百分比为单位。
蓝色减号“-”按钮上的语句:
on(release){
_root.huan_mc._alpha=50;
} //点击按钮时,将场景上的huan_mc影片剪辑透明度设为50
蓝色加号“+”按钮上的语句:
on(release){
_root.huan_mc._alpha=100;
} //点击按钮时,将场景上的huan_mc影片剪辑透明度设为100。
这一组按钮的语句很简单,直接将一个常量赋值给场景上的huan_mc影片剪辑对象的透明度属性。
主场景上的一组红色按钮控制的是huan_mc的纵、横向缩放比例属性:
_xscale影片剪辑的横向缩放比例,以百分比为单位。
_yscale影片剪辑的纵向缩放比例,以百分比为单位。
红色加号“+”按钮上的语句:
on(release){
_root.huan_mc._xscale=_root.huan_mc._xscale*1.1;
_root.huan_mc._yscale=_root.huan_mc._yscale*1.1;
}
红色减号“-”按钮上的语句:
on(release){
_root.huan_mc._xscale=_root.huan_mc._xscale*0.9;
_root.huan_mc._yscale=_root.huan_mc._yscale*0.9;
}
这一组按钮上的语句中,属性的取值就不是一个简单的常量了,而是通过两个表达式计算出对象的纵、横向缩放比例,如“_root.huan_mc._xscale*1.1”,计算的结果就是横向缩放比例为场景上的huan_mc横向缩放比例的1.1倍即110%。
再将这个结果赋值给表达式左边指定的影片剪辑对象的相应属性,点击一次按钮就会计算一次,由此令该影片剪辑对象按照每一次计算出的比例进行纵、横向等比例缩放。
下面再来看看主场景上的一组绿色“上”、“下”、“左”、“右”按钮,这一组按钮控制的是位于huan_mc内部的shu_mc的纵、横坐标属性。
_x影片剪辑的横坐标属性
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flash AS 入门到精通教程 入门 精通 教程