Fireworks打造javascript图片提示效果(1)

[复制链接]
查看: 215|回复: 0
gggds 发表于 2009-12-27 03:12:15 | 显示全部楼层 |阅读模式
  本教程利用Fireworks的层、帧、切片等工具,让Fireworks自动生成JavaScript来打造图片提示效果。通过学习本教程,读者可了解到关于层、帧、切片及导出HTML网页格式的方法及技巧,而且网友们还可以将此种效果应用到各种网页上,最终效果如下(光标放在按钮上,下面的提示图片也相应的发生变化): ' s2 U5 Q9 S. G5 T0 U; Y" }
图1
2 }; z# U! ?0 S8 K( E  二、点击:文件—导入(快捷键为Ctrl+R),如图2所示。 + h! N, M. u' ?, g- _
4 B! p) m) K6 ~

; G/ q3 }# }+ g5 S) U6 q" [# N, E' n图2
# a; w# q8 r  E! S! {  三、导入所需的素材,如图3所示。
/ R4 D  F8 M2 _/ f4 P) P* q& v! Z5 b# I4 Q- J
9 @! Z  k# A- a# O, V" W
图3 " i4 e7 W. b6 d% |( N, q
  四、点击:窗口—对齐,打开对齐面板,如图4所示。
2 M) A& M' c/ x. N6 o8 g
, \/ K* y5 ]' ^5 x4 m. w+ ]
4 D- d; C/ n. W图4 ; X5 ?2 ^/ m' l4 d

+ ]& ]7 M7 Y7 R0 c4 Q1 a3 {  五、选择三张素材图片,分别点击水平居中及垂直居中命令,让三张图片居中对齐,如图5所示。 # K# O6 V0 Q( R) ]: `
/ e' @9 p/ a' ]1 V, w0 W
( Q: [# z  V' T
图5 , A1 _& t, [2 p, |3 |, l) T1 h4 m
  六、选择矩形工具,在画布上绘制出一个矩形,并设置为黄色。如图6所示。 3 D* z1 N- v; L8 a+ @9 b- b1 ?! e  g
. D# d* y" i: D. g5 Z/ D

8 z/ d3 {( C3 \( b! @6 a4 E/ Y图6   B. L3 l+ ?- h* |* ~. F
  七、点击工具架中的文本工具,在黄色矩形上面输入:漫画,如图7所示。
' i# K8 G% q6 V1 ]+ |5 u$ l1 z1 k

0 o* Y" {8 i: A. M- L! B1 {图7
5 G& p8 m. @& D7 Y1 q- [) D2 ^  八、用同样的方法,制作另一个按钮。如图8所示。
7 U9 D1 ]9 V/ e+ P" y
7 L; N; m* }2 v1 K: K- _! q7 O# L3 ~) J- `
图8 0 b: {' I6 D; l/ B! }
  九、点击:窗口——样式(快捷键为Shift+F11),打开样式面板,如图9所示。
. M* W3 J. {& [' |) q4 w6 S, h+ ~$ ~9 n: `8 q3 d! X2 H2 _4 _
7 g1 N# Y: x; n& X& g; E1 Q
图9
- `. E" {' l- d; m9 j* V 5 w/ W8 f* }# W8 u5 A) n7 n  X
  十、选择二个矩形(小提示:按住Shift,可以多选),点击如图所示的样式(当然,读者也可以选择其它样式甚至自定义样式),如图10所示。 4 Q0 Q+ q; B9 K5 s8 I- }: e- K
( i1 g" J6 D7 o  H& B$ ]& `
8 Z' o  B6 U( F3 |2 j' f& Q- x
图10 1 K% s/ y, Z2 p  F0 U
  十一、同时选择三张位图,如图11所示(选择技巧:在层面板中,点击第一个位图层,再按着Shift点击最后一个位图层便可多选了)。 ) o9 x, t3 P& S9 I2 k

' i! m* k! B: l. W7 r2 `
( z" o& V5 e7 f( ~& d- L$ w5 a图11 # Y. |) _4 s* t! F/ b0 |( b5 g2 d
  十二、在选择三个位图层的状态下,点击帧面板中的分散到帧按钮,如图12所示的红色部分。
0 P0 f* ^( k0 |: h6 t. t
7 G0 A' E8 s$ k, h7 h" N! R% R8 Z- Q, e( r2 F
图12 * h; f( T- c& k5 X
  十三、选择两个按钮,点击:编辑——复制(快捷键为Ctrl+C),如图13所示。 # Y/ t. f4 `- E" Q* P

: }, S+ }  Z; t% X$ O. S
. J% c  M, h/ T( q8 M图13 1 ?4 f9 T2 ]) U9 E" k; i
  十四、在帧面板中选择帧1,并按Ctrl+V粘贴,如图14所示。
9 V2 U& r2 @  E7 V# m4 D) c
9 p. w3 u  J+ d7 Y  u" K/ ~+ G8 j6 K( _- D% r* c8 K
图14 % O/ |6 o2 K& h$ [2 I
# A" J" U5 Y+ I& W  F
  十五、用同样的方法,在帧面板中选择帧2贴上按钮,如图15所示。
6 y0 }5 {5 x4 e6 X+ V
4 L+ q' E+ A; @$ a3 c- f7 y6 }% w  @& l
图15 0 m7 c) B" p% J, d0 B' l
  十六、在工具箱中选择切片工具,如图16所示进行切片。
/ h/ B/ o" U. k5 }& K- A2 x! C! K6 U' e) q# n" ]

. `; H$ y3 e5 `& f7 j图16
" S% e$ A8 r- s# I. f- m  十七、使用选择工具,将漫画切片中心拖拽到位图切片区,并在弹出的交换图像中选择帧3,如图17所示。
% {% @0 K6 a2 N( Z( X* a2 n. Y+ ]2 C3 O# |( h6 B6 |
& c6 Z$ a; S. v1 B
图17 4 w, q5 Y6 _7 v% r+ d3 p1 B$ Q
  十八、使用选择工具,将油画切片中心拖拽到位图切片区,并在弹出的交换图像中选择帧2,如图18所示。
* _/ I6 ^: w# m/ F; B/ {  k4 c* e+ q

' D  {/ K+ b, I  a图18 , Y  y6 L& b) j; N
  十九、最终完成,我们可以按F12在浏览器上看一下效果。确定没有问题,便可导出HTML网页了。如图19所示。
; U0 X9 m# y; i. ]' W3 S& u0 t0 Y7 v3 M* f* D

, f9 b) m5 n2 i/ V; ]2 @) v! R图19

本版积分规则

精彩图文

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