第一部分实验指导书-1-教育传播技术学院教育技术专业《Flash基本操作及简单动画制作》实验教学指导书一、实验目的1.了解Flash的基本界面组成及特点。2.掌握Flash的基本操作。3.掌握Flash四类基本动画。4.学会制作简易Flash课件。二、实验内容1.制作简易Flash课件。2.制作简易电子相册。三、实验仪器、设备多媒体计算机,FlashCS4。四、实验原理任务驱动法,Flash的基本操作,应用Flash设计制作电子相册、简单的Flash课件。五、实验步骤(一)制作简易Flash课件1.新建一个flash(ActionScript2.0)文档,并设置文档大小为800*600。2.选择“文件|导入|导入到库”,将“课件背景.jpg”导入到当前库。3.创建课件背景:从库中拖动“课件背景.jpg”到舞台,使其与舞台边界对齐。选中图层1,单击鼠标右键,在弹出的快捷菜单中选择“属性”,通过图图1创建课件背景图层图2制作按钮元件第一部分实验指导书-2-教育传播技术学院教育技术专业层属性对话框,修改图层1名称为“背景”。单击背景图层,在60帧处按F5,插入普通帧,锁定背景图层。如图1所示。4.制作按钮元件:选择“插入|新建元件”,新建“第一章”按钮元件,并进入按钮元件编辑窗口。1)单击“弹起”帧,使用文本工具创建文本“第一章”,并调整文本的大小及颜色。2)选择“弹起”帧,单击鼠标右键,在弹出的快捷菜单中选择“复制帧”,再分别在“指针经过”、“按下”帧上粘贴。将“指针经过”、“按下”两帧对应的文本修改成不同的颜色。3)单击“点击”帧,按F7插入空白关键帧。选择工具箱中的“矩形工具”,在舞台中央绘制一矩形,大小刚好覆盖文本框即可。最终“第一章”按钮元件制作效果如图2所示。5.重复第4步,分别制作出“第二章”,“第三章”,“第四章”按钮元件。6.回到场景1编辑状态,新建“按钮”图层,将制作好的按钮元件分别拖动到课件背景放置按钮的位置,并使用工具箱中的“自由变换工具”,调整按钮元件大小,使文字按钮的大小刚好与背景中按钮大小适合,如图3所示。7.新建“第一章”图层,在第10帧处插入空白关键帧。选择工具箱中的文本工具,在舞台上输入第一章文本内容,并调整文本的大小及颜色。选择第19帧插入空白关键帧,此时舞台效果如图4所示。8.新建“第二章”图层,在第20帧处插入空白关键帧。选择工具箱中的文图3创建按钮图层图4创建“第一章”文本演示内容第一部分实验指导书-3-教育传播技术学院教育技术专业本工具,在舞台上输入第二章文本内容,并调整文本的大小及颜色。选择第29帧插入空白关键帧。此时舞台效果如图5所示9.新建“第三章”图层,在第30帧处插入空白关键帧。选择工具箱中的文本工具,在舞台上输入第三章文本内容,并调整文本的大小及颜色。选择第39帧插入空白关键帧。此时舞台效果如图6所示。图5创建第二章文本演示内容图6创建第三章文本演示内容第一部分实验指导书-4-教育传播技术学院教育技术专业10.新建“第四章”图层,在第40帧处插入空白关键帧。选择工具箱中的文本工具,在舞台上输入第四章文本内容,并调整文本的大小及颜色。此时舞台效果如图7所示。11.新建“脚本图层”,单击第1帧,打开动作面板,为第1帧添加动作脚本stop();如图8所示。图7创建第四章文本演示内容第一部分实验指导书-5-教育传播技术学院教育技术专业12.选择“按钮”图层,单击“第一章”按钮实例,打开动作面板,添加脚本:on(press){gotoAndStop(10);}13.选择“按钮”图层,单击“第二章”按钮实例,打开动作面板,添加脚本:on(press){gotoAndStop(20);}14.选择“按钮”图层,单击“第三章”按钮实例,打开动作面板,添加脚本:on(press){gotoAndStop(30);}15.选择“按钮”图层,单击“第四章”按钮实例,打开动作面板,添加脚本:on(press){gotoAndStop(40);}16.按“Ctrl+Enter”,测试影片。17.选择“文件|发布设置”命令,在弹出的发布设置对话框中,勾选Flash类型,并且修改保存的文件名字为“简易课件”,设定文件存储目录后,单击发布,如图9所示。图8添加脚本图层,并给第一帧添加动作第一部分实验指导书-6-教育传播技术学院教育技术专业(二)制作简易电子相册1.新建一个flash(ActionScript2.0)文档,并设置文档大小为1024*768。2.选择“文件|导入|导入到库”,将所需图片和声音素材导入到当前库。3.制作元件:1)在图库中选中图片t1,把它拖到场景中,按F8将它转换为图形元件t1,并将场景中t1元件的实例删除;2)重复1)分别将图库中的图片t2、t3、t4、t5、t6、t7、t8转换元件t2-t8,并将场景中的元件t2-t8的实例删除;3)在图库中找到“元件1”,用鼠标右键单击“元件1”,在快捷菜单执行“重命名”,将元件1的名称改为“蝴蝶”;4)执行“插入/新建元件”,创建一个图形元件“矩形”,在工具箱选择“矩形工具”,在画布上画一个矩形,设置其颜色为如图10所示;然后选中矩形,在属性面板中设置x,y坐标为(0,0),宽度、高度为800和600,效果如图11所示;图9发布简易课件第一部分实验指导书-7-教育传播技术学院教育技术专业图10矩形的颜色设置图11创建图形元件“矩形”5)执行“插入/新建元件”,创建一个图形元件“圆”,在工具箱选择“椭圆工具”,在画布上画一个圆,设置其填充颜色为任意颜色;然后选中圆,在属性面板中设置x,y坐标为(0,0),宽度、高度为50和50,效果如图12所示;第一部分实验指导书-8-教育传播技术学院教育技术专业图12创建图形元件“圆”6)执行“插入/新建元件”,创建一个影片剪辑“结束”,选中图层的第1帧,在工具箱选择“文本工具”,在画布上输入文本“谢谢欣赏”,设置其填充颜色为任意红色,字体为隶书,字的大小为160;然后选文本,在属性面板中设置x,y坐标为(0,0),效果如图13所示;图13创建文本“谢谢观赏”按F6在第50帧插入关键帧,将文本改为“再见”,并设置其坐标为(160,0),如图14所示;第一部分实验指导书-9-教育传播技术学院教育技术专业图14创建文本“再见”按ctrl+b,分别将两个关键帧的文本打碎,并在两个关键帧之间创建补间形状,然后,按F5将时间轴延长至60帧,如图15所示;图15创建补间形状4.制作相册图片的动画效果1)制作图片t1的动画效果:①新建一个影片剪辑元件,命名为pic1,将其“图层1”重命名为t1,在第1帧的位置从图库中将图形元件t1拖到舞台上,选中t1,在属性面板中设置其坐标为(0,0),宽度和高度分别为800和600;②按F6在第30帧、第40和第70帧分别插入关键帧,并在第1帧和第70帧将t1的宽度和高度分别为800和1,并在1-30帧和40-70帧之间创建传统补间;时间轴如图16所示;第一部分实验指导书-10-教育传播技术学院教育技术专业图16图片t1的动画效果的时间轴-1③新建一个图层,命名为AS,在第70上按F6插入关键帧,执行“窗口/动作”打开动作面板,输入代码如图17所示;图17AS层第70帧的代码设置④时间轴的最后效果如图18所示;第一部分实验指导书-11-教育传播技术学院教育技术专业图18图片t1的动画效果的时间轴-22)制作图片t2的动画效果:①新建一个影片剪辑元件,命名为pic2,将其“图层1”重命名为t2,在第1帧的位置从图库中将图形元件t2拖到舞台上,选中t2实例,在属性面板中设置其坐标为(0,0),宽度和高度分别为800和600;②按F6在第30帧、第40和第70帧分别插入关键帧,并在第1帧和第70帧将t2实例的坐标分别设置为(-800,0)和(800,0),并在1-30帧和40-70帧之间创建传统补间;最后时间轴如图19所示;图19图片t1的动画效果-1第一部分实验指导书-12-教育传播技术学院教育技术专业③新建一个图层,命名为“矩形”,将“矩形”元件从图库中拖出,并设置其坐标为(0,0);选中矩形图层,用鼠标右键单击,在快捷菜单设置为“遮罩层”,时间轴效果如图20所示;图20图片t1的动画效果时间轴-2④新建一个图层,命名为AS,在第70上按F6插入关键帧,执行“窗口/动作”打开动作面板,输入代码见图14;最终的时间效果如图21所示;图21图片t1的动画效果时间轴-33)制作图片t3的动画效果:第一部分实验指导书-13-教育传播技术学院教育技术专业①新建一个影片剪辑元件,命名为pic3,将其“图层1”重命名为t3,在第1帧的位置从图库中将图形元件t3拖到舞台上,选中t3实例,在属性面板中设置其坐标为(0,0),宽度和高度分别为800和600;②新建一个图层,命名为“圆”,将“圆”元件从图库中拖出,并设置其实例坐标为(-50,-50);按F6在第30帧、第40和第70帧分别插入关键帧,并在第30帧和第40帧将t3实例的坐标设置为(-1024,-1024),宽度和高度设置为2048,并在1-30帧和40-70帧之间创建传统补间;时间轴如图22所示;图22图片t3的动画效果时间轴-1③选中圆图层,用鼠标右键单击,在快捷菜单设置为“遮罩层”,时间轴如图23所示;图23图片t3的动画效果时间轴-2第一部分实验指导书-14-教育传播技术学院教育技术专业④新建一个图层,命名为AS,在第70上按F6插入关键帧,执行“窗口/动作”打开动作面板,输入代码见图17;最终的时间轴如图24所示;图24图片t3的动画效果时间轴-34)制作图片t4的动画效果:①新建一个影片剪辑元件,命名为pic4,将其“图层1”重命名为t4,在第1帧的位置从图库中将图形元件t4拖到舞台上,选中t4实例,在属性面板中设置其坐标为(0,0),宽度和高度分别为800和600;②按F6在第30帧、第40和第70帧分别插入关键帧,并在第1帧和第70帧选中t4实例,在属性面板中,设置颜色效果中的Alpha值为0,并在1-30帧和40-70帧之间创建传统补间;时间轴如图25所示;图25图片t4的动画效果时间轴-1第一部分实验指导书-15-教育传播技术学院教育技术专业④新建一个图层,命名为AS,在第70上按F6插入关键帧,执行“窗口/动作”打开动作面板,输入代码见图17;最终的时间轴如图26所示;图26图片t4的动画效果时间轴-25)制作图片t5的动画效果:在图库中选择pic1,用鼠标右键单击,在弹出的快捷菜单中选择“直接复制”,将元件的名称改为“pic5”;双击pic5进入编辑状态,将图层t1改为t5,并选中t1的实例,用鼠标右键单击,在弹出的快捷菜单中选择“交换元件”,将所t1的实例替换成元件t5;6)制作图片t6的动画效果:在图库中选择pic2,用鼠标右键单击,在弹出的快捷菜单中选择“直接复制”,将元件的名称改为“pic6”;双击pic6进入编辑状态,将图层t2改为t6,并选中t2的实例,用鼠标右键单击,在弹出的快捷菜单中选择“交换元件”,将所有t2的实例替换成元件t6;7)制作图片t7的动画效果:在图库中选择pic3,用鼠标右键单击,在弹出的快捷菜单中选择“直接复制”,将元件的名称改为“pic7”;双击pic7进入编辑状态,将图层t3改为t7,并选中t3的实例,用鼠标右键单击,在弹出的快捷菜单中选择“交换元件”,将所t3的实例替换成元件t7;8)制作图片t8的动画效果:在图库中选择pic8,用鼠标右键单击,在弹出的快捷菜单中选择“直接复制”,将元件的名称改为“pic8”;双击pic8进入编辑状态,将图层t4改为t8,并选第一部分实验指导书-16-教育传播技术学院教育技术专业中t4的实例,用鼠标右键单击,在弹出的快捷菜单中选择“交换元件”,将所有t4的实例替换成元件t8;5.制作图片的显示区和标题剪辑1)新建一个影片剪辑,命名“bg1”,并进入其编辑状态;2)在图层1的第1帧将蝴蝶元件从图库中拖出,设置其坐标为(-130,-10