网站建设

第9章深入Fireworks MX 20049.1 9.2 9.3 9.4 元件的使用 行为的交互性创作 动画的制作 图像的优化输出

返回总目录

网站建设

9.1元件的使用9.1.1 9.1.2 9.1.3 9.1.4 创建元件 创建按钮元件 创建动画元件 编辑元件

返回章目录

网站建设

9.1.1 创建元件首先选择菜单“编辑”→“插入”中的 “新建元件”选项，或使用组合键 Ctrl+F8,打开“元件属性”对话框

返回本节 录

网站建设

9.1.1 创建元件

从所选对象中创建新元件步骤： (1)在画布上选中对象，然后选择菜 单“修改”中的“元件”→“转换为 元件”子菜单选项。 (2)在“元件属性”对话框的“名称” 文本框中，为该元件键入一个名称。 (3)选择元件类型：图形、动画或按 钮。然后单击按钮。返回本节 录

网站建设

9.1.1 创建元件该对象随即变为元件出现在“库”面板 中，所选对象也变成了该元件的一个 “实例”,同时“属性检查器”显示 元件选项。如图9-2所示为“库”面板。

返回本节 录

网站建设

9.1.2 创建按钮元件通常，一个按钮最多具有四种状态，每个状态 对应着鼠标的一个动作，分别是： 释放状态:是按钮的默认外观，当鼠标不在 该按钮位置时，按钮的状态。 滑过状态:在浏览器中，鼠标指向按钮时的 状态。 按下状态:在浏览器中，按钮被鼠标按下时 的状态。 按下时滑过状态:在浏览器中，按钮被单击 过一次后，鼠标再次经过按钮上方时的状态。返回本节 录

网站建设

9.1.2 创建按钮元件下面通过一个实例来说明使用按钮编辑 器创建按钮的方法。 具体方法如下： (1)新建一个空白文档，然后，在菜 单中选择“编辑”→“插入”→“新 建按钮”选项，打开按钮编辑器窗口。 如图9-3所示。图中空白区域为按钮图 像编辑区，中心的“+”是定位点。返回本节 录

网站建设

9.1.2 创建按钮元件

(2)在编辑区绘制一个圆角矩形做为 “释放状态”时按钮的图像，在”属 性检查器”中为按钮图像设置一种填 充颜色和内斜角特效。 (3)用“文本工具”在按钮中拖出一 个文本框，输入按钮中的文字并编辑 文字效果，如图9-3所示。

返回本节 录

网站建设

9.1.2 创建按钮元件(4)单击编辑器窗口上方的“滑过”选 项卡，在编辑区下方，单击“复制弹 起时的图形”按钮，可将前一个按钮 图像按原位拷贝过来。然后，选中按 钮图像或文字，改变其颜色，作为鼠 标指向按钮时的“滑过状态”,如图 9-4所示。

返回本节 录

网站建设

9.1.2 创建按钮元件(5)单击编辑器窗口上方的“按下”选项卡， 编辑“按下状态”的按钮图像。在编辑区下 方，单击“拷贝滑过时的图像”按钮，将前 一个按钮图像按原位拷贝过来。因为

这一状 态的按钮应该有一个被按下的动作，所以， 应该稍微改变一下按钮的位置。将图形和文 字同时选中，然后用键盘上的光标键向下移 动两下，再向右移动两下就可以了。如图95所示。返回本节 录

网站建设

9.1.2 创建按钮元件(6)按钮的第四个状态一般情况下不经 常采用，在这里就不再设置了。单击 “活动区域”选项卡。则按钮编辑器 自动创建与按钮元件尺寸相同的切片， 如图9-6所示。

返回本节 录

网站建设

9.1.2 创建按钮元件

(7)在创建了动态按钮的三种状态后，选 中按钮对象，在对应的”属性检查器”中为 按钮设置URL属性，如图9-7所示。其中：在 “链接”文本框中填写按钮的链接地址，在 “替代”文本框中填写鼠标指向按钮的提示 信息，在“目标”文本框中设置链接文件的 打开方式。 (8)在编辑器窗口单击”完成”按钮。回 到文档窗口，按下F12功能键后，就可以预 览测试了。返回本节 录

网站建设

9.1.3 创建动画元件创建了动画元件后，就可以在”属性检查器” 中设置“实例”的属性以决定动画中的帧数 和动作类型(如缩放或旋转)。创建动画元 件的具体方法如下： (1)在菜单中选择“编辑”→“插 入”→“新建元件”子菜单选项，打开“元 件属性”对话框。 (2)在“元件属性”对话框中，为动画元 件输入设置名称。 (3)选择“动画”类型，并单击“确定” 按钮，打开“元件编辑器”窗口。返回本节 录

网站建设

9.1.3 创建动画元件

(4)在“元件编辑器”中，使用绘图 或文本工具创建一个新对象。可以绘 制一个矢量对象或位图对象。 (5)完成绘制后，关闭“元件编辑器” 窗口。则Fireworks 将元件放入库中， 并将一个副本放在文档的中间位置。

返回本节 录

网站建设

9.1.3 创建动画元件

除上述方法外，还可以将图像文档中 的对象转换为动画元件，具体方法是： 先选中该对象，然后，选择菜单中 “修改”→“动画”→“选择动画” 选项即可。同时弹出设置“动画”对 话框，如图9-8所示。在对话框中输入 所需的设置。单击按钮后，动画控件 出现在对象的定界框上，而元件的副 本自动添 加到“库”面板中。返回本节 录

网站建设

9.1.4 编辑元件下面通过绘制一个如图9-9所示的图形的 实例来说明编辑元件 …… 此处隐藏：131字，全部文档内容请下载后查看。喜欢就下载吧 ……