用Fireworks制作具有动态效果的切图

　　在上一章中，我们说到用fireworks2进行切图，可以将一个大图片分割成不同色深的多个小图片，并且生成相应的网页文件或代码，从而减小网页的重量。今天我要接着告诉您的是，功能强大的fireworks2不仅可以制作静态切图，更能够导出javascript动态特效！

　　为了使文章更加生动，能够被您轻松理解，所以我想用Fireowlks2目录下的Tutorials\Tutorial_6\T6_Images
目录中monitoir.gif作为素材。 在fireworks2完全安装后其自带的十个特效制作教程（你可以在Help菜单中找到它们）中的第6讲就关于是这种具有动态效果的切图，可惜是E文的:(

　　打开monitor.gif 件后你可以看到那上面画的是一个电视机，现在我们要做的是将这个电视机放入一个网页，并且当浏览者的鼠标按下电视机上的开关后，会在屏幕中播放内容。

　　第一步，要在图象上制作用来调用javascript的热区，制作热区的方和上一章中切割图象的方法一样，都是使用工具栏最右下方的切割工具 （ SliceTool）。由于我们设想中的这个javascript是通过按下电视机开关后在屏幕上出现变化，所以需要定义两个热区，分别是电视机开关和电视机屏幕。

　　然后选择“windows > Object”（Ctrl+I）选项，打开Object面板。先选中电视屏幕的热区，Object面板即将显示这个热区的属性，其中的连接地址默认为“No URL(noHREF)”也就是当前网页的连接（#）；项内容为鼠标放到图片上时显示的提示；这下面那个红色的靶心是target ， 用来确定连接标签的目标的，在这儿就不多说了；最关键的是：不要激活 target下的“Auto-Name Slices”功能，而需手动给这个切割热区起一个名字，这样做是为了在指定behavior时能够方便的辨认目标。还要注意的是在给slice命名时，不能使用中文，否则生成的javascript 代码会在浏览器中长时间报错。在这个例子中我给屏幕热区起的名字是“screen”， 再以同样的方法给电视开关取名为“button”。

接着做一个电视上要显示的图象，选择“File > New”（Ctrl+N） 命令新建一个和屏幕热区大小相同的图片（注意：尺寸过大或过小都会被 javascript缩放到屏幕热区的大小）。新建文件后，您可以使用工具栏上各类工具随心所欲地画出自己喜欢的东东（工具栏中各个绘图工具的使用 方法将在以后的教程中做详细介绍）。对自己的作品满意了吗？您画完后 请选择“File > Export”（Ctrl+Shift+R）将图象导出为网络图形。

Fireworks的图象导出功能非常强大，但现在您只要一路NEXT就可以了，并将生成的gif文件保存到指定的目录下。 　　然后回到我们刚才编辑的电视机画面，选定开关热区，再选择“ Windows > Behaviors”（Ctrl+Alt+H）选项，打开behaviors面板。按下添加按钮，选择“Swap Image”，在随后弹出的Swap Image对话框中的“ Swap Image in Slice”选项中选择“screen”热区（也可以在右边的热区画面中直接选择screen热区，这样做就可以让button热区调用一个使screen 热区产生变化的javascript）；在“Source of Swap”中选择“Image File”并在浏览面板中指定刚才制作的那个gif图象。最后激活“Restor Image onMouseOut”（激活这个功能后，浏览者将鼠标离开调用javascript 的热区后，发生变化的图象将恢复正常。

当上面这步完成后，behaviors面板中将出现一个“OnMouseOver”的件处理器，这就说明刚才做的热区已经成功调用了javascript。但我们期的效果是当鼠标按下开关后才在电视屏幕中显示内容，所以请按下“ OnMouseOver”旁的下拉菜单按钮，在弹出的菜单中选择“OnClick”。好，到这儿基本上该完工了。想看看作品的效果如何吗？选择“File > Preview in Browser > Preview in ...”（F12）命令，就可以在新窗口 中预览刚才的作品了。 　　达到预期效果了吗？满意的话就可以导出成品了，这儿有个小技巧， 由于fireworks的预览功能已经生成了临时的图形和HTML文件，所以如您使用IE5行预览的话，可以直接在自己满意的预览窗口中将所以文另存，就可以免去导出步骤而得到完整的作品了。如果您没有IE，那只能乖乖地使用导出功能，具体地导出方法和我们在上一章中所说的静 态切图的导出方法相同，在这儿就步重复了。