第八章黑白风格flash网站制作4.pdf

第四节 网站主场景设计 一个flash 网站主场景的呈现效果，是很值得考究的东西。有的网站下载完毕以后，整 个flash 页面突然就全部出现了，这样，似乎没有用上flash 的特长，显得比较呆板；而有的 网站，其主页面中的元素是用了很多动作、形变或者遮罩逐一“闪”出来的，这样从一开始 就能紧紧地吸引住浏览者的眼球，让人发出由衷的赞叹。可以说，网站主场景的呈现效果， 是决定一个flash 网站成败的非常重要的因素。 在做好网站的loading 和开场后，接下来我们要着手设计网站的主场景。 8-4-1. 制作游戏背景的开场效果 网站的主场景从第160 帧开始。在as 图层中，在第160 帧插入关键帧，将帧标签命名 为bgbegin 。（图4-1 ） （图4-1 ） 新建bg 图层文件夹，在bg 图层文件夹下新建图层。并在第160 帧插入关键帧。（图 4-2 ） （图4-2 ） 打开guide 图层文件夹的显示，显示衬底的图片。（图4-3 ） （图4-3 ） 编辑图层12 第160 帧。使用矩形工具 ，将笔触颜色设置为无颜色，填充颜色设置 为黑色。绘制矩形，使形状与衬底图片的竖线大小相同。（图4-4 ） （图4-4 ） 如果很难做到与衬底图片的竖线大小相同，可以选中画好的矩形，在属性面板中设置 其属性来精确控制大小和位置。（图4-5 ） （图4-5 ） 按同样的道理，用矩形工具 ，绘制其余几根竖线。（图4-6 ） （图4-6 ） 用矩形工具 ，绘制“MY LIFE IN WUDING ”文字下面的横条。（图4-7 ） （图4-7 ） 用文本工具 ，书写“MY LIFE IN WUDING ”文字。（图4-8 ） （图4-8 ） 用文本工具 ，书写“04 ”。（图4-9 ） （图4-9 ） 用文本工具 ，使用04 字体，在黑色横条上继续添加文字。（图4-10 ） （图4-10 ） 在黑色横条下方继续添加文字。在设计中，有很多元素是属于点缀性质的。（图4-11 ） （图4-11 ） 使用矩形工具 ，画菜单下方的黑色背景，并在右下角抠掉一小块。（图4-12 ） （图4-12 ） 选中该形状，转换为元件，命名为menubg 。（图4-13 ） （图4-13 ） 以衬底图片为准，绘制右边大块的黑色背景。（图4-14 ） （图4-14 ） 用选择工具 选中这片背景。（图4-15 ） （图4-15 ） 转换为元件。命名为picbg 。（图4-16 ） （图4-16 ） 绘制好以上元素后，新建7 个图层，分别命名line1 到line7 。（图4-17 ） （图4-17 ） 在第160 帧选中line1 到line7 图层，插入关键帧。将七个矩形形状分别复制到七个图 层中。（图4-18 ） （图4-18 ） 在第170 帧选中line1 到line7 图层，插入关键帧。（图4-19 ） （图4-19 ） 选中第 160 帧line1 到line7 图层中的形状，将所有竖条的高度改为1，将横条的宽度 改为1。设置第160 帧line1 到line7 图层至第170 帧line1 到line7 图层的形状补间，简易设 置为-100 。（图4-20 ） （图4-20 ） 这样这些“视觉引导线”的动作就制作完成了。虽然是简单的动画效果，但是却十分 生动有趣。（图4-21 至图4-25 ） （图4-21 ） （图4-22 ） （图4-23 ） （图4-24 ） （图4-25 ） 新建四个图层，分别为text1 、text2 、text3 和text4 。（图4-26 ） （图4-26 ） 将图层 13 中的四段文字，分别复制粘贴到text1 、text2 、text3 和text4 图层的相同位 置。（图4-27 ） （图4-27 ） 在text1 图层上新建图层，命名为mask1 ，设置mask1 图层对text1 图层的遮罩。编辑 mask1 图层，在第170 帧插入关键帧。（图4-28 ） （图4-28 ） 使用矩形工具 ，将笔