新浪首页免费邮件用户注册网站地图
上移动梦网
赢手机大奖

新浪首页 > 科技时代 > 网上学园 > 主页制作 > 正文
Fireworks另类探照灯效果制作

http://www.sina.com.cn 2001/07/11 15:46 中国电脑教育报 杨小婧

  Fireworks作为网页制作三剑客之一,有着非常强大的功能!在Flash中,我们可以实现一种好似探照灯的动画效果,而这种精彩的效果,在它的“同门兄弟”Fireworks 4中,也同样可以轻松实现,而且步骤简洁明了!如果你也感兴趣的话,就和我一起来搞定它吧!

  前期制作

  1、打开Fireworks 4,新建一个空白的文件,将它的大小设定为300×100,背景色为黑色,其余不需调整。


图1

  2、制作左右滚动的球体。选择菜单“Insert→New Symbol”创建一个新符号。在弹出对话框中的Name项中为它取一个名称,这里我们输入“Ball”;在Type项中选取Graphic,确定即可。

  3、用椭圆工具配合Shift键,画一个正圆,按照图1将它填充好颜色。我们可以发现,刚编辑的圆形矢量图已经在Library面板里表现出来了。

  4、再次选择“Insert→New Symbol”创建一个新符号。这次,在弹出对话框的Type选项中选择“Animation(动画)”选项,Name为“Move Ball”。

  5、从Library图库中选中Ball,并将它直接拖到Move Ball的编辑窗口中。我们可以把这个Ball放在Stage左侧的位置上。

  6、重复第5步的方法再次拖动一个Ball放置到Stage上,这次放置到Stage的右侧。还有另外一种方法也可以实现,就是选中第一次拖到Stage的Ball,点选菜单项中“Edit→Clone”(可以使用快捷键Ctrl + Shift + D)复制一个Ball,然后将Clone后的Ball放置到编辑区的右侧,得到最终效果如图2所示。


图2

  7、按住“Shift”键或者按组合键“Ctrl + A”,全部选中编辑区中的两个符号(Symbol)。然后,选择菜单“Modify→Symbol→Tween Instances”,并在弹出的菜单中勾选“Distribute to Frames”。到现在,Move Ball的动画效果就制作完毕了。点击编辑区左下角快捷工具栏的播放按钮看一下动画效果吧!

  怎么样,看到了吗?不过,请先别着急,小歇一下,我们继续以下操作!

  效果实现

  1、制作通过Mask遮罩产生探照灯的最终效果。在主编辑区(Stage)中输入文字“Fireworks”。再将刚才做好的Animation Symbol动画Move Ball拖到编辑区中。在出现的对话框中选择“确定”,这时Fireworks就会自动在当前帧的基础上增加动画需要的实际帧数。点击快捷工具栏的“播放”按钮便可以看到刚才所做的动画在主编辑区播放了。这时候你可以调整一下Move Ball的位置,最好让其居中显示(如图3)。


图3

  2、选中刚才输入的文字,剪切它后选择菜单栏中的“Edit→Paste As Mask”。OK!那就请赶快点一下左下角快捷工具栏中的“Play”键,接下来就请慢慢欣赏你自己的大作吧(如图4)!


图4

  呵呵,怎么样,还满意吗?不过,要提醒你的是:一定要记得将输出格式变为Animated Gif格式,而不是单纯的GIF格式!这样才能实现我们想要的探照灯的动画效果!



发表评论】【初学者园地】【科技聊天】【关闭窗口

新 闻 查 询

 相关链接
【学园专题】网页图象制作新锐-FireWork轻松入门
Fireworks立体网格巧生成 (2001/07/06 16:55)
Fireworks动画类型及制作详解 (2001/07/03 15:18)
用Fireworks制作特效字 (2001/06/04 17:04)
Fireworks 4.0 e路同病相怜 (2000/12/28 16:52)


科技时代意见反馈留言板 电话:010-82612286   欢迎批评指正

网站简介 | 用户注册 | 广告服务 | 招聘信息 | 中文阅读 | Richwin | 联系方式 | 帮助信息 | 网站律师

Copyright © 1996 - 2001 SINA.com, Stone Rich Sight. All Rights Reserved

版权所有 四通利方 新浪网