FLASH实验报告.docx

FLASH实验报告.docx

《FLASH实验报告.docx》由会员分享，可在线阅读，更多相关《FLASH实验报告.docx（13页珍藏版）》请在冰点文库上搜索。

FLASH实验报告

学号

20510811119

《电子商务网站动画设计》

课程大作业

2013～2014学年第一学期

教学单位：

经济管理系电商教研室

指导教师：

代四广

专业班级：

电商1111

学生姓名：

费志安

2013年11月25日

“WEB之星”网站动画设计报告书

一、构建网站的目的：

制作该网站是为了检验本学期学习的Flashcs3动画设计的学习成果，在学习的过程中锻炼动手能力，让平时学习到的知识得到实际应用。

该网站是一个网页设计评选比赛的宣传与报名的窗口，主要用于对比赛的宣传与报名。

网站的内容涉及网页动画效果以及对活动的介绍，参赛条件，报名方式等。

二、准备工作：

动手制作网站之前先得收集一些音视频及图片材料，这里直接利用老师提供的素材。

其次是网站的整体构思。

首先是网页布局，主页主要分为三大块，呈T字型：

上面是本次比赛的一个大的LOGO，logo下面正中间是网页的主体内容，内容的左边是导航。

网页以深蓝色为主色调，辅助色为黄色。

网站要实现的功能有闪烁的动画效果、位移动画效果、按钮、影片剪辑、页面跳转、按钮点击播放音乐等。

三、网页制作过程记录：

制作过程分为三步，第一步制作页面最上面的LOGO部分，第二步制作左边的导航栏部分，第三部就是正文部分以及整个页面的排版。

（一）LOGO

LOGO的最终效果如下所示：

1、首先来制作黄色的椭圆：

选择椭圆工具，画一个扁平的椭圆，

选择颜料桶工具将颜色改为黄色，删掉椭圆的边线

然后将其转换成元件，取名为椭圆

转换为元件前应将椭圆全部选中。

2、然后制作“星”字。

“星”字的上面是一个星星，而且在后面的也要用到，因此先来制作星星图案，并将其转化为元件。

选择多角星形工具，在属性面板中选择选项，选择样式中的星形点确定，

换一种黄色，将边线设置为白色。

然后再给添加白线，选择线条工具，将笔触颜色改为白色，将其转换为元件。

接下来制作星字，但是上面的日字中间缺一行，所以先输入星字，再把字体转换为散件删去中间的一行。

星字的边框是黄色的，因此给它添加边框，选择直线工具，将笔触颜色改为黄色，线型改为实线，打开磁铁工具，沿着字体的边沿画直线，如上中图。

星字上面还有一个光条来回闪烁的效果，因此先来制作光条，先用矩形工具画一个矩形，利用变形工具调成平行四边形的形状，填充渐变色，颜色为白色，将两边的不透明度调为10%，选择颜料桶工具填充颜色。

然后新建图层，将之前做好的星字放在新建的图层2，然后将光条放在星字的左边，在图层2的第15帧处插入关键帧，将光条移动到星字的右边，创建补间动画，光条移动到右边后还要回去，所以在第29帧处插入空白关键帧，将第1帧原位复制粘贴到第29帧，在图层1的第29帧处按F5，然后新建图层3，复制图层2的第一帧，粘贴到图层3的第一帧，选中第29帧，按F5，将星星图案放到图层3，调整好位置和图层层次关系：

接下来制作“Web”“之”字和后面的圆。

接下来制作网页设计师评选大赛几个字及其后面的背景、边框：

首先做一个矩形，填充渐变色，在改变其形状：

再用相同的办法制作里面黄色的背景图案

然后在里面添加文字

将其转换为元件。

LOGO所需的图案全都做完后进行排版

为了方便后面的操作，将其转换为元件。

至此，LOGO部分制作完成。

（二）导航栏

当点击导航栏时可以跳转页面，所以导航栏必须是按钮。

制作按钮之前先要制作好素材。

用椭圆工具画两个椭圆，带边框，利用散件的性质将两个椭圆拼成月牙状然后删掉重合的部分

删去红色椭圆，利用墨水瓶工具将月牙的边框填上。

然后将其转换为影片剪辑

新建元件，取名流星，制作流星。

将原来做好的星星放到舞台中间，在图层1的第10帧处插入关键帧，在第1帧与第10帧之间插入补间动画，选中图层1单击右键选择创建引导层

进入流星轨迹元件里面复制轨道上边的边线粘贴到流星元件内的引导图层的第1帧，然后选中流星所在图层，打开磁铁工具，在第1帧处将流行放在引导线的右端，在第10帧处将流星放在引导线的左端。

新建元件，制作椭圆形按钮

画一个带外边框的椭圆，填充渐变色，将其复制缩小，填充方向相反的渐变色

都做好后，开始创建按钮，新建元件，

将库面板中的星星、流行轨迹、圆拖到舞台中来，摆放好位置，在第二帧处插入关键帧，这时选中星星，删除，将流星拖到原来星星的位置，将流星轨迹排列到底层。

选中圆，在属性面板中将亮度调整为负的百分之十

在第3帧处插入关键帧，再把圆的亮度调整为正数，然后输入文字。

用同样的方法制作另外一个按钮。

（三）现在开始制作闪烁的星星及背景。

将原先做好的星星拖到舞台，做成闪烁的影片剪辑效果：

新建影片剪辑元件，将星星图案拖到舞台，在第2帧处插入关键帧，选中第2帧的图案，打散为散件，修改其颜色，即可做成闪烁的效果。

然后将虚线效果用图像元件来实现。

接下来制作整个页面的背景。

选用矩形工具，将边框颜色设为无，填充颜色为浅蓝色，画一个矩形，CTRL+T快捷键打开对齐面板将矩形满画布显示，然后利用钢笔工具在左侧画一条曲线封闭图形，将颜色填充为深蓝色，然后将元件按位置摆放：

（四）创建交互效果

（1）把“参赛条件”“比赛细则”拖放到舞台上。

（2）新建图层，重命名为“文字”，选中第1帧，输入文字“参赛条件”，在第2帧插入关键帧，输入文字“比赛细则”。

（3）“文字”层第1帧，打开动作面板，输入“stop（）”代码，是动画停止在第1帧不能继续播放，在第2帧重复此操作。

（4）在其他层的第2帧插入关键帧，使所有层均为两帧。

（5）“活动介绍”，在动作面板中输入“on（release）{gotoAndstop

（1）}”。

（6）“报名条件”，在动作面板中输入“on（release）{gotoAndstop

（2）}”。

（五）添加音乐播放效果

首先将音乐文件导入到库

接着开始制作音乐播放按钮，新建按钮，取名播放按钮，在图层1制作弹起、指针经过、按下及点击的画面效果，新建一个图层放置音乐文件，因为音乐文件是在按下按钮后才开始播放，因此在放置音乐文件图层的按下帧插入空白关键帧，在属性面板的声音中添加之前导入的音乐文件，将同步属性设为事件，就行了。

制作停止播放按钮时过程也是一样的，只要将同步属性改为停止就行了。

（六）添加电脑打字效果

要做这个效果要分两个部分，文字和光标。

首先来制作光标闪烁的效果。

新建图层取名光标，用直线工具在第1帧画一条百色直线，调粗一点，在第二帧插入空白关键帧，再将空白关键帧延迟两帧，再将这四帧往后复制粘贴就行了。

因为文字是一个一个的显示的，所以首先将所有的文字打出来，这里要显示的是WEBDESIGN共10个文字（包括空格），所以创建10个关键帧，然后把左右的文字都放在每一帧里面，再按每一帧要显示的内容来删除每一帧上的内容就行了。

网页预览：