网页动画制作实验指导书.docx
《网页动画制作实验指导书.docx》由会员分享，可在线阅读，更多相关《网页动画制作实验指导书.docx（43页珍藏版）》请在冰点文库上搜索。
网页动画制作实验指导书
《网页动画设计》
实验指导书
信息与电子工程学院于芬
目录
实验一Flash的工作环境和基本操作3
实验二Flash基本动画的制作7
实验三引导层动画练习与创作13
实验四遮罩动画练习与创作18
实验五声音的运用和元件的制作使用32
实验六编写脚本语言33
实验七Flash动画综合设计并发布、嵌入到网页中35
实验一Flash的工作环境和基本操作
一、实验目的
1．了解FlashMx2004的工作环境。
2．掌握绘图工具的使用，能够使用各种工具制作简单的图形。
3．掌握浮动面板的显示与隐藏方法。
4.了解在Flash中图层的分类和使用
5.了解在Flash中帧的分类和使用
二、实验内容
1.查看并确认FlashMx2004各个组成部分。
2.利用工具制作简单图形。
三、实验过程和步骤
1.查看并确认flash8.0的各个组成部分。
（1）菜单栏中有哪些菜单？
（2）怎样显示与隐藏面板？
怎样添加浮动面板？
怎样恢复面板的原始设置？
（3）怎样设置工作区属性？
怎样调整它的显示比例？
（4）工具箱中有哪几种工具？
怎样使用每种工具？
2．利用工具箱中的工具，完成下题目：
（1）利用套索工具选取位图中的图形
第一步建立新文件：
通过“文件/新建”或主工具栏中的
按钮，新建一个FLASH文档；
第二步执行“文件/导入/导入到舞台”，导入一幅位图如图1-1所示，
图1-1
选中位图，按右键选中分离将之“矢量化”
第三步点击工具栏中的套索工具，在选项中选中“魔术棒属性”按钮，在弹出的对话框中将阈值改为50。
第四步在选项中选中“魔术棒”按钮，点击图中的白颜色处，然后按Delete键，将大块空白处删除。
第五步使用缩放工具将图放大，在没有完全去除的白色处，使用橡皮擦按钮擦除。
第六步保存文件：
选择合适的路径保存文件为“位图.fla”。
（2）制作五星红旗。
第一步建立新文件：
通过“文件/新建”或主工具栏中的
按钮，新建一个FLASH文档；
第二步设置背景：
通过“修改/文档”打开的文档属性对话框，将背景颜色设置为如图1-2所示浅蓝色；
图1-2
第三步绘制旗面：
选择矩形工具，将轮廓颜色和填充颜色都设置为红色，绘制旗面如图1-3所示；
第四步绘制旗杆：
单击图层区域
按钮添加一个图层，分别选择矩形工具和椭圆工具绘制旗杆，如图1-4所示；
第五步连接旗杆和旗面：
新添加一图层，选择矩形工具绘制一个白色的矩形，将旗杆和旗面连接起来。
如图1-5所示。
第六步绘制五星：
在绘图工具箱中选择矩形工具组的“多角星形工具”，并在属性面板中设置轮廓和填充颜色均为黄色，然后打开选项对话框，选择样式为“星形”，边数为“5”，在绘图区绘制一个五角星并调整到合适的大小，复制，并组成红旗上的五星图案。
第七步保存文件：
选择合适的路径保存文件为“红旗.fla”。
（3）制作扑克牌的正反面。
第一步新建一个文件。
第二步设置背景颜色。
通过“修改/文档”打开文档属性对话框，设置背景颜色为浅黄色。
第三步绘制扑克牌的正反面。
选择“矩形”工具，在其选项中设置圆角半径为15，并设置轮廓颜色为黑色，填充颜色为白色，画一个圆角矩形，并复制一份该矩形，分别作为扑克牌的正反面，如图1-6所示。
第四步制作正面的图案和文字。
选择“文本”工具，在其属性面板中设置颜色为红色，在正面输入文本“2”，复制一份，选中复制的一份，执行“修改/变形/缩放与旋转”旋转180度；选择“矩形”工具，按着SHIFT键画在正面扑克牌的外侧画一个小正方形，并旋转45度，再利用“选择”工具，调节上、下两顶点及四条边，结果如图1-7所示，将调整好的图案复制一份，调整好两图案的大小和距离，然后移到正面扑克牌上，最后结果如图1-8所示。
第五步制作反面的图案。
执行“文件/导入/导入到舞台”，导入一幅位图如图1-9所示，选中位图，调整好大小和角度，执行“修改/分离”或CTRL+B，
将位图打碎，用吸管选取位图颜色，对反面牌填色，最后效果如图1-10所示。
第六步保存文档。
四、实验报告要求
1.上机前预习实验，完成预习实验内容的填写
2.实验记录部分填写完成各实验内容的步骤和操作情况
3.实验总结部分填写对该次实验所遇到的问题以及解决问题的方法，总结从这次实验中学到了什么
实验二Flash基本动画的制作
一、实验目的
1.熟练掌握制作逐帧动画的方法。
2.熟练掌握形状补间动画的制作。
3.熟练掌握动作补间动画的制作
二、实验内容
1.制作逐帧动画打字效果。
2.制作形状补间动画（形状多变的几何图形、波浪线、变换文字）
3.制作动作补间动画（属性渐变的矩形、闪烁的星星）
三、实验过程和步骤
1.制作逐帧动画
（1）打字效果
①设置宽400像素、高100像素的粉色舞台。
②选中第一帧，选取文本工具，在属性面板上设置字体“隶书”、大小“50”、颜色“黑色”，键入“学动画乐无穷”六个字；并把它相对于舞台居中对齐（用选择工具选中文本，单击主工具栏中的“对齐”按钮，在“对齐”面板上先把“相对于舞台”五字下方的按钮单击成白色，再分别单击“水平中齐”和“垂直中齐”）。
③选中文本，在按住ctrl键的同时，连续单击B键两次，把文字打散，并分别在第10，20，30，40，50，60帧插入一个关键帧。
④选中第1帧，将六个文字全部删除。
⑤选中第10帧，将后五个文字删除，留下一个“学”字。
⑥选中第20帧，将后四个文字删除，留下“学动”两字。
⑦选中第30帧，将后三个文字删除，留下“学动画”三字。
⑧选中第40帧，将后二个文字删除，留下“学动画乐”四字。
⑨选中第50帧，将最后的“穷”字删除，留下“学动画乐无”五字。
⑩在第70帧插入普通帧。
测试效果，观看效果。
2.形状补间动画
（1）形状多变的几何图形
打开flash8，使用默认设置。
①在工具箱中选取椭圆工具。
②设置笔触颜色：
在工具箱颜色区第一排选中“笔触颜色”后，再单击颜色区第三排中间带斜红杠的“没有颜色”图标。
③设置填充颜色：
单击选中颜色区第二排“填充色”，再在“填充色”右边单击右下方的黑色小三角按钮，尔后选定红色。
④选取椭圆工具，在舞台左侧拉动鼠标画一个椭圆（如果在画圆的过程中按住shift键，就可以得到一个正圆。
）
⑤在第25帧插入一个空白关键帧，在舞台中部画一个无边线的绿色三角形。
⑥在第50帧插入一个空白关键帧，选取矩形工具，在舞台右侧画一个无边线的蓝色矩形。
⑦单击“图层1”，选中所有帧，单击底部属性面板“补间”两字右面白框后的黑三角按钮，再单击“形状”。
⑧测试影片，观看效果。
（2）波浪线
①设置宽300像素、高100像素的蓝色舞台。
②选取钢笔工具，画一条绿色波浪线。
③在图层1的第20帧、第40帧分别插入一个关键帧。
④选中第20帧上的波浪线，执行“修改—变形—垂直翻转”命令。
⑤单击“图层1”，选中所有帧，单击属性面板里的“形状”。
⑥测试影片，观看效果
（3）变换文字
①设置宽300像素、高100像素的粉红色舞台。
②单击第一帧，键入大小为“70”的蓝色隶书“学动画”三字，居中。
在第5帧插入关键帧。
③选中第5帧上的文本，按下快捷键ctrl+B两次，把文字打散。
④在第20帧插入空白关键帧，用同样的大小和字体键入红色“乐无穷”三字，居中。
用同样的方法把这三字打散。
⑤选中第1帧，单击属性面板里的“形状”。
⑥在第25帧插入一个普通帧。
⑦测试影片，观看效果。
3.动作补间动画
（1）属性渐变的矩形
打开flash软件，使用默认舞台设置。
1用矩形工具在舞台左边画一个无边框的红色矩形。
2选中矩形，右击，执行“转换为元件”命令，在“创建新元件”对话框中选择类型为“图形”，确定。
③在第30帧插入关键帧，并把矩形拖到右边。
④用任意变形工具将其放大。
⑤在属性面板上“颜色”后的单击小三角按钮，选中“色调”，选择“蓝色”。
⑥选择工具选中第1帧，单击属性面板“补间”里的“动画”；
⑦在属性面板上单击“旋转”选项的小三角按钮，执行“顺时针”命令。
⑧测试影片，观看效果。
（2）闪烁的星星
打开flash8，把舞台背景设置为深蓝色。
①执行“窗口—库”命令，打开库面板；单击库面板左下角的“+”，弹出“创建新元件”对话框，选择类型为“图形”，把“元件1”改写成“星星”，单击“确定”。
这时，舞台左上方“场景1”三字后显示“星星”两字和一枚彩色图标，说明我们已进入了制作星星元件的编辑场景。
②选取椭圆工具，设置笔触颜色为无，在混色器面板上设置填充色为左、右色标均为白色的放射状渐变色，右色标的透明度为0，在舞台中画一正圆，相对于舞台居中对齐。
③选取矩形工具，用同样的颜色画一个宽度为正圆直径约6倍、高度为正圆直径约六分之一的扁矩形。
④复制扁矩形：
选中扁矩形，在按住ctrl键的同时，把光标置于扁矩形上按住左键往外拖动，松开后就得到一个复制出来的扁矩形；选中复制得到的扁矩形，执行“修改—变形—顺时针旋转90度”命令，相对于舞台居中对齐；选中另一扁矩形，把它也相对于舞台居中对齐。
至此，名为“星星”的图形元件就制作完成了。
⑤接下来制作影片剪辑元件：
执行“插入—新建元件”命令，同样弹出“创建新元件”对话框，在对话框中选择类型为“影片剪辑”，把“元件2”改写成“闪星”，单击确定，打开影片剪辑元件“闪星”的编辑场景。
⑥用鼠标左键按住库面板里的“星星”元件，把它拖到舞台上，居中。
⑦在第10帧和第20帧分别插入一个关键帧；选中第10帧，单击舞台中的星星，在属性面板“颜色”后单击黑三角按钮，选择alpha（透明度）,调整后面的百分比为20%。
⑧单击“图层1”，选中所有帧，在属性面板上创建“动作”补间动画。
至此，名为“闪星”的影片剪辑元件也就制作完成了。
⑨单击舞台左上角的“场景1”按钮，返回主场景后，把“闪星”元件拖到舞台上，拖几次，舞台上就出现几个“闪星”实例。
⑩执行“控制—测试影片”命令，观看效果。
注意：
今后，凡是碰到动画中加有影片剪辑实例的情况，都必须用“测试影片”的方法看效果。
为了让星星闪动有先后变化，我们可以进行如下操作：
①用制作“闪星”元件同样的方法再制作一个“闪星2”元件；所不同的只是这一次要在第8帧和第15帧插入关键帧。
②在“场景1”增加一个“图层2”，在“图层2”上再布置几个“闪星2”实例。
四、实验报告要求
1.上机前预习实验，完成预习实验内容的填写
2.实验记录部分填写完成各实验内容的步骤和操作情况
3.实验总结部分填写对该次实验所遇到的问题以及解决问题的方法，总结从这次实验中学到了什么
五、思考题
仔细体会形状补间动画和运动补间动画的区别？
六、作业
自己构思，制作一个形状补间动画和一个运动补间动画，做好后放入一个文件夹中以自己的学号命名发入我的邮箱中fyu04@
实验三引导层动画练习与创作
一、实验目的
1.进一步掌握Flash中图层的操作
2.掌握制作引导层动画
二、实验内容
1.制作沿一定路线运动的小球
2.制作笔绘效果
3.制作圣诞老人的口袋动画
三、实验过程和步骤
1.制作沿一定路线运动的小球
（1）打开flash，新建一个文件。
（2）在图层1画一个小球，然后在第30帧插入关键帧，创建运动动画。
（3）点击插入引导层按钮。
添加运动引导层
（4）然后画一条线段，把小球拖到线段的起始位置。
（5）然后定位到第30帧，把小球拖到另一端，而且使其吸附在端点。
（6）这时候沿一定路线运动的动画就做好了，在控制菜单可以测试影片，看一下效果。
2.制作笔绘效果
（1）在Flash文件中创建一个名为“字体”的影片剪辑，在这个影片剪辑中使用文本工具写入文字flash，设置文字属性，最好将字体设置为连笔。
（2）在库中右键点击“字体”，从弹出的菜单中选择复制，即可复制一个和影片剪辑“字体”一样的影片编辑，只是名字不同而已，将复制得到的影片剪辑命名为“引导线”。
使用铅笔工具沿文字Flash划连续曲线，这就是钢笔运动的路线。
（3）在库中新建影片剪辑“钢笔”，使用文本工具在舞台上输入字体为Wingdings2的英文叹号!
（也可以设为字体Wingdings，此时将显示铅笔图像），出现钢笔图像，将文字打散，并为钢笔填充颜色。
（4）在库中新建影片剪辑“写字”，在第一个图层（改名为“字体”）中放入“字体”，并在第90帧处插入普通帧，在第二个图层（改名为“钢笔”）中放入“钢笔”，并在第90帧处插入关键帧，更改两个图层的上下位置，然后选中钢笔图层，在时间轴上点击按钮
，为此图层插入引导层
（5）在引导层中放入影片剪辑“引导线”，并将之打散，并在第90帧处插入普通帧
（6）在钢笔图层的第一个关键帧处，将钢笔的中心对准引导线的起点，在第90帧处，即第二个关键帧处，将钢笔的中心对准引导线的终点，然后在这两个关键帧处创建动画
（7）选择场景1，将影片剪辑“写字”拖入场景中，按Ctrl+Enter键测试影片
制作圣诞老人的口袋动画
（1）在Flash文件中创建一个名为“包袱”的影片剪辑，在这个影片剪辑中画一个包袱
（2）分别创建名为“礼物1”、“礼物2”、“礼物3”的三个影片剪辑，在这些影片剪辑中分别画三个礼物
（3）创建一个名为“分发礼物”的影片剪辑，将他的第一个图层改名为“包袱”，将影片编辑“包袱”拖入此层；然后添加“礼物1”图层，将影片剪辑“礼物1”拖入此层；添加“礼物2”图层，将影片剪辑“礼物2”拖入此层；添加“礼物3”图层，将影片剪辑“礼物3”拖入此层；
（4）为“礼物1”图层添加引导层，在引导层上划礼物飞出的路线，并设置礼物的初始关键帧和末尾关键帧的位置。
同样为“礼物2”图层添加引导层。
将“礼物3”图层拖拽到“礼物2”图层的引导层下，即可使“礼物3”和“礼物2”拥有同一个引导层
（5）选择场景1，将影片剪辑“分发礼物”拖入场景中，按Ctrl+Enter键测试影片
四、实验报告要求
1.上机前预习实验，完成预习实验内容的填写
2.实验记录部分填写完成各实验内容的步骤和操作情况
3.实验总结部分填写对该次实验所遇到的问题以及解决问题的方法，总结从这次实验中学到了什么，并回答问题
五、思考题
1.引导层可以是组件吗？
引导层所引导的图形可以是矢量图吗？
2.遮罩层和引导层可以互相嵌套吗？
实验四遮罩动画练习与创作
一、实验目的
1.掌握Flash中图层的操作
2.掌握制作遮罩层动画
二、实验内容
1.制作探照灯文字
2.制作闪闪红星
3.制作放大镜
三、实验过程和步骤
1.制作探照灯效果文字
（1）新建一影片，设置影片大小为250pxX120px（单位为像素），背景色为白色，当然设计者可以根据需要另行设置。
（2）新建一图形元件“mask”，选取文本工具，设置字体为“ArialBlack”，大小为42，在工作区中输入文本“LightMask”，如图4-1所示：
图4-1 输入文本
（3）新建一图形元件“meng”，在第1帧处插入一关键帧，选择椭圆工具，设置其填充色和轮廓颜色均为为黑色，按住Shift在工作区中绘制一正圆，如图4-2所示：
图4-2设计图形元件“meng”
（4）返回主场景，在第1帧处插入一关键帧，选取矩形工具，设置其轮廓颜色为黑色，填充色为灰色直线渐变色，其中浅蓝色的RGB值为：
（40，52，140），深蓝色的RGB值为：
（15，15，60）,混色器面板如图4-3所示：
图4-3 设置混色器面板
运用填充色，在工作区中绘制一矩形，通过填充形变工具，设置填充效果，给人以光线从右上角入射的效果，如图4-4所示：
图4-4 设计光线入射效果
选取文本工具，在属性面板中设置字体为“ArialBlack”，大小为42，颜色为黑色，在工作区中输入文本“LightMask”，这就是文本的阴影，如图4-5所示：
图4-5 设计文本阴影
再次选取文本工作，置字体为“ArialBlack”，大小为42，颜色为＃24486C，在工作区中输入文本“LightMask”，调整其位置，并在第10帧处插入帧，效果如图4-6所示：
图4-6 制作有阴影的文本
（5）新建一图层“masked”，在第1帧处插入一关键帧，将制作好的图形元件“mask”拖放到工具区中。
使用文本工具，在属性面板中设置字体为“ArialBlack”，大小为42，颜色为＃FF9900，在工作区中输入文本“LightMask”，并调整其文本位置，效果如图4-7所示：
图4-7 设计“masked”图层
（6）选中图层“masked”,插入一遮罩层“mask”，在第1帧处插入一关键帧，将制作好的图形元件“ball”拖放到工作区中文本的左边，选中第30帧插入一关键帧，将“ball”实例拖放到文本的右边，再次选中第1关键帧，单击鼠标右键，从弹出的快捷菜单中选择“创建补间动画”菜单命令，如图4-8所示：
图4-8 添加遮罩层
（7）这样整个“探照灯文字”就制作完成，保存作品，按“Ctrl+Enter”预览最终效果。
2．制作闪闪红星
（1）创建影片文档
执行【文件】|【新建】命令，在弹出的面板中选择【常规】|【Flash文档】选项后，点击【确定】按钮，新建一个影片文档，在【属性】面板上设置文件大小为400*400象素，【背景色】为黑色。
（在教程中，我们为了更好的显示场景中的内容，背景色设为了深蓝色），如图4-9所示。
图4-9文档【属性】面板
（2）创建元件
①创建“闪光线条”元件
执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条”。
选择工具栏上的直线工具
，在场景中画一直线，在【属性】面板上作如图4-10设置。
图4-10闪光线条的【属性】面板参数设置
②创建“闪光线条组合”元件
执行【插入】|【新建元件】命令，新建一个图形元件，名称为“闪光线条组合”，如图4-11所示。
图4-11创建闪光线条元件
从库中将名为“闪光线条”的元件拖入新元件编辑窗口的场景中，在X轴上的位置为-200，Y轴为20。
然后单击工具栏上的任意变形工具
，此时元件的中心会出现一个小白点，它就是对象的“注册点”，用鼠标左键按住它，拖到场景的中心处松手。
图4-12中的“1”显示的是注册点在元件的中心时的情形，“2”显示的是注册点已拖到场景中心时的情形。
图4-12移动注册点到场景的中心
然后执行【窗口】|【设计面板】|【变形】命令，打开变形面板，选中【旋转】，角度为15度，连续按下【复制并应用变形】按钮，在场景中复制出的效果如图4-13所示。
图4-13变形面板及复制好的元件
在时间轴的关键帧上点一下，选中全部图形，执行【修改】|【分散】命令，把线条打散，再执行【修改】|【形状】|【将线条转化为填充】命令，将线条转变为形状。
③创建“闪光”元件
执行【插入】|【新建元件】命令，新建一个影片剪辑，名称为“闪光”，如图4-14所示。
图4-14创建“闪光”元件
单击【确定】后进行“新元件编辑窗口”，接着把库里名为“闪光线条组合”的元件拖到场景中，对齐中心点，复制此元件，在第30帧处加关键帧，再回到第1帧中建立补间动作动画，【属性】面板上设置顺时针旋转一周。
然后新建一层，在第1帧中执行【编辑】|【粘贴到当前位置】命令，使二层中的“闪光线条组合”完全重合，再执行【修改】|【变形】|【水平翻转】命令，让复制过来的线条和第一层的线条方向相反，在场景中形成交叉的图形。
在第30帧处建立关键帧，在第1帧中建立动作补间动画，【属性】面板上设置逆时针旋转一周，最后将此层设为遮罩层，如图4-15所示。
图中显示的是“闪光”元件的时间轴面板和各图层中的动画设置。
图4-15“闪光”元件编辑界面
④创建“红星”元件
执行【插入】|【新建元件】命令，新建一个图形元件，名称为“红星”。
我们要在这个元件中画一个漂亮的红星，为了画好红星，我们分九步来叙述具体的画法，图4-16中的“1-9”的数字表示这九个步骤。
图4-16红星的九步画法
第一步，按住shift键，从场景中心向上画一根黄色的线条，如图4-16中的“1”所示。
第二步，选择工具箱中的任意变形工具
在画好的线条上点一下，这里，线条的中心出现一个白色的小园点，我们叫它“注册点”。
如图4-16中的“2”所示。
第三步，鼠标左键按住这个小白点，拖到线条的最下端，这是因为我们要让线条要以下端为中心旋转复制。
如图4-16中“3”所示。
第四步，执行【窗口】|【设计面板】|【变形】，打开变形面板，各参数设置如图4-17。
按下【复制并应用变形】按钮四次，就会在场景中每隔72度复制出一根线条，五个线条的顶端构成五角星的五个顶点。
如图4-17中的“4”所示。
图4-17变形面板
第五步，用绿色线条分别连接五根线条的顶端，五角星的模样已经出来了，如图4-16中“5”所示。
第六步，用白色线条分别连接五角星中心和上一步连线的中点，如图4-16中“6”所示。
第七步，选择工具栏上的橡皮工具
，在工具栏下面的选项中选择“水笼头”工具
，在多余的线段上点一下，去除线段，修整好的五角星如图4-16中的“7”所示。
第八步，用油漆筒工具给五角星上色，每个角的左右颜色可略有区别，增加立体感，如图4-16中的“8”所示。
第九步：
再选择橡皮工具
，点开
旁边的小三角，在“擦除线条”前打勾，如图4-18所示。
图4-18擦除线条
用橡皮工具擦去红星上的线条，一颗漂亮的红星就做成了，如图4-16中“9”所示。
（3）创建动画
回到主场景中，把“闪光”元件拖入第二层，新建二层，第三层中拖入“红星”元件，在场景的下方写下白色的“闪客启航电影制片厂”的文字，完成后的时间帧面板及场景如图4-19所示。
图4-19时间轴及场景
按Ctrl+Enter组合键，测试动画。
3．制作放大镜效果
（1）新建一个文件。
按Ctrl-M把电影属性设置为525pxX120px，天蓝色背景。
（2）选绘图工具栏中的文字工具，用黑体48号字选择白色在工作区中间写上“新闪光时代”五个字。
略微放大这几个字到如下图所示大小,双击这一层文字“Layer1”，将名字改为“BackgroundText”。
（3）在这一层上新建一个层，命名为“MagnifiedText”，这一层将用于显示放大了的文字。
用文字工具选黑体72号字，用稍有些灰的白色在这一层仍写上“新闪光时代”五个字。
颜色的选用是根据物理上光学的知识，放大后的字会损失一部分光线，所以选择稍灰暗一些的颜色。
现在两层文字重叠在一起。
（4）在动画过程中还要稍稍向左移动这一层上的文字，使得两层中的文字起点和终点尽量接近。
方法如下：
在MagnifiedText层里把72号字的左端移动到下图所示的位置上，使两层中的文字左端位置比较接近。
然后在第40帧里按F6生成关键帧。
在BackgroundText层里的第40帧按F5保持第1帧的内容。
回到Magnif
升级会员 