商务网页动画设计制作.docVIP

3 商务网页动画设计制作 【教学目标】 终极目标：能完成商务页的动画设计与制作并嵌套到网页中 促成目标： 能熟练完成朗声科贸网站网页动画设计与制作 能迅速的将动画嵌套到相关网页中 【项目概述】 小是一家的人员。公司部经理告诉他，公司要为一家销售企业（）开发商务网站，。【项目分析】的人员【】目 录 任务 1 动画设计制作 3 子任务1：创意设计Flash动画 3 子任务2：制作Flash动画 4 任务2： 动画嵌入 39 子任务1：嵌入动画并预览 39 子任务2：生成完整网站包 40 主要是对该网站进行良好的测试及优化工作。 40  任务 1〖任务完成〗”图层，本教材这里没有合并，方便学生以后单独对MP3加效果动画。） 图4-15 步骤6：同第2步骤一样，保存命名为“蓝背景.jpg”。 步骤7：同3步骤一样，保存图层“MP3副本”中的MP3，命名为“第一幕mp3.png”。 步骤8：合并所有的鱼图层，并同样保存为背景透明的png格式，命名为“鱼.png”，如图4-16所示。 图4-16 步骤9：音乐符是需要动的，所以依旧保存为“音乐符1.png”，“音乐符2.png”。 步骤10：至此，所需素材基本准备完毕，如图4-17所示，当然做的过程中可随时根据需要修改，添加素材。 图4-17 C、制作Flash 步骤1：导入素材 (1)从【开始】/【程序】中打开flash软件。 (注：本教材使用的版本为Flash8。) (2)新建flash文档，如图4-18，4-19所示，也可以从文件中新建。 图4-18 图4-19 (3)Ctrl+S保存到Flash源文件夹中，命名为“bar.fla”。 (4)我们可以查看蓝背景和红背景的尺寸，以及项目三中给flash留下的布局位置尺寸都是896px*127px。所以Ctrl+F3打开属性窗口，改变文档属性中的尺寸，如图4-20所示。 （注：Ctrl+F3可打开关闭属性窗口。） 图4-20 (5)选择菜单栏中的【文件】/【导入】/【导入到库】，选择“Flash源文件/图片”中的所有图片，然后打开，如图4-21所示。 （知识要点：库） 图4-21 (6)此时右侧的库中就存在了我们导入的图片，如图4-22所示。 （隐性知识：Ctrl+L打开库） 图4-22 步骤2：第一幕 音乐符动画效果 (1) Ctrl+F8新建“第一幕”影片剪辑元件，如图4-23所示。 （知识要点：元件） 图4-23 (2) 这时就会发现时间轴上有两窗口入口，现在我们处于“第一幕”的编辑窗口。 （知识要点：时间轴） (3) 把库中的“蓝背景.jpg”拖拽到工作区中，并修改属性栏中的位置X：0，Y：0，如图4-24所示。 图4-24 (4) 右键单击工作区中的蓝背景，在弹出的菜单中选择【转换为元件】将位图转换为图形元件（快捷键F8），命名为“bluebj”，如图4-25，4-26所示。 （隐性知识：转换为元件的快捷键是F8，新建元件的快捷键是Ctrl+F8.） 图4-25 图4-26 (5) 双击图层1重命名为“蓝背景”，在时间轴的第235帧处按F5插入帧，如图4-27，4-28所示。 （知识要点：插入“帧”“关键帧”“空白关键帧”） 图4-27 图4-28 (6) 插入新图层，并重命名为“第一幕mp3”，如图4-29所示。 图4-29 (7) 将库中的“第一幕mp3.png”拖拽到工作区中，并放置合适位置，按F8将位图转换为图形元件，如图4-30所示。最终效果如图4-31所示。 图4-30 图4-31 (8) 下来我们要做音乐符沿着曲线路径由左到右的逐渐消失动画效果。插入图层，重命名为“音乐符1”，拖拽库中的“音乐符1.png”到工作区中，放置合适位置，F8将其转换为图形元件，命名为“music1”，如图4-32所示。 图4-32 (9) 给“音乐符1”图层添加引导层，如图4-33所示。 （知识要点：引导层） 图4-33 (10) 先锁定前三图层，防止制作引导线时影响到暂不编辑的内容，如图4-34所示。 （注：锁定可保护被锁定的图层免受修改。） （知识要点：引导线） 图4-34 (11) 选择工具栏中的【钢笔工具】，在工作区的曲线附近点击两锚点，注意点击的同时拖拽出手柄，如图4-35所示。 （注：和Photoshop中的钢笔类似，这里在点锚点的时候就要拖拽出手柄，方便修改优化。） 图4-35 (12) 选择【部分选取工具】，在手柄上拖拽，调节好引导曲线，如图4-36所示。 （注：因为笔触是红色，所以线条是红色。） 图4-36 (13) 锁住引导层，解开“音乐符1”的锁子，选择编辑“音乐符1”图层，移动工作区中的音乐符1到引导线的左端，使中心正好对着起始端，如图