减小字体
增大字体- ·上一篇文章：Photoshop打造超可爱MM光盘封面
- ·下一篇文章：我们的人生：生命来来往往的人
翻盖再点燃 Fireworks制作打火机
在Fireworks中为网页添加一个交互式动态按钮这已不是什么新鲜事了，然而利用该动态按钮的制作原理，创作一款能响应鼠标操作的翻盖式打火机，你见过没呢？！下面让我们先来看一下该作品在导出为HTM格式后，在浏览器中所呈现的各种动态效果。
一、效果展示
1、普通状态。
2、鼠标滑动到打火机翻盖时的状态。
3、单击翻盖后，翻盖弹起。
4、鼠标触摸或移开打火机开关时，火苗被点燃或熄灭。
5、如果想要再次看到打火机翻盖时的效果，只需再次刷新页面即可。
怎么样，这个效果好玩吧！下面就让我们进入实质的制作阶段。 二、制作过程
要完成我们刚才所看到的效果，就必需先把打火机的“翻盖”和“开关”这些对象进行分解，然后依据鼠标的相关动作再将其进行组装。至于火苗和火苗光芒这些效果，我们可以根据需要，画上去即可。因为网上的打火机素材图片非常多，所以也就省去了再去绘制一个带翻盖打火机的时间。我们在启动Fireworks后新建一个500*400大小的白色画布，然后导入一张事先准备好的打火机位图，如图05。
为了更加凸显该打火机火苗的亮光，我们需要将图05中的背景，改为黑色，所以我们第一步要做的就是先将图05中的打火机从其背景中“扣”出来。等到把火苗绘制完后，再把画布改为黑色即可。在这里，我使用的是蒙版扣图。先用“钢笔”工具沿着这个打火机的外形绘制一个封闭路径，然后对该路径使用无描边色的实心填充，填充色为全白色，如图06。
将路径对象与位图同时选中后，使用菜单栏上的“修改——蒙版——组合为蒙版”命令。从而使我们得到一个较精确的打火机外形，如图07。然后再点击菜单栏上的“修改——平面化所选”命令，将这组蒙版对象转成位图。
将该路径与复制的打火机位图同时选中后也使用菜单栏上的“修改——蒙版——组合为蒙版”命令，从而将打火机的翻盖也“扣”了出来。接着再使用“修改——平面化所选”命令，将这个蒙版对象转成位图。如图09。
为了使这个翻盖能将打火机的上部“盖住”，我们选中这个“翻盖”后点击菜单栏上的“修改——变形——数值变形”命令。在弹出的对话框中选择“旋转”项，旋转度数为“—80”，如图10。
为了使“开关”对象在活动时，不受“机身”上的开关遮挡，我们可以用“矩形选区”工具，将该“机身”上的开关进行框选后，用“橡皮擦”工具进行擦除，或直接按Ｄelete键将其删除。如图12。
完成后通过“修改——排列——移到最前”命令，将“机身”对象移至其它对象的最上层。然后把“开关”与“机身”进行拼装，如图13。
新建的元件都会被保存在“库”面板当中，为了进一步编辑该按钮元件，我们打开“库”面板后再双击这个打火机元件的缩略图，从而进入该按钮元件的编辑区，如图15。
从图15中的元件编辑窗口中不难看出，在每个选项卡中所绘制的图形，都将与鼠标的响应动作相对应。由于这几个动作图形都必需在当前这三个位图对象的基础上进一步绘制完成，所以我们要将当前“释放”选项卡而中的三个位图对象分别复制到“滑过”、“按下”和“按下时滑过”这三个选项卡当中。复制完成后我们再回到“释放”选项卡中，先对该选项卡中的打火机图形状态进行绘制。 在 “释放”选项卡中将要绘制的是该打火机按钮元件在鼠标处于普通状态时的图形。此时的打火机翻盖还没有打开，所以要用“橡皮擦”工具将“机身”对象上的那个翻盖进行擦除，如图16。
对“翻盖”对象使用“修改——排列——移到最前”命令后，把“翻盖”对象放到“机身”对象的上部，如图17。
完成后点击“滑过”选项卡，进入下一个鼠标动作的绘制，由于这一选项卡中的鼠标动作与“释放”选项卡中的鼠标动作完全相同。因此我们只需将“滑过”选项卡中原来的三个位图对象删除后，再把“释放”选项卡中的全部图形复制过来即可。完成后点击“按下”选项卡，进入该打火机按钮元件的下一个鼠标动作的绘制。 在“按下” 选项卡中将要绘制鼠标在松开该按钮元件后的图形。此时打火机的翻盖被打开。而在该选项卡中已有打火机的翻盖被打开的图形了，因此，我们只需将雇该选项卡中那个多余的“翻盖”对象删除即可，如图18。
我们点击“按下时滑过”选项卡，进入该按钮元件在鼠标再次触摸到该按钮时的动作图形。此时的打火机开关将被“按下”，并有火苗腾出，使其周围的亮度增加。与“按下”选项卡一样，把那个多余的“翻盖”对象先行删除。然后我们将这个选项卡中打火机的“开关”对象用方向键向下移动20个像素，如图19。
一、效果展示
1、普通状态。
2、鼠标滑动到打火机翻盖时的状态。
3、单击翻盖后，翻盖弹起。
4、鼠标触摸或移开打火机开关时，火苗被点燃或熄灭。
5、如果想要再次看到打火机翻盖时的效果，只需再次刷新页面即可。
怎么样，这个效果好玩吧！下面就让我们进入实质的制作阶段。 二、制作过程
要完成我们刚才所看到的效果，就必需先把打火机的“翻盖”和“开关”这些对象进行分解，然后依据鼠标的相关动作再将其进行组装。至于火苗和火苗光芒这些效果，我们可以根据需要，画上去即可。因为网上的打火机素材图片非常多，所以也就省去了再去绘制一个带翻盖打火机的时间。我们在启动Fireworks后新建一个500*400大小的白色画布，然后导入一张事先准备好的打火机位图，如图05。
为了更加凸显该打火机火苗的亮光，我们需要将图05中的背景，改为黑色，所以我们第一步要做的就是先将图05中的打火机从其背景中“扣”出来。等到把火苗绘制完后，再把画布改为黑色即可。在这里，我使用的是蒙版扣图。先用“钢笔”工具沿着这个打火机的外形绘制一个封闭路径，然后对该路径使用无描边色的实心填充，填充色为全白色，如图06。
将路径对象与位图同时选中后，使用菜单栏上的“修改——蒙版——组合为蒙版”命令。从而使我们得到一个较精确的打火机外形，如图07。然后再点击菜单栏上的“修改——平面化所选”命令，将这组蒙版对象转成位图。
将该路径与复制的打火机位图同时选中后也使用菜单栏上的“修改——蒙版——组合为蒙版”命令，从而将打火机的翻盖也“扣”了出来。接着再使用“修改——平面化所选”命令，将这个蒙版对象转成位图。如图09。
为了使这个翻盖能将打火机的上部“盖住”，我们选中这个“翻盖”后点击菜单栏上的“修改——变形——数值变形”命令。在弹出的对话框中选择“旋转”项，旋转度数为“—80”，如图10。
为了使“开关”对象在活动时，不受“机身”上的开关遮挡，我们可以用“矩形选区”工具，将该“机身”上的开关进行框选后，用“橡皮擦”工具进行擦除，或直接按Ｄelete键将其删除。如图12。
完成后通过“修改——排列——移到最前”命令，将“机身”对象移至其它对象的最上层。然后把“开关”与“机身”进行拼装，如图13。
新建的元件都会被保存在“库”面板当中，为了进一步编辑该按钮元件，我们打开“库”面板后再双击这个打火机元件的缩略图，从而进入该按钮元件的编辑区，如图15。
从图15中的元件编辑窗口中不难看出，在每个选项卡中所绘制的图形，都将与鼠标的响应动作相对应。由于这几个动作图形都必需在当前这三个位图对象的基础上进一步绘制完成，所以我们要将当前“释放”选项卡而中的三个位图对象分别复制到“滑过”、“按下”和“按下时滑过”这三个选项卡当中。复制完成后我们再回到“释放”选项卡中，先对该选项卡中的打火机图形状态进行绘制。 在 “释放”选项卡中将要绘制的是该打火机按钮元件在鼠标处于普通状态时的图形。此时的打火机翻盖还没有打开，所以要用“橡皮擦”工具将“机身”对象上的那个翻盖进行擦除，如图16。
对“翻盖”对象使用“修改——排列——移到最前”命令后，把“翻盖”对象放到“机身”对象的上部，如图17。
完成后点击“滑过”选项卡，进入下一个鼠标动作的绘制，由于这一选项卡中的鼠标动作与“释放”选项卡中的鼠标动作完全相同。因此我们只需将“滑过”选项卡中原来的三个位图对象删除后，再把“释放”选项卡中的全部图形复制过来即可。完成后点击“按下”选项卡，进入该打火机按钮元件的下一个鼠标动作的绘制。 在“按下” 选项卡中将要绘制鼠标在松开该按钮元件后的图形。此时打火机的翻盖被打开。而在该选项卡中已有打火机的翻盖被打开的图形了，因此，我们只需将雇该选项卡中那个多余的“翻盖”对象删除即可，如图18。
我们点击“按下时滑过”选项卡，进入该按钮元件在鼠标再次触摸到该按钮时的动作图形。此时的打火机开关将被“按下”，并有火苗腾出，使其周围的亮度增加。与“按下”选项卡一样，把那个多余的“翻盖”对象先行删除。然后我们将这个选项卡中打火机的“开关”对象用方向键向下移动20个像素，如图19。
