[组图]第 五 课 动画制作

　　一、按钮 　　除了Flash能让你不写一行&106avascript 代码，就可以轻松的创建一个交互式的按钮外，Fireworks 也可以。您只需要通过使用Libray面板中的按钮编辑器，把一个图形区域制作为一个按钮。　　创建一个按钮方法：　　打开一个图形文件。使用图形工具选取一个区域，这里用矩形。从菜单中选择 Insert 下Convert to Symbol，或用快捷键F8，出现下面的对话框。 　

3 E! w+ h+ N  y/ U8 L8 D. `# m　　其中：　　·在Name中输入按钮的名称。 　　·类型选择Button。 　　Fireworks中，按钮是对象的一个特殊类型被称作符号（Symbol）,它们存储在文档的库（Library）中。这时在工作窗口中出现下图的样子。　　　
+ E9 ]: F, ^5 F! a8 R3 }
, u% G: F, s4 J3 n& r9 h9 a: k　　此时这个矩形区域将变成一个亮绿色并且在左下角有一个小箭头。这个亮绿色象征一个分割区（Slice）。而这个箭头表明这个矩形区域是一个按钮的例图（Instance）。这个按钮的原始作品被存储在文档的库中。　　

. F/ ]4 q  J3 R6 u0 l　　双击这个按钮打开按钮编辑器，或从菜单中选择 Modify 下Symbol 中Edit Symbol。在按钮编辑器中，可以为这个按钮建立它在各种状态下的图形。首先将要为这个按钮添加一个文字标签。选择文本工具，在按钮编辑器的矩形区域中心单击鼠标。要使文字同矩形中心对齐，则可以用Pointer选定矩形，然后按住 Shift 键，并用鼠标单击文字。从菜单中选择 Modify 下Align 中Center Vertical 和Center? Horizontal。如图： 　　

" F/ ^; t3 k3 K) {$ @　　单击按钮编辑器的滑过（Over）标签，然后单击复制弹起图像（Copy Up Graphic）按钮。在滑过标签中的图像是指在已完成的网页中当鼠标指针滑过这个按钮时显示的图像。为了使这个图像清楚的反映弹起的动作，您可以从图像中选择另一种颜色改变这个填充色。改变文字颜色和使用Effect来是这个按钮有个阴影等。如图： 　
  q. o2 _* w: d+ m$ X8 Y8 J8 [
　　其它情况如Down和Over while down标签，也可以按照前面的方法进行制作。　　创建按钮的URL，单击按钮编辑器的激活区域（Active Area）标签然后单击右下方的连接向导（Link Wizard）按钮。再单击链接（Link）标签，在上端的文字栏中输入一个地址，如：http://www.triworks.com.cn以便能在浏览器中测试这个按钮。

4 C# N8 X( k" s8 T: P6 J: z　　然后单击OK，关闭按钮编辑器。 这样一个按钮就制作成了。　　二、复制按钮：　　通过复制可以很容易的建立一些外观相似但连接和文字不同的按钮。　　按下 Alt然后拖动这个按钮。从菜单中选择 Window 下Object。 在按钮文字（Button Text）栏中输入别的文字，然后按下 Enter。这时将出现一个消息框询问：是希望编辑这个按钮的当前例图，还是所有例图，选择编辑当前（Current）按钮。 　
4 f7 E- |5 E( x
. @( j$ o' S! L# Z8 e% N' `　　　再在对象面板中单击连接向导(Link Wizard)。单击Link标签修改这个连接地址。单击OK。注意此时这个按钮上的文字已经更新了。 　　三、按钮不相交交互：　　除了创建按钮之外，Fireworks 还可以让您轻松的创建交互效果。例如，当鼠标指针滑过一个按钮，除了改变这个按钮的显示状态，还可以改变在这一页中的其他区域的显示，在 Fireworks 中，这种翻转效果被称作不相交交互（Disjoint rollover）。　　·选择Window下Layer面板，单击 Layer 1 使它成为活动层。再选帧面板。单击右下脚的New / Duplicate Frame按钮，在帧面板中出现 Frame 2 。此时除了这个按钮之外其他的图像都将消失不见了。 　
0 @! M% |7 A- a. ?( \- y! L4 J
/ }* X5 b9 q) U1 U- ?# V　　·接下来在第二帧上放一个图像作为交互的来源。选择Frames面板左下脚的第一个按钮，打开描图纸（onion skinning）来帮助您将第二帧与第一帧对齐。描图纸（Onion skinning）让您可以在同一时间看到其他帧的一个稍暗的版本。 　
7 z* q0 ^, |$ K: V
　　·打开库面板，从菜单中选择 Window > Library。假设库面板中存储按钮和其他一些可使用的图案。单击项目列表中的 play.gif图案，在库面板上方将显示这个作品的预览。 　　　

$ s! `" x& {; B# e- L　　·从库面板的预览窗口中拖动该图案到SH字母上。 　　　

　　·在帧面板中激活第一帧，使用Slice工具将SH字母制成分割区。 　

　　·在对象面板中，不要选择自动命名（Auto-Name）分割区项，然后在面板下方的文字栏中输入play。 　

　　·在Layer面板中选Layer 2，使其恢复活动状态，再选定 fl按钮。打开 Behaviors 面板，单击加号(+)按钮然后从下拉菜单中选择 Swap Image 。弹出 Swap Image 对话框。
! U1 R# k9 W# W6 k8 P% n


4 Y! ?0 Q& [: U+ M" X3 B$ X8 I　　在对话框左侧的分割区列表中，选定play，然后单击OK。　　·单击工具箱中的隐藏热点区和分割区（Hide Hotspots and Slices）按钮。再单击工作区的预览（Preview）标签，然后鼠标移到按钮上，此时可以看到放的图案显示出来了。接下来就是保存该图像了。　　四、动画GIF 　　创建动画Gif使用的是帧。每一个帧含有一个不同的图像。所有的帧中显示的图案是在一个单独的图层中，它共享于其他所有的帧。帧排列的顺序也就是播放的顺序，由它来建立一个动作的过程。　　·打开一个图像文件。打开Layer面板，然后单击面板底部的 New / Duplicate Layer 按钮。 现在将这两个缩图移动到新的图层中：选中图案（按住Shift键），将Layer 1右侧蓝色正方形拖到新建的图层 Layer 2 上。现在就可以共享 Layer 1了，也就是说，Layer1 中的这些图案将出现在这个动画的每一个帧中，做法如下： 　

　　选定 Layer 1，单击面板上端的小三角，然后选择共享层（Share Layer）。注意这时在图层名称的右边将出现一个胶片的图标，这表示这个图层共享于其他的帧。　

) y9 q% }0 j) O, R6 i5 S$ \* T　　·在此选定两个缩图（使用Layer 2），然后将这些缩图分配到指定的帧来创建这个动画。打开帧面板，然后单击面板下方的分配到帧（Distribute to Frames）按钮。打开优化面板，然后从到出文件格式菜单中选择（Animated GIF）。必须使用 Animated GIF 以导出所有的帧。如果使用 GIF 将只能到出第一帧。　　　

$ S& I! h) e8 I　　　
) O1 R8 I$ {  h0 p- g6 {$ a" q: s
! \% b$ W# J6 U9 l( k# S　　·在帧面板中使用 Shift+单击选定所有的帧，然后从面板的选项菜单（单击面板上端的小三角）中选择属性（Properties）。设置帧的延迟时间为 50 (半秒)然后按回车键。通过设置帧的延迟时间来设置动画的速度。　　　

　　·

　单击应用程序窗口底部的播放（Play）按钮。注意这时的播放按钮变为停止按钮。单击停止按钮停止播放动画。 　　·在帧菜单中的左下脚，选择第二个按钮，该按钮可以设置动画循环次数，这里设置为Forever，即永远循环。　　·选择 File 下Save As保存。　　五、制作使用一个Symbol的动画　　·打开一个新文件。选Insert下New Symbol…，然后在Symbol属性对话框中为其命名，并选择Graphic类型。按OK。接下来在Symbol中写上文本，或制作一个图形。如图： 　

　　该Symbol的已经在Library面板中出现。关闭编辑Symbol的窗口。　　·将Library面板中的这个Symbol，拖一个到文件窗口里。 　
# E5 b/ @  I' R: [& j
　　·按住Shfit，选中这个Symbol的三个图例。选择Modify下Symbol中Tween Instances…，弹出下面的对话框： 　

　　然后，在Steps中输入分帧的数量。并选中Distribute to Frames。　　

) R, u" d# b( K; h　　打开Frames面板，可以看到你刚才分出的所有帧数，接下来就可以播放了，方法同上面提到的。