有的时候,你可能需要创建一种比按钮更为复杂的互动效果,例如当鼠标从某张图片上划过时,不但这张图片本身发生变化,在页面其他位置的另一张图片也发生变化,按钮编辑器对此无能为力,我们需要通过另外的途径来解决。学习这一节你会需要用到以前按钮、导航条、热区和切割的知识,如果你对这些概念还不是很了解,那么就先回去复习一下。
首先,我们来做一个简单翻转(Simple Rollovers)的按钮,虽然我们可以使用按钮编辑器很轻松的做出相同的效果,但是我还是建议你们用另一种方法来创建它,因为以后的复杂交互效果也要用这种方法来创建。
先在画板上画一个按钮的形状,如图:
选择Insert->Slice,在网络层(Web Layer)上建立一个和按钮大小相同的切割。
打开帧面版(Window->Frames),你会看到当前只有一帧,点击New Frame手工添加一帧,并使这帧处于被选中的状态。
在这帧上画另一个按钮,因为切割的边缘有吸附功能,所以很容易画出和第一帧一样大小的按钮,或者直接拷贝第一帧上的图形到第二帧再修改它的属性。为了区别这2帧,我在这里使用不同的颜色对它进行填充。
打开Behaviors面版(Windows->Behaviors),点击左上角的加号在弹出的菜单里选择Simple Rollovers,这样一个简单的翻转效果就创建好了,预览一下。
|
| |||
|
| |||
说到Behaviors有必要说明一下相关的概念:用一个简单的公式来表达就是行为(Behaviors)=事件(Events)+动作(Actions),即一个行为需要先由事件来触发,触发后完成一系列动作,这样就是一个完整的行为。
刚才大家在Behaviors面版的弹出菜单里也看到了,除了Simple Rollovers之外还有其他的交互动作,他们分别是:
| Simple Rollover:简单翻转,使用第一帧做为Up的图象,使用第二帧作为Over的图象,并且使用相同的切割 ,事实上简单翻转是交换图的一种特殊形式。 | |
| Swap Image:交换图,当鼠标触发了一些事件时,使用其他帧上的图象替换当前的图象。 | |
| Swap Image Restore:交换图还原,当鼠标离开触发事件的区域后,还原为默认的图象。 | |
| Set Nav Bar Image:设置为导航条图片,定义一个切割为导航条的一部分,事实上设置为导航条图片就是以下3中行为的组合(Nav Bar Over, Nav Bar Down, Nav Bar Restore) | |
| Nav Bar Over:当一个切割作为导航条的一部分时处于Over(鼠标经过)的状态。 | |
| Nav Bar Down:当一个切割作为导航条的一部分时处于Down(鼠标点击)的状态。 | |
| Nav Bar Restore:将导航条其他部分的切割还原到Up(默认)的状态。 | |
| Set Pop-Up Menu:创建弹出式菜单。 | |
| Set Text of Status Bar:在浏览器的状态栏里显示指定的文字。 |
注意:弹出式菜单可以很好的被插入到Dreamweaver中,但是必须在Fireworks中完成对它的编辑。
选择了动作(Actions)之后就可以在Behaviors面版中修改触发的事件。
这一节就先到这儿,请接着看下一节。

BK网络学院主要内容:平面设计教程,网站开发在线教程,网页制作教程,服务器教程,网络编程,数据库教程等。