Flash动画设计基础与应用 教案 第10讲 使用函数控制Flash动画.doc

第10讲使用函数控制Flash动画一、教学目的1、掌握Flash编程的基础知识2、了解常用的媒体控制命令3、学会制作Loading动画4、熟悉Flash编程环境，能够利用本讲知识制作一些简单的实例，为以后Flash编程设计打下基础。二、知识点了解Flash编程的环境。了解常用的媒体控制命令。学会制作Loading动画三、教学过程1、动作面板择【窗口】【动作】命令或者按下F9键，即可打开【动作】面板。2、常用的媒体控制命令play和stop命令跳转命令goto场景帧跳转命令stopAllSounds命令3、超连接命令getURL4、Loading的制作四、案例分析【案例一】美丽指针第1步：创建指针 打开“素材ch10美丽的指针.fla”影片源文件。连续两次单击【插入图层】按钮在时间轴中添加两个新图层，然后将3个图层分别命名为“b”“s”和“Act”如图10-59所示。图10-59 插入图层 在图层【b】的第一帧处单击并将图形元件【2008.jpg】从【库】面板中拖曳到舞台中，然后使用【属性】面板或者【信息】面板对实例的大小和位置进行调整，使其恰好覆盖整个舞台。如图10-60所示。图10-60拖入元件并调整其位置和大小 将图层【b】锁定并在图层【s】的第一帧处单击，将影片剪辑元件【鼠标】从【库】面板中拖曳到舞台中，然后在【属性】面板中的【实例名称】文本框将其命名为“tsb”。如图10-61所示。图10-61【属性】面板 在图层【Act】的第一帧处单击并按下F9键打开【动作】面板，在脚本动作编辑区域中输入以下代码：startDrag（“_root.tsb”,true,10,10,540,390）;如图10-62所示。图10-62【动作】面板 按下Ctrl+Enter组合键打开预览窗口对影片进行预览，此时元件实例【鼠标】就会随着系统默认鼠标指针的移动而移动。如图10-63所示。图10-63预览窗口 在ActionScript中允许使用hide命令将系统默认的鼠标指针隐藏。打开【动作】面板，在上面的语句的后面添加一行代码：Mouse.hide();如图10-64所示。图10-64【动作】面板 再次按Ctrl+Enter组合键打开预览窗口对影片进行预览，此时系统将默认鼠标指针移动至影片预览窗口中，鼠标指针就会自动隐藏消失，取而代之的是原先舞台中的元件实例【鼠标】，看上去就像是一个形状很特别的指针一样。如图10-65所示。图10-65预览窗口第2步：为指针添加动作 选中图层【b】，单击时间轴上的【插入图层】按钮在上方添加一个新图层并将其重命名为“car”，然后分别在图层【b】和图层【s】的第50帧处单击并按下F5键插入帧。如图10-66所示。图10-66添加一个新图层 将图层【s】和图层【Act】都锁定，然后在图层【car】的第1帧处单击，将图形元件【car】从【库】面板中拖曳到舞台中。对元件实例【car】的大小和位置进行调整，然后在图层【car】的第50帧处单击并按下F6键插入关键帧。如图10-67所示。图10-67插入关键帧 将第50帧中的元件实例【car】拖放到舞台的右侧，然后在第一帧到第49帧之间的任意一帧上单击鼠标右键，在弹出的快捷菜单中选择【创建补间动画】命令。如图10-68所示。图10-68【创建补间动画】 按下Ctrl+F3组合键打开【属性】面板，将【缓动】文本框的数值更改为“-60”。 如图10-69所示。图10-69【属性】面板 将图层【car】锁定并将图层【Act】解锁，然后选择【窗口】【公用库】【按钮】命令，打开【库-按钮.fla】面板。如图10-70所示。图10-70【库-按钮.fla】面板 在【库-按钮.fla】面板中任意一个元件夹上单击鼠标右键，在弹出的快捷菜单中选择【展开所有文件夹】命令。任意选择一个按钮元件，然后在图层【act】的第1帧处单击并将该按钮元件从面板中拖曳到舞台中。并对按钮元件的大小和位置进行调整。如图10-71所示。图10-71预览窗口 在图层【act】的第1帧上单击并按下F9键打开【动作】面板，在已经添加的代码的后面添加一个控制命令。stop（）；选中舞台中的按钮元件实例并按下F9键打开【动作】面板，在动作脚本编辑窗口中输入以下代码：on（realease）play（）；如图10-72所示。图10-72【动作】面板 将图层【Act】拖放到图层【s】的下方。如图10-73所示。图10-73调整图层顺序 正常情况下，添加在图层【Act】第1帧的stop命令会使动画停止在该帧，而单击【Enter】按钮之后动画将会继续向后播放。按下Ctrl+Enter组合键打开预览窗口对动画进行预览。如图10-74所示。图10-74预览窗口使用“鼠标指针”单击舞台中的【Enter】按钮，可以发现影片跳转到第2帧继续播放后面的动画内容，这证明新的“鼠标指针”同样具备有系统默认指针的功能。如图10-75所示。图10-75预览窗口【案例二】七彩风车第1步：制作风车轮廓 新建Flash文档并将其命名为“七彩风车”，单击按钮打开【文档属性】对话框，将舞台【尺寸】设置为“550px×455px”,在【背景颜色】下拉框中选择一个合适的舞台背景颜色。如图10-76所示。图10-76【背景颜色】下拉框 单击按钮关闭对话框。按下Ctrl+F8组合键打开【创建新元件】对话框，在【名称】文本框中输入“mfc”作为元件名称，然后选中【影片剪辑】单选按钮。如图10-77所示。图10-77【创建新元件】对话框 单击 按钮进入影片剪辑编辑窗口，单击工具箱中的【文本】工具 ，在工作区中绘制一个狭长的倒立三角形。如图10-78所示。图10-78绘制一个狭长的倒立三角形 单击工具箱中的【颜料桶】工具 并按下shift+F9组合键打开【颜色】面板，在【类型】下拉表中选择【线性】选项。如图10-79所示。图10-79【颜色】面板 在渐变色控制带的中间位置单击，增加一个渐变指针，然后将左端的渐变指针的RGB值设置为“200，8，0”； 将中间的渐变指针的RGB值设置为“201，155，55”；将右端的渐变指针的RGB值设置为“101，0，1”，创建一个渐变颜色。如图10-80所示。图10-80设置渐变色条 使用【颜料桶】工具对工作区中的三角形区域进行颜色填充。然后单击工具箱中的【选择】工具 ，在三角形的一条边上双击将三角形边线全选并按下【DEL】键将其删除。如图10-81所示。图10-81颜色填充 使用【缩放】工具将工作区中的对象缩小到合适的尺寸，使用【选择】工具适当调整该对象的位置，然后在时间轴的第15帧处单击并按下F6键插入关键帧。如图10-82所示。图10-82插入关键帧 单击时间轴上的【绘图外观】按钮启用绘图外观功能，调整第15帧处的工作区中的对象位置，使其向下移动一段距离。（注意，移动对象位置的时候要垂直向下移动，移动的距离大约使对象高度的1.5倍左右即可。）如图10-83所示。图10-83【绘图外观】按钮 关闭【绘图纸外观】功能。使用【选择】工具将第15帧处的对象全部选中，然后在【填充色】下拉列表中选择一种合适的颜色。如图10-84所示。图10-84【填充色】下拉列表第2步：创建动画 在第1帧到14帧之间的任意一帧上单击并打开【属性】面板，在【补间】下拉列表中选择【形状】选项，然后在【缓动】文本中输入“-6”。 如图10-85所示。图10-85【属性】面板 按下Ctrl+E组合键返回到主场景中，按下Ctrl+L组合键打开【库】面板，将影片剪辑元件【mfc】从【库】面板中拖曳到舞台中。如图10-86所示。图10-86拖曳元件到舞台 选中舞台中的影片剪辑元件实例并打开【属性】面板，在【实例名称】文本框中输入“mc”作为元件实例的名称。如图10-87所示。图10-87【属性】面板 在【图层1】的第三帧处单击并按下F5键插入帧，然后单击时间轴面板中的【插入图层】按钮添加一个新图层。如图10-88所示。图10-88添加一个新图层 在【图层2】的第1帧上单击并按下F9键打开【动作】面板，在动作脚本编辑窗口中输入以下代码（该代码的作用是使影片剪辑元件实例【mfc】能够跟随鼠标指针的移动而移动）；startDRag（“mfc”，ture）；i=1；如图10-89所示。图10-89 编辑脚本 在【图层2】中的第2帧处单击并按下F6键插入关键帧，然后在动作脚本编辑窗口中输入以下代码：startDRag（“mfc”，ture）；如图10-90所示。图10-90编辑脚本 在【图层2】的第3帧处单击并按下F6键插入关键帧，然后在动作脚本编辑窗口中输入以下代码：if (Number(i>360) i=1; i+;mfc.duplicateMovieClip("mfc"+i,i);setProperty("mfc"+i,_rotation,i);i+=5gotoAndPlay(2);如图10-91所示。图10-91编辑脚本 现在按下Ctrl+Enter组合键，欣赏一下这个通过简单的操作步骤和代码所实现的七彩风车效果吧。如图10-93所示。图10-93预览窗口五、重点难点及解决方案重点难点- Loading制作 在【文本类型】下拉列表中选择【动态文本】选项，在文本块“已下载：”右侧拖拽出一个动态文本框，然后在【属性】面板的【变量】文本框中输入“xia”作为动态文本的变量名。如图10-54所示。图10-54【属性】面板 单击时间轴上的【插入图层】按钮添加一个新图层并命名为“Actions”，按下F9键打开【动作】面板，然后在动作脚本编辑窗口中输入以下代码：a=getBytesLoaded（）；b=getBytesTotal（）；loaded=int（a/b*100）；loader.gotoAndplay；如图10-55所示。图10-55动作面板 在该图层的第2帧出单击并按下F6键插入关键帧，然后在脚本动作编辑窗口中输入以下代码：if （a=b） gotoAndplay（“场景 1”，1）； else xia= loaded+“%”；gotoAndplay（1）；六、讨论课题课后上机操作题根据本讲所学知识，制作一个交互动画，单击按钮停止，单击按钮继续运行。如下图所示。七、小结本讲主要讲解了ActionScript概述、Flash的编程环境、常用的媒体控制命令、超链接命令getURL、Loading的制作等知识点。掌握这些知识点对于运用函数来控制动画有很大的帮助。不仅需要学员记忆，还需要动手实践，从最简单的动画控制按钮做起，才能使学员们学好Flash编程。