网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 图形图象 > Fireworks
图形图象:Photoshop,Fireworks,CorelDraw,Flash,3Dmax,AutoCad,Maya,Director,Authorware,Illustrator,相关软件
本月文章推荐
.Fireworks打造残破效果.
.炫出我的个性——QQ聊天表情的绘.
.Loading动画的制作<1>.
.Fireworks制作一个水晶图标.
.Fireworks逐帧动画效果及实例剖析.
.利用图层混合模式和通道抠图.
.Fireworks绘制线条规律旋转网状特.
.FW制作片头文字渐显渐隐动画.
.体验Adobe Fireworks CS3新特性.
.Fireworks MX 之 初体验5-1.
.深入学习FW——绘画车的教程.
.Fireworks精细描绘甲壳虫汽车.
.Fireworks中玻璃罐的制作.
.抢先体验:Fireworks MX 2004 新功.
.Fireworks MX 2004特效字系列教程.
.Fireworks巧妙绘制生肖鼠年邮票.
.Fireworks制作简单清晰的新闻框.
.Fireworks笔触与选区实现残破照片.
.Fireworks制作昆虫.
.同一色系的图片.

Fireworks 制作渐变动画

发表日期:2005-7-2


一、符号的运用 范例:

网络使用者对动画有偏好,曾有调查显示,和静态的广告比起来,网友们比较常点选动态的广告。网络上的广告几乎已和动态GIF画上等号,当然了,动态GIF在网站内容中一直扮演着重要的角色,而Fireworks就是创造动态GIF的最佳工具。
结合了建立动态效果及绘图,图象编辑的功能,Fireworks将修改动态效果变得更简单,并且效果更显多样化。

  1. 将每一个物件定义为一个symbol(符号),当物件定义为symbol(符号)后,就可以复制无限个相同的物件也就是instance(分身),这个动作对于缩小文件容量有相当大的帮助。
    (如果你曾使用过Flash,symbol(符号)对你而言应该是可以接受的概念。)
  2. 选择要做为symbol(符号)的物件,选取菜单指令Insert>Convert to Symbols来把它定义为symbol(符号)。如果你不想要一个特定的instance(分身)被连结symbol时只要选取菜单指令Modify>Symbols>Break Link就可以解除与symbol(符号)的连结。


  3. 当你想要修改symbol(符号)的外貌时,只要编辑Library视窗里的symbol(符号)那么画面上的instance(分身)就会同时做更新了。
    (在Fireworks中,你可以复制、移动、编排大小或是旋转每一个不同的instance,因为一切都是由symbol(符号)所控制的。 )


(学会了制作fireworks的符号与分身,接下来就是要开始运用了,那就接着继续观看下一个课程分身的渐变)

二、符号的渐变

这里的例子是让物件移动并且加上淡出的效果。
有一种方法可以做到,就是用手动的方式改变物件在每一格frame里的位置,但是这必须具有细心及耐心,所以这里要教你如何用 Fireworks来帮你。

  1. 首先将Library窗口里的symbol(符号),拖曳到画面上。


  2. 要创造动态时,就要使用Frame的toolbar。从拉下的选单中选择Duplicate Frames,在对话框中的数字选择1,按下OK。


  3. 现在Frame 1和Frame 2是一样的,按下Frame2并删去instance(分身),复制Frame2,这一次对话框中的数字选择4。现在你的动画中应该一共有6格frame,最后5格frame没有instance(分身)。

  4. 从Library窗口里拖曳出一个新的instance(分身)到Frame 1然后把它移到左边,这窗口才有一点空间。选择原本的instance(分身),再在透明度(Object)toolbar中将透明度(opancity)调至20%。同时选择两个instance(分身),选取菜单指令 Modify>Symbols>TweenInstance(勾选Distribute to frames)并在对话框中输入4格。

  5. 现在比较一下6格frame吧。


(学会了符号的渐变,接下来就是最后的步骤压缩与输出,那就接着继续观看最后一个课程压缩与输出)

三、压缩与输出

图象所有调整及存取的东西都在一个复杂的对话框中完成,它的位置在文件下拉菜单中的File>Export Wizard 。

  1. 首先你会看到选择(Options)工具出现在左边而文件预览在右边。选择工具让你可以选择压缩GIF图象的色彩,或是JPEG格式。放眼未来,Fireworks也包含一些网络用的.png格式,不过这算是有一点快过头了,因为大部分的浏览器都不支持这种格式 。为了配合这次教学的内容,所以将格式选为AnimatedGif。

  2. 在色盘(Palette)底下,这里建议使用WebSnap Adaptive,如此一来会创造出一个合适的颜色色盘让图象使用最好的色彩, 而且它会保存你用浏览器定义的任何色彩,可说是安全的色盘。制作动画时,32是一个起头的好数字,所以在色盘选择的右边框框中输入32 。



  3. 右下方的几个按钮可以将预览的窗口分割为两个或四个部分,让你可以比较不同的设定。选择第二个按钮,让你比较32色与 64色的不同。在每个预览窗口的上面有选单,让你可以储存设定。在每个预览窗口的上面都有选单可以让你储存设定。如果你喜欢你为图象所做的设定,而且想要把它套用在类似的图象上,按下加号。如果你想要将一批批次文件套用到一样的色盘可以在这里定义,关闭压缩窗口后,再选择File>BatchProcess来设定图象。



  4. 动画标签(Animation tab)。按着SHIFT键不放,按下全部frame来把它全部选择。在stopwatch图示下方的区域中,输入50让每一格frame出现半秒的时间(50/100),下方的两个箭头图示可以控制是否要让动画重复播放。不过在这里就别管这些箭头,让PlayOnce的箭头保持勾选的状态。让Auto Crop及Auto Difference保持勾选状态,这样一来只要改变每一格frame图象的一小部份,就可以到最好的压缩效果。



  5. 最后的步骤把动画调整好以后就可以预览一下,然后把你的心血结晶存文件起来,这样就大功告成了。

上一篇:FW动画类型及制作详解 人气:8902
下一篇:Fireworks4滚盖图技巧高级篇 人气:10666
浏览全部Fireworks的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐