第19章网页动画制作 本章要点: 区动画的概念和 Fireworks MX制 作动画的方法 区 Fireworks mX中三种制作动画 的方法及其实现步骤 区元件和实例的概念 区“洋葱皮”技术、动画的控制 和导出
第19章 网页动画制作 本章要点: 动画的概念和Fireworks MX制 作动画的方法 Fireworks MX中三种制作动画 的方法及其实现步骤 元件和实例的概念 “洋葱皮”技术、动画的控制 和导出
19.1 Fireworks mX制作动画概述 19.1.1.动画原理 动画实际上就是图片的高速播放 的原理是利用人类视觉暂留效应的生理 特点。快速连续地播放一系列相似但是 在某些特征或者位置上稍有不同的图片 看起来就好像对象在运动一样,从而实 现了动画的功能
19.1 Fireworks MX制作动画概述 • 19.1.1.动画原理 动画实际上就是图片的高速播放,它 的原理是利用人类视觉暂留效应的生理 特点。快速连续地播放一系列相似但是 在某些特征或者位置上稍有不同的图片, 看起来就好像对象在运动一样,从而实 现了动画的功能
191.2. Fireworks mx中制作动画的方法 在 Fireworks mx中,制作动画通常采用以下方 法 )以动画方式打开多个图片:这多个图片会自动组成动画的各帧, 采用这种方法,需要有现成的图片,如果没有足够的图片,就需 要制作者自己制作图片。 (2)在元件和实例之间插入中间过渡过程(又称补间动画):使用 这种方法只需要制作动画的某些特定帧,再利用补间技术插入中 间过渡过程。 (3)利用【选择动画】命令创建动画:通过命令设置动画运行的情 况,系统根据用户的设置自动生成动画
19.1.2.Fireworks MX中制作动画的方法 • 在Fireworks MX中,制作动画通常采用以下方 法: (1)以动画方式打开多个图片:这多个图片会自动组成动画的各帧, 采用这种方法,需要有现成的图片,如果没有足够的图片,就需 要制作者自己制作图片。 (2)在元件和实例之间插入中间过渡过程(又称补间动画):使用 这种方法只需要制作动画的某些特定帧,再利用补间技术插入中 间过渡过程。 (3)利用【选择动画】命令创建动画:通过命令设置动画运行的情 况,系统根据用户的设置自动生成动画
191.2. Fireworks mx中制作动画的工具 在 Fireworks mX中主要有以下几种制作动画的工具 帧】面板:用于处理 Fireworks mx动画帧,利用它 可以将一帧中的对象移动或者复制到另外一帧当中。 它是 Fireworks mX制作动画的核心工具 【层】面板:用于管理 Fireworks mX帧的各个图层。 【状态条控制】:用于控制变换不同的帧或者控制整 个动画的播放。 【导出预览】对话框中的【动画】选项卡:用于设现 帧定时、是否可见、循环播放或者优化(例如帧的处 理方法)等控制功能
19.1.2.Fireworks MX中制作动画的工具 • 在Fireworks MX中主要有以下几种制作动画的工具 : 【帧】面板:用于处理Fireworks MX动画帧,利用它 可以将一帧中的对象移动或者复制到另外一帧当中。 它是Fireworks MX制作动画的核心工具。 【层】面板:用于管理Fireworks MX帧的各个图层。 【状态条控制】:用于控制变换不同的帧或者控制整 个动画的播放。 【导出预览】对话框中的【动画】选项卡:用于设现 帧定时、是否可见、循环播放或者优化(例如帧的处 理方法)等控制功能
192制作动画 192.1通过打开已有文件创建动画 在 Fireworks mX可以基于一组连续变化的图像文 件创建动画,使用该方法创建动画的步骤如下 (1)执行【文件】→【打开】命令,将会出现 【打开】对话框 (2)定位到图像所在的目录,并选中多幅图像 (3)在【打开】对话框中选中【以动画打开】复 选框,然后按【打开】按钮。 (4)单击文档窗口下边的“”按钮可以看到动画 的播放效果
19.2 制作动画 • 19.2.1 通过打开已有文件创建动画 在Fireworks MX可以基于一组连续变化的图像文 件创建动画,使用该方法创建动画的步骤如下: (1)执行【文件】→【打开】命令,将会出现 【打开】对话框。 (2)定位到图像所在的目录,并选中多幅图像 。 (3)在【打开】对话框中选中【以动画打开】复 选框,然后按【打开】按钮。 (4)单击文档窗口下边的“”按钮可以看到动画 的播放效果
192.2通过补间技术创建动画 1.元件和实例的概念 元件是对象的模板,可以基于元件创建实例 2.创建元件 1)元件的创建步骤如下 ①选取要创建为元件的一个或多个对象; ②执行【修改】→【元件】→【转换为元件】命令 将会出现如图19-3所示的【元件属性】对话框,输入元件 名称、选中元件类型后按【确定】按钮,将把所选对象转 换成元件。 提示:元件与一般对象不同之外在于元件的左下角有 个”符号
19.2.2 通过补间技术创建动画 • 1.元件和实例的概念 元件是对象的模板,可以基于元件创建实例 • 2.创建元件 (1)元件的创建步骤如下: ①选取要创建为元件的一个或多个对象; ②执行【修改】→【元件】→【转换为元件】命令 将会出现如图19-3所示的【元件属性】对话框,输入元件 名称、选中元件类型后按【确定】按钮,将把所选对象转 换成元件。 提示:元件与一般对象不同之外在于元件的左下角有 一个“ ”符号
3.管理元件和实例 ·(1)切断链接对象 切断元件与实例之间的链接,操作步骤如下 ①选中元件 ②执行【修改】→【元件】→【分离】命令; ③单击群组按钮佃”,与元件相链接的实例将转换 为普通图形 (2)删除元件和实例 删除方法与普通对象的删除方法一样。需注意的是 删除实例不会对其他对象造成影响,但是删除元件将 影响到其相关的实例
3.管理元件和实例 • (1)切断链接对象 切断元件与实例之间的链接,操作步骤如下: ①选中元件; ②执行【修改】→【元件】→【分离】命令; ③单击群组按钮“ ”,与元件相链接的实例将转换 为普通图形。 • (2)删除元件和实例 删除方法与普通对象的删除方法一样。需注意的是 删除实例不会对其他对象造成影响,但是删除元件将 影响到其相关的实例
圆未命名-8p·1.…回回区 原始预览2幅4幅 DM1416「120x84 带有兔子的图片选取背景后的兔子图片删除背景后的免子图片 兔子图片 未命名8.png 1回区未a圆1,图 原始预览2幅4幅必「原预览2幅4幅四 120x84 14118「120x84
带有兔子的图片 选取背景后的兔子图片 兔子图片 删除背景后的免子图片
创建的补间帧
创建的补间帧
1923通过【选择动画】命令创建动画 在 Fireworks mx中,【修改】菜单下有一个【动画】 子菜单,该子菜单有三个命令,命令名及其功能如下: 【选择动画】:把选中的对象制作成动画。 【设置】:设置选择动画的参数 【删除动画】:删除设置的选择动画。 提示:要使用【选择动画】命令,需要先选 中一个对象,动画的对象可以是位图也可以是矢 图
19.2.3 通过【选择动画】命令创建动画 • 在Fireworks MX中,【修改】菜单下有一个【动画】 子菜单,该子菜单有三个命令,命令名及其功能如下: 【选择动画】:把选中的对象制作成动画。 【设置】:设置选择动画的参数。 【删除动画】:删除设置的选择动画。 提示:要使用【选择动画】命令,需要先选 中一个对象,动画的对象可以是位图也可以是矢 量图