当前位置:沸点梦工场 > 网页设计教程 > FireWorks教程 > 浏览文章

Fireworks制作动态banner流程

网页教学网 2007年05月29日 【字体:

itgao老总是我朋友,前几天要我帮忙做个banner,拖到今天终于有点不好意思了,动手!

好久没有用fw做动画了,有些生疏。有不合适的地方希望大家不要扔鸡蛋砸我,要扔就扔石头,一把砸死我得了,我这人脸皮薄,呼呼。

好,废话不多说,咱们开始吧:

效果图:

点此在新窗口浏览图片

本文涉及知识点:

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

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

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

4、fw缩放动画的制作;

5、fw帧帧动画的制作;

...

第一步:做背景层

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

新建468*60文档;

点此在新窗口浏览图片

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

点此在新窗口浏览图片

点此在新窗口浏览图片

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

点此在新窗口浏览图片

点此在新窗口浏览图片

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

点此在新窗口浏览图片

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

点此在新窗口浏览图片

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

点此在新窗口浏览图片

点此在新窗口浏览图片

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

点此在新窗口浏览图片

点此在新窗口浏览图片

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

点此在新窗口浏览图片

点此在新窗口浏览图片

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

点此在新窗口浏览图片

调整参数如下:

点此在新窗口浏览图片

学习更多知识与技巧 请点击 网易学院

下一页
本文共 3 页,第  [1]  [2]  [3]  页