《Flash基本操作及简单动画制作》实验教学指导书
一、实验目的
1. 了解Flash的基本界面组成及特点。 2. 掌握Flash的基本操作。 3. 掌握Flash四类基本动画。 4. 学会制作简易Flash课件。 二、实验内容
1. 制作简易Flash课件。 2. 制作简易电子相册。 三、实验仪器、设备
多媒体计算机，Flash CS4。 四、实验原理
任务驱动法，Flash的基本操作，应用Flash设计制作电子相册、简单的Flash课件。 五、实验步骤
（一）制作简易Flash课件
1．新建一个flash(ActionScript 2.0) 文档，并设置文档大小为800*600。 2. 选择“文件|导入|导入到库”，将“课件背景.jpg”导入到当前库。 3. 创建课件背景：从库中拖动“课件背景.jpg”到舞台，使其与舞台边界对齐。选中图层1，单击鼠标右键，在弹出的快捷菜单中选择“属性”，通过图
图1 创建课件背景图层 图2 制作按钮元件
- 1 - 教育传播技术学院教育技术专业 第一部分 实验指导书
层属性对话框，修改图层1名称为“背景”。单击背景图层，在60帧处按F5,插入普通帧，锁定背景图层。如图1所示。
4.制作按钮元件：选择“插入|新建元件”，新建“第一章”按钮元件，并进入按钮元件编辑窗口。
1）单击“弹起”帧，使用文本工具创建文本“第一章”，并调整文本的大小及颜色。
2) 选择“弹起”帧，单击鼠标右键，在弹出的快捷菜单中选择“复制帧”，再分别在“指针经过”、“按下”帧上粘贴。将“指针经过”、“按下”两帧对应的文本修改成不同的颜色。
3）单击“点击”帧，按F7插入空白关键帧。选择工具箱中的“矩形工具”，在舞台中央绘制一矩形，大小刚好覆盖文本框即可。最终“第一章”按钮元件制作效果如图2所示。
5.重复第4步 ，分别制作出“第二章”，“第三章”,“第四章”按钮元件。 6．回到场景1编辑状态，新建“按钮”图层，将制作好的按钮元件分别拖
图3 创建按钮图层 图4 创建“第一章”文本演示内容
动到课件背景放置按钮的位置，并使用工具箱中的“自由变换工具”，调整按钮元件大小，使文字按钮的大小刚好与背景中按钮大小适合，如图3所示。
7．新建“第一章”图层，在第10帧处插入空白关键帧。选择工具箱中的文本工具，在舞台上输入第一章文本内容，并调整文本的大小及颜色。选择第19帧插入空白关键帧，此时舞台效果如图4所示。
8. 新建“第二章”图层，在第20帧处插入空白关键帧。选择工具箱中的文
- 2 - 教育传播技术学院教育技术专业 第一部分 实验指导书
本工具，在舞台上输入第二章文本内容，并调整文本的大小及颜色。选择第29帧插入空白关键帧。此时舞台效果如图5所示
图5 创建第二章文本演示内容
9. 新建“第三章”图层，在第30帧处插入空白关键帧。选择工具箱中的文本工具，在舞台上输入第三章文本内容，并调整文本的大小及颜色。选择第39帧插入空白关键帧。此时舞台效果如图6所示。
- 3 - 教育传播技术学院教育技术专业 图6 创建第三章文本演示内容
第一部分 实验指导书
10. 新建“第四章”图层，在第40帧处插入空白关键帧。选择工具箱中的文本工具，在舞台上输入第四章文本内容，并调整文本的大小及颜色。此时舞台效果如图7所示。
图7 创建第四章文本演示内容
11.新建“脚本图层”，单击第1帧，打开动作面板，为第1帧添加动作脚本stop();如图8所示。
图8 添加脚本图层，并给第一帧添加动作
12．选择“按钮”图层，单击“第一章”按钮实例，打开动作面板，添加脚
- 4 - 教育传播技术学院教育技术专业 第一部分 实验指导书
本：
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所示。
图9 发布简易课件
- 5 - 教育传播技术学院教育技术专业 第一部分 实验指导书
（二）制作简易电子相册
1．新建一个flash(ActionScript 2.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所示；
图10 矩形的颜色设置
- 6 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图11 创建图形元件“矩形”
5）执行“插入/新建元件”，创建一个图形元件“圆”，在工具箱选择“椭圆工具”，在画布上画一个圆，设置其填充颜色为任意颜色；然后选中圆，在属性面板中设置x,y坐标为（0，0），宽度、高度为50和50，效果如图12所示；
图12 创建图形元件“圆”
6）执行“插入/新建元件”，创建一个影片剪辑“结束”，选中图层的第1帧，在工具箱选择“文本工具”，在画布上输入文本“谢谢欣赏”，设置其填充颜色为任意红色，字体为隶书，字的大小为160；然后选文本，在属性面板中设置x,y坐标为（0，0），效果如图13所示；
- 7 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图13 创建文本“谢谢观赏”
按F6在第50帧插入关键帧，将文本改为“再见”，并设置其坐标为（160，0），如图14所示；
图14 创建文本“再见”
按ctrl+b,分别将两个关键帧的文本打碎，并在两个关键帧之间创建补间形状，然后，按F5将时间轴延长至60帧，如图15所示；
图15 创建补间形状
- 8 - 教育传播技术学院教育技术专业 第一部分 实验指导书
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所示；
图16 图片t1的动画效果的时间轴-1
③新建一个图层,命名为AS,在第70上按F6插入关键帧,执行“窗口/动作”打开动作面板，输入代码如图17所示；
- 9 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图17 AS层第70帧的代码设置
④时间轴的最后效果如图18所示；
图18 图片t1的动画效果的时间轴-2 2）制作图片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所示；
- 10 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图19 图片t1的动画效果-1
③新建一个图层，命名为“矩形”，将“矩形”元件从图库中拖出，并设置其坐标为（0，0）；选中矩形图层，用鼠标右键单击，在快捷菜单设置为“遮罩层”，时间轴效果如图20所示；
图20 图片t1的动画效果时间轴-2
④新建一个图层,命名为AS,在第70上按F6插入关键帧,执行“窗口/动作”打开动作面板，输入代码见图14；最终的时间效果如图21所示；
- 11 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图21 图片t1的动画效果时间轴-3
3）制作图片t3的动画效果：
①新建一个影片剪辑元件，命名为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
③选中圆图层，用鼠标右键单击，在快捷菜单设置为“遮罩层”，时间轴如
- 12 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图23所示；
图23 图片t3的动画效果时间轴-2
④新建一个图层,命名为AS,在第70上按F6插入关键帧,执行“窗口/动作”打开动作面板，输入代码见图17；最终的时间轴如图24所示；
图24 图片t3的动画效果时间轴-3
4）制作图片t4的动画效果：
①新建一个影片剪辑元件，命名为pic4,将其“图层1”重命名为t4,在第1帧的位置从图库中将图形元件t4拖到舞台上，选中t4实例，在属性面板中设置其坐标为（0，0），宽度和高度分别为800和600；
②按F6在第30帧、第40和第70帧分别插入关键帧，并在第1帧和第70
- 13 - 教育传播技术学院教育技术专业 第一部分 实验指导书
帧选中t4实例，在属性面板中，设置颜色效果中的Alpha值为0，并在1-30帧和40-70帧之间创建传统补间；时间轴如图25所示；
图25 图片t4的动画效果时间轴-1
④新建一个图层,命名为AS,在第70上按F6插入关键帧,执行“窗口/动作”打开动作面板，输入代码见图17；最终的时间轴如图26所示；
图26 图片t4的动画效果时间轴-2
5）制作图片t5的动画效果：
在图库中选择pic1,用鼠标右键单击，在弹出的快捷菜单中选择“直接复制”，将元件的名称改为“pic5”；双击pic5进入编辑状态，将图层t1改为t5,并选中t1的实例，用鼠标右键单击，在弹出的快捷菜单中选择“交换元件”，将所t1的实例替换成元件t5；
6）制作图片t6的动画效果：
- 14 - 教育传播技术学院教育技术专业 第一部分 实验指导书
在图库中选择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,并选中t4的实例，用鼠标右键单击，在弹出的快捷菜单中选择“交换元件”，将所有t4的实例替换成元件t8；
5．制作图片的显示区和标题剪辑
1）新建一个影片剪辑，命名“bg1”，并进入其编辑状态；
2）在图层1的第1帧将蝴蝶元件从图库中拖出，设置其坐标为（-130，-100），设置其宽度为100，高度为98.8，在第90帧，按F5插入帧；选中中间的任意帧，单击鼠标右键弹出快捷菜单，创建补间动画；如图27所示；
图27 影片剪辑bg1-1
3)新建一个图层,命名为显示区，从图库中拖出矩形，设置其坐标为（0，0），
- 15 - 教育传播技术学院教育技术专业 第一部分 实验指导书
并将该图层锁定；
4）选中蝴蝶图层，将播放头移到第90帧，设置蝴蝶的坐标为（-130，600），如图28所示；
图28 影片剪辑bg1-2
5）移动播放头至45帧，设置蝴蝶的坐标为（800，-100），移动播放头至22帧，设置蝴蝶的坐标为（400，50），移动播放头至67帧，设置蝴蝶的坐标为（600，300），如图29所示；
图29 影片剪辑bg1-3
6）利用选择工具编辑路径，效果如图30所示，然后锁定蝴蝶图层；
- 16 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图30 影片剪辑bg1-4
7）在显示区图层的上方新建一个图层，命名为“文本”，按F6键在第50帧插入关键帧，利用文本工具输入“世界地理”，设置其坐标为（850，84），文字的颜色为白色，字体大小为100，为了看清文本，执行“修改/文档”，设置文档的背景颜色为绿色，效果如图31所示。
图31 影片剪辑bg1-5
8）在文本层的第60帧、70帧、80帧分别插入关键帧，将50帧的“界地理”，60帧的“地理”和70帧的“理”删除，然后将该图层锁定；
9）对显示区层解锁，选中矩形，用任意变形工具，编辑其中心，效果如图32所示；
- 17 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图32 影片剪辑bg1-6
按F6在第50帧、90帧插入关键帧，将第5帧，矩形的宽度和高度设置为5，第50帧宽度设置为800，高度设置为5，并在5-50和50-90之间设置传统补间；效果如图33所示；
图33 影片剪辑bg1-7
10）在文本层上面新建一个图层，命名为“AS”,按F6在第90帧插入关键帧，并为其设置动作代码：
stop();
_root.gotoAndStop(10); 最后效果如图34所示；
- 18 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图34 影片剪辑bg1-8
6. 编辑场景：
1）将库面板中的“garden.jpg”拖入到舞台，选中图片,在属性面板中设置其x,y坐标为(0,0)；修改“图层1”名称为“bg”。在30帧处按F5键，插入帧，如图35所示，然后锁定该图层。
图35 插入背景图片
2）新建一个图层，命名为“bg1”,按F6在第5帧插入关键帧，将bg1从图库拖出，并设置其x,y坐标为（30，84），如图36所示；
- 19 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图36
3）在bg1上方新建一个图层，命名为“pic”，按F6在10帧插入关键帧；将pic1从图库中拖出，并设置其x,y坐标为（30，84），效果如图37所示；
图37
4）选中bg1图层，按F6分别在11帧-17帧插入关键帧，然后分别选中第11帧-17帧的实例，单击鼠标右键，在弹击的快捷菜单中选择交换元件，分别替换成pic2-pic8，如图38所示；
- 20 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图38
5）新建一个图层，命名为“end”，按F6在第20帧插入关键帧，将影片剪辑结束从图库拖出，设置其坐标为（100，284），如图39所示；
图39
6）新建一个图层，命名为“button”，按F6在第30帧插入关键帧，从公用库中选择一个按钮，拖入场景中，放在合适位，双击按钮，进入按钮编辑状态，将其文本改成“replay”,如图40所示；
- 21 - 教育传播技术学院教育技术专业 第一部分 实验指导书
图40
切换到场景，用选择工具选中按钮，为按钮添加动作脚本： on(press) {gotoAndPlay(1);}
7）新建一个图层，命名为“背景音乐”，打开“库”面板，在“库”面板中 “童年”声音文件，直接拖放到舞台，在“属性”面板的“同步”下拉列表框中选择“开始”选项，设置播放次数为“循环”。 如图41所示。
图41
- 22 - 教育传播技术学院教育技术专业 第一部分 实验指导书
8）新建一个AS图层，在第5帧，10-17帧，20帧，30帧，插入关键帧，并设置这些帧的动作代码为：stop();,如图42所示；
图42
9）在图库面板中双击pic8剪辑，进入其编辑状态，在AS层的最后一帧，将其动作代码改为：
stop();
_root.gotoAndStop(20);
10）在图库面板中双击结束剪辑，进入其编辑状态，新建一个AS层，并在该层的最后一帧，添加动作代码：
stop();
_root.gotoAndStop(30); 7．发布
选择“文件|发布设置”命令，在弹出的发布设置对话框中，勾选Flash类型，并且修改保存的文件名字为“电子相册”，设定文件存储目录后，单击发布。
六、实验注意事项
1．注意不同元件的创建以及它们之间的转换。 2．注意补间动画的创建的方式及注意问题。 3．注意区别帧，关键帧，空白关键帧的区别。 4．矢量图形与位图的区别。 5．Flash脚本代码的编写规范。 七、实验报告要求
- 23 - 教育传播技术学院教育技术专业 第一部分 实验指导书
认真填写实验地点、实验操作人、实验日期、实验目的、实验要求、实
验内容。要求较为详细的记录整个实验操作的步骤，重点突出，写出注意事项及疑难问题。
八、思考题
1．形状变形动画与位置变形动画的区别。 2．Flash中常用的Action Script语句有哪些。 3．如何修改文档的属性。
4．Flash绘图工具中哪几种工具可以用于对象的选取？ 5．图层包括哪几种，如何改变图层的属性？
6．帧分为哪几种类型？如何创建关键帧和空白关键帧？
- 24 - 教育传播技术学院教育技术专业
因篇幅问题不能全部显示，请点此查看更多更全内容