创建 rollovers 效果概述 Button Editor(按钮编辑器)允许你使用单一的切割来传达视觉效果。有时你可能需要创建一些比按钮编辑器中所能够创建的更为复杂的 rollover 行为。例如,你可能想要创建一个不相交的 rollover 效果——在远离光标的区域显示一幅图像,或是想要创建一个当光标经过图像时出现的可定义的弹出菜单。
本章讲述了怎样使用切割和帧建立简单的和复杂的 rollover 效果。本章还讲述了怎样创建弹出菜单。
Fireworks 将切割对象、热区对象、以及拖放行为作为创建 rollovers 效果的基本构件。使用拖放行为你可以把切割和热区链接到目标切割上,这样就会创建出 rollover 效果和替换图案效果。
关于 rollovers 效果 所谓 JavaScript rollovers 效果是指当你移动光标经过图形或是点击该图形时,浏览器中的图形改变其外观。这种效果包括按钮和替换图案。
无论 rollovers 的形态如何,其工作原理都是一样的:当光标滑过或点击一个图形时触发另一个图形的显示。轮换图像应被放置在两个或更多的帧上。触发器通常是一个 Web 对象,也就是一个切割或热区。Web 对象可以被指派一个或更多的行为。
最简单的 rollovers 效果就是直接把第一帧上的图像替换为它下面第二帧的图像。你可以建立更为复杂的 rollovers 效果:替换图案效果可以从任意帧上替换图像;不相交的 rollovers 效果可以在远离光标区域显示图像。
使用行为面板创建简单的 rollovers 效果 一个简单的 rollover 效果是指当光标滑过或点击触发图像时,在光标下出现一幅新的图像。这是最容易建立的 rollover 效果,因为它只需要一个切割,其画布中的触发区域与目标区域是相同的。
一个简单的 rollover 效果通常把替换的图像放在第二帧上。
建立切割、图像、和帧 创建一个简单的 rollover 效果需要两个阶段。第一个阶段包括建立切割,产生效果的两幅图像以及存放它们的帧。尽管组成 rollover 效果的两幅图像在画布中处于同一位置,但它们却不在同一帧上。
为简单 rollover 效果建立切割、图像和帧:
| 1 |
选择你想要触发 rollover 效果的图像。 |
| 2 |
选择 Insert -> Slice(插入 -> 切割)给图像分配一个切割。 |
| 3 |
使用帧面板建立一个新的帧: |
|
选择 Window -> Frame(视窗 -> 帧),然后点击 New/Duplicate Frame(新建/复制 帧)按钮。 |
|
注: 如果你已经有了第二帧,那么你就不必再另建一个帧。 |
| 4 |
如果新建的帧没有被高亮显示,在帧面板上选择它。 |
| 5 |
在画布上切割所占据的区域放置第二幅图像: |
 |
使用绘制和编辑工具来创建图形。 |
 |
导入或拖动一个图形到切割上。 |
 |
|
给切割应用简单的 rollover 行为 当建立了图像与帧后,你就可以给切割应用简单的 rollover 行为。
应用简单的 rollover 行为:
| 1 |
选择切割。 |
|
注:切割在两个帧间是共享的。如果你已经打开 Show Hotspots and Slices(显示热区和切割),不管你在哪个帧中工作切割都将是可见的。 |
| 2 |
选择 Window -> Behaviors(窗口 -> 行为)来打开行为面板。 |
| 3 |
从 Add Action(+)(添加动作)弹出菜单中选择 Simple Rollover(简单 Rollover 效果)
|
 |
|
使用行为面板