发信人: yeff()
整理人: (2000-10-07 21:40:18), 站内信件
|
用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命名时，不能使用中文，否则生成的jav
ascript 代码会在浏览器中长时间报错。在这个例子中我给屏幕热区起的名字是
“screen”， 再以同样的方法给电视开关取名为“button”。
接着做一个电视上要显示的图象，选择“File > New”（Ctrl+N） 命令新建
一个和屏幕热区大小相同的图片（注意：尺寸过大或过小都会被 javascript缩放
到屏幕热区的大小）。新建文件后，您可以使用工具栏上各类工具随心所欲地画
出自己喜欢的东东（工具栏中各个绘图工具的使用 方法将在以后的教程中做详细
介绍）。对自己的作品满意了吗？您画完后 请选择“File > Export”（Ctrl+S
hift+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）命令，就可以在新窗口 中预览刚才的作品了。
达到预期效果了吗？满意的话就可以导出成品了，这儿有个小技巧， 由于f
ireworks的预览功能已经生成了临时的图形和HTML文件，所以如您使用IE5行预览
的话，可以直接在自己满意的预览窗口中将所以文另存，就可以免去导出步骤而
得到完整的作品了。如果您没有IE，那只能乖乖地使用导出功能，具体地导出方
法和我们在上一章中所说的静 态切图的导出方法相同，在这儿就步重复了。
--
※ 来源:．月光软件站 http://www.moon-soft.com．[FROM: 202.110.19.22]
|
|