查看完整版本: Fireworks教程:3D旋转gif动画

爱你不要你 2008-8-26 11:23

Fireworks教程:3D旋转gif动画

来源:蓝色理想  作者:RockHward

  本教程介绍使用Fireworks制作可爱的四叶草旋转gif动画效果,教程主要讲解了运用运动痕迹滤镜模拟3D效果来完成最终效果,如果你有兴趣就动手做做看咯。

  看了“小可爱”转的用fireworks插件制作3D的gif动画,实在强大。

  介绍这个插件的文章有差不多这样一句话:按下“导出”按钮,可能有类似死机现象,但是只要耐心等待,总会输出gif。

  晕,我家里的机是N年前的老牌货,看来要另想办法了。

  乱碰乱撞之下,意想不到的事情发生了~~~~~

[img]http://www.missyuan.net/upimg/allimg/080826/1122010.gif[/img]

效果图

[img]http://www.missyuan.net/upimg/allimg/080826/1122011.png[/img]

Png图

  1. 新建一个150*100px大小的画布,用“星型工具”画一个四叶草图案,为它加一个“纯色阴影滤”镜。

  按F8转换为“动画”元件,设为用21帧转过360度。不要忘了在帧面板中删除掉帧21。然后选中帧1。

[img]http://www.missyuan.net/upimg/allimg/080826/1122012.jpg[/img]

图1

  2. 这一步是核心效果。为这个动画实例添加一个EyeCandy4.0的“运动痕迹”滤镜,参数就自由选择了。

  按下播放按钮就可以看到滤镜是如何模拟到3d效果的了。

[img]http://www.missyuan.net/upimg/allimg/080826/1122013.jpg[/img]

图2

  3. 最后新建一个层,放标题和签名,将该层置于顶部,钩选“共享交叠帧”。

  一个仿3D动画的gif就3步被K.O.了。

[img]http://www.missyuan.net/upimg/allimg/080826/1122014.jpg[/img]

图3

  End:在用滤镜制作动画时,我发现有时几个动画元件应用滤镜和几个动画元件的组合应用滤镜的效果是截然不同的。

  你试过了吗?尝试使用各种滤镜,制作精彩的动画效果吧!

[img]http://www.missyuan.net/upimg/allimg/080826/1122015.jpg[/img]

图4

  R: 还有其它三个作品,由浅入深简单说一下它们应用的技法。

  1. 齿轮的绘画用了“自动形状”的“齿轮”。对自转的动画实例应用了“纯色阴影”滤镜。

  2. 对所有元件实例进行了组合,然后添加“内侧阴影”、“投影”和“纯色阴影”滤镜,对实例的组合应用这些滤镜,看上去就有小星星从大星星里融出的感觉。

  3. 只有一个层,设为共享交叠帧,对眼睛图形实例和泪滴动画实例进行组合,然后应用发光滤镜,这样泪滴好像从眼睛里融出。当然,帧延时要不断减小,模拟泪滴从悬挂到自由落体运动的过程。

[img]http://www.missyuan.net/upimg/allimg/080826/1122016.jpg[/img]

图5

[img]http://www.missyuan.net/upimg/allimg/080826/1122017.gif[/img]

图6

[img]http://www.missyuan.net/upimg/allimg/080826/1122018.gif[/img]

图7

[img]http://www.missyuan.net/upimg/allimg/080826/1122019.gif[/img]

图8

[img]http://www.missyuan.net/upimg/allimg/080826/11220110.png[/img]

图9 png

[img]http://www.missyuan.net/upimg/allimg/080826/11220111.png[/img]

图10 png

[img]http://www.missyuan.net/upimg/allimg/080826/11220112.png[/img]

图11 png

juniedd 2008-8-26 14:25

这个据说我在哪里也看到过,呵呵abc::01。支持下噢~!

古落飞 2008-8-29 16:07

太帅了 一定要试一下 所以我说 FW是王道啊

luodong79 2008-9-1 13:53

很好很强大  谢谢楼主

最爱苦丁茶 2008-9-11 12:18

弄明白了。.要学会举一反三啊。....

huawx 2008-9-23 16:28

请问这个教程是怎么做的我怎么不会呢,谢谢解答

等你转身 2008-9-23 18:58

很好的效果.谢谢了.学一下

fox541 2008-9-26 12:35

看我做的宝马图,PS做出来的

哎呀真新鲜 2008-9-26 20:24

abc::05 这个纯色阴影在哪里?还有啊 ,俺不会画那个4叶草~

V哇鬼少 2008-9-28 20:09

需要另外下载个插件吗?

酷儿 2008-9-29 15:51

好教程  一定认真学习

ihxin 2008-10-21 09:07

做得不错啊,值得学习

stubble 2008-10-22 18:49

郁闷了 什么时候能灌满80积分?

好来晤 2008-10-25 23:10

这就试试去~~~
谢谢分享哦!!

yoyotoo 2008-10-26 15:45

好厉害啊abc::01 abc::01 abc::01 abc::01

高兴的哭 2008-10-26 15:50

效果很好,我下载了一个fw,可是不会用啊,郁闷abc::05

yoyotoo 2008-10-26 15:58

abc::01 abc::01 abc::01 abc::01 abc::01 abc::01 abc::01 abc::01
还发不
页: [1]
查看完整版本: Fireworks教程:3D旋转gif动画