中华网校

系列网站: 中华网校 | www.网校.com | 3D模型 | 中华网校教育

电脑网校 | 业界新闻 | 职业网校 | 网校宝典 | 软件下载 | 网校论坛 | 网校联盟

电脑入门 | 网页设计 | 网络编程 | 图形图象 | 三维空间 | 多媒体 | 程序语言 | 操作系统 | 系统专题 | 办公应用 | 软件宝典 | 硬件天下 | 

 

您的位置:首页 >> 图形图象 >> Fireworks >> fireworks基础教程 >> 新闻正文

动态翻转图  

作者:_  时间:2004-10-7 14:35:27  来自:中华网校  责任编辑:www.zhirui.com  阅读次数:

动态翻转图和简单翻转图的表现方法大不相同,简单翻转图是在图片的原位置上变换图片,而动态翻转图则可以在其它位置显示出不同的图片,如下所示,当鼠标移到“电脑教育”上,就会显示出我们预设的图片,另外,如果单击“电脑教育”还可以链接到指定的URL。说到这里,大家一定已经猜到这是切割图片(Slice)的衍生功能了。

  首先新建一个180x80的文件,然后建立如图1的三个文本并将它们全部选中,选取菜单指令“Insert\Slice”,弹出“Fireworks”信息框(如图2),由于我们需要建立三个分割区块,因此,我们单击“Multiple”按钮,这样我们就建立了三个分割区块(如图1)

分割区块

图1 分割区块

Fireworks信息框

图2 Fireworks信息框

  对应三个切割区域,我们需要编辑三个调换图片,首先我们先来编辑“电脑教育”所需要的调换图片。

  开启“Frames”面板,新建并选中Frame2,然后使用“文字工具”和“矩形工具”绘制出如图的图片群,选取菜单指令“Modify\Group”将它们群组起来,并适当地调整一下位置,最后执行菜单指令“Insert\Slice”即可。 (如图3)

所要调换的图片

图3 所要调换的图片

  如何才能让切割区域和调换图片产生关联呢?这就需要借助“Behaviors”面板的力量了。

  首先切换至Frame1,选取“电脑教育”,然后单击“Behaviors”面板的添加动作按钮,在弹出的菜单中选择“Swap Image”,弹出“Swap Image”对话框,其中我们需要进行以下操作: (如图4)

Swap Image对话框

图4 Swap Image对话框

  1. 首先我们需要确定调换图片的来源,在“Show the swapped image from”栏中,我们钩选“Frame No.”,并指定Frame2帧;

  2. 选取需要的调换图片;

  3. 钩选“Restore image onMouseOut”选项,这样当鼠标离开“电脑教育”后就会自动关闭调换图片;

  4. 单击“ok”按钮,在“Behaviors”面板中显示出了Fireworks 3预设的调换图片的打开方式------“onMouseOver”。 (如图5)

Benhaviors浮动面板

图5 Benhaviors浮动面板

  至此,“电脑教育”的动态翻转图已经设置完毕,我们按下F12来欣赏一下(插入dongfan1.html)。

  另外,Fireworks 3还为我们提供了其它三种动作变换的方式:onMouseOut、onClick和onLoad,下面我们就来认识一下它们:

  onMouseOut

  onMouseOut是指当鼠标先移入感应区内,再移出感应区时才会显示调换图片,不过使用此功能时,我们必须在“Swap Image”对话框中取消钩选“Restore image onMouseOut”选项,否则调换图片将无法显示出来。 (如图6)

Swap Image对话框中的选项

图6 Swap Image对话框中的选项

  话又说回来,一旦我们取消钩选“Restore image onMouseOut”选项,我们就会发现不管鼠标移到何处,调换图片将一直显示着,别担心,Fireworks 3还为我们提供了“Swap Image Restore”,它也将提供四种方式来关闭调换图片。 (如图7)

behaviors浮动面板中的菜单

图7 behaviors浮动面板中的菜单

  onClick

  onClick是指当我们感应区内单击鼠标时,调换图片才会显示出来;如果在“Swap Image”对话框中钩选“Restore image onMouseOut”选项,则当鼠标离开感应区后,会自动关闭调换图片。 (如图8)

onClick事件

图8 onClick事件

  onLoad

  onLoad是指当图片下载后就会立即显示调换图片,如果我们想要关闭调换图片,只要将鼠标移入再移出感应区即可(条件:必须在“Swap Image”对话框中钩选“Restore image onMouseOut”选项)。

  前面我们提到了“Swap Image Restore”,它可以将显示中的调换图片运用onMouseOver 、onMouseOut、onClick和onLoad的方式予以关闭;不过当我们在使用这个功能时,一定要在“Swap Image”对话框中取消钩选“Restore image onMouseOut”选项,否则,一旦鼠标离开感应区后,调换图片也会自动关闭的。

  下面我们就为“电脑教育”添加一个关闭动作:

  选中“电脑教育”,双击onMouseOver,弹出“Swap Image”对话框,然后我们取消钩选“Restore image onMouseOut”选项,单击“ok”按钮;单击“Behaviors”面板的添加动作按钮,在弹出的菜单中选择“Swap Image Restore”,这时在“Behaviors”面板中出现了Fireworks 3 预设的关闭方式“onMouseOut”,我们单击它右边的下拉按钮,并选择“onClick”,ok,按下F12 ,在浏览器窗口中我们将鼠标移到“电脑教育”上,这时有关教育的产品就呈现在我们的眼前;将鼠标移出“电脑教育”,产品介绍并不消失,但当我们单击“电脑教育”时,产品介绍就会消失。

  在“Behaviors”面板中还提供了一个显示Message(信息)的功能,这个Message会显示在浏览器下方的状态栏中,如图9所示。

设置状态栏中的文字

图8 设置状态栏中的文字

  单击“Behaviors”面板中添加动作按钮,然后从菜单中选择“Set Text of Status Bar”指令,(如图8)弹出“Set Text of Status Bar”对话框,接着在Message框内输入要在状态栏中显示的文字,例如:Gold Human,单击“ok”按钮即可。(如图9)

Set Text of Status Bar对话框

图8 Set Text of Status Bar对话框

  新建立的状态栏信息其作用方式为onMouseOver,也就是当鼠标移到感应区后,就会将指定的文字显示在浏览器的状态栏上。

 

  如果我们想重新编辑信息文字,只要双击“Set Text of Status Bar”,这样就会显示“Set Text of Status Bar”对话框让我们编辑信息文字;另外,状态栏信息文字的出现方式也可以加以改变,其设定方式和Swap Image一样。首先选取“Set Text of Status Bar”,然后单击下拉按钮,从下拉菜单中选取onMouseOver 、onMouseOut、onClick和onLoad指令即可。


相关文章 最新文章 推荐文章
动态翻转图

  中华网校依法保护知识产权,如果我们的文章有涉及或侵犯您的有关权益,请即时与我们 联系, 注明网址及文章,我们会即时处理或删除,感谢您的合作!中华网校email
  中华网校由广州市中六电脑城智锐计算机专业培训学院及中华网校技术中心提供网络支持未经本站许可任何个人网站、书刊报社一律不得私自复制,转载本站内容!

关于中华网校 | 广告服务 | 版权声明 | 投稿指南 | 网站合作 | 友情链接 | 网站地图

 

版权所有 中华网校 & 智锐网校 1999-2004 COPYRIGHT (C) 1999-2004 www.ZhiRui.com ALL RIGHTS RESERVED