教你轻松制作高校网站开场动画

【项目说明】

本项目的主要内容是制作一个高等院校的网站开场动画。项目的开头是预载动画，接着动画显示该学校的中英文名称；动画的主画面主要显示该校的校风校训和教风学风两部分内容，中间小动画显示该校的主要科研成果、研究领域和学术上有成绩的教授图片；最后显示登录界面，访问者可点击按钮访问学校主页。其效果如图8.1所示。

【实现过程】

1.项目设计思路

Step1 本项目是一个高校的网站开场动画，开场动画以该校的“校风校训”、“学风教风”为主要内容来显示该高校的主要风貌，为了进一步突出该高校的特色，中间用圆形的小动画循环显示了该校相关研究领域的画面、相关的科研人员的图片等信息。由于是高等院校的网站开场动画，字体和相关颜色的选取上尽量避免花哨、过分修饰的痕迹，以显示高等院校沉稳、大气的特点。

图8.1 项目中的主要界面效果图

Step2 本项目的设计步骤分为五个部分：预载动画、名字显示、校风校训显示、学风教风显示、欢迎访问界面。

2.制作预载动画

Step1 启动Adobe Flash CS6后，新建一个文档，设置文档大小为778×432像素，背景为“蓝色”。执行“文件”→“保存”菜单命令，将新文档保存，并命名为“高校网站开场动画”。

Step2 重命名图层1为“loading”，选择“文本工具”，设置“文本类型”为“静态文本”，字体为“Times New Roman”，字号为“12”，字体颜色为“#666666”，在舞台中间处输入“LOADING…”，并将该文本转化为影片剪辑元件“loading”，效果如图8.2所示。

Step3 新建图层并重命名为“计数”，选择“文本工具”，设置“文本类型”为“动态文本”，字体为“Times New Roman”，字号为“12”，字体颜色为“黑色”，在元件“loading”的后面拖出一个文本框，在“属性”面板中将变量命名为“percentage”，如图8.3所示。

Step4 新建图层并重命名为“进度条1”，选择“矩形工具”，设置笔触颜色为“无”，填充类型为“线性填充”，颜色设置为“#33B3FF”和“#CEFF66”，在“loading…”的下面画一个矩形，并将其转化为影片剪辑元件“进度条1”，并将该实例命名为“bar”，效果如图8.2所示。

图8.2 加载动画设计界面

图8.3 “percentage”动态文本设置

Step5 在图层“进度条1”上新建图层“加载条2”，选择“矩形工具”，设置笔触颜色为“白色”，填充颜色为“线性填充”，颜色设置为3个“#FFFFFF”，“Alpha”值依次设置为“0%”、“70%”和“0%”，颜色填充为上下填充，画一个和“进度条1”一样大小的矩形，并将其转化为影片剪辑元件“进度条2”，效果如图8.2所示。

Step6 新建图层并重命名为“as”。选中第1帧，在“动作”面板中输入如图8.4所示脚本。

图8.4 第1帧代码

其中第1行，用getBytesTotal（）函数获取影片的总字节数并赋值给变量totalsize；第2行，用getBytesLoaded（）函数获取影片已经下载的字节数并赋值给变量currentsize；第3行计算已经下载的百分比并赋值给动态文本框“percentage”显示。第4行实例“bar”的长度随着下载百分比动态增大。

选中第2帧，在“动作”面板中输入如图8.5所示代码。

其中第1行代码判断已加载的字节数是否等于总字节数（是否加载100%）；第3行表示如果下载没有完成，跳转到第1帧，继续预载；第7行表示下载完毕，转到主动画中播放。

3.制作名字显示动画

Step1 新建影片剪辑元件“中文名字”。选择“文本工具”按钮，设置“文本类型”为“静态文本”，字体为“中山行书”，字号为“45”，字体颜色为“#D20905”，输入“河南科技学院”。

Step2 新建影片剪辑元件“英文名字”。选择“文本工具”按钮，设置“文本类型”为“静态文本”，字体为“Arial”，字号为“15”，字体颜色为“#000000”，输入“Henan Insti_- tute of Science and Technology”。

Step3 新建图形元件“光束”。绘制一个宽为60像素，高为77像素的无框矩形，填充类型为“线性填充”，3个颜色值均为“#FFFFFF”，“Alpha”值依次设置为“0%”、“70%”和“0%”，颜色填充为左右填充，其效果如图8.6所示。

图8.5 第2帧代码

图8.6 绘制“光束”效果图

Step4 回到主场景中，新建图层重命名为“内框”，在第5帧插入空白关键帧。在第5帧处绘制一个大小为778×432像素的无框白色矩形，使其正好遮住舞台背景。

Step5 回到主场景中，新建图层重命名为“标题”，在第5帧插入空白关键帧，拖动元件“中文名字”、“英文名字”到舞台中央，将这两个元件转化为影片剪辑元件“文字动画”。双击“文字动画”元件，进入该元件编辑窗口。将元件“中文名字”、“英文名字”分别放到“中文”、“英文”图层中。分别在两个图层的第24帧处插入关键帧，分别设置第1帧处该实例的“色彩效果”样式为“Alpha”，取值为“0%”，然后在各层的第1帧和第24帧中间创建传统补间动画。新建图层“中文2”，复制图层“中文”的第24帧到其24帧处。新建图层“光束”，在第24帧处插入关键帧，拖动元件光束到舞台上，并将其放置在“河南科技学院”的最左边，在第62帧处插入关键帧，并将元件移到文字的最右侧外方，在第24帧和第62帧中间创建传统补间动画。移动图层“光束”到图层“中文2”的下方，选中图层“中文2”，创建遮罩层。延伸各图层至第68帧。新建图层，在第68帧处插入空白关键帧，添加代码“stop（）；”。其最后效果如图8.7所示。

Step6 新建按钮元件“跳过”。选择文本工具，字体为“宋体”，大小为“15”，颜色为“黑色”，输入文字“跳过”，在“指针经过”、“按下”和“点击”处插入关键帧。新建图层，绘制一个大小和文本相同的无框矩形，颜色填充为淡蓝色渐变，可参考元件“光束”的填充方法，其效果如图8.8所示。

图8.7 “文字动画”影片剪辑的图层关系

图8.8 “跳过”按钮

Step7 回到主场景中，新建图层重命名为“按钮”，在第21帧插入空白关键帧，放置按钮元件“跳过”到舞台的右下方，在第29帧处插入关键帧。设置21帧处的“跳过”按钮实例的“色彩效果”样式为“Alpha”，取值为“0%”，在第21帧和第29帧中间创建传统补间动画。选中该按钮，在右键菜单中选择“动作”选项，输入代码“on（release）{gotoAndPlay（735）；}。”

4.制作“校风校训显示”动画

Step1 新建图形元件“线1”。选择“直线工具”，设置笔触颜色为“#8FBBFA”，绘制一条直线。新建图形元件“边线”。选择“矩形工具”，设置笔触颜色为“无”，填充颜色为“#E1EBFF”，绘制高度为6像素，宽为800像素的矩形。参照元件“边线”的绘制方法，创建填充颜色为“#6699FF”，高度为6像素的元件“线2”；创建填充颜色为“#66CCCC”，高度为3像素的元件“线3”；创建填充颜色为“#CCFF99”，高度为1像素的元件“线4”。

Step2 新建影片剪辑元件“彩带”。在第1帧处放入元件“线2”，在第10帧处插入关键帧。设置第1帧处的Alpha值为20%，垂直向下移动第10帧处的元件一小段距离，设置Al_- pha值为60%。在第22帧处插入关键帧，垂直向下移动一些距离，设置实例的“色彩效果”样式为“Alpha”，取值为“0%”，分别在第1帧和第10帧中间，第10帧和第22帧中间创建传统补间动画。以此方法新建图层，放入不同的彩线，制作一个线条交叉运动的动画，其效果如图8.9所示。

图8.9 “彩带”影片剪辑各图层之间的关系和效果图

Step3 导入“素材”文件夹内的所有图片文件。新建图形元件“图片1”，将“库”面板中的“image1”拖入其中，设置大小为778×210像素。

Step4 新建图形元件“校训”。选择“文本工具”，字体为“方正姚体”，大小为“55”，颜色值为“#990000”，输入文字“校训校风”。新建图形元件“文字1-1”。选择“文本工具”，字体为“方正姚体”，大小为“25”，颜色值为“#990000”，输入文字“崇德尚能，知行合一”。在“库”面板中选中图形元件“文字1-1”直接复制为图形元件“文字1-2”，打开元件修改其中的文字为“自立自强求是创新”。

Step5 新建图形元件“圆”。选择“椭圆工具”，填充颜色设置为“无”，绘制一大小为121×121像素的正圆，选择“修改”→“形状”→“将线条转化为填充”命令，将线条转化为填充。选择“颜色”面板，设置填充颜色类型为“线性填充”，颜色设置为“#FFFFFF”（Alpha值为100%）、“#FFFFFF”（Alpha值为0%），其效果如图8.10所示。

图8.10 图形元件“圆”的效果图

Step6 新建影片剪辑元件“圆圈”。将元件“圆”拖入舞台中，在第21帧处插入关键帧，在第1帧和第21帧中间创建传统补间动画。打开“属性”面板，设置补间属性为“顺时针旋转”、“1圈”。(www.chuimin.cn)

Step7 新建影片剪辑元件“圆圈1-2”。选择“椭圆工具”，填充颜色设置为“无”，填充颜色设置为白色，绘制一个120×120像素的正圆，在第8帧处插入关键帧。选中第1帧，将圆的形状缩小为14×14像素的正圆，圆心不变，在第1帧和第8帧中间创建形状补间动画。选中第1帧到第8帧，复制到第27帧和第35帧。在“图层1”的下面新建图层“图”，在第8帧插入空白关键帧，放入图片“1-3”，使其中心和上面图层的圆心对齐，将该图片转化为元件“图1-3”，在第22帧处插入关键帧，设置第8帧处元件“图1-3”的实例Alpha值为0，在第8帧和第22帧处创建传统补间动画。按此方法在第35帧和第48帧处放入图片“1-4”。新建图层，在第50帧处插入空白关键帧，添加动作代码“stop（）；”。元件“圆圈1-2”图层之间的关系如图8.11所示。

图8.11 元件“圆圈1-2”图层之间的关系

Step8 新建影片剪辑元件“圆圈1”。在“图层1”中选择“椭圆工具”，填充颜色设置为“无”，笔触颜色设置为白色，绘制一个120×120像素的正圆，在第30帧处插入关键帧。选中第1帧，将圆的形状缩小为5×5像素的正圆，圆心不变，在第1帧和第30帧中间创建形状补间动画。在“图层1”下面新建“图层2”在第1帧中放入图片“1-1”，中心和“图层1”中的圆心对齐。在第46帧处插入关键帧，放入图片“1-2”，转化为图形元件“图1-2”，在75帧处插入关键帧，设置第46帧处实例的“色彩效果”样式为“Alpha”，取值为“0%”，在第46帧和第75帧中间创建传统补间动画。在第91帧处插入空白关键帧，放入元件“圆圈1-2”，扩展各层帧到第140帧。在“图层1”的上面新建图层“圆圈”，在第1帧处放入元件“圆圈”，使其中心和下面图片对齐，扩展帧到第140帧，在“图层1”处创建遮罩层。其各层之间的关系如图8.12所示。参照元件“圆圈1”的制作方法创建元件“圆圈2”，放置图片“2-1”、2-2”、“2-3”、“2-4”到元件中。

Step9 回到主场景中。新建图层“图片”，在第30帧处放入元件“图片1”，使其对其到舞台中央。在第45帧处插入关键帧，设置第30帧处实例的“色彩效果”样式为“Alpha”，取值为“0%”，在第30帧和第45帧中间创建传统补间。选中第30帧到第45帧，复制到第304帧处，选中第304帧到第321帧，单击鼠标右键选择菜单中的“翻转帧”。

Step10 回到主场景中。新建图层“图片”，在第30帧处放入元件“图片1”，使其对其到舞台中央。在第45帧处插入关键帧，设置第30帧处实例的“色彩效果”样式为“Alpha”，取值为“0%”，在第30帧和第45帧中间创建传统补间动画。

Step11 新建图层“线1”和“线2”，在第12帧插入空白关键帧，在两个图层分别放置元件“线1”，调整其宽度为与舞台等长，并使用“对齐”面板，使其放置在舞台中央。在第29帧处插入关键帧，分别向下、向上调整两根线到舞台高度的1/4和3/4处（即图片的上下边沿处）。在第21帧和第29帧中间创建传统补间动画。

Step12 新建图层“边线”，在第30帧处插入关键帧，拖入两个“边线”元件，分别放置“线1”和“线2”的外侧。新建图层“彩带”，在第30帧处插入关键帧，拖入元件“彩带”放在背景图片的下方。边线等各图层之间的关系和效果图如图8.13所示。

图8.12 元件“圆圈1”图层之间的关系

图8.13 边线等各图层之间的关系和效果图

Step13 新建图层“文字1”。在第56帧处插入关键帧，拖动元件“校训”到边线的左上方。转化为元件“校训动画”，双击该元件进入编辑窗口。在第10帧处插入关键帧，向左移动第1帧处的实例到舞台外边，设置实例的“色彩效果”样式为“Alpha”，取值为“0%”，在第1帧和第10帧之间创建补间动画，插入帧到第53帧。新建图层2，复制图层1的第10帧到图层2的第12帧，插入帧到第53帧。在图层2的下面新建图层3，在第13帧处插入关键帧，放置元件“光束”在文字的左侧，分别在第33、53帧处插入关键帧，移动第33帧处的元件到文字的右侧，分别在第13帧和第33帧之间，第33帧和第53帧中间创建传统补间动画，在图层2处创建遮罩层遮罩图层3。新建图层，在第53帧处插入关键帧，添加动作代码“stop（）；”。“校训动画”元件各图层之间的关系如图8.14所示。

图8.14 “校训动画”元件各图层之间的关系

图8.15 影片剪辑“文字2动画”的图层设置

Step14 新建图层“文字2”。在第97帧处插入关键帧，拖动元件“文字1-1”、“文字1-2”到背景图片的右上方，具体位置如图8.15所示。选中两个元件，转化为影片剪辑元件“文字2动画”，双击进入该元件编辑窗口。分别将两个元件放置到不同的图层中，创建从舞台外侧移动到舞台上的补间动画，具体方法如图8.15所示。

Step15 新建图层“文字3”。在第126帧处插入关键帧，选择“文本工具”，在舞台的右上方处输入如图8.14所示的文字，转化为影片剪辑元件“文字3”，在元件“文字3”中新建图层绘制一条竖线。分别给两个图层创建遮罩层，使其动态显示，在第26帧处添加代码“stop（）；”其各图层之间的关系如图8.16所示。

图8.16 影片剪辑“文字3”的图层设置

Step16 新建图层“圆圈1”。在第162帧处插入关键帧，放置元件“圆圈1”到舞台上。新建图层“圆圈2”。在第199帧处插入关键帧，放置元件“圆圈2”到舞台上。将两个图层延伸至301帧。

5.制作“学风教风显示”动画

Step1 新建影片剪辑元件“图片2”。在“图层1”第1帧中拖入图片“2.jpg”，新建图层2，在第1帧处绘制一个比图片稍大的菱形，在第22帧处插入关键帧，在第1帧处缩小该图形到左下角处，在第1帧和第22帧处创建形状补间动画，设置图层2遮罩图层1，并在第22帧处添加动作代码“stop（）；”。其图层设置如图8.17所示。

图8.17 影片剪辑“图片2”的图层设置

Step2 参照制作“校风校训显示”动画的方法制作“学风教风显示”动画部分。

Step3 新建图形元件“背景边框”。绘制一个大小为1450×994像素的红色边框无填充颜色的矩形，接着绘制一个大小为748×432像素的红色边框无填充颜色的矩形，使这两个矩形分别和舞台对齐到中央，将两矩形边框围成的图形填充为矩形，删除掉边线。新建图层“背景边框”，在第4帧处插入空白关键帧，拖入元件“背景边框”，放置到舞台中央，扩展帧到650帧。

6.制作“欢迎访问界面”动画

Step1 新建图形元件“背景2”。选择“矩形工具”，绘制一个大小为778×432像素的无框矩形，进行“淡蓝色”、“蓝色”的线性渐变填充。

Step2 新建图形元件“线圈”。参考元件“圆”的绘制方法，绘制一个直径为260像素的正圆，填充颜色为无。

Step3 新建图形元件“欢迎”。选择“文本工具”，字体为“华文行楷”，大小为“40”，颜色为白色，输入文字“欢迎访问”。

Step4 新建图形元件“环”。使用“椭圆工具”，绘制一个白色的空心圆环白色，其效果如图8.18所示。新建影片剪辑元件“动态环”，在第1帧处拖入元件“环”，在第15帧处插入关键帧，保持中心点不变，对该实例进行放大，设置实例的“色彩效果”样式为“Alpha”，取值为“0%”，在第1帧和第15帧中间创建传统补间动画。

图8.18 元件“环”的效果图

图8.19 元件“按钮形状”效果图

Step5 新建影片剪辑元件“按钮形状”。在图层1处放置元件“动态环”，大小设置为50×50像素，对齐到舞台中心；在图层2中绘制一个大小为85×85像素的无边框正圆，颜色填充为“白色”，Alpha值为25%，对齐到舞台中心；在图层3中绘制一个大小为74×74像素的白色边框正圆，颜色填充设置为“淡蓝色线性渐变”，对齐到舞台中心；在图层4中绘制一个大小为74.75×74.75像素的无边框正圆，颜色填充设置为“白色线性渐变”，Alpha值分别为0和50%，对齐到舞台中心；在图层5中绘制一个白色线性渐变的椭圆，作为高光放在图形的左上方，其效果如图8.19所示。

Step6 新建按钮元件“登录按钮”。在“指针经过”、“按下”和“点击”处插入空白关键帧。在“点击”处绘制一个黄色正圆。

Step7 回到主场景中，在图层“内框”第652处插入关键帧，将元件“背景2”拖到舞台中，在第735处插入普通帧。新建图层13在第655拖入“线圈”元件；新建图层14在第653帧处拖入“线圈”元件，在第735处插入普通帧。调整它们的大小如图8.20所示。

图8.20 线圈放置位置效果图

Step8 新建图层“欢迎”。在第678帧处插入空白关键帧，将元件“欢迎”拖到舞台中，放置到如图8.21所示的位置。新建图层“竖线”，在第689帧处插入空白关键帧，选择“直线工具”绘制一白色竖线，在第694帧处插入关键帧，缩小第689帧处图形，在第689帧和694帧中间创建形状补间动画。新建图层“中文”，在第695帧处拖入元件“中文名字”；新建图层“英文”，在第711帧处拖入元件“英文名字”。其效果图如图8.21所示。

图8.21 “登录界面”的效果图

Step9 新建图层“按钮”。在第725帧处插入空白关键帧，拖入元件“按钮形状”，再拖入元件“登录按钮”，放置到“按钮形状的上面”，形状大小一样，选择“文本工具”，在上面输入“英文”。选中该按钮，在右键菜单中选择“动作”选项，输入代码“on（release）{getURL（＂http：//www.hist.edu.cn＂）；}。”

参照此方法，在舞台上放置如图8.21所示的另外两个按钮。

Step10 扩展“登录界面”部分的各图层至第735帧，在第735帧处加入动作代码“stop（）；”。

【技术讲解】