第9节 深入Fireworks MX2004的使用.ppt

第9章深入Fireworks MX 2004 9.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）单击编辑器窗口上方的“按下”选项卡，编辑“按下状态”的按钮图像。在编辑区下方，单击“拷贝滑过时的图像”按钮，将前一个按钮图像按原位拷贝过来。因为这一状态的按钮应该有一个被按下的动作，所以，应该稍微改变一下按钮的位置。将图形和文字同时选中，然后用键盘上的光标键向下移动两下，再向右移动两下就可以了。如图9-5所示。 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所示的图形的实例来说明编辑元件的过程。 9.1.4 编辑元件 ?具体操作步骤如下： （1）新建一个文档，然后分别使用圆形工具和矩形工具在画布上绘制基本图形，并设置相应的笔触效果，如图