用Fireworks制作具有动态效果的切图
用Fireworks进行切图，可以将一个大图片分割成不同色深的多个小图片，并且生成相应的网页文件或代码，从而减小网页的重量。今天我要告诉您的是，功能强大的fireworks不仅可以制作静态切图，更能够导出JavaScript动态特效！ 为了使文章更加生动，能够被您轻松理解，所以我想用Fireowlks目录下的Tutorials\\\\Tutorial_6\\\\T6_Images目录中monitoir.gif作为素材。在Fireworks完全安装后其自带的十个特效制作教程（你可以在Help菜单中找到它们）中的第6讲就关于是这种具有动态效果的切图，可惜是E文的。 打开monitor.gif后你可以看到那上面画的是一个电视机，现在我们要做的是将这个电视机放入一个网页，并且当浏览者的鼠标按下电视机上的开关后，会在屏幕中播放内容。 第一步，要在图象上制作用来调用JavaScript的热区，制作热区的方和上一章中切割图象的方法一样，都是使用工具栏最右下方的切割工具 （SliceTool）。由于我们设想中的这个Javascript是通过按下电视机开关后在屏幕上出现变化，所以需要定义两个热区，分别是电视机开关和电视机屏幕。 然后选择“windows > Object”（Ctrl+I）选项，打开Object面板。先选中电视屏幕的热区，Object面板即将显示这个热区的属性，其中的连接地址默认为“No URL(noHREF)”也就是当前网页的连接（#）；项内容为鼠标放到图片上时显示的提示；这下面那个红色的靶心是target，用来确定连接标签的目标的，在这儿就不多说了；最关键的是：不要激活 target下的“AutoName 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行预览的话，可以直接在自己满意的预览窗口中将所以文另存，就可以免去导出步骤而得到完整的作品了。
页:
[1]