第十章综合网页设计实例 (2).pptVIP

主要内容 5.测试导出动画 选择菜单“控制|测试影片【CTRL+ENTER】”，测试影片效果，保存文件“风尚志.fla”。选择菜单“文件|导出|导出影片”，将动画导出到网站media文件夹中，命名为logo.swf。 10.1.5 Flash动画设计 6.将动画插入网页模板 使用Dreamweaver打开模板文件mb.dwt，删除标志图形，插入上面制作的Flash。然后更新应用了该模板的网页，测试网页。 10.1.5 Flash动画设计 单击每个链接，测试之后我们发现除了根文件夹中的首页Flash不能显示外，其它的网页都正常。这是Dreamweaver在更新模板时没有更新参数路径而产生的一个BUG，如果是在同一文件夹中则不会产生这种情况。 我们修改一些代码来解决这个问题。打开记事本软件，选择打开所有类型的文件，打开index.html，选择菜单“编辑|替换”，查找“../media/logo”，替换为“media/logo”。选择“文件|另存为”保存文件为index.html即可。注意，当修改模板以后会出现同样的情形，需要重新修改替换。 10.1.5 Flash动画设计 10.2 Flash全站设计 整个网站由flash制作，可以设计出复杂而视觉感受强烈的各种图片和文字互动视觉和听觉效果，令网站具有不同凡响的个性气质。 10.2.1 素材元件的准备 1.素材的准备 在设计Flash动画时，我们需要很多元件的素材，可以通过Photoshop之类的图形设计软件处理得到，创建人物轮廓、实体人物、弹琴的人物、话筒等透明的PNG格式的文件。素材中提供了相应的素材。 2.新建文件并导入素材 新建文件，设置文档属性，宽度1000，高度600，背景色为黑色。导入素材“人物轮廓”、“实体人物”、“弹琴的人物”、“关于我”、“关于我2”、“作者”等素材到库，Flash自动生成对应的元件，保存文件为“Flash网页动画”。 10.2.1 素材元件的准备 3.设计按钮元件 （1）设计鼠标移到按钮上的动画 新建元件，选择影片剪辑，名称为“按钮动画”，使用矩形工具绘制一个没有边线的黄色矩形，宽度7.5，高度7.5，坐标为（0，0），单击第10帧，插入关键帧，选中矩形，将宽度改为118，创建补间形状。在第10帧上单击右键，选择动作，输入“stop();” 。 10.2.1 素材元件的准备 3.设计按钮元件 （2）新建按钮元件 新建按钮元件，命名为“按钮1”，在图层1插入图形“按钮”，插入新图层2，使用文本工具输入文字“首页”，设置字体与字号，新建图层3，在“鼠标经过”帧插入关键帧，将影片剪辑元件“按钮动画”拖到该帧，并补充其它帧 。 （3）复制出其它按钮元件 选择库中的按钮1元件，单击鼠标右键，选择直接复制，改名为按钮2，双击该按钮进行编辑，修改文字为“关于我”。同样复制出其它按钮元件，将文字改名为“奥运专题”、“众志成城”、“相册”。 10.2.1 素材元件的准备 4.设计人群动画 插入影片剪辑元件“欢呼人群动画”，将元件“欢呼的人群”拖到该元件中，修改宽度1000，高度120，坐标（0，0），亮度30%。为了实现人群连续移动的效果，需要将人群复制出2个，排在后面，设置坐标为（1000，0），选中两个人群，按“Ctrl+G”进行组合。 10.2.1 素材元件的准备 4.设计人群动画 单击第80帧，插入关键帧，人群修改坐标为（-1000，0），创建补间动画。这样在播放动画时将出现人群的从右向左的反复移动动画。 10.2.1 素材元件的准备 5.设计人物闪烁动画 新建图形元件，命名为矩形，使用矩形工具创建一个矩形，作为下面遮罩图形使用。 新建影片剪辑元件“舞动人物”，将元件“人物轮廓”拖动到第1帧，新建图层2，复制图层1的第1帧到图层2第1帧。新建图层3，将元件“矩形”拖动到该层，使用任意变形工具改变大小，使其宽度能够超过人物轮廓，并变窄一些。 10.2.1 素材元件的准备 5.设计人物闪烁动画 在第10帧、20帧、30帧、40帧，插入关键帧，将第10帧、30帧的矩形移动到人物上方，创建每一段的补间动画，在图层2第40帧处插入帧。 10.2.1 素材元件的准备 5.设计人物闪烁动画 在图层3上单击右键，设置为遮罩层。在图层1第40帧插入关键帧，设置属性色调为红色，设置第1帧属性Alpha为0，创建补间动画。 10.2.1 素材元件的准备 5.设计人物闪烁动画 下面制作人物变色动画，在图层1第45、50、55、60、65、70、75帧，插入关键