网页设计与制作 第12章 制作网页动画课件.ppt

《网页设计与制作 第12章 制作网页动画课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第12章制作网页动画《网页设计与制作》北京师范大学出版第12章制作网页动画12.1GIF动画的基础12.2制作简单的动画12.3、制作复杂动画12.4综合案例―――制作网站的Banner动画效果《网页设计与制作》第12章制作网页动画12.1GIF动画的基础AdobeFireworks可以创建各种效果的横幅广告、LOGO及卡通形象等动画图形。Fireworks在GIF动画的制作和处理上有它独到的强大的功能和灵活简便性，它的内置指令能够生成比较简单的动画形式，因此其动画的形式可以分为两大类：一是基本运动类，二是特效运动类。基本类的动画包含了直线运

2、动类和渐变类，其中直线运动类有垂直运动、倾斜运动；渐变类有位置渐变、透明度渐变和大小渐变运动。特效运动类主要指遮罩特效。GIF动画的制作可以通过向动画元件中的对象分配属性来创建动画。元件的动画可分为多种状态，状态包含动画中的图像和对象。一个动画中可以有一个以上的元件，每个元件可以有不同的动作。不同的元件可以包含不同数目的状态。当所有元件的所有动作都完成时，动画就结束了。《网页设计与制作》第12章制作网页动画其中：“洋葱皮”按钮，如图12-2所示。洋葱皮是一种技术，用来查看位于所选状态之前和之后的状态的内容。可以更加流畅地使对象变为动画，而不用

3、在对象中来回的切换，打开洋葱皮时，前后状态中的对象将变暗，以便可以将它们与当前状态中的对象区别。通过“洋葱皮”按钮并选择显示选项，可以调整当前状态之前和之后可见状态的数量。其中“自定义”用于指定状态数并控制不透明度；“多状态编辑”选项来选择和编辑所有的可见对象，取消此选项将仅在当前页面中进行编辑。《网页设计与制作》可以通过“窗口｜状态”打开状态面板，如图12-1所示图12-1“状态面板”图12-2“洋葱皮”选项第12章制作网页动画“GIF循环”按钮，用于设置当前GIF动画的循环次数，默认是“永久”循环，该按钮旁边显示的就是其设定的循环次数，如

4、，，等。“新建/复制状态”按钮，单击该按钮，用于在文档中新建一个空白的状态，新建的状态在原来状态的后面。如果要复制当前状态，则选中该状态，直接拖动到该按钮上，或者按下Alt键，然后选中要复制的状态，拖动鼠标左键，即可以复制当前状态。“删除”按钮，用于删除选中的状态。“分散到状态”按钮，用于将画布中的对象分散到各个状态，可以用于制作动画。“状态延迟”数字7代表了当前状态的播放的时间，默认为“7/100秒”。《网页设计与制作》，第12章制作网页动画12.2制作简单的动画12.2.1用动画的方式打开在Fireworks中，提供子一种简单的制作动画的

5、方法，即在打开图片对象时，选择“以动画方式打开”即可，具体的操作为：首先制作好动画需要的每一状态动画图像，然后分别保存为一个文件，如图12-3所示；然后单击“文件｜打开”菜单项，在弹出的“打开”窗口中，选择刚才制作好的若干张图像，并将“以动画方式打开”选中，如图12-4所示，单击“打开”按钮即可。此时打开“状态”面板，可以看到每个图像生成了一个状态，这时单击文档窗口下方的“播放”按钮，动画的效果就出来的了，如图12-5所示。《网页设计与制作》图12-3制作好的素材图12-4“以动画打开”第12章制作网页动画12.2.2利用状态制作简单动画还可

6、以用“状态”面板中的基本操作及fireworks提供的各种工具制作简单的动画，具体操作为：首先在文档中打开如图12-6所示的图像，并打开“状态”面板，在当前的状态中输入如图12-7所示的文字，并为文字设置“滤镜｜斜角和浮雕｜外斜角”，然后利用“新建/复制状态”按钮对当前状态进行复制，并进行设置，同样的方式，复制多个状态，并进行文字或图像的设置，完成简单的动画制作。《网页设计与制作》图12-5GIF动画效果第12章制作网页动画《网页设计与制作》图12-6动画起始状态图12-7动画的其它状态第12章制作网页动画12.3、制作复杂动画12.3.1动

7、画元件制作动画复杂动画中的动画对象及效果更多，可以通过制作不同的动画元件，使动画的内容更丰富，其制作的基本流程：（1）首先创建需要的动画元件，也可以通过将现有对象转换为元件来创建动画元件。（2）可以利用“属性”检查器或“动画”对话框来编辑动画元件。比如设置移动的角度和方向、缩放、不透明度（淡入或淡出）以及旋转的角度和方向注：移动的角度和方向选项只能在“动画”对话框中找到。（3）使用“状态”面板中的“状态延迟”按钮设置动画速度。（4）将文档优化为GIF动画文件（5）将文档作为GIF动画文件或者SWF文件导出，或者保存为FireworksPNG文

8、件并导入到Flash中做进一步编辑。《网页设计与制作》第12章制作网页动画（1）创建动画元件动画元件是动画的基本元素，动画元件可以是创建或导入的任何对象，并且一个文