您的位置:学习中国 推荐教程 Fireworks 正文
原作者:kuku 添加时间:2007-06-15 原文发表:2007-06-15 人气:19 来源:互联网

本文章共4332字,分3页,当前第1页,快速翻页:
 

在Fireworks中为网页添加一个交互式动态按钮这已不是什么新鲜事了,然而利用该动态按钮的制作原理,创作一款能响应鼠标操作的翻盖式打火机,你见过没呢?!下面让我们先来看一下该作品在导出为HTM格式后,在浏览器中所呈现的各种动态效果。


  一、效果展示

  1、普通状态。  

  


  2、鼠标滑动到打火机翻盖时的状态。

  


  3、单击翻盖后,翻盖弹起。

  


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

  

  5、如果想要再次看到打火机翻盖时的效果,只需再次刷新页面即可。

  怎么样,这个效果好玩吧!下面就让我们进入实质的制作阶段。

  二、制作过程  

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

  



  为了更加凸显该打火机火苗的亮光,我们需要将图05中的背景,改为黑色,所以我们第一步要做的就是先将图05中的打火机从其背景中“扣”出来。等到把火苗绘制完后,再把画布改为黑色即可。在这里,我使用的是蒙版扣图。先用“钢笔”工具沿着这个打火机的外形绘制一个封闭路径,然后对该路径使用无描边色的实心填充,填充色为全白色,如图06。 

  



  将路径对象与位图同时选中后,使用菜单栏上的“修改——蒙版——组合为蒙版”命令。从而使我们得到一个较精确的打火机外形,如图07。然后再点击菜单栏上的“修改——平面化所选”命令,将这组蒙版对象转成位图。  

  

  刚才已说过了,为了使这个打火机的翻盖和开关在鼠标的操作下能够进行活动,我们需要将这个打火机的翻盖和开关也独立的再“扣”出来。先将当前的这个打火机位图进行复制,然后在复制出来的位图上,用“钢笔”工具沿着打火机的翻盖绘制出一个无描边色的封闭路径,填充色为白色,如图08。

  


  将该路径与复制的打火机位图同时选中后也使用菜单栏上的“修改——蒙版——组合为蒙版”命令,从而将打火机的翻盖也“扣”了出来。接着再使用“修改——平面化所选”命令,将这个蒙版对象转成位图。如图09。  

  
为了使这个翻盖能将打火机的上部“盖住”,我们选中这个“翻盖”后点击菜单栏上的“修改——变形——数值变形”命令。在弹出的对话框中选择“旋转”项,旋转度数为“—80”,如图10。

  
  这样一来,就将这个打火机的翻盖给放平了。接下来再用蒙版扣图的方法把打火机的开关也扣出来,然后使用“修改——平面化所选”命令将其转成位图。至此,画布上就有了三个位图对象,分别为“翻盖”、“开关”和“机身”,如图11。大家不妨对照一下,看看自己的操作是否有误。



  为了使“开关”对象在活动时,不受“机身”上的开关遮挡,我们可以用“矩形选区”工具,将该“机身”上的开关进行框选后,用“橡皮擦”工具进行擦除,或直接按Delete键将其删除。如图12。

  


  完成后通过“修改——排列——移到最前”命令,将“机身”对象移至其它对象的最上层。然后把“开关”与“机身”进行拼装,如图13。
 
本文章更多内容1 - 2 - 3 - 下一页>>
本页地址
相关文章

用fireworks制作水晶樱桃
Fireworks制作昆虫实例
Fireworks教程绘制精美可爱水杯(1)
用Fireworks自带图案纹理制作特效字
firework制作木头效果
Fireworks交互式填充绘精致网页导航菜单
用Fireworks制作Logo心得体会
用Fireworks制作连续跳跃数字
用Fireworks做出苹果的晶亮透明
Fireworks蒙版制作图片窗格效果
Fireworks活用发光

相关评论


本文章所属分类:首页 推荐教程 Fireworks   Fireworks