第6章 Flash动作脚本基础.ppt

任务16 鼠标经过 第六章 Flash动画脚本基础教学目标：掌握动画脚本的基本格式及简单使用教学难点：按钮及影片剪辑的代码添加制作步骤：1、本例要编写动作脚本，因此新建文件时，点选Flash文件（ActionScript2.0）文件格式 2、执行“文件导入导入到舞台”命令。将素材图片导入到舞台上，并将图层命名为“图片”。3、需对导入的图片进行调整。首先置于舞台中心，并将它的尺寸进行调整。刚刚导入的图片尺寸大小为400*280象素，相当标准，并且也符合下面的制作要求。4、执行“视图网格显示网格”命令后，再执行“编辑网格”。将网格的高和宽都设置为20个象素，并勾选“贴紧至网格”选项。5、选中刚刚导入至舞台的图片，展开【属性】面板，调出图片属性。对图片位置进行再设置，横坐标为80像素，纵坐标为60像素。6、执行“插入新建元件”命令。选择“图形”选项，此时给新建元件命名为“白色正方形”。点击“确定”按钮后便进入到“图形”元件的编辑界面。7、由于要绘制“白色”图形，为便于操作，将屏幕背景颜色改为其它颜色。在屏幕中心绘制一个白色正方形，大小为40*40像素。8、执行“插入新建元件”命令，元件类型设置为”按钮”，名称为“透明按钮”9、点击“确定”按钮后进入到按钮的编辑界面。在“点击”帧下插入空白帧后，从库中将“白色正方形”图形元件拖至屏幕中心。注意：一定要将“白色正方形”图形元件放置在屏幕中心，若有偏离，可利用【对齐】面板将其置于屏幕中心。10、执行“插入新建元件”命令，元件类型设置为影片剪辑，名称为“变透明的控制”。11、将“透明按钮”元件由库中拖置屏幕中心，并将此图层命名为“透明按钮”。12、新建一个图层，命名为“白正方形”，并将其移至“透明按钮”图层下方。13、从库中将“白色正方形”图形元件拖至刚刚新建的“白正方形”图层中，并移至屏幕中心。在第30帧处插入关键帧。14、选中第30帧处的“白色正方形”图形元件，展开“属性”面板，将其透明度设置为“0”。15、在“白正方形”图层的第1帧至第30帧之间创建补间动画。此时播放动画，会看到白色正方形由有到无变成透明的过程。16、至此，本例的动画元素创建完成。即为“变透明的控制”影片剪辑的图层结构。17、接下来该添加动作脚本了，以实现鼠标滑过后呈现出白色正方形变透明的动画效果。首先选中“白正方形”图层的第1帧，并打开【动作】面板。18、在“全局函数时间轴控制”命令组中找到stop（）函数并双击，给第1帧添加了停止命令。19、在“透明按钮”图层中，选中“透明按钮”元件实例。打开【动作】面板，为按钮添加动作脚本。20、在“全局函数影片剪辑控制”命令组中找到on（）函数并双击，在按钮响应事件中选择rollOver(鼠标滑入)事件。将光标插入点移至大括号内，在“全局函数时间轴控制”命令组中找到gotoAndPlay（）函数并双击，参数设为2。表示当鼠标滑入按钮感应区内时，打破第1帧设置的停止状态，跳转至第2帧进行动画的播放。这样就实现了当鼠标滑过白色正方形后，白色正方形变透明的动态效果了。21、关闭“动作”面板，点击时间轴下方的“场景1”处，即可回到场景1（主时间轴）。22、将“图片”图层锁定并在其上方新建一图层，命名为“MC”。由库中将“变透明的控制”影片剪辑元件拖至MC层上，并对其进行复制，边复制边摆放。将它们覆盖在图片上，放置好后再把舞台背景色改为白色。23、至此，完成了本例的介绍。存盘后，Ctrl+ENTER发布，在Flash Player窗口中，滑动鼠标即可看到动态效果了。任务17 光影变换 1、执行“插入新建元件”命令，元件类型设置为图形，名称为“彩条”。2、点击“确定”按钮后，进入图形元件编辑区。绘制一个细长的矩形，颜色填充为彩虹色，并置于屏幕中心。3、执行“插入新建元件”命令，元件类型设置为影片剪辑，名称为“彩条动画”。点击“确定”按钮便进入影片剪辑编辑区。4、从库中将“彩条”图形元件拖至舞台，打开“对齐”面板，依次点击“相对于舞台”按钮、“垂直中齐”按钮、“水平中齐”按钮，使“彩条”图形元件实例在舞台居中。5、在第10帧插入关键帧，将“彩条”图形元件实例顺时针旋转90度；并在“对齐”面板中点选“相对于舞台”按钮、“底对齐”按钮，使“彩条”的底端位于舞台中心。6、在第1帧到第10帧之间创建补间动画，使“彩条”由横着变成竖着。7、在第20帧插入关键帧，将“彩条”再次顺时针旋转90度，并使其舞台居中。8、在第10帧到第20帧之间创建补间动画，使“彩条”由竖着再变成横着。9、在第30帧处插入关键帧，将“彩条”第三次顺时针旋转90度，打开“对齐”面板，使“彩条”的高端对齐于舞台中心，即点击“上对齐”按钮。10、在第20帧到第30帧之间创建补间动画，使“彩条”由横着顺时针向下旋转至垂直。11、在第40帧处插入关键帧，将“彩条”最后一次顺时针旋转90度，并使其舞台居中。12、在第30帧到第40帧之间创建补间动画，使“彩条”旋转至初始位置。13、为了最终的效果更加自然流畅，将第一帧和最后一帧中“彩条”透明度设置为零。至此，影片剪辑创建完成了，点击时间轴下方的“场景1”处即可退回到场景1（主时间轴）。14、将刚刚制作好的影片剪辑由库中拖至舞台中心，打开“属性”面板，给它命名为“line0”。15、选择第1帧，打开“动作”面板，输入动作脚本。16、至此本例完成，可将舞台背景颜色设置为黑色，这样发布后的效果会更好些。若对“彩条动画”影片剪辑内的动画效果进行修改，或对动作脚本内的参数进行调整，就会看到各种各样的动态效果。重点：setProperty();do while();duplicateMovieClip()的使用。