fireworks 动画

第五讲动画教学目标通过本讲的学习掌握创建编辑位图图像•1、教学内容：•重点：了解Firworks的使用范围教学重难点：Adobe®Fireworks®可以创建能够移动的横幅广告、徽标和卡通形象等动画图形。可以通过向称为动画元件的对象分配属性来创建动画。元件的动画可分成多种状态，状态包含动画中的图像和对象。一个动画中可以有一个以上的元件，每个元件可以有不同的动作。不同的元件可以包含不同数目的状态。当所有元件的所有动作都完成时，动画就结束了。一、动画基础知识•动画工作流程1可以从头开始创建动画元件，也可以通过将现有对象转换为元件来创建动画元件2可以在“属性”检查器或“动画”对话框中编辑动画元件。可以设置移动的角度和方向、缩放、不透明度（淡入或淡出）以及旋转的角度和方向注：移动的角度和方向选项只能在“动画”对话框中找到。3使用“状态”面板中的“状态延迟”控件设置动画速度。（4将文档优化为GIF动画文件5将文档作为GIF动画文件或者SWF文件导出，或者保存为FireworksPNG文件并导入到Flash中做进一步编辑。一、动画基础知识•关于动画元件动画元件是动画中的主角。动画元件可以是您创建或导入的任何对象，并且一个文件中可以有许多元件。每个元件都拥有其各自的属性和独立的行为，因此可以创建在其它元件淡入淡出或收缩时在屏幕上移动的元件。不是动画的每个方面都需要使用元件。但是，对于出现在多个状态中的图形使用元件和实例会减小文件大小。可以随时使用“动画”对话框或“属性”检查器更改动画元件的属性。还可以在不影响文档其余部分的情况下编辑元件的图片。还可以通过移动运动路径来改变元件的运动。因为动画元件被自动放到库中，所以可以重复使用它们创建其它动画。一、动画基础知识•创建动画元件1选择“编辑”“插入”“新建元件”。2在“转换为元件”对话框中，输入新元件的名称。3选择“动画”并单击“确定”。4在文档面板中，使用绘图或文本工具创建一个对象。可以绘制矢量对象或位图对象。5在完成对该元件的编辑之后，切换到整页一、动画基础知识•将对象转换为动画元件1选择该对象。2选择“修改”“动画”“选择动画”。3通过设置动画属性来编辑元件。动画控件出现在对象的边框上，而元件的副本添加到库中。一、动画基础知识•编辑动画元件可以更改各种元件属性，如动画不透明度和旋转。可以使元件显示为旋转、加速、淡入淡出或者是这些属性的任意组合。状态数是一个关键属性。在设置此属性时，Fireworks会自动将完成该动作所需的状态数添加到文档中。一、动画基础知识•动画元件的属性状态动画中状态的数量。可以用滑块指定状态数（最多可指定250个），也可以在“状态”框中输入任何数字。默认值为5。移动（仅限“动画”对话框）对象移动的距离（用像素表示）。默认值为72，但没有上限。移动是线性的，并且没有关键状态方向（仅限“动画”对话框）对象移动的方向（从0到360º）。还可以通过拖动对象的动画手柄来更改“移动”和“方向”的值。缩放从开始到完成，元件大小的变化百分比。默认值为100%，但没有上限。若要将对象从0%缩放到100%，原始对象必须很小；建议使用矢量对象。不透明度从开始到完成，淡入或淡出的度数。值的范围从0到100，默认值为100%。创建淡入/淡出需要同一元件的两个实例：一个播放淡入，另一个播放淡出。旋转从开始到完成，旋转的度数。值的范围从0到360º。要想让元件旋转不止一圈，可以输入更高的值。默认值为0º。“顺时针”和“逆时针”对象旋转的方向（顺时针(CW)或逆时针(CCW)）。一、动画基础知识•更改动画元件的属性1选择一个动画元件。2选择“修改”“动画”“设置”打开“动画”对话框。如果“属性”检查器尚未打开，可选择“窗口”“属性”将其打开。3更改属性。4如果正在使用“动画”对话框，单击“确定”以接受更改的属性。一、动画基础知识•删除所选动画元件中的动画选择“修改”“动画”“删除动画”。元件变成图形元件，不再有动画属性。如果您以后将元件重新转换为动画元件，它将保留其先前的动画设置。。•从文档库中删除元件1在“文档库”面板中选择所需的动画元件。2将元件拖到右下角的垃圾桶图标上。一、动画基础知识•改变元件的移动或方向所选动画元件有一个唯一的边框和一个指示元件移动方向的运动路径。运动路径上的绿点表示起始点，而红点表示结束点。路径上的蓝点代表状态。例如，一个有五个状态的元件在其路径上会有一个绿点、三个蓝点和一个红点。如果对象出现在第三个点上，则第3个状态就是当前状态。通过改变路径的角度可以改变运动的方向。一、动画基础知识可以通过创建其内容将出现在“状态”面板上的状态来生成动画。每个状态也都有相关的属性。通过设置状态延迟或隐藏状态，可以在编辑动画时查看其外观。•设置状态持续时间状态延迟指定当前状态显示多长时间，用一秒的百分之一表示。例如，指定50可将该状态显示半秒，指定300可将该状态显示三秒。1选择一个或多个状态：2执行下列操作之一：•从“状态”面板的“选项”菜单中选择“属性”。•双击状态延迟列。3为状态延迟输入一个值。4按Enter或者在“帧”面板外部单击。二、状态•在播放期间隐藏状态隐藏状态在播放期间不显示而且也不会导出。1执行下列操作之一：•从“状态”面板的“选项”菜单中选择“属性”。•双击状态延迟列。2取消选择“导出时包括”。3按Enter或者在“帧”面板外部单击。二、状态•在播放期间隐藏状态隐藏状态在播放期间不显示而且也不会导出。1执行下列操作之一：•从“状态”面板的“选项”菜单中选择“属性”。•双击状态延迟列。2取消选择“导出时包括”。3按Enter或者在“帧”面板外部单击。二、状态•添加新状态单击“状态”面板底部的“新建/重制状态”按钮。•向序列中添加状态1从“状态”面板的“选项”菜单中选择“添加状态”。2输入要添加的状态的数目。3选择要插入状态的位置并单击“确定”。•反向状态的顺序您可以反向所有状态的顺序或选定范围内的状态顺序。1选择“命令”“文档”“反向状态”。2执行下列操作之一：•选择“所有状态”以反向从开始到结束的状态顺序。•选择“状态范围”，然后选择开始状态和结束状态，以反向所选范围之内的状态顺序。3单击“确定”。二、状态•在“状态”面板中移动所选对象可以使用“状态”面板将对象移动到另一个状态。仅出现在单个状态中的对象会在播放动画时消失；您可以使它们在不同的时间消失和重新出现。在“状态”面板中，状态延迟时间右侧的小圆圈表示该状态中的对象状态。1在画布上，选择要显示在另一个状态上的对象。2在“状态”面板中，将选取指示器（状态延迟时间右侧的黑色小圆圈）拖到新的状态上。若要将选定对象复制到其它状态，请在按住Alt的同时，拖动这些对象。二、状态•查看状态中的对象从“层”面板底部的“状态”弹出菜单中选择状态。二、状态•洋葱皮洋葱皮是一种技术，用来查看位于所选状态之前和之后状态的内容。可以很流畅地使对象变为动画，而不用在对象中来回跳跃。打开洋葱皮时，前后状态中的对象将变暗，以便您可以将它们与当前状态中的对象区分开。•补间在Fireworks中，补间是一个手动过程，它混合同一元件的两个或多个实例，并使用插值属性创建中间的实例。使用补间可以创建对象在画布间的复杂移动，以及其动态滤镜在动画的每个状态下发生更改的对象的复杂移动。三、编辑动画基本概念•补间实例1选择画布上同一图形元件的两个或更多的实例。不要选择不同元件的实例。2选择“修改”“元件”“补间实例”。3在“补间实例”对话框中输入要插入到原始对之间的补间步骤的数目。4若要将补间对象分散到不同的状态中，请选择“分散到状态”并单击“确定”。以后可以通过选择所有实例并单击“状态”面板中的“分散到状态”按钮来完成此操作。三、编辑动画基本概念•在工作区中预览动画使用显示在文档窗口底部的状态控件。•在“预览”视图中预览动画1单击文档窗口左上角的“预览”按钮。2使用状态控件•在Web浏览器中预览动画选择“文件”“在浏览器中预览”，并从子菜单中选择一个浏览器。注：若要在预览动画时查看动作，请在“优化”面板中选择“GIF动画”作为“导出文件格式”，即使您打算将该动画以SWF或FireworksPNG文件形式导入Flash也是如此。四、预览动画设置构成动画的元件和状态后，请优化动画以使其便于加载和顺利播放•通过循环将动画设置为重复使动画重复之后，循环处理将尽可能减少生成动画所需的状态数。1选择“窗口”“状态”以显示“状态”面板。2单击面板底部的“GIF动画循环”按钮。3选择动画第一遍播放后重复播放的次数。例如，如果选择4，则动画共播放5遍。“永久”不停地重复播放动画。五、优化动画•从“优化”面板中选择设置优化过程会将文件压缩成最小的包，这会缩短Web下载时间。1选择“窗口”“优化”。2在“优化”面板中选择导出文件格式。3选择“调色板”和“抖动”选项。4在“优化”面板的“透明度”弹出菜单中，选择“索引色透明”或“Alpha透明度”。5使用“优化”面板中的透明度工具选择透明的颜色。6在“状态”面板中设置状态延迟。五、优化动画可以通过以下方法使用现有的GIF动画：将该GIF导入Fireworks文件中，或者将该GIF作为新文件打开。当导入GIF动画时，Fireworks将它转换为一个动画元件并将其置于当前选定的状态中。如果该动画的状态比当前影片的状态多，可以选择自动添加更多状态。所导入的GIF采用当前文档的状态延迟设置。由于导入的文件是一个动画元件，因此可以对它应用其它的动作。例如，导入一个人原地走的动画，然后应用方向和动作属性让这个人在屏幕上来回走动。在Fireworks中打开一个GIF动画时，会创建一个新文件，并且GIF中的每一个状态都被置于一个单独的状态中。尽管GIF不是一个动画元件，但它确实保留了原始文件中的所有状态延迟设置。导入文件后，可以将文件格式设置为GIF动画，以便能够从Fireworks中导出动作。六、使用现有动画•导入GIF动画1选择“文件”“导入”。2找到文件并单击“打开”。3单击并将文件拖放到画布上。•打开GIF动画选择“文件”“打开”并找到GIF文件。六、使用现有动画•螺旋式渐隐您可以使用“螺旋式渐隐”效果创建组合成多种效果的动画。六、使用现有动画