（转）Fireworks打造动态banner全过程［本文已收录教程库］
itgao老总是我朋友，前几天要我帮忙做个banner，拖到今天终于有点不好意思了，动手！好久没有用fw做动画了，有些生疏。有不合适的地方希望大家不要扔鸡蛋砸我，要扔就扔石头，一把砸死我得了，我这人脸皮薄，呼呼。
好，废话不多说，咱们开始吧：
效果图：
[align=center][img=468,60]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/01.gif[/img][/align]
[b]本文涉及知识点：[/b]
1、fw创建gif动画的基本过程；
2、fw帧动画中共享层的使用；
3、fw形状渐变动画的制作；
4、fw缩放动画的制作；
5、fw帧帧动画的制作；
第一步：做背景层
大家知道，大多动画的背景图片都是固定的，变化的只是动画里的文字阿、图标等等。我们可以事先将背景部分做好，然后将其设为共享层，其他帧里我们就不用再复制背景层了。
新建468*60文档；
[align=center][img=396,308]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/02.jpg[/img][/align]
用矩形工具画一个矩形，大小同画布；
[align=center][img=27,24]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/03.jpg[/img][/align]
[align=center][img=488,80]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/04.jpg[/img][/align]
将填充颜色改为线性渐变，调整颜色如下;
[align=center][img=340,220]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/05.jpg[/img][/align]
[align=center][img=236,195]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/06.jpg[/img][/align]
通过“文件”菜单里的“导入”功能，将修饰图片导入场景；
[align=center][img=224,467]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/07.jpg[/img][/align]
并调整布局及搭配，结果如下图：
[align=center][img=487,79]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/08.jpg[/img][/align]
将层面板中层1设置为共享层，并新建层2；
[align=center][img=214,266]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/09.jpg[/img][/align]
[align=center][img=218,222]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/10.jpg[/img][/align]
选择层2，场景中输入“海量”两个字，大小为120px，调整透明度为60%；调整颜色及倾斜角度；
[align=center][img=64,88]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/11.jpg[/img][/align]
[align=center][img=500,282]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/12.jpg[/img][/align]
在帧面板中讲帧1鼠标拖拉之新建图标，复制创建帧2，并将文字大小设置为44；
[align=center][img=215,171]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/13.jpg[/img][/align]
[align=center][img=486,81]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/14.jpg[/img][/align]
在画布中输入“免费”，在滤镜的“阴影和光晕”中选择“发光”；
[align=center][img=318,263]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/15.jpg[/img][/align]
调整参数如下：
[align=center][img=182,94]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/16.jpg[/img][/align]
再对“免费”两个字进行模糊处理：在滤镜的“模糊”中选择“缩放模糊”；
[align=center][img=326,234]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/17.jpg[/img][/align]
调整参数如下：
[align=center][img=318,131]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/18.jpg[/img][/align]
复制该帧，并将新帧中的“免费”的模糊参数修改如下：
[align=center][img=318,131]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/19.jpg[/img][/align]
再复制该帧，删除“免费”的模糊滤镜。
[align=center][img=484,77]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/20.jpg[/img][/align]
复制帧，添加输入“教”；复制帧，添加输入“程”；重复复制帧，添加输入“.”实现如下图的效果：
[align=center][img=486,76]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/21.jpg[/img][/align]
[align=center][img=482,77]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/22.jpg[/img][/align]
[align=center][img=481,77]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/23.jpg[/img][/align]
[align=center][img=484,76]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/24.jpg[/img][/align]
新建帧（直接点新建帧图标，不用复制帧的操作），输入“尽在”，导入图片，调整位置、文字字体等，如下：
[align=center][img=487,80]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/25.jpg[/img][/align]
重复复制帧，调整图片位置：
[align=center][img=487,76]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/26.jpg[/img][/align]
[align=center][img=488,77]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/27.jpg[/img][/align]
输入“[url]Www.ITGao.Com[/url]”，并使用发光滤镜:
[align=center][img=205,106]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/28.jpg[/img][/align]
[align=center][img=487,78]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/29.jpg[/img][/align]
[align=left]双击各帧，在弹出的间隔时间：[/align]
[align=center][img=214,131]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/30.jpg[/img][/align]
[align=center][img=202,69]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/31.jpg[/img][/align]
动画制作完毕，开始导出为gif图片：打开图像预览面板
[align=center][img=222,464]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/32.jpg[/img][/align]
[align=center][img=500,411]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/33.jpg[/img][/align]
设置如上图所示，最后点击“导出”按钮，保存。大功告成，效果如下：
[align=center][img=468,60]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/34.gif[/img][/align]
动画总体过程比较麻烦，综合了fw的很多实用功能和技巧，但原理其实很简单，只要耐心调整和操作就可以领悟到fw的无穷魅力了。
希望我的表达不是很烂，想扔鸡蛋的开始准备：）
PNG源文件：
[align=center][img=468,60]http://www.jcwcn.com/Files01/BeyondPic/2007-8/28/5687/35.png[/img][/align] 支持一下,,LZ很有水平呀.. 支持,像高人学习 谢谢楼主！学习一下
页:
[1]
