Fireworks 4 完全教程 创建复杂交互效果(Rollovers)

[复制链接]
查看: 709|回复: 0
gggds 发表于 2009-12-27 14:02:39 | 显示全部楼层 |阅读模式
  刚才我们做了一个简单的翻转效果,回忆一下,我们是用一种不同于按钮编辑器的方式制作的。它的制作思路是:翻转效果的每个状态都是一帧,先为每个状态制作好各自的帧,然后添加切割和行为,行为可以使这些帧结合起来产生交互的效果,任何复杂的交互效果都是以此为思想创建的。
5 z! P( y  b7 C) s* H9 ~  除了用行为(Behaviors)面版来创建行为,我们还可以直接在画布上用拖放鼠标(drag-and-drop)的方式来创建行为。直到Fireworks4.0以前这依然是不可能做到的,但是在Fireworks4.0中,这成为了事实。: z& a( Y- C1 B. X6 R7 u
  这次我们要创建一个效果稍微复杂的交互行为,同时介绍拖放鼠标(drag-and-drop)的使用。
+ p' Y* Q. f6 `0 A, T' s  新建一幅画布,并在上面绘制一个矩形,注意:确认当前的状态为第一帧(Frame 1),如图:- J0 W- L8 k  q% V' H) b# k0 O6 x

" U& P8 K' K- u% L
3 M% ?7 t5 |5 _% r+ {# W9 r' p
( o' X' _9 o  M+ o9 N  现在制作第二帧,我们希望当鼠标悬停时能够在矩形的下方出现“Rollovers”的字样,因此手工建立第二帧,并选中第二帧在它上面写上Rollovers。当你在制作第二帧时,你将可能看不见第一帧上的内容,如果你需要第一帧上的图形作参考的话,可以在帧(Frame)面版中打开“洋葱皮”功能。) |% J" y( K6 L% t3 |. H
+ v+ I+ Q; e6 A
) g" B) o& J- `3 n4 z& N) `
$ \0 d/ u! S; ?! Z# l
  分别在矩形和文字上建立切割,因为所有的行为都是在切割和热区上完成的。
/ G' P  Q, c2 \! U/ n( {0 e) b# i; S1 a3 v0 c
* m' J% G( C1 ^' S/ R

- g/ c1 ?0 d: J/ _0 G' I8 w  当鼠标靠近切割中心的准星图形时,会变成手的形状,这就代表切割可以利用拖放产生行为。将矩形上的切割的准星拖到文字上的切割上,这样就可以简单的利用拖放来创建行为了。
9 Z0 k5 ^: D- H
1 e) J3 c% a, V0 ^& a! G' K6 V2 S4 S, m0 Z5 m1 n7 l7 B

/ e/ G3 n4 C* x# T& @0 }4 \( W  当鼠标在目标切割上松开时,Fireworks会弹出窗口询问你交互的方式,在这里我们要选择切换到第二帧(Frame 2)。
+ j; d9 Y" h9 _( W8 l8 C- `7 W
6 r' E4 m/ e  A+ S: e5 S4 g( `. {- C  b, N1 e1 p
7 n# {. Y9 G( E, a% V* E- V* r
  预览一下刚才创建的翻转。如果你愿意,可以用同样的方法创建多个交互,直到满意为止。在刚才的基础上,我又给矩形添加了自身变换的效果,有兴趣的请自己试一下,如果你熟练的话,这一步骤不会超过一分钟。
( b7 s4 ^( w* D- P8 |  Fireworks用一条兰色的曲线来表示拖放产生的行为,如果你想要删除这个交互行为,只要点击这条兰色曲线,Fireworks会询问你是否要删除行为。

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )