商务网站动画处理技术课程实训指导书

《商务网站动画处理技术课程》实操指导书
1 实验目的与要求
1.1 实验目的
本课程的课程设计是电子商务专业学生学完《商务网站动画处理技术课程》课程后进行的一次全面的综合练习，主要是巩固和加深课堂所学的基础理论知识，更重要的是培养学生实验操作能力，知识运用能力，综合分析问题和解决问题的能力，要求能够把握FLASH进行动画设计的一般方法和思路；了解FLASH动画的基本特点熟练使用Flash软件的各种工具，自主思维、动手进行平面动画设计的基本能力，养成勇于实践、严肃认真、务实的工作作风和严谨的科学态度，成为符合网站开发、广告设计、电子杂志制作等社会急需的高级动画制作职业技术人才。

1.2 实验要求
通过对平面动画设计课程的系统学习和上机实践，让学生能够熟练使用Flash软件的工具面板进行矢量图形的绘制和修改，熟悉十七个其它辅助面板的使用，理解并掌握时间线和图层的使用，熟练掌握Flash创建动画的三种基本方法以及应用引导线和蒙板的动画技巧。

能灵活使用组件和组件库，创建结构清晰且容易修改的动画。

在本课程的学习中，要求学生将所学理论知识应用于本专业及相关领域实际工作中，从而达到提高学生的实际动手能力、分析问题及综合应用能力，具备基本的平面动画设计能力，能够熟练使用Flash软件表达自己的设计成果。

2实验项目
实验1 动画设计与制作基础
学习任务：基本绘图工具的使用、简单运动补间动画制作、文字特效制作
实验课时：12课时
设计项目：
1．制作一个笑脸到哭脸的变脸形变动画，效果如图1所示。

图1 笑脸到哭脸的系列形变效果
提示：笑脸系列形状可采用“文本工具”输入，字体采用“Windings”，输入大写字母“L”则可输入一个笑脸，其他两张脸对应着大写字母“K”和“L”。

2．制作一个变手的形变动画，动画中手的姿势如图2所示。

图2 变手的系列形变效果
提示：手的系列形状可采用“文本工具”输入，字体采用“Windings”，输入大写字母“A”～“G”实现。

3．自行制作一个人走路的影片剪辑(参考案例：青蛙走路)，制作一个人从舞台左边走到舞台右边的运动动画。

4．文字的特效制作
新建一个文件，设置背景为黑色。

用文字工具选Copperplate Gothic字体48号白色斜体字写上要做成光线效果的文字，我在这里用“FLASHTIMES”。

注意每次只写一个字母。

如下图所示，但不一定要排这么整齐。

分别点击每一个字母，按F8转换为图形类图符，并分别按所对应的字母命名。

现在我们就做好了十个图符。

按Ctrl-L打开图库窗口，把主场景中除“F”以外的所有字母都删除。

选中字母“F”，按两次Ctrl-B把它打散。

用线条工具选白色从F的右上角起不间断地拉出如下面左图所示的边线。

（所谓不间断是指在画线的过程中，在线条转折（顶点）处松开鼠标并在不移动鼠标的情况下再次按下画线。

）选颜料桶工具用黑色线性渐进色给这个封闭区域填充。

（注意，如果所画线条没有很好地和字母接触，即使在参数修改区中选择了封闭区域，也有可能无法填充，这时可以通过放大画面，并用鼠标拖动未封闭的线条末端使其与字母接触的方法来解决。

）
因为我们希望光线从左到右渐强，所以还要对填充色的方向做一个调整。

按下，并把颜色方向修改至下图左所示。

再选择箭头工具，双击白色的轮廓线，再按Delete键把它们删除。

现在我们就得到了如下右图所示的拖着光影的字母“F”。

拉出一个大框选择全部对象，按F8转换成图符，起名为F light。

把其它九个字母也分别依次做成如上所示拖着光影的效果。

因为一共有十个字母，所以前五个字母的光影都在左边，而且由狭长逐渐变宽短；后五个字母的光影都在右边，依次由宽短变狭长。

做好后的字母分别如下图所示。

注意到有两个字母“S”，所以分别取名为S1 light 和S2 light。

现在我们来做字母F的光影效果变换。

把主场景清空，从图库中把F light拖到编辑区中放到靠左边一些。

然后在第7帧和第25帧分别按F6键插入关键帧。

在第1帧和第25帧分别双击这个F light实例，在实例属性对话框中把Alpha值改为0。

然后分别双击第1帧和第7帧，把帧属性设置为运动渐变。

这样就设定了光线从无到有，又从有到无的变化过程。

但是随着光线的减弱，连字母F也跟着消失了，这可不是我们所希望的，我们需要的是光线渐暗但文字要保持它的亮度。

新建一个层，在第2帧按F6插入关键帧，从图库中把字母“F”拖出来，放在F light 中字母“F”所在的位置上，使两个F完全重合，可以使用放缩工具把场景放大后再对齐。

还是这一层，在第9帧按F6，在第25帧按F5键。

双击第1帧上的字母“F”，把它的Alpha 值改为0。

再双击第1帧，把帧属性设置为运动渐变。

其实每一个字母的光线效果变化是由两个图符实例来实现的。

例如，对于字母F来说，F light用来实现光线从无到有又逐渐淡出的效果，而F用来实现在光线消失后字母亮度的保持。

当然对其余的字母也做同样的处理，每一个字母光影变化效果都占两层，这样就可以得到上面示例中所示的效果了。

注意的事项：
(1)最左边的字母最先显示，最右边的字母最后出现。

因此，第二个字母L就不能以第1帧作为起始帧，在这个示例中，L light要比F light晚出现4帧，L再比L light晚出现2帧。

其余的字母依此类推。

(2)关于层的问题。

大家注意到，因为每个字母都拖着光影，所以不可避免地彼此会有互相遮盖的部分，这就牵扯到一个图层间相互位置的关系，也就是说哪个字母所在层应该在上面，哪些层应该在下面，这就要把这一串文字分成两部分分析。

首先，最左边的五个字母的光影都是在左边，所以试想如果字母L所在的层在字母F所在层的上面，那么当字母L达到
最亮时其光影势必会把字母F遮住，所以字母L只能位于字母F所在层的下面。

其余几个字母也是一样，所以最左边的五个字母所在层从上到下的顺序是F、L、A、S、H。

下图所示为前五个字母在时间轴窗口的分布。

而右边的五个字母正好相反，其字母所在层从上到下的顺序依次是S、E、M、I、T。

它们在时间轴上的分布如下图所示。

(3)为了更好地实现光线从左转向右时的自然过渡，我们在动画中间再加入一小团由暗到明再由明到暗的光线。

如下图左所示，用一个矩形或椭圆填充黑白中心淅进色再用颜料桶工具对颜色方向稍作修改（见右下图），然后把它转换成图符，让它在字母H和T之间做由暗到明再由明到暗的变化即可，也就是改变它的Alpha值，方法和上面讲过的一样。

为了能够实现比较真实的光影效果，可以根据自己做出的最终结果在时间轴帧的分布上做适当调整，以获得较为满意的效果。

实验二广告制作
学习任务：遮罩动画的制作、引导动画的制作、脚本编程、公益广告的设计思路、动画声音合成、、镜头切换效果设计
实验课时：16
设计任务：
1．制作多只小鸟在雨中飞翔的引导动画。

（参考案例：学院校园网LOGO，下雨效果动画用脚本编写）
2．按照自己的思路，制作一张贺卡。

要求运用到时间轴特效，并能通过按钮控制动画的播放和停止。

（参考案例：电子贺卡）
3．制作方法制作一个个人简历动画，要求使用到运动补间动画、形状补间动画、遮罩动画和引导动画等技巧。

（参考案例：个人简历）
4．制作一个有关“食品安全”的公益广告。

（参考案例：保护环境）
5．制作一个商业广告（自己选择产品，参考案例：SONY广告）
实验三电子杂志制作
学习任务：了解电子杂志的制作流程、了解电子杂志的主要制作方法、掌握电子杂志的合成方法
实验课时：8课时
设计任务：
制作一本时尚的电子杂志，主题自定。

（参考案例：电子杂志.exe）
实验四纯FLASH网站制作
学习任务：网站的结构设计、网站制作的主要动画技巧、网站动画的管理、使用Flash 动画组件
实验课时：20课时
设计任务：
1．制作一个古典音乐介绍课件。

（参考案例：语文课件）
2．制作一个简单的网页，首页按钮包括“公司简介、产品展示、联系方式”等，要求在“产品展示”中放置同样大小的产品图片，单击每个产品图片时会链接到相对应产品的大图片。

同时在每一页都要有返回按钮返回到首页。

（参考案例：教材第11章）
3实验方式及相关要求
实验教学以学生上机操作为主，学生通过案例模拟掌握所学知识和技能。

辅以老师运用计算机多媒体演示综合案例分析讲解的方式进行教学。

为了达到实验目的，本课程安排了4个实习单元，包括12项设计任务，训练的重点在于基本的操作及实际运用。

每项设计任务的文件名规范如下：实验一设计任务 1 文件命名为1-1.swf , 实验一设计任务2为1-2.swf，其余类推，学生最后提交的内容为：12项设
计任务的swf影片文件及实验报告书，所有文件打包，统一文件名为班别+姓名+学号。

4 实验评分
学生必须按照实验项目中的实验要求完成实验任务。

教师根据相应的实验结果和实验报告书写质量给出成绩，作为本课程的实训成绩。

（平时考勤占10%、实验一 20%、实验二20% 、实验三20%、实验四 30%）。

注：实训期间不允许在机房做与实训无关的事，例如玩游戏、看视频、聊QQ等。

每名同学如累计被发现三次，将取消实训考核的资格，成绩以零分计算。