Fireworks 轻松绘制 Banner广告动画 (1)
<P> Banner，一般翻译为旗帜广告、横幅广告等。Banner是网站用来作为盈利或者是发布一些重要的信息的工具。Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。<BR><BR> 本文中我们用Fireworks来制作一个变色的Banner，从中我们可以掌握符号（symbol）的使用、补间实例动画（tween instance）的制作、层(Layers)和帧(Frames)的基本用法，结尾进行精彩的技巧总结。 </P><P></P>
<P> <STRONG>完成效果如下： </STRONG>
<P align=center><IMG src="/bbs/attachments/websoft/20081212/200812129544962577801.gif"></P> <STRONG>Banner制作具体过程</STRONG>
<P> （1）首先我们新建一个大小为468×60的文件，并设置画布颜色为黑色，如图1所示。
<P></P>
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544967177802.jpg" width=521><BR>图1 新建一个文件</P>
<P> （2）然后我们导入一个要进行变色效果的位图文件，如图2所示。当然我们同样可以使用绘图工具绘制这个图像，这里是为了方便讲解选用外部图像的。
<P></P>
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544971877803.jpg" width=521><BR>图2 导入位图</P><BR> （3）选中该幅图像按Ctrl＋Shift＋D两次，克隆图像两次。然后选中其中的一幅图像，点击“Filters”，选择“Adjust Color”>>“Hue/Saturation”，这时在弹出对话框中调整色调的值，如图3所示。同样方式调整另外一幅图像的颜色，最终得到图4所示的图像效果。
<P></P>
<P align=center><IMG height=189 src="/bbs/attachments/websoft/20081212/200812129544976577804.jpg" width=459><BR>图3 调整色调</P>
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544981277805.jpg" width=521><BR>图4 对克隆对象实行变色效果后的图像</P><BR> （4）选中其中的一个图片如左边的紫色图片，按快捷键F8或者右键在弹出菜单中选择Convert to Symbol准备将图像转换为符号。在弹出的对话框内为符号命名并选择动画符号(Animation)，如图5所示。
<P align=center><IMG height=220 src="/bbs/attachments/websoft/20081212/200812129544981277806.jpg" width=441><BR>图5 将图像转换为符号</P> （5）点击“OK”之后会弹出动画设置的对话框，如图6所示。我们暂时对它不做设置。
<P align=center><IMG height=275 src="/bbs/attachments/websoft/20081212/200812129544987577807.jpg" width=297><BR>图6 动画设置对话框</P><BR> （6）单击“OK”，这时回到工作区中，我们在画布上会看到带箭头的虚线边框的符号，如图7所示。使用同样方式将另外两幅图像转换为符号，并分别命名为Symbol 2和Symbol 3，然后将三个符号都删除掉。
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544992177808.jpg" width=521><BR>图7 位图转换为动画符号的效果</P>
<P> （7）我们再在Banner的左边加些图片并做适当调整使Banner更加生动，如图8所示。</P>
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544996877809.jpg" width=521><BR>图8 在Banner左边添加图片</P> （8）接着我们点击“Window”菜单，分别把“Layers”、“Frames”和“Library”三个面板打开，为了我们将来创建动画服务。在Layers（层）面板中选中Layer 1图层双击鼠标给图层命名为Background，并选中“Share across frames”复选框即共享这个图层，如图9所示。
<P align=center><IMG height=258 src="/bbs/attachments/websoft/20081212/200812129545015778010.jpg" width=340><BR>图9 命名并共享图层</P>
<P align=center> </P>
<P align=center></P>
<P align=center><B><FONT color=red></FONT> <A href="/news/news001/Fireworks/200509/20050921165714_2.html"></A> <A href="/news/news001/Fireworks/200509/20050921165714_3.html"></A> <A href="/news/news001/Fireworks/200509/20050921165714_4.html"></A> <A href="/news/news001/Fireworks/200509/20050921165714_2.html"></A></B></P>
<P> Banner，一般翻译为旗帜广告、横幅广告等。Banner是网站用来作为盈利或者是发布一些重要的信息的工具。Banner在设计上应该要做到制作美观、方便点击、与网页协调和整体构成合理。<BR><BR> 本文中我们用Fireworks来制作一个变色的Banner，从中我们可以掌握符号（symbol）的使用、补间实例动画（tween instance）的制作、层(Layers)和帧(Frames)的基本用法，结尾进行精彩的技巧总结。 </P>
<P></P>
<P> <STRONG>完成效果如下： </STRONG>
<P align=center><IMG src="/bbs/attachments/websoft/20081212/200812129544962577801.gif"></P> <STRONG>Banner制作具体过程</STRONG>
<P> （1）首先我们新建一个大小为468×60的文件，并设置画布颜色为黑色，如图1所示。
<P></P>
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544967177802.jpg" width=521><BR>图1 新建一个文件</P>
<P> （2）然后我们导入一个要进行变色效果的位图文件，如图2所示。当然我们同样可以使用绘图工具绘制这个图像，这里是为了方便讲解选用外部图像的。
<P></P>
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544971877803.jpg" width=521><BR>图2 导入位图</P><BR> （3）选中该幅图像按Ctrl＋Shift＋D两次，克隆图像两次。然后选中其中的一幅图像，点击“Filters”，选择“Adjust Color”>>“Hue/Saturation”，这时在弹出对话框中调整色调的值，如图3所示。同样方式调整另外一幅图像的颜色，最终得到图4所示的图像效果。
<P></P>
<P align=center><IMG height=189 src="/bbs/attachments/websoft/20081212/200812129544976577804.jpg" width=459><BR>图3 调整色调</P>
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544981277805.jpg" width=521><BR>图4 对克隆对象实行变色效果后的图像</P><BR> （4）选中其中的一个图片如左边的紫色图片，按快捷键F8或者右键在弹出菜单中选择Convert to Symbol准备将图像转换为符号。在弹出的对话框内为符号命名并选择动画符号(Animation)，如图5所示。
<P align=center><IMG height=220 src="/bbs/attachments/websoft/20081212/200812129544981277806.jpg" width=441><BR>图5 将图像转换为符号</P> （5）点击“OK”之后会弹出动画设置的对话框，如图6所示。我们暂时对它不做设置。
<P align=center><IMG height=275 src="/bbs/attachments/websoft/20081212/200812129544987577807.jpg" width=297><BR>图6 动画设置对话框</P><BR> （6）单击“OK”，这时回到工作区中，我们在画布上会看到带箭头的虚线边框的符号，如图7所示。使用同样方式将另外两幅图像转换为符号，并分别命名为Symbol 2和Symbol 3，然后将三个符号都删除掉。
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544992177808.jpg" width=521><BR>图7 位图转换为动画符号的效果</P>
<P> （7）我们再在Banner的左边加些图片并做适当调整使Banner更加生动，如图8所示。</P>
<P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/200812129544996877809.jpg" width=521><BR>图8 在Banner左边添加图片</P> （8）接着我们点击“Window”菜单，分别把“Layers”、“Frames”和“Library”三个面板打开，为了我们将来创建动画服务。在Layers（层）面板中选中Layer 1图层双击鼠标给图层命名为Background，并选中“Share across frames”复选框即共享这个图层，如图9所示。
<P align=center><IMG height=258 src="/bbs/attachments/websoft/20081212/200812129545015778010.jpg" width=340><BR>图9 命名并共享图层</P>
<P align=center> </P>
<P align=center></P>
<P align=center><B><FONT color=red></FONT> <A href="/news/news001/Fireworks/200509/20050921165714_2.html"></A> <A href="/news/news001/Fireworks/200509/20050921165714_3.html"></A> <A href="/news/news001/Fireworks/200509/20050921165714_4.html"></A> <A href="/news/news001/Fireworks/200509/20050921165714_2.html"></A></B></P>
</P><P align=center> </P><P align=center>9）单击层面板右下角的按钮新建一个图层。然后将如图10所示的Library（库）面板中的Symbol 1拖到画布中去，并放置到Banner的最右角，如图11所示。同时记住它属性面板中的位置信息（X：282，Y：0）。 </P><P align=center><IMG height=242 src="/bbs/attachments/websoft/20081212/200812129545062778011.jpg" width=338><BR>图10 Library面板</P><P align=center><IMG height=182 src="/bbs/attachments/websoft/20081212/2008121295450109778012.jpg" width=521><BR>图11 将符号拖到画布上</P><P align=center><BR>
页:
[1]