资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,Flash平面动画制作,第5章 使用Actionscript动作脚本制作交互动画,教学目标,教学重点、难点,本章小结,教学内容及课时,教学目标,通过本章的学习，掌握使用,Actionscrpit,动作脚本制作交互动画的基本方法和技巧。,第5章 使用Actionscript动作脚本制作交互动画,教学重点与难点,时间轴控制函数、影片剪辑属性及控制函数、浏览器网络函数、按钮及影片剪辑的事件处理函数，if语句、for语句的使用，绝对路径和相对路径使用。,第5章 使用Actionscript动作脚本制作交互动画,教学内容,本章小结,第5章 使用Actionscript动作脚本制作交互动画,5.1 ActionScript动作脚本,5.5 “花瓣动画”案例,5.6 “拼图游戏”案例,5.7 “网站导航”案例,本章计划授课14学时,5.2 “语文课件”案例,5.3 “飘雪动画”案例,5.4 “预载动画”案例,动作脚本概述,“动作”面板介绍,本章案例简介,本节内容,5.1 Actionscript动作脚本概述,Flash动画中经常需要实现人和动画的交互和动画内部各对象的交互。利用Flash的动作脚本，不仅可以制作各种交互动画（如游戏和课件等），而且还可以用于实现下雨、下雪等特效动画。,本书中使用的是版本的动作脚本语言。,一、,动作脚本概述,5.1 Actionscript动作脚本概述,“动作”面板的打开方法：,【窗口】【动作】命令或者按F9快捷键,二、“动作”面板介绍,5.1 Actionscript动作脚本概述,、“制作语文课件”案例主要讲解的是AS脚本的应用技巧、按钮的事件处理函数、时间轴控制函数的使用；,、“制作飘雪动画”案例主要讲解的是随机函数、复制影片剪辑函数、if语句的使用及影片剪辑属性的设置；,、“制作预载动画”案例主要讲解的是动态文本变量的设置、绝对路径和相对路径的使用、预载函数和滤镜的使用；,、“制作花瓣动画”案例主要讲解的是for语句的使用、用函数控制鼠标方法和影片剪辑的事件处理函数的使用；,、“制作拼图游戏”案例主要讲解的是控制影片剪辑拖放函数的使用；,、“制作动态网站导航”案例主要讲解的是浏览器网络函数的使用。,三、本章案例简介,5.1 Actionscript动作脚本概述,案例效果,操作步骤,技能要点,练习,本节内容,.2“制作语文课件”案例,一、案例效果,重点与难点：,AS脚本的应用技巧、按钮的事件处理器、时间轴控制函数的使用。,.2“制作语文课件”案例,二、操作步骤,1新建文档并命名,启动AdobeFlashCS3后，新建一个Flash文件（ActionScript）文档，设置背景色为白色，文档大小为640480，保存文档，命名为“语文课件”,。,2,导入图片、制作所需元件,（1）制作背景元件,导入背景图片,并将其转换为“背景”的图形元件。,.2“制作语文课件”案例,二、操作步骤,（）制作“按钮”元件,分别制作“春望”、“登高”,“返回”、“赏析”、“上一页”、“韵律常识”、“作业”、“作者简介”按钮元件,按钮元件。,（3）制作“春望”和“登高”两个影片剪辑元件,新建名称为,“春望”的,“影片剪辑”元件，将图层1改名“背景”，导入“春望.jpg”到舞台并对齐, 延伸至第2帧。,新建“按钮”图层，把“赏析”按钮元件拉到该图层第1帧舞台的右下方，在第2帧处插入关键帧，把“属性”面板打开，选中“赏析”按钮，点“交换元件”按钮，交换为“上一页”按钮元件.,.2“制作语文课件”案例,二、操作步骤,新建“文字”图层，在舞台上创建一个文本输入框,将“春望诗”的内容复制粘贴。,在第2帧处按F7键插入空白关键帧，按照同样方法把“春望赏析”内容复制进来。,新建”动作”图层，在第1帧上右击鼠标选择“动作”在“动作”面板中输入“stop();”。选择按钮层第1帧，在舞台上选中”赏析”按钮实例，点鼠标右键选择“动作”，在“动作”面板中输入“on(release)gotoAndStop(2);” ,选中第2帧按同样方法添加“on(release)gotoAndStop(1);”,.2“制作语文课件”案例,二、操作步骤,“春望”影片剪辑的时间轴设置如图,直接复制“春望”这个影片剪辑命名为“登高”，参照“春望”影片剪辑的制作过程修改“登高”影片剪辑中的内容。,.2“制作语文课件”案例,二、操作步骤,3布置场景,主时间轴中图层如右图:,按钮的位置如下图:,.2“制作语文课件”案例,二、操作步骤,4添加主场景中的脚本,（1）单击（插入新图层按钮）命名为“as”，在第1帧上右击鼠标选择“动作”在“动作”面板中输入“stop();”,（2）在对应按钮实例中的“动作”面板中输入对应的动作,”春望”,:“on(release) gotoAndStop(2); ”,“登高” :,“on(release) gotoAndStop(3);”,“作者简介”:,“on(release) gotoAndStop(4);”,“韵律常识” :,“on(release) gotoAndStop(5);”,“作业” :”,on(release) gotoAndStop(6);”,(3)在“春望”、“登高”、“作者简介”、“韵律常识”、“作业”图层中的“返回”按钮按照步骤（2）的方法添加“,on(release)gotoAndStop(1);”,语句,.2“制作语文课件”案例,二、操作步骤,（3）在“春望”、“登高”、“作者简介”、“韵律常识”、“作业”图层中的“返回”按钮按照步骤(2)的方法添加“,on(release)gotoAndStop(1);”,语句.,（4）按Ctrl+Enter键看一下动画播放的效果来测试影片并保存。,.2“制作语文课件”案例,三、技能要点,1. AS脚本的应用技巧,动作脚本又可称为AS脚本，可以添加在关键帧、按钮实例和影片剪辑实例上,*只能为主时间轴或影片剪辑内的关键帧添加动作脚本，不能为图形元件和按钮元件内的关键帧添加动作脚本。,2. 按钮的事件处理函数的使用,要按钮添加动作，需要先为其添加on事件处理函数，,on函数的语法格式为：,on,（鼠标事件）,此处是语句，用来响应鼠标事件,.2“制作语文课件”案例,三、技能要点,Flash,中的鼠标事件包括以下几种：,press：,按下还未松开鼠标左键时。,release：,单击鼠标左键并释放左键时。,releaseOutside：,单击一次鼠标时。,rollOver：,鼠标放在按钮上时。,rollOut：,鼠标从按钮上滑出时。,dragOver：,按住鼠标左键不松开，光标滑入按钮时。,dragOut：,按住鼠标左键不松开，光标滑出按钮时,KeyPress：,当用户按下键盘上的一个键时，,.2“制作语文课件”案例,三、技能要点,3. 时间轴控制函数的使用,时间轴控制函数是用来控制时间轴的播放进程的，包括九个简单函数，利用这些函数可以定义动画的一些简单的交互控制,.,在“动作”面板中展开,【,全局函数,】【,时间轴控制,】,.,（1）gotoAndPlay,该函数一般添加在关键帧或按钮实例上.,一般形式为：gotoAndPlay（scene，frame）;,其含义是：跳转并播放，跳转到指定场景的指定帧，并从该帧开始播放。,.2“制作语文课件”案例,三、技能要点,（2）gotoAndStop,一般格式为：,gotoAndStop（scene,frame）;,其含义是,：跳转并停止播放，跳转到指定场景的指定帧并从该帧停止播放，如果没有指定场景，则将跳转到当前场景的指定帧开始停止播放。,（3）nextFrame（）,一般格式为：,on（release）,nextFrame（）;,其含义是：跳至下一帧并停止播放，括号中没有任何参数。例如下面的语句表示：单击按钮并释放时，跳到下一帧并停止播放。,.2“制作语文课件”案例,三、技能要点,（4）prevFrame（）,其含义是：跳至前一帧并停止播放。下面的语句表示：单击按钮并释放时，跳到前一帧并停止播放。,on（release）,prveFrame（）；,（5）nextScene（）,其含义是：跳至下一场景并停止播放。,（6）prevScene（）,其含义是：跳至前一场景并停止播放。,.2“制作语文课件”案例,三、技能要点,（7）play（）,其含义是：可以指定影片继续播放。在播放影片时，除非另外指定，否则从第一帧播放。,如果影片播放进程被goto（跳转）或stop（停止）语句停止，则必须使用play语句才能重新播放。,（8）stop（）,其含义是：停止当前播放的影片。,（9）stopAllSounds（）,其含义是：使当前播放的所有声音停止播放，但是不停止动画的播放。,.2“制作语文课件”案例,1、制作一个简单的网页，首页按钮包括“公司简介、产品展示、联系方式”等，要求在“产品展示”中放置同样大小的产品图片，单击每个产品图片的时会链接到相对应产品的大图片。同时在每一页都要有返回按钮返回到首页。,四、练习,.2“制作语文课件”案例,本节内容,案例效果,操作步骤,技能要点,练习,.“飘雪动画”案例,一、案例效果,重点与难点：,随机函数（Random），影片剪辑复制语句(,duplicateMovieClip）,、条件语句（If else）等的运用及设置方法介绍。,.“飘雪动画”案例,二、操作步骤,1新建文档并命名,启动AdobeFlashCS3后，从“常规”对话框中选择Flash文件（），新建一个文档，设置文档大小为600450像素，背景颜色为黑色。将新文档保存，命名为“飘雪动画”。,2制作“落雪”元件,本元件分三层来制作：先制作 “雪花”元件，再以雪花为元素制作 “飘雪”元件，最后以飘落的雪花为元素制作出一片飘落的雪花（“落雪”元件）。,.“飘雪动画”案例,二、操作步骤,（1）制作“雪花”元件如右图：,（2）制作“飘雪”元件,利用引导层来制作，引导线如右图：,时间轴设置如下图：,.“飘雪动画”案例,二、操作步骤,（3）制作“落雪”影片剪辑元件,在图层1的第1帧拖入“飘雪”影片剪辑，扩展到第3帧，单击舞台上的“飘雪”实例，在属性面板中给实例起名为“snowflake”。设置如图所示。,.“飘雪动画”案例,二、操作步骤,新建图层2，在图层2的1、2、3帧插入关键帧，分别在“动作帧”面板中输入以下代码：,第1帧代码：,第2帧代码：,整体意思是：如果n=flakes即n=100时（,注意，等号应写成= =，而非=,），重新设置n=1,否则复制一个雪花，并设置雪花x轴坐标为600内的随机数，缩放比例为1至60的随机数。,.“飘雪动画”案例,二、操作步骤,注意：,以上代码中的函数“()”产生01之间的随机数；“duplicateMovieClip”为复制影片剪辑语句，用于复制一个雪花；“this”用于代表影片剪辑本身，thissnowflake+n表示复制得到的“雪花”；其后用“点语法”设置复制得到的雪花的x坐标位置及雪花的大小。这些代码重复执行，最多复制产生100朵雪花，每朵雪花沿引导线路径飘落。,.“飘雪动画”案例,二、操作步骤,3制作主场景动画,设置两个图层：“背景”和“下雪”,（）在“背景”图层中导入素材文件夹中图片“”,（）在“下雪”图层中把“落雪”元件拉入两个，位置如图：,4测试并保存影片,.“飘雪动画”案例,三 、技能要点,随机函数的使用,Random,函数在,flash,里是非常有用的，可以生成基本的随机数、创建随机的移动、设置随机的颜色，以及控制对象随机的变换和其他更多的作用。,随机函数有两种引用格式：,random(),和,(),（,1,）,random(number,),函数,random(number,),返回一个,0number-1,之间的随机整数，参数,number,代表一个整数。,示例：,random(20),本句的作用是产生一个,019,之间的随机数并输出该随机数,.“飘雪动画”案例,三 、技能要点,（2）(),()产生出0-1之间有14位精度以上的任意小数，注意没有参数。例如或。,2. 复制影片剪辑函数duplicateMovieClip的使用,（1）函数格式与功能,格式：duplicateMovieClip(target,newname,depth);,各参数含义如下：,target：表示要复制的影片剪辑实例名称的路径。,newname：表示复制的影片剪辑的惟一标识符。,depth：表示已复制的影片剪辑的惟一深度级别,.“飘雪动画”案例,三 、技能要点,例：复制二个影片剪辑,duplicateMovieClip(“mc”, “mc1”, “1”)；,mc2._x=200；,duplicateMovieClip(“mc”, “mc2”, “2”)；,mc3._x=400；,.“飘雪动画”案例,三 、技能要点,3. 影片剪辑属性的设置,（1）_x和_y属性,用来设置影片剪辑的X轴和Y轴坐标,例如，设置场景中影片剪辑snow的位置位于舞台中（100，20）的位置，语句是：,=100;,=20;,在snow自身脚本中设置为：,on(release),_x=200;或=100;,_y=300;或=20;,.“飘雪动画”案例,三 、技能要点,（2）_width和_height属性,用来设置影片剪辑的宽度和高度，从而改变影片剪辑的大小。例如，单击影片剪辑时，高度与宽度均大一倍，在“动作影片剪辑”面板中设置：,on(release),_width=_width*2;,_height=_height*2;,（3）_xscale和_yscale属性,用来设置影片剪辑在x轴和y轴上的缩放比例，正常值是100。取大于则放大，小于则缩小,.“飘雪动画”案例,三 、技能要点,（4）_xmouse和_ymouse属性,_xmouse和_ymouse属性给出鼠标光标的水平和垂直坐标位置。用在主时间轴中，则它们表示鼠标光标相对于主场景的坐标位置；如果这两个属性用在影片剪辑中，则它们表示鼠标光标相对于该影片剪辑的坐标位置。,例如：可以使用下面的代码让影片剪辑保持与鼠标位置相同的坐标值：,onClipEvent(enterFrame),_x=_;,_y=_;,.“飘雪动画”案例,三 、技能要点,（5）_alpha属性,用来控制影片剪辑的透明度。,（6）_rotation属性,影片剪辑的旋转角度（以度为单位），取值范围为-180180。,（7）_visible属性,确定影片剪辑的可见性，当影片剪辑的_visible的值是“true”(或者为1)时，影片剪辑为可见；当影片剪辑的_visible的值是“false”(或者为0)时，影片剪辑为不可见,.“飘雪动画”案例,三 、技能要点,（8）setProperty语句,用于设置影片剪辑属性。,格式：,setProperty（target,property,value/expression）;,其中：,target：表示要设置其属性的影片剪辑实例名称的路径。如_或_rootmc表示主场景中的影片剪辑mc。,property：表示要设置的属性。如：_x,value：表示设置的属性的具体值。,expression：表示设置的属性的值的表达式，这时，先计算表达式的值，再将该值设置为指定属性的值。,.“飘雪动画”案例,三 、技能要点,4. if语句,（1）if语句,if语句使你可以使用比较结果控制Flash影片的播放。其格式如下：,if(条件),这里是当条件计算为true时执行的指令,例如：判断X是否等于100，如果比较结果为“true”，则让影片跳到第15帧，代码可写成：,if(x= =100),gotoAndPlay(15);,.“飘雪动画”案例,三 、技能要点,（2）else语句,对if语句可以进行扩展，使用else执行条件不成立（比较表达式为“false”或“0”）时的代码，其使用格式如下：,if(条件),这里是当条件计算为true或非0时执行的指令,Else ,当条件计算为false或0时执行的指令,.“飘雪动画”案例,四 、练习,1、制作下雨效果的动画。,（思路：先画一滴从下落再到散开的雨滴,然后持续不断地将这个雨滴复制到画面上,从而产生下雨的效果。）,.“飘雪动画”案例,本节内容,案例效果,操作步骤,技能要点,练习,.4“制作预载动画”案例,一、案例效果,重点与难点：,动态文本变量的设置、元件实例命名、绝对路径和相对路径的使用、预载函数和滤镜的使用。,.4“制作预载动画”案例,二、操作步骤,1新建文档并命名,启动AdobeFlashCS3后，从“常规”对话框中选择Flash文件（），新建一个文档，设置文档大小为550400像素，背景颜色为黑色。将新文档保存，命名为“loading”。,2,添加进度条和动态文本,将图层改名为“动态文本”，添加一个静态文本“请稍等”,并绘制一个内容为矩形的“jindutiao”影片剪辑元件，在“属性”面板中，在实例名称中输入“jdt”。,.4“制作预载动画”案例,二、操作步骤,把文本类别改为“动态文本”并设置如下效果：,.4“制作预载动画”案例,二、操作步骤,2创建动画,（）制作一个“fengche”图形元件步骤如下：,（）制作一个“fengchemove”的影片剪辑元件,制作一个风车由小到大，再由大到小的动画,（3）选择库中的“fengchemove”的影片剪辑元件复制一个并改名为“fengchemove1”。双击该元件进入其中，将第25帧移动到第15帧，将第50帧移动到第30帧，并将31到50之间的多余帧删掉。,.4“制作预载动画”案例,二、操作步骤,选择“发光”效果，模糊X和模糊Y设为17，颜色为“白色”，并将“挖空”前面的复选框选中如图：,.4“制作预载动画”案例,二、操作步骤,在分别设置其它风车的效果，如下图：,.4“制作预载动画”案例,二、操作步骤,3添加动作脚本,（1）新建一个“as”图层，选中第1帧，在其“动作”面板中输入脚本如图。,.4“制作预载动画”案例,二、操作步骤,测试影片并保存文件,.4“制作预载动画”案例,三 、技能要点,动态文本变量的设置,2.,为元件实例命名、绝对路径和相对路径的使用,其中在库中看到是元件的“元件名”，而要在,AS,脚本中调用（或定位）此元件，则一般使用其“实例名”，实例名要在“属性”面板中进行设置。,路径分两种：绝对路径和相对路径,。,绝对路径：,是从主场景即“,_root”,开始一层一层找到实例为止的路径（每层之间用“,.”,连接）；,相对路径：,是从当前影片剪辑开始的路径。,.4“制作预载动画”案例,三 、技能要点,例如：,在主场景舞台上有一个实例名称为wj的影片剪辑，在wj实例中还包含一个子影片剪辑wj1,在wj1实例中还包含一个孙影片剪辑实例wj2。,对wj2使用play();命令，应该使用如下动作脚本：,_root.wj.wj1.wj2.play();,对wj使用stop();命令，应该用如下脚本：,_();,“_parent”,用来引用嵌套在当前影片剪辑中的影片剪辑，可以使用_parent来创建一个,相对路径,。,例如：若一个影片剪辑“flower”嵌套在影片剪辑“flowermove”中，那么在影片剪辑“flower”里添加_();语句表明让影片剪辑“flowermove”开如播放。如果当前在“flowermove”中要让其播放，也可以使用();,表示对其本身进行播放。,.4“制作预载动画”案例,三 、技能要点,3. 预载函数的使用,本案例中用到了几个预载函数，其格式和含义如下：,getBytesTotal();,/读取主时间轴存在的所有元素的总字节数。,getBytesLoaded();,/读取主时间轴存在的所有元素已加载的字节数。,getTimer();,/获取从电影开始播放到现在的总播放时间(毫秒数)。,();,/它的作用是把数值四舍五入。,4. 滤镜的使用,滤镜包含投影、模糊、发光、斜角、渐变发光、渐变斜角和调整颜色七种方式。,.4“制作预载动画”案例,四 、练习,1、请自己设计一个loading动画效果。,2、给影片剪辑实例添加脚本时需要注意什么？,.4“制作预载动画”案例,本节内容,案例效果,操作步骤,技能要点,练习,.“制作花瓣动画”案例,一、案例效果,重点与难点：,了解循环结构for语句的使用、鼠标控制方法和影片剪辑的事件处理器的使用方法。,.“制作花瓣动画”案例,二、操作步骤,1新建文档并命名,启动AdobeFlashCS3后，从“常规”对话框中选择Flash文件（），新建一个文档，设置文档大小为550400像素，背景颜色为白色。将新文档保存，命名为“花瓣动画”。,2,导入背景图片,将对应素材库中的“背景.jpg”导入到舞台并设置适当的大小。,.“制作花瓣动画”案例,二、操作步骤,、制作所需的元件,（）制作“花瓣“图形元件。绘制步骤如图：,（）制作”h1“影片剪辑元件,拉入”花瓣“元件到舞台，并设置不同的颜色和动画效果，使花旋转10次。,.“制作花瓣动画”案例,二、操作步骤,（）新建图层2，选中第20帧，按F6键插入关键帧，将帧选中点鼠标右键选择“动作”，在“动作”面板中输入：,toAndPlay(1);,（）新建“影片剪辑”元件，命名为“h0”，将“库”面板中的“花瓣”拖入舞台。,（）新建“按钮”元件，命名为“按钮”，将“库”面板中的“背景”图片拖入舞台。,4布置主场景,（）场景中时间轴如图：,.“制作花瓣动画”案例,二、操作步骤,（）在”h1”图层中，,将“库”面板中的“h1”拖入舞台，并将实例名称改为“h1”.,（3）在”h0”图层中，将“库”面板中的“h0”拖入舞台，并将实例名称改为“hua0”.,5.定义动作脚本,（1）在“as”图层中第帧输入如下脚本：,.“制作花瓣动画”案例,二、操作步骤,（）在第帧中输入如下脚本：,.“制作花瓣动画”案例,二、操作步骤,（）确定“背景”图层第1帧处舞台的按钮文件被选中，在其上点击鼠标右键选择“动作”，在其“动作”面板上添加脚本如图,（）确定“背景”图层第3帧处舞台的按钮文件被选中，在其上点击鼠标右键选择“动作”，在其“动作”面板上添加脚本如图：,.“制作花瓣动画”案例,二、操作步骤,（）确定“h0”图层第3帧处舞台的影片剪辑“hua0”被选中，在其上点击鼠标右键选择“动作”，在其“动作”面板上添加脚本如图,测试影片并保存文件,.“制作花瓣动画”案例,三 、技能要点,1. 循环结构for的使用,其基本结构如下：,for(初始值；循环条件；循环值变化方式）,循环条件为真时执行语句,2. 鼠标控制方法,（）和（）,它们的用法非常简单，就是使鼠标隐藏和鼠标显示，括号中没有任何参数。,3. 影片剪辑的事件处理器的使用,必须先为其添加,onClipEvent,事件处理函数。,onClipEvent,的语法格式如下：,onClipEvent,（系统事件）,此处是语句，用来响应事件,.“制作花瓣动画”案例,三 、技能要点,Flash,中的系统事件包括以下几种：,Load：载入影片剪辑，执行大括号中的内容。,unload：在时间轴中删除影片剪辑实例之后，执行大括号中的内容。,enterFrame：只要影片剪辑在播放，便会不断地执行大括号中的内容。,mouseMove：每次移动鼠标时执行动作。,mouseDown：每次按下鼠标左键时执行动作。,mouseUp：当释放鼠标时执行动作。,KeyDown：当按下某个键时执行动作。,KeyUp：当释放某个键时执行动作。,.“制作花瓣动画”案例,四 、练习,1、试着做一个满天星星的动画，星星可以跟随鼠标运动，天上的星星数为40颗，分布的坐标范围为横坐标（0，550），纵坐标为（0，400），星星的大小和透明度不变。,.“制作花瓣动画”案例,本节内容,案例效果,操作步骤,技能要点,练习,.6“制作拼图游戏”案例,一、案例效果,重点与难点：,图片的切割、对按钮拖放操作的设置、对拖放对象目标位置的判断方法，以及条件语句if的应用。,.6“制作拼图游戏”案例,二、操作步骤,1新建文档并命名,启动AdobeFlashCS3后，从“常规”对话框中选择Flash文件（），新建一个文档，设置文档大小为550400像素，背景颜色为”#ff9900”。将新文档保存，命名为“拼图游戏”。,2,导入背景图片,将,“图层1”重命名为“背景”，导入图片“黄山雪景.jpg”至舞台,.6“制作拼图游戏”案例,二、操作步骤,、分割图片,（1）执行【视图】【网格】【显示网格】命令，在舞台上显示出网格，再执行【视图】【贴紧】【贴紧至网格】命令。,（）用”矩形工具”,沿网格绘制出一个包含912个小格的矩形；选取【线条工具】，沿网格将矩形分成33的网格；,效果如图:,.6“制作拼图游戏”案例,二、操作步骤,（3）使用【选择工具】选中全部9个矩形网络，按Ctrl+G组合网格。,（4）单击“背景”图层的第1帧，选中图片和网格，打开对齐面板，使“相对于舞台按钮”处于未被按下的状态，单击“水平中齐”和“垂直中齐”，再单击“匹配高度”和“匹配宽度”，适当调整图片和网格的位置，如图:,.6“制作拼图游戏”案例,二、操作步骤,（5）单击“背景”层的第1帧，保证图片和网格都被选中，按Ctrl+B组合键两次，将图形和网格分离。,4、制作小图片元件,先将切割出来的小块图片转换为图形元件，再转换为按钮元件，最后再转换为影片剪辑元件。,图形元件分别起名为：p1p9,按钮元件分别起名为：b1b9,影片剪辑元件分别起名为：m1m9,.6“制作拼图游戏”案例,二、操作步骤,5制作礼花元件,简单步骤如下：,“hua”的图形元件,move1影片剪辑元件,move2影片剪辑元件 lihua影片剪辑元件,.6“制作拼图游戏”案例,二、操作步骤,6制作按扭,（1）执行【窗口】【公用库】【按钮】命令打开“公用库”面板，找到“buttonstube”中的“tubepurple”按钮，将它拖动到库中。双击“库”中的该按钮，进入按钮的编辑窗口，找到“text”图层，将文字改为“提示”，设置自己喜欢的字体和颜色。,（2）在“库”面板中右键单击按钮“tubepurple”，点击“直接复制”命令，在打开的“直接复制”对话框的名称栏输入按钮的名称“tubepurple1”，进入“tubepurple1”的编辑窗口，将其文字改为“再来一次”。,.6“制作拼图游戏”案例,二、操作步骤,7主场景动画制作,（1）将网格图形与影片剪辑实例分离。单击图层的第1帧，选中该帧的所有对象，按住“Shift键”分别单击实例m1，m2，m3，m4，m5，m6，m7，m8，m9，取消对它们的选择，只选中图片下的网格，按Ctrl+X剪切网格。新建一个图层，命名为“网格”，执行【编辑】【粘贴到当前位置】命令，把网格粘贴到该图层的第1帧原来的位置。,（2）设置实例名称并交换元件。在“背景”图层中，选中“m1”影片剪辑，打开属性面板，单击“交换”按钮，在“交换元件”对话框中选择“p1”，单击确定按钮，把实例“m1”交换成“p1”，在“属性”面板中将实例命名为“d1”，,.6“制作拼图游戏”案例,二、操作步骤,（3）重复步骤（2），将场景中的m2，m3，m4，m5，m6，m7，m8，m9实例分别命名为d2，d3，d4，d5，d6，d7，d8，d9，并分别交换成元件p2，p3，p4，p5，p6，p7，p8，p9。,（4）设置实例的属性。按Shift键+单击，选中场景中实例d1，d2，d3，d4，d5，d6，d7，d8，d9，打开“属性”面板，在“颜色”下拉列表中选择“色调”，设置“颜色”为白色，数量为100，,（5）输入提示文本。选中背景图层，使用【文本工具】在图片下方输入提示文本：“请将右侧图片拖至左侧网格内拼成黄山雪景图”，字体、颜色、大小根据自己爱好调整。,.6“制作拼图游戏”案例,二、操作步骤,（6）新建“图块”图层，拖入影片剪辑元件。将库面板的元件m1，m2，m3，m4，m5，m6，m7，m8，m9拖入场景中，排列如图所示。图片的排列尽量放乱些。,（7）新建图层，命名为“提示图形”。将“库”面板的“黄山雪景”拖入舞台，按F8键将图片转换为影片剪辑。调整到如图所示的位置和大小，并在“属性”面板将它命名为“mc”。,（8）添加“提示”按钮。将“库”面板的“tube purple”按钮添加到“图块”层的第1帧，位置如图所示。选中该按钮，点打开“动作按钮”面板，输入如下代码：,.6“制作拼图游戏”案例,二、操作步骤,新建图层，命名为“动作”，在第1帧输入如图所示的代码,.6“制作拼图游戏”案例,二、操作步骤,设置按钮实例“b1”的动作脚本,.6“制作拼图游戏”案例,二、操作步骤,设置其它按钮实例的动作脚本：回到主场景1，接着双击“m2”,选中里面的“b2”按钮实例，打开“动作按钮”面板，输入如图,.6“制作拼图游戏”案例,二、操作步骤,8创建成功的画面,（1）在“背景”图层的第2帧插入关键帧，选中该帧上的实例p1，p2，p3，p4，p5，p6，p7，p8，p9，打开属性面板，设置“颜色”为“无”，即。使图像显示出来。,（2）选取【文本工具】，输入拼图成功的文字信息“Youaresuccessfully！”。,（3）在“网格”层的上方新建图层，命名为“烟花”，在第2帧插入关键帧，从“库”面板中拖入“lihua”元件。,（4）删除“提示”按钮“tube purple”，从“库”面板中拖入“再来一次”按钮“tube purple1”，并打开“动作按钮”面板，给按钮输入如下的动作脚本：,on(press) /单击按钮，则返回第1帧执行动画。,gotoAndPlay(1);,（5）在“网格”图层的第二帧按F5键插入扩展帧。,9.测试保存影片。,.6“制作拼图游戏”案例,三 、技能要点,控制影片剪辑拖放函数的使用,（1）startDrag函数,格式：startdrag(实例名,true/false，左，上，右，下);,（2）stopDrag函数,格式：stopDrag（）；,作用：停止当前的拖动操作。,（3）_droptarget属性,属性（只读）；以斜杠语法记号表示返回指定影片剪辑放置到的影片剪辑实例的绝对路径。,.6“制作拼图游戏”案例,四 、练习,1、模仿实例制作一个包含16块小图片的拼图游戏动画。,.6“制作拼图游戏”案例,本节内容,案例效果,操作步骤,技能要点,练习,.7“制作网站导航”案例,一、案例效果,重点与难点：,getURL浏览器网络函数的使用、按钮和影片剪辑之间的嵌套调用。,.7“制作网站导航”案例,二、操作步骤,1新建文档并命名,启动AdobeFlashCS3后，从“常规”对话框中选择Flash文件（），新建一个文档，设置文档大小为60040像素，背景颜色为”黑色”。将新文档保存，命名为“网站导航”。,2,创建元件,(1)创建一个名为”blue”的图形元件.效果如图:,.7“制作网站导航”案例,二、操作步骤,(2)利用刚才做的”blue”元件,制作如下的”red” “shenlan”、“yellow”、“green”、“fen”图形元件.,.7“制作网站导航”案例,二、操作步骤,（3）新建一个“bluemove”的影片剪辑元件,将“blue”图形元件拖入舞台上，在第35帧插入关键帧，接着在第1帧到35帧之间创建动画补间，旋转为“逆时针”、“3”次。,再利用相同的方法分别创建其它五个影片剪辑元件：“redmove”、“shenlanmove”、“yellowmove”、“greenmove”、“fenmove”。,.7“制作网站导航”案例,二、操作步骤,(4) 新建一个名称为“bluebtn”的按钮元件,在“弹起”帧上将库中的“blue”图形元件拖入舞台上，选择【窗口】【对齐】命令，调出“对齐”面板，在确认右侧的“相对于舞台”按钮被选中的状态下，单击“水平中齐”和“垂直中齐”。然后，在“按下”帧插入关键帧，在“指针经过”帧上插入空白关键帧，并将库中的“bluemove”影片剪辑拖入该帧的舞台上，并设置其“水平中齐”和“垂直中齐”。这样鼠标移到立方体上时，立方体就不会错位了。,仿照上面的方法，制作“redbtn”、“shenlanbtn”、“yellowbtn”、“greenbtn”和“fenbtn”按钮元件。,.7“制作网站导航”案例,二、操作步骤,2动画制作及添加代码,（1）回到主场景，双击第一层的名字，改为“red”。在第1帧中，将“redbtn”按钮元件拖到舞台外面左侧，在第11帧插入关键帧，将“redbtn”按钮元件移动到舞台右侧三分之一处，如图,.7“制作网站导航”案例,二、操作步骤,(2)在第1帧和11帧之间创建动画补间。双击第11帧上的“redbtn”，进入到该元件中，选中“指针经过”帧，双击“redmove”影片剪辑，进入此元件中，新建一个图层，在第2帧插入关键帧，选择【直线工具】，设置“属性”面板，将“笔触颜色”设为“红色”，“笔触高度”设为“7”，笔触样式设为“点状线”，在立方体右侧垂直中齐处画一条短线；在第4帧插入关键帧，再将直线延续向右画一段；在第6帧插入关键帧，再将直线延续向右画一段；在第8帧插入关键帧，再将直线延续向右画一段，选择【文本工具】，设置“属性”面板中字体为黑体，字号为50号。在已画好的点状线的右侧输入“课堂信息”.效果如图:,.7“制作网站导航”案例,二、操作步骤,第13、15、17帧“yellowbtn”的位置,分别创建“fenbtn”、“lanbtn”、“greenbtn”、“shenlanbtn”按钮元件在主场景中的动画和“fenmove”、“lanmove”、“greenmove”、“shenlanmove”影片剪辑中的导航功能名,.7“制作网站导航”案例,二、操作步骤,六个按钮元件及连接线的动画帧效果,.7“制作网站导航”案例,二、操作步骤,给“red”层的“redbtn”按钮元件添加的动作脚本，如图,给“yellow”层的“yellowbtn”按钮元件添加的动作脚本如图,.7“制作网站导航”案例,二、操作步骤,“fen”层的“fenbtn”按钮元件添加的动作脚本如图 :,给“lan”层的“lanbtn”按钮元件添加的动作脚本如图,.7“制作网站导航”案例,二、操作步骤,给“green”层的“greenbtn”按钮元件添加的动作脚本如图,给“shenlan”层的“shenlanbtn”按钮元件添加的动作脚本如图,3. 测试并保存文件.,.7“制作网站导航”案例,三 、技能要点,1. getURL浏览器网络函数的使用,该函数的功能是为按钮或其它事件添加网页网址。若要使用绝对URL（例如， :/）测试此函数，请确保网络连接。,格式：getURL(“网址”)；,.7“制作网站导航”案例,四 、练习,1、getURL浏览器网络函数有几个参数，各参数的含义是什么？,2、自已设计一个网页导航。,.7“制作网站导航”案例,本章主要介绍了使用Actionscript脚本制作交互动画的技巧，制作的交互动画包括：课件、游戏、网站导航及下雪、花瓣特效动画等。需要注意的是绝对路径和相对路径的概念，以便为对象设置脚本。掌握Flash中常用内置函数的使用，如时间轴控制函数和影片剪辑控制函数。了解为按钮和影片剪辑实例添加动作脚本的方法。,本章小结,
展开阅读全文