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