45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > Photoshop >

Fireworks动态效果切图方法

电脑软硬件应用网 45IT.COM 时间:2005-12-30 19:29 作者:45IT收集

在用Fireworks对图片进行切图时,只要我们设置一下,就能实现动态效果。下面我们就用实例来说明详细的操作过程。

  1.打开Fireworks,打开预先准备的文件“Zhou.gif”,点中绘图工具栏中的“Slice Tool”。要在图像上制作用来调用JavaScript的热区,对图片进行切割,切出来的效果如图所示。

 
  2.打开“Object”面板。先选中图里被选中的热区部分。“Object”面板立即将显示这个热区的属性,其中的链接地址默认为“No URL(noHREF)”;“Alt”表示鼠标放到图片上时显示的提示;再下面那个红色的靶心是“target”,用来确定连接标签的目标,这里和DreamWeaver和FrontPage中的设置类似,我们选择“_Blank”;最关键的是:不要激活“target”下的“Auto-Name Slices”功能,而需手动给这个切割热区起一个名字,这样做是为了在指定动作时能够方便地辨认目标。还要注意的是在给“slice”命名时,不能使用中文,否则生成的JavaScript代码会在浏览器中长时间报错。在这个例子中我给屏幕热区起的名字是“hot”,再以同样的方法为图片最下面两个热区分别取名为“button1”和“button2”。

  3.接着做两个与“hot”热区相同大小的图片,做为切换的图片。然后回到我们刚才编辑的图像,选定button1热区,再选择Windows>Behaviors选项,打开“Behaviors”面板。按下“加号”按钮,在弹出的菜单中选择“Swap Image”,在随后弹出的对话框里的“Swap Image in Slice”选项中选择“Hot”热区,这样做就可以让button1热区调用一个使hot热区产生变化的JavaScript;在“Source of Swap”中选择“Image File”,并在浏览面板中指定刚才制作的两个图像文件中的一个。最后激活“Restor Image onMouseOut”。激活这个功能后,浏览者将鼠标离开调用JavaScript的热区后,发生变化的图像将恢复正常。同样的方法,再让button2热区也调用一个使hot热区产生变化的JavaScript。

  4.经过上面步骤以后,“Behaviors”面板将出现一个“OnMouseOver”的事件处理器,这就说明刚才做的热区已经成功调用了JavaScript。我们还可以将“OnMouseOver”事件处理器改变成“OnClick”,也就是将鼠标捕捉响应修改成鼠标点击响应。选择“File>Preview in Browser>Preview in就可以在浏览器中预览刚才的作品了。

  制作完成后,利用导出功能将刚才所制作的图像连同HTML一起输出。这样一个简单的动态效果的切图就彻底实现。只要掌握其中的制作原理和方法同样可以应用到复杂的图象效果处理中。

顶一下
(0)
0%
踩一下
(3)
100%
------分隔线----------------------------
无法在这个位置找到: baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐知识