搜索
第5章使用ActionScript动作脚本制作交互动画教学目标教学重点、难点教学内容本章小结教学目标通过这章的学习，使学生掌握使用ActionScript动作脚本制作交互动画的基本方法和技巧。第5章使用ActionScript动作脚本制作交互动画教学重点与难点时间轴控制函数、影片剪辑属性及控制函数、浏览器网络函数、按钮及影片剪辑的事件处理函数，if语句、for语句的使用，实例的绝对路径和相对路径，影片剪辑的复制、拖放操作。第5章使用ActionScript动作脚本制作交互动画教学内容5.1ActionScript动作脚本5.2“数学课件”案例第5章使用ActionScript动作脚本制作交互动画5.3“飘雪动画”案例5.4“预载动画”案例5.5“花瓣动画”案例5.6“拼图游戏”案例5.7“网站导航”案例5.1ActionScript动作脚本本节内容1、动作脚本概述2、“动作”面板介绍3、本章案例简介5.1ActionScript动作脚本一、动作脚本概述5.1ActionScript动作脚本ActionScript(动作脚本)：制作人机交互动画，如游戏、课件、网站导航、下雪下雨鼠标跟随等特效动画。本书中使用的是2.0版本的动作脚本语言。二、“动作”面板介绍5.1ActionScript动作脚本1、打开“动作”面板：【窗口】【动作】命令或者按F9快捷键。“动作”面板结构二、“动作”面板介绍5.1ActionScript动作脚本1双击所需命令2直接拖动命令至右窗口3直接在此窗口输入4单击此+号，选择命令2、添加“动作”的4种方法：三、本章案例简介5.1ActionScript动作脚本1、“数学课件”案例主要讲解的是ActionScript动作脚本的应用技巧、按钮的事件处理函数、时间轴控制函数的使用；2、“飘雪动画”案例主要讲解的是随机函数、复制/移除影片剪辑函数、if语句的使用及影片剪辑属性的设置；3、“预载动画”案例主要讲解的是动态文本变量的设置、实例的命名与引用路径、预载函数和滤镜的使用；4、“花瓣动画”案例主要讲解的是for语句的使用、用函数控制鼠标的方法和影片剪辑的事件处理函数的使用；5、“拼图游戏”案例主要讲解的是影片剪辑的on事件及影片剪辑的拖放操作；6、“网站导航”案例主要讲解的是浏览器网络函数的使用。5.2“数学课件”案例本节内容1.案例效果2.操作步骤3.技术要点4.练习一、案例效果重点与难点：ActionScript动作脚本的应用技巧、按钮的事件处理器、时间轴控制函数的使用。5.2“数学课件”案例二、操作步骤1.设置“文档属性”，并把文件保存为“数学课件”2.导入图片，制作所需的元件（1）制作背景元件：导入背景图片并将其转换为“背景”的图形元件。5.2“数学课件”案例二、操作步骤（2）制作开头动画元件：①新建“开头字”图层，输入文字“加减乘除运算”，设置为黑体、82点、黑色。将文字转换为影片剪辑元件“开头动画”。②双击“开头动画”元件进入编辑状态，再将文字转换为图形元件“开头字”。③在第15帧处按F6键插入关键帧，设置第1帧“缩放”值为“50”、“Alpha”值为“0”，在第1-15帧间“创建传统补间”。④新建“动作”图层，在第15帧处插入关键帧，右击第15帧，选择“动作”，打开“动作”面板，输入动作命令“stop();”。5.2“数学课件”案例二、操作步骤（3）制作“加法运算”元件：①新建影片剪辑元件“加法运算”。改“图层1”名为“字”。②在舞台上输入“加法运算”，按F8键转换为图形元件“加法运算字”。③在第8帧处按F6键插入关键帧，设置第1帧“Alpha”值为“0”，在第1-8帧间“创建传统补间”。5.2“数学课件”案例二、操作步骤④新建“元素”图层，在第6帧处插入关键帧，用“矩形”、“文字”工具绘制如下图所示的图形：5.2“数学课件”案例二、操作步骤⑤新建“数字”图层，在第6帧处输入两个数字2；新建“答案”图层，在第8帧处输入答案4；效果如下图所示：5.2“数学课件”案例二、操作步骤⑥新建“按钮”图层，制作“答案按钮”元件，制作过程如下：5.2“数学课件”案例添加“发光”滤镜画圆度为5的矩形添加文字二、操作步骤⑦单击舞台上方的“加法运算”按钮，返回“加法运算”元件，将“答案按钮”元件放置舞台的左下角，如下图所示。5.2“数学课件”案例⑧选中“答案按钮”元件，按F9键打开“动作—按钮”面板，输入如下动作命令：on(release){gotoAndPlay(8);}二、操作步骤⑨新建“动作”图层，在第7帧、第8帧处均添加动作命令：stop();制作完毕后，时间轴与第8帧效果图如下图所示：5.2“数学课件”案例二、操作步骤（4）制作“减法运算”、“乘法运算”和“除法运算”元件：①直接复制“加法运算”元件为“减法运算”、“乘法运算”和“除法运算”元件。②相应地修改文字、答案、运算符号。（5）制作“开始”、“上一题”、“下一题”和“返回”按钮元件①直接复制“答案按钮”元件为“开始按钮”、“上一题按钮”、“下一题按钮”、“返回按钮”元件。②分别修改钮面文字。5.2“数学课件”案例二、操作步骤3、布置场景（1）主时间轴中图层如右图：5.2“数学课件”案例（2）第1、2帧效果图如下图：二、操作步骤4、添加代码（1）新建“代码”图层，在第1、2、3、4、5帧插入关键帧并添加代码：stop();5.2“数学课件”案例（2）选第2帧，选中“下一题按钮”，按F9键打开“动作”面板，输入如下动作命令：on(release){gotoAndPlay(3);}选中“返回按钮”，添加动作：on(release){gotoAndPlay(1);}二、操作步骤4、添加代码（3）选第3帧，给“上一题按钮”添加动作命令：on(release){gotoAndPlay(2);}“下一题按钮”添加动作命令：on(release){gotoAndPlay(4);}“返回按钮”，添加动作命令：on(release){gotoAndPlay(1);}5.2“数学课件”案例二、操作步骤4、添加代码（4）选第4帧，给“上一题按钮”添加动作命令：on(release){gotoAndPlay(3);}“下一题按钮”添加动作命令：on(release){gotoAndPlay(5);}“返回按钮”，添加动作命令：on(release){gotoAndPlay(1);}5.2“数学课件”案例二、操作步骤4、添加代码（5）选第5帧，给“上一题按钮”添加动作命令：on(release){gotoAndPlay(4);}“返回按钮”，添加动作命令：on(release){gotoAndPlay(1);}5、按Ctrl+Enter键看一下动画播放的效果来测试影片并保存。5.2“数学课件”案例三、技能要点5.2“数学课件”案例1.AS脚本的应用技巧动作脚本又可称为AS脚本，可以添加在关键帧、按钮实例和影片剪辑实例上。**只能为主时间轴或影片剪辑内的关键帧添加动作脚本，不能为图形元件和按钮元件内的关键帧添加动作脚本。**所添加的动作脚本一定要注意字母的大小写。如：gotoAndPlay是正确的，而gotoandplay是错误的。2.按钮的事件处理函数的使用要按钮添加动作，需要先为其添加on事件处理函数，on函数的语法格式为：on（鼠标事件）{此处是语句，用来响应鼠标事件}三、技能要点5.2“数学课件”案例Flash中的鼠标事件包括以下几种：press：按下还未松开鼠标左键时。release：单击鼠标左键并释放左键时。releaseOutside：单击一次鼠标时。rollOver：鼠标放在按钮上时。rollOut：鼠标从按钮上滑出时。dragOver：按住鼠标左键不松开，光标滑入按钮时。dragOut：按住鼠标左键不松开，光标滑出按钮时KeyPress：当用户按下键盘上的一个键时，三、技能要点5.2“数学课件”案例3.时间轴控制函数的使用时间轴控制函数是用来控制时间轴的播放进程的，包括九个简单函数，利用这些函数可以定义动画的一些简单的交互控制.在“动作”面板中展开【全局函数】【时间轴控制】.（1）gotoAndPlay该函数一般添加在关键帧或按钮实例上.一般形式为：gotoAndPlay（scene，frame）;其含义是：跳转并播放，跳转到指定场景的指定帧，并从该帧开始播放。三、技能要点5.2“数学课件”案例（2）gotoAndStop一般格式为：gotoAndStop（scene,frame）;其含义是：跳转并停止播放，跳转到指定场景的指定帧并从该帧停止播放，如果没有指定场景，则将跳转到当前场景的指定帧开始停止播放。（3）nextFrame（）一般格式为：on（release）{nextFrame（）;}其含义是：跳至下一帧并停止播放，括号中没有任何参数。例如若上面的语句用于按钮则表示：单击按钮并释放时，跳到下一帧并停止播放。三、技能要点5.2“数学课件”案例（4）prevFrame（）其含义是：跳至前一帧并停止播放。下面的语句表示：单击按钮并释放时，跳到前一帧并停止播放。on（release）{prveFrame（）；}（5）nextScene（）其含义是：跳至下一场景并停止播放。（6）prevScene（）其含义是：跳至前一场景并停止播放。三、技能要点5.2“数学课件”案例（7）play（）其含义是：可以指定影片继续播放。在播放影片时，除非另外指定，否则从第一帧播放。如果影片播放进程被goto（跳转）或stop（停止）语句停止，则必须使用play语句才能重新播放。（8）stop（）其含义是：停止当前播放的影片。（9）stopAllSounds（）其含义是：使当前播放的所有声音停止播放，但是不停止动画的播放。四、练习5.2“数学课件”案例制作一个简单的网页，首页按钮包括“公司简介、产品展示、联系方式”等，要求在“产品展示”中放置同样大小的产品图片，单击每个产品图片的时会链接到相对应产品的大图片。同时在每一页都要有返回按钮返回到首页。5.3“飘雪动画”案例本节内容1.案例效果2.操作步骤3.技术要点4.练习一、案例效果重点与难点：随机函数、影片剪辑复制语句、条件语句等的运用及设置方法介绍。5.3“飘雪动画”案例二、操作步骤5.3“飘雪动画”案例1.设置“文档属性”，并把文件保存为“飘雪”2．制作“落雪”元件分三层制作:雪花→一朵飘落的雪花(引导动画)→一片飘落的雪花(用代码实现)二、操作步骤5.3“飘雪动画”案例（1）制作“雪花”元件如右图：（2）制作“飘雪”元件利用引导层来制作，引导线如右图：时间轴设置如下图：二、操作步骤5.3“飘雪动画”案例（3）制作“落雪”影片剪辑元件Ａ．在图层1的第1帧拖入“飘雪”影片剪辑，扩展到第3帧，单击舞台上的“飘雪”实例，在属性面板中给实例起名为“snowflake”。设置如图所示。二、操作步骤5.3“飘雪动画”案例Ｂ．新建图层2，在图层2的1、2、3帧中输入以下代码：第1帧代码：第2帧代码：第3帧代码：gotoAndPlay(2);二、操作步骤5.3“飘雪动画”案例提示：第2帧中代码的整体意思是如果n=flakes即n=100时(注意，等号应写成==，而非=)，重新设置n=1,否则复制一个雪花，并设置雪花x轴坐标为600内的随机数，缩放比例为30～60的随机数。以上代码中的函数Math.random()产生0～1之间的随机数；duplicateMovieClip为复制影片剪辑语句，用于复制一个雪花；this用于代表影片剪辑本身，this[“snowflake”+n]表示复制得到的雪花；其后用“点语法”设置复制得到的雪花的x坐标位置及雪花的大小。这些代码重复执行，最多复制产生n=100朵雪花，每朵雪花沿引导线路径飘落。这样就形成纷纷扬扬飘落的雪花。二、操作步骤5.3“飘雪动画”案例3．制作主场景动画设置两个图层：“背景”和“下雪”（１）在“背景”图层中导入素材文件夹中图片“snowhouse.jpg”（２）在“下雪”图层