Dreamweaver-Flash-Fireworks网页制作培训教程第4课

《Dreamweaver-Flash-Fireworks网页制作培训教程第4课》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4课创建动态效果本课要点具体要求本课导读上机练习本课要点创建动画创建按钮制作弹出菜单具体要求掌握动画的不同创建方法掌握按钮、导航按钮的创建方法掌握交换图像的创建方法掌握弹出菜单的制作方法本课导读Fireworks是针对网页的图像制作软件，本课主要讲解动画的创建方法和按钮的制作方法等，其中涉及到Fireworks中的切片，它除了用于将设计效果切成小块图外，还用于动作交互，如图像的交换、添加行为信息等。4.1创建动画在Fireworks中创建的动画可以导出为GIF动画，这些动画一般都是网页中的小动画。较大的动画都在Flash中创建。4.1创建动画4.1.1知识讲解

2、4.1.2典型案例——制作网站Logo4.1.1知识讲解本节介绍如何创建动画，主要包括创建所选动画、逐帧动画和补间动画3种。4.1.1知识讲解1.创建所选动画2.创建逐帧动画3.创建补间动画1.创建所选动画直接针对对象创建动画，不需要先创建元件。在将对象创建为动画的过程中，可将该对象自动转换为元件。创建所选动画的具体操作如下：（1）选择对象，单击鼠标右键，在弹出的快捷菜单中选择【动画】→【创建所选的动画效果】命令，打开【动画】对话框。（2）进行相应的设置，然后单击按钮。（3）单击窗口下方的按钮，可播放动画。2.创建逐帧动画逐帧动画是指在【帧】面板中通过添加或复制

3、帧的方法将对象添加到帧中，从而产生动画效果，其创建方法有3种。1）添加帧该方法可以在各个帧中分别放置不同的对象。在【帧】面板中单击图标，在弹出的菜单中选择【添加帧】命令后，在打开的对话框中可以设置添加的帧数和添加的帧应放置的具体位置。2.创建逐帧动画2）复制帧如果动画各帧中的状态基本相同，则可在【帧】面板中单击图标，在弹出的菜单中选择【重制帧】命令，将对象复制到多个帧中，然后分别进行编辑。3）分散到帧如果事先在窗口中将动画的各个状态制作完成，只需要分配到各帧中，则可在【帧】面板中单击图标，然后在弹出的菜单中选择【分散到帧】命令。3.创建补间动画补间动画必须在同一

4、个图形元件的两个或更多实例之间创建。创建补间动画的具体操作如下：（1）创建一个对象并选择该对象，按【F8】键打开【元件属性】对话框，在【类型】栏中选中单选按钮。按【Ctrl+F8】组合键也可打开【元件属性】对话框。（2）确定图形元件的首末两个状态。3.创建补间动画（3）选择两个元件实例，单击鼠标右键，在弹出的快捷菜单中选择【元件】→【补间实例】命令，打开【补间实例】对话框。（4）在【步骤】文本框中设置从首状态到末状态需要多少过渡帧。如果选中复选框，则将图形元件的各个状态分别放置于不同的帧中，产生动画效果；如果不选中该复选框，则将所有状态放置于一个帧中，只产生一个

5、图形。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案例小结本案例在制作过程中主要用到了反射混合模式、创建补间动画、元件的翻转、共享层、复制帧、修

6、改元件实例的颜色等知识。在制作本案例时，复制标志元件中的对象是为了使各帧中都出现该对象。另外，还使用了【重制帧】命令和颜色填充滤镜来制作闪烁文本的逐帧动画。4.2创建按钮在Fireworks中，不仅可以制作单独的按钮，还可以快速创建一组导航按钮。4.2创建按钮4.2.1知识讲解4.2.2典型案例——制作网站导航栏4.2.1知识讲解在不同的程序中，按钮有不同的状态。在Fireworks中，按钮存在5种状态，分别是释放、滑过、按下、按下时滑过和有效区域。本节将介绍按钮的状态、创建及导出方法。4.2.1知识讲解1.创建新按钮2.导出按钮1.创建新按钮创建按钮的具体操作

7、如下：（1）在窗口中单击鼠标右键，在弹出的快捷菜单中选择【插入新按钮】命令（或按【Ctrl+Shift+F8】组合键），进入按钮编辑窗口，如下图所示。1.创建新按钮（2）在【释放】选项卡中制作效果后，单击【滑过】选项卡切换到滑过编辑状态，再单击右下角的按钮，将释放状态的图形复制到该编辑状态，然后对颜色、效果和样式等进行编辑。（3）单击按钮，完成按钮的制作。（4）单击窗口左上角的按钮，可浏览按钮状态。（5）选取按钮，在【属性】面板的【文本】文本框中重设按钮上显示的文本，在【链接】文本框中输入链接文件地址。2.导出按钮按钮的不同状态是通过JavaScript来实现的

8、，因此按钮必须以HTML