【网页设计技术】网页动画制作.pptVIP

第19章 网页动画制作 本章要点： ? 动画的概念和Fireworks MX制作动画的方法 ? Fireworks MX中三种制作动画的方法及其实现步骤 ? 元件和实例的概念 ? “洋葱皮”技术、动画的控制和导出 19.1 Fireworks MX制作动画概述 19.1.1．动画原理 动画实际上就是图片的高速播放，它的原理是利用人类视觉暂留效应的生理特点。快速连续地播放一系列相似但是在某些特征或者位置上稍有不同的图片，看起来就好像对象在运动一样，从而实现了动画的功能。 19.1.2．Fireworks MX中制作动画的方法 在Fireworks MX中，制作动画通常采用以下方法： (1)以动画方式打开多个图片：这多个图片会自动组成动画的各帧，采用这种方法，需要有现成的图片，如果没有足够的图片，就需要制作者自己制作图片。 (2)在元件和实例之间插入中间过渡过程（又称补间动画）：使用这种方法只需要制作动画的某些特定帧，再利用补间技术插入中间过渡过程。 (3)利用【选择动画】命令创建动画：通过命令设置动画运行的情况，系统根据用户的设置自动生成动画。 19.1.2．Fireworks MX中制作动画的工具 在Fireworks MX中主要有以下几种制作动画的工具 :【帧】面板：用于处理Fireworks MX动画帧，利用它 可以将一帧中的对象移动或者复制到另外一帧当中。 它是Fireworks MX制作动画的核心工具。 【层】面板：用于管理Fireworks MX帧的各个图层。 【状态条控制】：用于控制变换不同的帧或者控制整个动画的播放。 【导出预览】对话框中的【动画】选项卡：用于设现帧定时、是否可见、循环播放或者优化（例如帧的处理方法）等控制功能。 19.2 制作动画 19.2.1 通过打开已有文件创建动画 在Fireworks MX可以基于一组连续变化的图像文件创建动画，使用该方法创建动画的步骤如下： （1）执行【文件】→【打开】命令，将会出现【打开】对话框。 （2）定位到图像所在的目录，并选中多幅图像 。 （3）在【打开】对话框中选中【以动画打开】复选框，然后按【打开】按钮。 （4）单击文档窗口下边的“”按钮可以看到动画的播放效果。 19.2.2 通过补间技术创建动画 1．元件和实例的概念 元件是对象的模板，可以基于元件创建实例 2．创建元件 （1）元件的创建步骤如下： ①选取要创建为元件的一个或多个对象； ②执行【修改】→【元件】→【转换为元件】命令将会出现如图19-3所示的【元件属性】对话框，输入元件名称、选中元件类型后按【确定】按钮，将把所选对象转换成元件。 3．管理元件和实例 （1）切断链接对象 切断元件与实例之间的链接，操作步骤如下： ①选中元件； ②执行【修改】→【元件】→【分离】命令； ③单击群组按钮“ ”，与元件相链接的实例将转换为普通图形。 （2）删除元件和实例 删除方法与普通对象的删除方法一样。需注意的是 删除实例不会对其他对象造成影响，但是删除元件将影响到其相关的实例。 创建的补间帧 19.2.3 通过【选择动画】命令创建动画 在Fireworks MX中，【修改】菜单下有一个【动画】子菜单，该子菜单有三个命令，命令名及其功能如下： 【选择动画】：把选中的对象制作成动画。 【设置】：设置选择动画的参数。 【删除动画】：删除设置的选择动画。 创建的文本选择动画后的几帧效果图 19.3 洋葱皮技术 在Fireworks MX中，可使用【洋葱皮】技术同时查看当前帧前后若干帧的内容，这样用户不必前后选择帧就可以清楚地看到动画帧之间发生的变换。 当【洋葱皮】打开时，以当前帧为起点，其前后帧上的对象都将显示，除当前帧外，其它帧上的对象都略显灰暗，从而易于区分。 19.4 动画的控制 19.4.1 帧速调整 帧延时的设置步骤如下： （1）从帧列表中选择该要设定帧延时的帧； （2）在右如图所示的该帧后面的帧延时域上双击，