99265.COM BETA | 新设计 新视觉 回首页 | 登录

今天是:
您现在的位置: 新视觉 >> 教程 >> 网页 >> fireworks >> 教程正文:Fireworks制作动态banner流程
Fireworks制作动态banner流程
作者:未知 文章来源:未知 添加时间:2008-3-15

效果图:

点此在新窗口浏览图片

本文涉及知识点:

1、fw创建gif动画的基本过程;

2、fw帧动画中共享层的使用;

3、fw形状渐变动画的制作;

4、fw缩放动画的制作;

5、fw帧帧动画的制作;

...

第一步:做背景层

大家知道,大多动画的背景图片都是固定的,变化的只是动画里的文字阿、图标等等。我们可以事先将背景部分做好,然后将其设为共享层,其他帧里我们就不用再复制背景层了。

新建468*60文档;

点此在新窗口浏览图片

用矩形工具画一个矩形,大小同画布;

点此在新窗口浏览图片

点此在新窗口浏览图片

将填充颜色改为线性渐变,调整颜色如下;

点此在新窗口浏览图片

点此在新窗口浏览图片

通过“文件”菜单里的“导入”功能,将修饰图片导入场景;

点此在新窗口浏览图片

并调整布局及搭配,结果如下图:

点此在新窗口浏览图片

将层面板中层1设置为共享层,并新建层2;

点此在新窗口浏览图片

点此在新窗口浏览图片

选择层2,场景中输入“海量”两个字,大小为120px,调整透明度为60%;调整颜色及倾斜角度;

点此在新窗口浏览图片

点此在新窗口浏览图片

在帧面板中讲帧1鼠标拖拉之新建图标,复制创建帧2,并将文字大小设置为44;

点此在新窗口浏览图片

点此在新窗口浏览图片

在画布中输入“免费”,在滤镜的“阴影和光晕”中选择“发光”;

点此在新窗口浏览图片

调整参数如下:

点此在新窗口浏览图片
 
 

再对“免费”两个字进行模糊处理:在滤镜的“模糊”中选择“缩放模糊”;

点此在新窗口浏览图片

调整参数如下:

点此在新窗口浏览图片

复制该帧,并将新帧中的“免费”的模糊参数修改如下:

点此在新窗口浏览图片

再复制该帧,删除“免费”的模糊滤镜。

点此在新窗口浏览图片

复制帧,添加输入“教”;复制帧,添加输入“程”;重复复制帧,添加输入“.”实现如下图的效果:

点此在新窗口浏览图片

点此在新窗口浏览图片

点此在新窗口浏览图片

点此在新窗口浏览图片

新建帧(直接点新建帧图标,不用复制帧的操作),输入“尽在”,导入图片,调整位置、文字字体等,如下:

点此在新窗口浏览图片

重复复制帧,调整图片位置:

点此在新窗口浏览图片

点此在新窗口浏览图片

输入“Www.ITGao.Com”,并使用发光滤镜:

点此在新窗口浏览图片

点此在新窗口浏览图片

双击各帧,在弹出的间隔时间:

点此在新窗口浏览图片

点此在新窗口浏览图片

动画制作完毕,开始导出为gif图片:打开图像预览面板

点此在新窗口浏览图片

点此在新窗口浏览图片

设置如上图所示,最后点击“导出”按钮,保存。大功告成,效果如下:

点此在新窗口浏览图片

动画总体过程比较麻烦,综合了fw的很多实用功能和技巧,但原理其实很简单,只要耐心调整和操作就可以领悟到fw的无穷魅力了。

希望我的表达不是很烂,想扔鸡蛋的开始准备:)

PNG源文件:

点此在新窗口浏览图片
  • 上一篇教程:

  • 下一篇教程:
  • 打印此文 』『关闭窗口
    【相关文章】
    没有相关教程
    【免责声明】
    本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。如果本站转载的文章有任何版权问题或任何异议,请惠赐:99_265#163.com。
    推荐文章
  • 此栏目下没有推荐教程
  • 热门文章
    普通教程Fireworks制作简单的网站LOGO
    普通教程Fireworks制作动态banner流程
    普通教程Fireworks制作精美网页效果图
    普通教程Fireworks制作立体文字特效
    普通教程Fireworks制作马赛克特效文字
    普通教程Fireworks两种羽化方法
    普通教程Fireworks 8绘制蝴蝶翻飞巧写书…
    普通教程Fireworks 8绘制彩虹拖尾字
    普通教程Fireworks 8绘制精致的Rss图标
    普通教程Fireworks 8绘制精致指南针图案
    普通教程Fireworks丰富的笔触设置面板详…
      © 2007 新视觉. 99265.com  关于新视觉 - 广告服务 - 版权申明 - 联系我们 - 皖ICP备05001767号.