电子商务网页设计与制作（第二版）课件：美化网店的动态效果.ppt

项目任务实施—任务二跳动的促销活动区2.添加文字图层运用文字工具对图像添加相应的文字，主要运用字体为“隶书”、“书体坊米蒂体”和“Impact”，文字内容如图5-16所示。并且对应各文字图层进行“样式”设置。项目任务实施—任务二跳动的促销活动区3.导入GIF动画文件通过“文件/导入”命令，在列表中选择“视频帧到图层”，在弹出的“载入”对话框中找到GIF动画所在路径。然后在“文件名”文本框内输入“*.*”,再点击“载入”按钮，如图5-17所示。项目任务实施—任务二跳动的促销活动区这时该文件夹所有文件会出现，选择“虎年QQ表情1.gif”，再点选“载入”出现如图5-18所示的，GIF动画导入范围选择。设定后，点击“确定”后完成导入。项目任务实施—任务二跳动的促销活动区选择第一帧中所对应的显示图层，通过“魔棒工具”设置图像的白色背景区域，然后点选“清除”。由于一系列动画白色背景区域一致，利用选区的跨图层性，将各帧中可见图层的白色背景“清除”，如图5-19所示。项目任务实施—任务二跳动的促销活动区然后将各帧对应的可见图层中的内容“复制”“粘贴”到促销活动区的图像文件上，如图5-20所示。项目任务实施—任务二跳动的促销活动区4.设置逐帧动画的层创建“全国免邮”文字图层副本，将副本中的“免”字改为白色，让动画中“免”字能黄白两色闪烁。创建“新春特惠”文字图层副本，”将副本往左下方略作移动。打开“动画面板”，点选“复制所选帧”，两帧分别作为起始帧和结束帧。在起始帧中，关闭白色“免”字文字图层和“新春特惠”文字图层副本的可见性，只保留第一个表情图层可见性，其余关闭。在结束帧中，关闭黄色“免”字文字图层和“新春特惠”文字图层的可见性，也只保留最后一个表情图层可见性。取消“传播帧1”。5.设置过渡帧动画选中起始帧中的“1”所对应的文字图层，将该图层的“不透明度”改为“0%”。再选中结束帧，点选“1”所对应的文字图层，将“图层样式”中的“投影”角度改为“90”，“不透明度”保持“100%”。然后点选“动画”面板的“过渡动画帧”按钮，按图5-21所示设置。项目任务实施—任务二跳动的促销活动区项目任务实施—任务二跳动的促销活动区6.结合逐帧动画和过渡帧在新生成的2、3、4、5帧，分别依次设置“全国免邮”文字颜色的变换、“新春特惠”的文字移动和表情图像的变化，通过不同图层的可见性设置。在设置过程，若有的图层不透明度也发生了变化，将其改回不透明度“100%”。完成效果如图5-22所示。项目任务实施—任务二跳动的促销活动区7.完成“浅出”的后半部分动画一般完全显示文字图层“1”需要更长时间显示。选中第6帧，然后选择“复制所选帧”，连续复制4帧，若需要更长时间显示，则复制更多。分别选中复制各帧，文字“1”的对应图层的不透明度保持不变，然后按步骤6设置，使文字图层“1”保持不变的同时，其他动画发生变化。再选中最后一个完全显示文字图层“1”的帧，然后选择“复制所选帧”。将该复制帧的文字“1”的对应图层，将该层的不透明度改至“0%”，同时调整其投影位置到右下角。然后按照步骤5、6进行相应操作，完成“浅出”的后半部分动画，并设置各帧延时为“0.2秒”和循环为“永远”，如图5-23所示。项目任务实施—任务二跳动的促销活动区8.优化点击“动画”面板右上角的菜单选项，选择“优化动画”，将两项均勾选。9.导出动画将动画文件导出成可运动的动态GIF图片格式，保存类型为“仅限图像”。项目任务分析—任务二跳动的促销活动区1.PhotoshopCS3导入完整的GIF动画通过“文件/打开”命令，打开GIF格式的动画文件，则只能显示GIF动画的第一帧。在PhotoshopCS3中导入完整的GIF动画需要通过“文件/导入/视频帧到图层”命令。这个命令需要系统中安装有QuickTime7.1及以上版本才能使用。单击该命令，在弹出的浏览窗口的在“文件名”处键入“*.*”，再点击“载入”，这样可以看见除QuickTime影片外的文件列表，再选择要打开的GIF动画文件，再次点击“载入”。接着操作和任务实施步骤中的第3步中的类似。2.过渡帧动画“过渡动画帧”可以减少了创建动画效果（如渐现、渐隐或在物体移动帧等）所需的时间。同时如果手工制作逐帧动画也难以保证每帧的分配均匀和定位准确。创建过渡帧之后，还可以分别对它们进行编辑。“过渡动画帧”只要设定好该动画的起始帧属性和结束帧属性，然后就可以在这两帧中产生对位置、不透明度或效果平均的过渡。如果是移动，则就是在起始帧中设定好起点的位置和在结束帧中设定好终点的位置。“过渡动画帧”设定如图5-24所示。项目任务分析—任