第七节生命科学学院网站制作2.pdf

第二节 网站特色LOADING 效果制作 在制作这个flash 整站前，已经有一个静态页面的样稿（图2-1 ）。 （图2-1 ） 根据这个样稿，我们开始网站的制作。如果没有详细的样稿，在网站设计前也最好有 一张简略的草图，标明各种元素的摆放位置等等，这样在flash 设计中就不会感到无所适从。 当然，在设计中，不可避免要根据新的情况对原来的页面加以修改。 7-2-1. loading 元素的制作 Flash 网站的开头莫过于制作loading，在这里，我们使用时下许多网站流行的斜条纹 流动loading 效果。（图2-2 ） （图2-2 ） 首先开始loading 的制作。新建flash 文档。（图2-3 ） （图2-3 ） 设置画布宽为776 象素，高为610 象素。帧频为40fps 。（图2-4 ） （图2-4 ） 在时间轴面板中，新建loading 图层文件夹，将图层1 拖曳到图层文件夹下。（图2-5 ） （图2-5 ） 使用矩形工具 ，设置笔触颜色为#CCCC99 ，填充颜色为白色。（图2-6 ） （图2-6 ） 设置矩形的圆角半径为8 点。（图2-7 ） （图2-7 ） 设置笔触为极细线，即在任何状况下显示的高度都为1 象素。（图2-8 ） （图2-8 ） 按住Shift 键在画布中画一个正方形。（图2-9 ） （图2-9 ） 用选择工具 选中该正方形，转换为元件。命名为loadingbg 。（图2-10 ） （图2-10 ） 将图层 1 更名为loadingbg，新建图层，命名为loadingbgshadow 。将这个图层拖曳到 loadingbg 图层下方。（图2-11 ） （图2-11 ） 使用矩形工具 ，设置笔触颜色为无颜色，填充颜色为灰色。（图2-12 ） （图2-12 ） 在loadingbg 元件的斜下方绘制圆角矩形。（图2-13 ） （图2-13 ） 如果关闭loadingbg 图层的显示，该矩形的形状是这样的。（图2-14 ） （图2-14 ） 将该矩形转换为元件。命名为loadingbgshadow 。（图2-15 ） （图2-15 ） 将两个图层的帧向后适当延长。（图2-16 ） （图2-16 ） 在两个图层第5、10、15 帧插入关键帧。（图2-17 ） （图2-17 ） 关闭loadingbgshadow 图层的显示，调整loadingbg 图层各关键帧。（图2-18 ） （图2-18 ） 选中第 1 帧，用任意变形工具 ，按住Shift 等比例缩放，将loadingbg 元件放大， 并向上移动。（图2-19 ） （图2-19 ） 在属性面板中，将透明度设置为30 ％。（图2-20 ） （图2-20 ） 选中第 5 帧，用任意变形工具 ，按住Shift 等比例缩放，将loadingbg 元件略微放 大，并略微向上移动。（图2-21 ） （图2-21 ） 在属性面板中，将透明度设置为80 ％。（图2-22 ） （图2-22 ） 选中第10 帧，用任意变形工具 ，按住Shift 等比例缩放，将loadingbg 元件略微缩 小。（图2-23 ） （图2-23 ） 第15 帧loadingbg 元件不变化。（图2-24 ） （图2-24 ） 锁定loadingbg 图层，打开loadingbgshadow 图层的显示，调整loadingbgshadow 图层 各关键帧。（图2-25 ） （图2-25 ） 选中第 1 帧，用任意变形工具 ，按住Shift 等比例缩放，将loadingbgshadow 元件 放大，并向下移动。（图2-26 ） （图2-26 ） 在属性面板中，将透明度设置为20 ％。（图2-27 ） （图2-27 ） 选中第5 帧，用任意变形工具 ，按住Shift 等比例缩放，将loadingbgshadow 元件 略微放大，并略微向下移动。（图2-28 ） （图2-28 ） 在属