71实验指导书3-Flash基本操作及简单动画制作

第一部分实验指导书-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