当前位置：
[
翻盖再点燃 Fireworks制作打火机
http://www.webjx.com 更新日期：2005-11-16 网页教学网 浏览次数：
我们点击“按下时滑过”选项卡，进入该按钮元件在鼠标再次触摸到该按钮时的动作图形。此时的打火机开关将被“按下”，并有火苗腾出，使其周围的亮度增加。与“按下”选项卡一样，把那个多余的“翻盖”对象先行删除。然后我们将这个选项卡中打火机的“开关”对象用方向键向下移动20个像素，如图19。
我们再来绘制火苗的外焰。先用“椭圆形”工具画一个14*55大小的椭圆，再用“部分选择”工具对该椭圆进行适当的修改，使其具有火苗般的外形。然后为这个对象使用无描边色的“椭圆形”渐变填充，填充方式如图20。其中四个色彩滑块的数值从左至右依次为：# 3067B9、# FFFAAE、# FFEDA3、# FEFEFE。
然后我们再来绘制火苗的内焰。同样是选用“椭圆形”工具先画一个8*29大小的椭圆形，用“部分选择”工具进行适当调整后，对该椭圆使用无描边色的“线性”渐变填充，填充方式如图21。其中左右两个色彩滑块的数值分别为# 3F3F3F和# 000000，而左边色彩滑块上的不透明度滑块数值则为0%。
完成后我们把火苗的外焰与内焰这两个对象同时选中，并使用“修改——组合”命令，将其合成一个组合对象。下面我们再来绘制火苗的光芒。在按住Shift键不放的情况下，用“椭圆形”工具绘制一个大小为459*459的正圆。可在辅助线的帮助下将该圆的中心与火苗的中心点进行对齐。然后对该圆使用无描边色的“椭圆形”渐变填充，左右两个色彩滑块的色彩值分别为# FFF1A7与# FFFFFF。而左右两边的不透明滑块的数值分别为50%和0%。最后，为了更好地呈现出这个光芒的亮度，我们通过“修改——画布——画布颜色”选项，将背景色改为黑色。效果如图22。
我们进入最后的“活动区域”选项卡，为这个按钮元件绘制一个鼠标的有效果响应区域。即只有当鼠标指针位于该区域时，该打火机才会产生相应的动作图形。显然，这个有效区域就是打火机的开关位置，我们用“矩形热点”工具在这个位置上绘制出大小为38*17大小的矩形即可，如图23。在点击元件编辑窗口右下角的“完成”按钮后，即可回到最初的“原始”工作区中。
在“原始”工作区中可以看到，这个打火机的按钮元件被自动加上了网页切片。这个网页切片的大小与这个打火机按钮元件的大小是相一至的，换句话说，这个切片所覆盖着的区域就是这个打火机按钮元件，在响应鼠标动作时的变化区域。但此时却有一部分的网页切片处在画布之外，这就意味着这个按钮元件在导出为HTM格式之后，画布之外的元件图形将会被自动删除，从而无法看到作品的整体效果。如图24。
因此为了解决这一问题，我们通过点击菜单栏上的“修改——画布——符合画布”命令，使该画布完全符合按钮元件的切片大小。这样一来，就可以使这个打火机的按钮元件在响应鼠标动作时，图形的变换可以完全的处于画布之内，从页使我们能够完整地看到该按钮元件的图形变化效果。如图25。
在图25中可以看出，尽管我们把这个打火机的按钮元件的背景色改成了黑色，但在画布当中所显示的却仍是白色。所以我们通过“修改——画布——画布颜色”选项，将画布改为黑色。
另外，在图25中的绿色切片上的文字也可以看出，当前的图形切片格式为*GIF，为了使作品在导出为HTM格式后，有个效好的图像观看效果，我们需要将该按钮元件的图象导出为品质较高的*JPEG格式。先选中该切片，然后在“优化”面板中点选“JPEG”，接着在右边的“品质”栏中输入数值为“100”即可，如图26。
至此，整个作品就完成了，可点击工作区上的“预览”选项卡进行效果查看，如图27。
在确认无误后最好还是通过“文件——导出”选项将作品以HTM格式进行永久性的保存。以后无论什么时候想要再查看该效果时就方便多了。所谓举一反三，在本例教材中我只是巧妙利用了Fireworks在制作交互式按钮元件时的相关功能，从而绘制出了这个可以用鼠标的操作先翻盖，再点燃的打火机效果。大家依然可以发辉想像力，再次利用Fireworks的这一功能来制作出更好的交互式作品！
我们再来绘制火苗的外焰。先用“椭圆形”工具画一个14*55大小的椭圆，再用“部分选择”工具对该椭圆进行适当的修改，使其具有火苗般的外形。然后为这个对象使用无描边色的“椭圆形”渐变填充，填充方式如图20。其中四个色彩滑块的数值从左至右依次为：# 3067B9、# FFFAAE、# FFEDA3、# FEFEFE。
然后我们再来绘制火苗的内焰。同样是选用“椭圆形”工具先画一个8*29大小的椭圆形，用“部分选择”工具进行适当调整后，对该椭圆使用无描边色的“线性”渐变填充，填充方式如图21。其中左右两个色彩滑块的数值分别为# 3F3F3F和# 000000，而左边色彩滑块上的不透明度滑块数值则为0%。
完成后我们把火苗的外焰与内焰这两个对象同时选中，并使用“修改——组合”命令，将其合成一个组合对象。下面我们再来绘制火苗的光芒。在按住Shift键不放的情况下，用“椭圆形”工具绘制一个大小为459*459的正圆。可在辅助线的帮助下将该圆的中心与火苗的中心点进行对齐。然后对该圆使用无描边色的“椭圆形”渐变填充，左右两个色彩滑块的色彩值分别为# FFF1A7与# FFFFFF。而左右两边的不透明滑块的数值分别为50%和0%。最后，为了更好地呈现出这个光芒的亮度，我们通过“修改——画布——画布颜色”选项，将背景色改为黑色。效果如图22。
我们进入最后的“活动区域”选项卡，为这个按钮元件绘制一个鼠标的有效果响应区域。即只有当鼠标指针位于该区域时，该打火机才会产生相应的动作图形。显然，这个有效区域就是打火机的开关位置，我们用“矩形热点”工具在这个位置上绘制出大小为38*17大小的矩形即可，如图23。在点击元件编辑窗口右下角的“完成”按钮后，即可回到最初的“原始”工作区中。
在“原始”工作区中可以看到，这个打火机的按钮元件被自动加上了网页切片。这个网页切片的大小与这个打火机按钮元件的大小是相一至的，换句话说，这个切片所覆盖着的区域就是这个打火机按钮元件，在响应鼠标动作时的变化区域。但此时却有一部分的网页切片处在画布之外，这就意味着这个按钮元件在导出为HTM格式之后，画布之外的元件图形将会被自动删除，从而无法看到作品的整体效果。如图24。
因此为了解决这一问题，我们通过点击菜单栏上的“修改——画布——符合画布”命令，使该画布完全符合按钮元件的切片大小。这样一来，就可以使这个打火机的按钮元件在响应鼠标动作时，图形的变换可以完全的处于画布之内，从页使我们能够完整地看到该按钮元件的图形变化效果。如图25。
在图25中可以看出，尽管我们把这个打火机的按钮元件的背景色改成了黑色，但在画布当中所显示的却仍是白色。所以我们通过“修改——画布——画布颜色”选项，将画布改为黑色。
另外，在图25中的绿色切片上的文字也可以看出，当前的图形切片格式为*GIF，为了使作品在导出为HTM格式后，有个效好的图像观看效果，我们需要将该按钮元件的图象导出为品质较高的*JPEG格式。先选中该切片，然后在“优化”面板中点选“JPEG”，接着在右边的“品质”栏中输入数值为“100”即可，如图26。
至此，整个作品就完成了，可点击工作区上的“预览”选项卡进行效果查看，如图27。
在确认无误后最好还是通过“文件——导出”选项将作品以HTM格式进行永久性的保存。以后无论什么时候想要再查看该效果时就方便多了。所谓举一反三，在本例教材中我只是巧妙利用了Fireworks在制作交互式按钮元件时的相关功能，从而绘制出了这个可以用鼠标的操作先翻盖，再点燃的打火机效果。大家依然可以发辉想像力，再次利用Fireworks的这一功能来制作出更好的交互式作品！
作者：大眼网虫 来源：Enet硅谷动力 (责任编辑:webjx)
 相关评论 |
相 关 文 章