|
刚才我们做了一个简单的翻转效果,回忆一下,我们是用一种不同于按钮编辑器的方式制作的。它的制作思路是:翻转效果的每个状态都是一帧,先为每个状态制作好各自的帧,然后添加切割和行为,行为可以使这些帧结合起来产生交互的效果,任何复杂的交互效果都是以此为思想创建的。
, _7 x, h: M! V3 r. {: X0 ^ 除了用行为(Behaviors)面版来创建行为,我们还可以直接在画布上用拖放鼠标(drag-and-drop)的方式来创建行为。直到Fireworks4.0以前这依然是不可能做到的,但是在Fireworks4.0中,这成为了事实。
! r$ [" U- o# G W* Q 这次我们要创建一个效果稍微复杂的交互行为,同时介绍拖放鼠标(drag-and-drop)的使用。; f8 n- @9 p# V7 Z: J
新建一幅画布,并在上面绘制一个矩形,注意:确认当前的状态为第一帧(Frame 1),如图:; J: U1 {+ {8 ?; j7 y
8 Q8 W/ e; [. U+ ~
" }( z; F" d R, |6 m& M. x% b
$ Y' i6 L2 E4 D 现在制作第二帧,我们希望当鼠标悬停时能够在矩形的下方出现“Rollovers”的字样,因此手工建立第二帧,并选中第二帧在它上面写上Rollovers。当你在制作第二帧时,你将可能看不见第一帧上的内容,如果你需要第一帧上的图形作参考的话,可以在帧(Frame)面版中打开“洋葱皮”功能。
5 P, H; n8 l: w7 s0 [" v1 T4 I' k Q0 }$ b
0 |4 x: g0 Q w+ ]* l
6 D, N; P; e( S: Q* z4 x% w( ~, O 分别在矩形和文字上建立切割,因为所有的行为都是在切割和热区上完成的。
8 |4 m7 Y/ B, p' b/ g' i
4 m& R( U! @, z M) f
5 Y+ b5 E' Y+ j4 y6 ~ ? _8 C5 k8 [6 `% E* D* G; w, K
当鼠标靠近切割中心的准星图形时,会变成手的形状,这就代表切割可以利用拖放产生行为。将矩形上的切割的准星拖到文字上的切割上,这样就可以简单的利用拖放来创建行为了。
5 B1 E; @: X% P$ V2 ^( T
0 |4 U: y7 v7 ^1 Y4 _7 H! ^
- A8 X q1 D1 q2 h4 k- J9 k' k2 y9 Y
- A# h/ m% r1 A5 u0 H$ v 当鼠标在目标切割上松开时,Fireworks会弹出窗口询问你交互的方式,在这里我们要选择切换到第二帧(Frame 2)。 r3 u U) C6 O& @' _& c
. Q7 O2 D* z6 M% g7 E* f) h, U- V: }
+ R7 k) O9 c6 Z" N" A
预览一下刚才创建的翻转。如果你愿意,可以用同样的方法创建多个交互,直到满意为止。在刚才的基础上,我又给矩形添加了自身变换的效果,有兴趣的请自己试一下,如果你熟练的话,这一步骤不会超过一分钟。
( g8 q! y5 u4 {9 T- Z( I, k" \ Fireworks用一条兰色的曲线来表示拖放产生的行为,如果你想要删除这个交互行为,只要点击这条兰色曲线,Fireworks会询问你是否要删除行为。 |
|