荔园在线

荔园之美,在春之萌芽,在夏之绽放,在秋之收获,在冬之沉淀

[回到开始] [上一篇][下一篇]


发信人: hawkwolves (十一狼), 信区: Homepage
标  题: 用Fireworks制作具有动态效果的切图
发信站: BBS 荔园晨风站 (Tue Jan  9 02:34:23 2001), 转信



  用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”功能,而需。在这个例子
中我给屏幕热区起的名字是“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”的件处理器
,这就说明刚才做的热区已经成功调用了javascr看作品
的效果如何吗?选择“File > Preview in Browser > Preview in ...”(F12)
命令,就可以在新窗口中预览刚才的作品了。





  达到预期效果了吗?满意的话就可以导出成品了,这儿有个小技巧,由于
fireworks的预览功能已经生成了临时的图形和HTML文件,所以如您使用IE5行预览
的话,可以直接在自己满意的预览窗口中将所以文另存,就可以免去导出步骤而得
到完整的作品了。











摘自Enet学院


--
   ┏━┳━┳━┳━┳━┳━┳━┳━┓
   ┃当┃你┃你┃你┃去┃我┃我┃我┃ My e-mail:   11_wolf@163.net
   ┃了┃跟┃也┃没┃做┃手┃要┃不┃ My oicq:     40356
   ┃小┃在┃没┃有┃老┃敲┃把┃再┃
   ┃尼┃身┃有┃讲┃和┃木┃你┃烦┃
   ┃姑┃后┃哭┃话┃尚┃鱼┃忘┃恼┃

※ 来源:·BBS 荔园晨风站 bbs.szu.edu.cn·[FROM: 202.96.151.222]


[回到开始] [上一篇][下一篇]

荔园在线首页 友情链接:深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店