flash基本实训项目网站banner动画.docx

flash基本实训项目网站banner动画.docx

《flash基本实训项目网站banner动画.docx》由会员分享，可在线阅读，更多相关《flash基本实训项目网站banner动画.docx（14页珍藏版）》请在冰豆网上搜索。

flash基本实训项目网站banner动画

基本实训项目——网站Banner动画

2.1创意风格解析

Flash制作的网站Banner动画已在网页上随处可见，是Flash动画在网站中的重要应用。

动画整体颜色为淡的蓝绿色，与网站logo颜色呼应，更增强了网站的科技感。

界面背景采用商务感较强的图片，文字动画的设计突显了企业的文化，剪影人物动画更增强了企业的科技感。

分帧效果如下图611、图612所示。

制作该动画的关键在于各个对象出现的时间点和持续时间，使动画具有较强的节奏感和较好的连贯性。

图611分帧效果图1

图612分帧效果图2

2.2Banner动画的制作

1.素材准备

在制作网站前，我们一般会使用Photoshop工具软件设计出网站的效果图。

同样我们先用Photoshop软件设计出网站Banner的效果图，保存为banner.psd文件。

2.动画准备

（1）新建一个Flash文件，根据PS设计稿，设置影片舞台尺寸为1002×431px，背景颜色设置为#666666，帧频为12fps，如图613所示。

将文件以“gaoc-banner”命名并保存。

（2）导入PSD文件。

单击“文件”菜单，选择“导入”选项下的“导入到舞台”（或者使用快捷键Ctrl+R），打开“导入”面板，选择“banner.psd”文件导入，打开如图614所示的对话框。

选中“检查要导入的Photoshop图层”中所有的图层，其他保持默认选项，单击“确定”按钮。

图613文档属性

图614导入psd文件

（3）导入psd文件后，舞台及时间轴面板如下图615所示。

图615导入psd文件舞台效果

（4）选中“banner1”文件夹图层，单击导入的对象，在属性面板中，将坐标值调整为（0,0,），使导入的对象相对舞台对齐，如下图616所示。

图616对齐导入对象

3.动画制作

（1）删除“图层1”，锁定“图层6”、“图层12”图层，隐藏“图层6”上面的其他图层。

按住Shift键选中图层“图层6”、“map”、“图层12”的第205帧，按F5插入普通帧，将动画的时间延长为205帧。

如下图617所示。

图617设置动画时间

（2）单击“map”图层的第1帧，按F8，将位图转换为影片剪辑元件“map”。

（3）选中“map”图层的第20帧，按F6插入关键帧。

选择“map”图层的第1帧，单击舞台上的“map”实例，打开属性面板，在“色彩效果”的“样式”下拉菜单中选择“Alpha”，将Alpha值调整为0，如下图618所示。

图618调整Alpha值

（4）在“map”图层的第1帧至第20帧之间单击右键，选择“创建传统补间”，制作“map”渐显动画。

锁定“map”图层。

（5）显示“义乌高创信息技术有限公司为您提供……”图层（简称“义乌1”图层），选中第1帧，按住左键拖动帧到第15帧，调整该图层内容出现的时间点。

单击第15帧，按F8，转换为影片剪辑元件“义乌高创1”。

选中第40帧，按F6插入关键帧。

选中第110帧，按F5插入普通帧。

（6）利用遮罩制作文字打字效果。

在上述图层上方新建图层“遮罩1”。

在第15帧插入关键帧。

使用“矩形工具”绘制一个矩形

，遮住前面的文字，如下图619所示。

在第40帧插入关键帧。

图619绘制遮罩层

（7）选择“遮罩1”图层的第15帧，使用“任意变形工具”

，将矩形条向左缩短到文字的左边。

在第15帧至第40帧之间单击右键，选择“创建补间形状”，制作形状补间动画。

如下图620所示。

在“遮罩1”图层上单击右键，选择“遮罩层”。

图620遮罩层动画

（8）显示“领先”图层，选中第1帧，按住左键拖动帧到第41帧，调整该图层内容出现的时间点。

单击第41帧，按F8，转换为影片剪辑元件“领先1”。

选中第53帧，按F6插入关键帧。

选中第110帧，按F5插入普通帧。

（9）选择“领先”图层的第41帧，单击舞台上的“领先1”实例，打开属性面板，添加“模糊滤镜”，设置“模糊X”和“模糊Y”均为10像素，如下图621所示。

右击第41帧至第53帧之间任一帧，选择“创建传统补间”。

图621滤镜属性设置

（10）选择“遮罩1”图层的第53帧，按F6插入关键帧。

解除“遮罩1”图层的锁定，使用“任意变形工具”

，将矩形条向右延伸覆盖“的”字。

如下图622所示。

锁定“遮罩1”图层。

图622绘制遮罩层矩形

（11）显示“企业…”图层，选中第1帧，按住左键拖动帧到第54帧。

单击第54帧，按F8，转换为影片剪辑元件“企业信息化”。

选中第80帧，按F6插入关键帧。

选中第110帧，按F5插入普通帧。

（12）选择“企业…”图层的第54帧，单击舞台上的“企业信息化”实例，打开属性面板，添加“模糊滤镜”，设置“模糊X”和“模糊Y”均为10像素，右击第54帧至第80帧之间任一帧，选择“创建传统补间”。

效果如下图623所示。

图623“企业…”图层动画效果

（13）显示“解决…”图层，选中第1帧，按住左键拖动帧到第81帧。

单击第81帧，按F8，转换为影片剪辑元件“解决方案”。

选中第90帧，按F6插入关键帧。

选中第110帧，按F5插入普通帧。

（14）选择“解决…”图层的第81帧，单击舞台上的“解决方案”实例，打开属性面板，在“色彩效果”的“样式”下拉菜单中选择“Alpha”，将Alpha值调整为0。

右击第81帧至第90帧之间任一帧，选择“创建传统补间”。

效果如下图624所示。

图624“解决…”图层动画效果

（15）按住Shift键选择“义乌1”、“解决…”、“领先”、“企业…”图层的第100帧，按F6插入关键帧，同样的方法在这4个图层的第110帧也插入关键帧。

（16）先将“义乌1”图层解除锁定。

按Shift键选中上述4个图层的110帧，单击舞台上选中的对象，打开属性面板，在“色彩效果”的“样式”下拉菜单中选择“Alpha”，将Alpha值调整为0。

同时选中上述4个图层中第100帧至110帧之间的任一帧，单击右键，选择“创建传统补间”。

再次锁定“义乌1”图层。

（17）显示“科技…”图层，选中第1帧，按住左键拖动帧到第111帧。

单击第111帧，按F8，转换为影片剪辑元件“科技”。

选中第131帧，按F6插入关键帧。

选中第205帧，按F5插入普通帧。

（18）选择“科技…”图层的第111帧，单击舞台上的“科技”实例，打开属性面板，添加“模糊滤镜”，设置“模糊X”和“模糊Y”均为10像素，右击第111帧至第131帧之间任一帧，选择“创建传统补间”。

效果如下图625所示。

图625“科技…”图层动画效果

（19）显示“矢量…”图层，选中第1帧，按住左键拖动帧到第111帧。

单击第111帧，按F8，转换为影片剪辑元件“矢量”。

选中第205帧，按F5插入普通帧。

（20）双击“矢量”影片剪辑元件，进入编辑状态。

如下图626所示。

图626“矢量”影片剪辑元件

（21）选择“套索工具”

，单击“魔术棒设置”

，将阈值设置为“20”，如下图627所示。

单击“魔术棒”

，选取黑色矢量人物周边的像素删除，将矢量人物分离出来。

如下图628所示。

图627魔术棒设置

图628分离矢量人物

（22）单击图层1的第20帧，按F5插入普通帧。

选择第1帧，单击中间的矢量人物，如图629所示，按Ctrl+C复制，新建图层2，选择第1帧，按Ctrl+Shift+V粘贴。

使用“颜料桶工具”

将颜色填充为白色，将多余的像素删除，如图630所示。

图629选择中间的矢量人物

图630填充为白色

技巧：

Ctrl+Shift+V组合键用于将复制的对象粘贴在原来的位置上。

（23）在图层2的第2帧，单击右键选择“插入空白关键帧”（或者按F7插入空白关键帧）。

复制第1帧到第3帧，在第4帧又插入空白关键帧。

（24）选择图层1的第1帧，单击最右边的矢量人物，按Ctrl+C复制。

选择图层2第5帧，按F6插入关键帧，按Ctrl+Shift+V粘贴。

使用“颜料桶工具”

将颜色填充为白色，将多余的像素删除。

在第6帧插入空白关键帧，复制第5帧到第7帧，在第8帧插入空白关键帧，如图631所示。

图631右边矢量人物动画

（25）使用同样的方法制作其他矢量人物闪烁动画。

（26）新建图层3，在第20帧插入关键帧，按F9打开“动作”面板，输入“stop（）;”。

至此矢量人物动画制作完毕，如下图632所示。

图632矢量人物动画帧效果

（27）显示“义乌…”图层（段落文字图层），选中第1帧，按住左键拖动帧到第132帧。

单击第132帧，按F8，转换为影片剪辑元件“文字2”。

选中第205帧，按F5插入普通帧。

（28）在“义乌…”图层上方新建一个“遮罩2”图层，利用矩形形变制作遮罩层动画，关键帧效果如下图633、图634所示。

然后在“遮罩2”图层上单击右键，选择“遮罩层”。

图633遮罩动画关键帧效果1

图634遮罩动画关键帧效果2

2.3测试影片及发布

单击“文件”菜单下的“保存”菜单项，将影片进行保存。

单击“文件”，选择“导出”菜单项下的“导出影片”，将导出swf格式的影片。