翻盖再点燃 Fireworks制作打火机

在Fireworks中为网页添加一个交互式动态按钮这已不是什么新鲜事了，然而利用该动态按钮的制作原理，创作一款能响应鼠标操作的翻盖式打火机，你见过没呢？！下面让我们先来看一下该作品在导出为HTM格式后，在浏览器中所呈现的各种动态效果。 　　一、效果展示 　　1、普通状态。　　 　　
5 z5 w  J. A, c: R2 k

9 M% M% L+ c8 Z- w! j# z　　2、鼠标滑动到打火机翻盖时的状态。 　　
+ q* O7 b; S; J5 k* O) ]. Y6 Z
2 c) b# d- P: V% {
　　3、单击翻盖后，翻盖弹起。 　　


　　4、鼠标触摸或移开打火机开关时，火苗被点燃或熄灭。 　　



5 B3 b7 S+ _' }+ O8 x& l" S　　5、如果想要再次看到打火机翻盖时的效果，只需再次刷新页面即可。 　　怎么样，这个效果好玩吧！下面就让我们进入实质的制作阶段。
  _3 i/ l- p1 M) O5 f! p
1 Y/ J4 w& G% }) L4 [* [3 `[color=red'][1]
# j; F' Z7 b, \$ [[2][3][4][5][6][7][8][9][10]下一页

& b" E/ U7 B* O) o

二、制作过程　　 　　要完成我们刚才所看到的效果，就必需先把打火机的“翻盖”和“开关”这些对象进行分解，然后依据鼠标的相关动作再将其进行组装。至于火苗和火苗光芒这些效果，我们可以根据需要，画上去即可。因为网上的打火机素材图片非常多，所以也就省去了再去绘制一个带翻盖打火机的时间。我们在启动Fireworks后新建一个500*400大小的白色画布，然后导入一张事先准备好的打火机位图，如图05。　 　　


6 x0 }8 c, R0 ~3 M, s( h. E, r+ Q9 S9 r
; T8 I! K) D& W$ L　　为了更加凸显该打火机火苗的亮光，我们需要将图05中的背景，改为黑色，所以我们第一步要做的就是先将图05中的打火机从其背景中“扣”出来。等到把火苗绘制完后，再把画布改为黑色即可。在这里，我使用的是蒙版扣图。先用“钢笔”工具沿着这个打火机的外形绘制一个封闭路径，然后对该路径使用无描边色的实心填充，填充色为全白色，如图06。　 　　


7 V  G5 S* ~9 V) d" `. i( [- ^
　　将路径对象与位图同时选中后，使用菜单栏上的“修改——蒙版——组合为蒙版”命令。从而使我们得到一个较精确的打火机外形，如图07。然后再点击菜单栏上的“修改——平面化所选”命令，将这组蒙版对象转成位图。　　 　　
% ]6 G0 g  t! \( \2 ~5 T
+ a7 {+ K& N. }$ V6 `5 D
+ `* s8 q; z" z- V
* w  U0 R* \( R# D8 m$ ]/ Q/ O上一页[1]
[color=red'][2]
[3][4][5][6][7][8][9][10]下一页
( d( V- n" _/ D5 V刚才已说过了，为了使这个打火机的翻盖和开关在鼠标的操作下能够进行活动，我们需要将这个打火机的翻盖和开关也独立的再“扣”出来。先将当前的这个打火机位图进行复制，然后在复制出来的位图上，用“钢笔”工具沿着打火机的翻盖绘制出一个无描边色的封闭路径，填充色为白色，如图08。 　　

* I& z2 V" P5 n; ?) E
　　将该路径与复制的打火机位图同时选中后也使用菜单栏上的“修改——蒙版——组合为蒙版”命令，从而将打火机的翻盖也“扣”了出来。接着再使用“修改——平面化所选”命令，将这个蒙版对象转成位图。如图09。　　 　　
& h+ _( R$ Q+ k) [( z

- Z: k' o2 \, E/ e　　为了使这个翻盖能将打火机的上部“盖住”，我们选中这个“翻盖”后点击菜单栏上的“修改——变形——数值变形”命令。在弹出的对话框中选择“旋转”项，旋转度数为“—80”，如图10。　　 　　
* G7 a+ g5 H2 Q5 {9 F- G2 b

% _& g1 J3 X, e; M7 h
% n8 d) \& w9 ?$ [( |( H上一页[1][2]
[color=red'][3]
7 U$ z& D$ X3 ~0 Q2 ~$ @( r. V[4][5][6][7][8][9][10]下一页
　这样一来，就将这个打火机的翻盖给放平了。接下来再用蒙版扣图的方法把打火机的开关也扣出来，然后使用“修改——平面化所选”命令将其转成位图。至此，画布上就有了三个位图对象，分别为“翻盖”、“开关”和“机身”，如图11。大家不妨对照一下，看看自己的操作是否有误。 　　
2 [% j/ S4 W  \, H9 i+ G. D: ]

　　为了使“开关”对象在活动时，不受“机身”上的开关遮挡，我们可以用“矩形选区”工具，将该“机身”上的开关进行框选后，用“橡皮擦”工具进行擦除，或直接按Ｄelete键将其删除。如图12。 　　
% E+ I3 ]7 T( K4 H
( a0 j( I( Q7 U/ x* r2 ^
　　完成后通过“修改——排列——移到最前”命令，将“机身”对象移至其它对象的最上层。然后把“开关”与“机身”进行拼装，如图13。 　　
, d. n6 P& C8 T7 c
3 s' w# E2 b" E3 i/ M9 K' R
( R' a9 l! [" @4 ]
上一页[1][2][3]
[color=red'][4]
[5][6][7][8][9][10]下一页

& j: T( Q! q6 S& b+ v, d

完成这一步的操作之后我们就要进入打火机在响应鼠标动时的操作了。将当前的这三个对象同时选中后，在任一对象上点击鼠标右键，并在弹出菜单中选择“转换为元件”命令，然后在弹出来的“元件属性”对话框中选择“按钮”类，如图14。　　 　　
7 L9 f% O5 \5 Y$ L
; b# K! L! G4 y  a4 j% I
. `* L" c( D$ }　　新建的元件都会被保存在“库”面板当中，为了进一步编辑该按钮元件，我们打开“库”面板后再双击这个打火机元件的缩略图，从而进入该按钮元件的编辑区，如图15。　　 　　

* L( ?( V* t! ~. {7 ~
　　从图15中的元件编辑窗口中不难看出，在每个选项卡中所绘制的图形，都将与鼠标的响应动作相对应。由于这几个动作图形都必需在当前这三个位图对象的基础上进一步绘制完成，所以我们要将当前“释放”选项卡而中的三个位图对象分别复制到“滑过”、“按下”和“按下时滑过”这三个选项卡当中。复制完成后我们再回到“释放”选项卡中，先对该选项卡中的打火机图形状态进行绘制。
2 v6 R' Z2 C# I( d上一页[1][2][3][4]
[color=red'][5]
6 N) p1 t% d, ^4 x  G$ A; m+ |$ i[6][7][8][9][10]下一页

2 D1 J: x7 i& G9 ^0 h* Y" n

在 “释放”选项卡中将要绘制的是该打火机按钮元件在鼠标处于普通状态时的图形。此时的打火机翻盖还没有打开，所以要用“橡皮擦”工具将“机身”对象上的那个翻盖进行擦除，如图16。 　　
& G. M6 }; G- F5 V: {) m

　　对“翻盖”对象使用“修改——排列——移到最前”命令后，把“翻盖”对象放到“机身”对象的上部，如图17。 　　


　　完成后点击“滑过”选项卡，进入下一个鼠标动作的绘制，由于这一选项卡中的鼠标动作与“释放”选项卡中的鼠标动作完全相同。因此我们只需将“滑过”选项卡中原来的三个位图对象删除后，再把“释放”选项卡中的全部图形复制过来即可。完成后点击“按下”选项卡，进入该打火机按钮元件的下一个鼠标动作的绘制。
上一页[1][2][3][4][5]
[color=red'][6]
) a2 `3 j; K" Z& P* [7 f" K  `. @4 u[7][8][9][10]下一页

5 K+ F6 G  U% ^+ O$ e7 i

7 v1 A7 C2 T8 |. f　在“按下” 选项卡中将要绘制鼠标在松开该按钮元件后的图形。此时打火机的翻盖被打开。而在该选项卡中已有打火机的翻盖被打开的图形了，因此，我们只需将雇该选项卡中那个多余的“翻盖”对象删除即可，如图18。 　　
% |2 e% x3 x0 A+ X
. Z9 ~0 ^0 ]7 R5 q
# o# \# J: T" ^( y! g6 S　　我们点击“按下时滑过”选项卡，进入该按钮元件在鼠标再次触摸到该按钮时的动作图形。此时的打火机开关将被“按下”，并有火苗腾出，使其周围的亮度增加。与“按下”选项卡一样，把那个多余的“翻盖”对象先行删除。然后我们将这个选项卡中打火机的“开关”对象用方向键向下移动20个像素，如图19。 　　
. c) k+ Q+ m" ?$ r7 H
: ^# Z) Q6 `6 d7 H% }: ~

% Q& E6 Y$ S7 I& C) Y: e* y3 }上一页[1][2][3][4][5][6]
[color=red'][7]
[8][9][10]下一页

, b1 V3 k* Z) B8 f9 ~  B

# S/ ^- E9 ^/ t! M我们再来绘制火苗的外焰。先用“椭圆形”工具画一个14*55大小的椭圆，再用“部分选择”工具对该椭圆进行适当的修改，使其具有火苗般的外形。然后为这个对象使用无描边色的“椭圆形”渐变填充，填充方式如图20。其中四个色彩滑块的数值从左至右依次为：# 3067B9、# FFFAAE、# FFEDA3、# FEFEFE。 　　
/ h: f: t4 M8 d& _1 A. n; P3 f2 C

, f2 k8 h6 u/ J! P8 T8 E0 |　　然后我们再来绘制火苗的内焰。同样是选用“椭圆形”工具先画一个8*29大小的椭圆形，用“部分选择”工具进行适当调整后，对该椭圆使用无描边色的“线性”渐变填充，填充方式如图21。其中左右两个色彩滑块的数值分别为# 3F3F3F和# 000000，而左边色彩滑块上的不透明度滑块数值则为0%。 　　
( S3 r/ A2 D3 }  V+ `3 X
" M. |  P6 ?2 n, j
　　完成后我们把火苗的外焰与内焰这两个对象同时选中，并使用“修改——组合”命令，将其合成一个组合对象。下面我们再来绘制火苗的光芒。在按住Shift键不放的情况下，用“椭圆形”工具绘制一个大小为459*459的正圆。可在辅助线的帮助下将该圆的中心与火苗的中心点进行对齐。然后对该圆使用无描边色的“椭圆形”渐变填充，左右两个色彩滑块的色彩值分别为# FFF1A7与# FFFFFF。而左右两边的不透明滑块的数值分别为50%和0%。最后，为了更好地呈现出这个光芒的亮度，我们通过“修改——画布——画布颜色”选项，将背景色改为黑色。效果如图22。 　　
6 e' w4 a- V- A" F# s$ d1 o1 c
& E' N+ A% j% J' u9 v0 |6 S6 g0 o
- e3 L/ K% g2 K$ b/ c- n& f$ U
6 z2 i* \, m0 |& U( w上一页[1][2][3][4][5][6][7]
[color=red'][8]
1 B* |8 G/ v. q# n[9][10]下一页
我们进入最后的“活动区域”选项卡，为这个按钮元件绘制一个鼠标的有效果响应区域。即只有当鼠标指针位于该区域时，该打火机才会产生相应的动作图形。显然，这个有效区域就是打火机的开关位置，我们用“矩形热点”工具在这个位置上绘制出大小为38*17大小的矩形即可，如图23。在点击元件编辑窗口右下角的“完成”按钮后，即可回到最初的“原始”工作区中。　　 　　


　　在“原始”工作区中可以看到，这个打火机的按钮元件被自动加上了网页切片。这个网页切片的大小与这个打火机按钮元件的大小是相一至的，换句话说，这个切片所覆盖着的区域就是这个打火机按钮元件，在响应鼠标动作时的变化区域。但此时却有一部分的网页切片处在画布之外，这就意味着这个按钮元件在导出为HTM格式之后，画布之外的元件图形将会被自动删除，从而无法看到作品的整体效果。如图24。　　 　　
. Q4 l2 F/ T. A
5 }. E0 }" w, O- Z' z" m8 Y5 h
$ O  ^# v5 y5 l: l& H
上一页[1][2][3][4][5][6][7][8]
[color=red'][9]
4 _/ \4 }$ U+ ^# f[10]下一页

" k1 Z. B1 q$ i

因此为了解决这一问题，我们通过点击菜单栏上的“修改——画布——符合画布”命令，使该画布完全符合按钮元件的切片大小。这样一来，就可以使这个打火机的按钮元件在响应鼠标动作时，图形的变换可以完全的处于画布之内，从页使我们能够完整地看到该按钮元件的图形变化效果。如图25。 　　
& }: G% u' k9 B/ c' q5 J3 B
( l& p1 |/ g- D" _
3 M$ ]; F, \$ i0 w　　在图25中可以看出，尽管我们把这个打火机的按钮元件的背景色改成了黑色，但在画布当中所显示的却仍是白色。所以我们通过“修改——画布——画布颜色”选项，将画布改为黑色。　　 　　另外，在图25中的绿色切片上的文字也可以看出，当前的图形切片格式为*GIF，为了使作品在导出为HTM格式后，有个效好的图像观看效果，我们需要将该按钮元件的图象导出为品质较高的*JPEG格式。先选中该切片，然后在“优化”面板中点选“JPEG”，接着在右边的“品质”栏中输入数值为“100”即可，如图26。　　 　　

4 Z' `6 y& B) ]
　　至此，整个作品就完成了，可点击工作区上的“预览”选项卡进行效果查看，如图27。 　　
- l; i. \8 n: \% p  V; L+ \
: k$ i" L) k# t/ x6 g5 m5 H
2 R$ H" R% v2 }6 T2 p　　在确认无误后最好还是通过“文件——导出”选项将作品以HTM格式进行永久性的保存。以后无论什么时候想要再查看该效果时就方便多了。所谓举一反三，在本例教材中我只是巧妙利用了Fireworks在制作交互式按钮元件时的相关功能，从而绘制出了这个可以用鼠标的操作先翻盖，再点燃的打火机效果。大家依然可以发辉想像力，再次利用Fireworks的这一功能来制作出更好的交互式作品！ 上一页[1][2][3][4][5][6][7][8][9]
[color=red'][10]