Fireworks网页设计综合实例7

十一、?创建变形动画?
9 c3 l3 L6 s3 J2 l' U, t
. e0 T6 z3 R: ^* A% G  F5 ]) i! ^$ z# J??? 给一个网站添加动画对于访问者的时间和金钱都是一个不小的花销，因此在添加您的动画前，一定要先考虑好如下问题：动画能否增进您的信息传达力度，访问者下载和播放动画是否迅速、方便，是否有足够的组成动画的内容和资源。尽管网络动画及其传递方式正在不断的发生改变，但传统的GIF动画依然有着不可忽视的优势，我们在这里介绍一下创建GIF动画的两种途径。?
% ^! R% O. D3 T3 A- `! y( Y8 v1、?在层面板新建一个LOGO层，将其置于Web?Layer层下方。?2、?我们需要将背景层修改为一个共享图层，打开层面板，切换到背景层，在弹出菜单中选择Share?This?Layer，将背景层共享，此层上的内容将在所有帧都可见，此层的后面将出现一个共享图标，如下图：




7 h0 a, c! A) Q) f. ~3 i+ [3、?切换到LOGO层，在文档的右上角创建www.karsong.com文字。?4、?按F8将其转换为图形符号Graphic?Symbol。?5、?打开Effect面板，对此符号的实例添加红色Glow效果，如下图所示：
) G6 ?7 I3 K7 p  e, P' u
/ E! k2 b6 g: l" A

/ W/ h3 ]9 s5 ?6、?选中此实例，在右键弹出菜单中执行Edit>Clone，复制出一个新的实例，并且带有相同的Glow特效。?7、?在Effect面板修改第二个实例的特效，将其改为黄色，并改变Glow的范围和大小，如下图：
' l0 g2 Y1 K# f8 M* @. H6 L
% r$ l" H3 z1 \) ~. \/ {7 C$ {

8、?选择这两个实例，在右键弹出菜单中执行Symbols>Tween?Instances创建变形动画，设定插入帧数为6帧，并勾选Distribute?to?Frames分布到帧，如下图所示：

- k+ E! z  ~. s
& x# `2 X0 x% b) b2 u$ H9 D2 e
9、?打开Web?Layer图层的显示，在此动画位置创建一个切片。?10、?打开Optimize优化面板，设定此切片的类型为Animated?GIF，并设定颜色数为32色，如下图所示：
( J2 J+ X+ F4 M' o# v. r1 q


! v& a3 j6 t0 ~: q. E: \6 u% Z5 L11、?此动画完成，您可以打开帧面板设定动画帧之间显示的时间。?
十二、?创建实时动画Live?Aniamation?
Fireworks4新增了一种实时动画创作方式，这种方式可以快速的创建一个动画符号，生成的动画具有即时编辑性能，及您可以在任意时间修改形成动画的各种元素属性。?
0 |) W  ?4 W: u' c" k1、?在文档左上角新增一个切片，点击工具面板最下方的?按钮关闭切片显示[点击旁边的?按钮可以打开切片显示]。?2、?在层面板中切换到LOGO层，在刚才的左上角位置处输入文字“Karsong”。?3、?选择此文字对象，按F8快捷键将其转换为一个动画符号，将其命名为“Animate?LOGO”，符号类型为“Animation”，如下图所示：
- z* D) [; X0 B8 w, ]

/ H* X8 Z! V" B7 ~2 O

1 R$ W: E5 [4 [* w7 I4、?在弹出的设置窗口中设置插入帧数为8，并进行如下设置：

- u( v" L: c( w& w4 e& O' P

( J0 L( ]1 ~1 o3 k9 @* I3 j5、?拖动生成的动画符号中心的小红点，将其向右拖动到适当位置，注意不要将其拖出刚才创建的切片范围之外。



- R5 J# u; [* Y% u. V7 j4 O4 |1 Q6、?打开优化面板Optimize设定此切片的类型为“Animated?GIF”，颜色数为32，如下图所示：
8 c8 U- z: @- m9 T8 I4 \& M# ?( N5 N
; a8 s& t8 B" ~+ e0 o0 I$ \