Dreamweaver8,Flash8,Fireworks8网页制作培训教程 第4课 创建动态效果.pptVIP

第4课 创建动态效果 本课要点 具体要求 本课导读 上机练习 本课要点 创建动画 创建按钮 制作弹出菜单 具体要求 掌握动画的不同创建方法 掌握按钮、导航按钮的创建方法 掌握交换图像的创建方法 掌握弹出菜单的制作方法 本课导读 Fireworks是针对网页的图像制作软件，本课主要讲解动画的创建方法和按钮的制作方法等，其中涉及到Fireworks中的切片，它除了用于将设计效果切成小块图外，还用于动作交互，如图像的交换、添加行为信息等。 4.1 创建动画 在Fireworks中创建的动画可以导出为GIF动画，这些动画一般都是网页中的小动画。较大的动画都在Flash中创建。 4.1 创建动画 4.1.1 知识讲解 4.1.2 典型案例——制作网站Logo 4.1.1 知识讲解 本节介绍如何创建动画，主要包括创建所选动画、逐帧动画和补间动画3种。 4.1.1 知识讲解 1. 创建所选动画 2. 创建逐帧动画 3. 创建补间动画 1. 创建所选动画 直接针对对象创建动画，不需要先创建元件。在将对象创建为动画的过程中，可将该对象自动转换为元件。创建所选动画的具体操作如下： （1）选择对象，单击鼠标右键，在弹出的快捷菜单中选择【动画】→【创建所选的动画效果】命令，打开【动画】对话框。 （2）进行相应的设置，然后单击 按钮。 （3）单击窗口下方的 按钮，可播放动画。 2. 创建逐帧动画 逐帧动画是指在【帧】面板中通过添加或复制帧的方法将对象添加到帧中，从而产生动画效果，其创建方法有3种。 1）添加帧 该方法可以在各个帧中分别放置不同的对象。在【帧】面板中单击 图标，在弹出的菜单中选择【添加帧】命令后，在打开的对话框中可以设置添加的帧数和添加的帧应放置的具体位置。 2. 创建逐帧动画 2）复制帧 如果动画各帧中的状态基本相同，则可在【帧】面板中单击 图标，在弹出的菜单中选择【重制帧】命令，将对象复制到多个帧中，然后分别进行编辑。 3）分散到帧 如果事先在窗口中将动画的各个状态制作完成，只需要分配到各帧中，则可在【帧】面板中单击 图标，然后在弹出的菜单中选择【分散到帧】命令。 3. 创建补间动画 补间动画必须在同一个图形元件的两个或更多实例之间创建。 创建补间动画的具体操作如下： （1）创建一个对象并选择该对象，按【F8】键打开【元件属性】对话框，在【类型】栏中选中 单选按钮。按【Ctrl+F8】组合键也可打开【元件属性】对话框。 （2）确定图形元件的首末两个状态。 3. 创建补间动画 （3）选择两个元件实例，单击鼠标右键，在弹出的快捷菜单中选择【元件】→【补间实例】命令，打开【补间实例】对话框。 （4）在【步骤】文本框中设置从首状态到末状态需要多少过渡帧。如果选中 复选框，则将图形元件的各个状态分别放置于不同的帧中，产生动画效果；如果不选中该复选框，则将所有状态放置于一个帧中，只产生一个图形。 4.1.2 典型案例——制作网站Logo 案例目标 本案例将制作一个网站的Logo效果图，主要练习动画的创建，制作出的效果如下图所示。 4.1.2 典型案例——制作网站Logo 操作思路： （1）确定Logo的大小。Logo共有88×31像素、120×60像素、120×90像素3种大小，本例中采用120×60像素这种大小。 （2）确定Logo背景及边框。 （3）对公司标志添加动画效果，对网址文字创建补间动画和逐帧动画。 操作步骤请老师参照软件讲解 4.1.2 典型案例——制作网站Logo 案例小结 本案例在制作过程中主要用到了反射混合模式、创建补间动画、元件的翻转、共享层、复制帧、修改元件实例的颜色等知识。 在制作本案例时，复制标志元件中的对象是为了使各帧中都出现该对象。另外，还使用了【重制帧】命令和颜色填充滤镜来制作闪烁文本的逐帧动画。 4.2 创建按钮 在Fireworks中，不仅可以制作单独的按钮，还可以快速创建一组导航按钮。 4.2 创建按钮 4.2.1 知识讲解 4.2.2 典型案例——制作网站导航栏 4.2.1 知识讲解 在不同的程序中，按钮有不同的状态。在Fireworks中，按钮存在5种状态，分别是释放、滑过、按下、按下时滑过和有效区域。本节将介绍按钮的状态、创建及导出方法。 4.2.1 知识讲解 1. 创建新按钮 2. 导出按钮 1. 创建新按钮 创建按钮的具体操作如下： （1）在窗口中单击鼠标右键，在弹出的快捷菜单中选择