ＦＬＡＳＨ教学［闪客学堂］

ＯＡ帅哥

% G k, H# D# n5 w+ ]& J% ? ^: n/ e8 M% d) d3 d

FLASH介绍

4 j k- N4 a4 ^: Y

　　Flash是用来编辑二维动画的软件，经过几代版本改进后，采用了矢量图形和流式技术，迅速成为网上动画的霸主。Flash能够很好地支持声音，具有交互功能，简单易学，越来越多的教师以此平台制作课件。Flash界面和Director极为相似，可分为工具箱、总谱区、层控制面板和舞台四大支块。Flash制作动画比较简单，你只要定义好各个关键帧，当中的过程由计算机自动生成。它在制作动画方面和秘密武器是多层透明效果和变形技术，再结合按钮符号的交互功能，就能制作出炫目的课件。Flash特别适合表现现实中难以实现的、抽象的概念或现象，像炮弹的轨迹图，原子裂变效果等。只用Flash当然可以开发出一个完整的课件，而且“身材苗条”，适于网上传播。但Flash并不是为课件定制的，在课件开发上存在一定欠缺，最好与其他编辑平台配合使用。

ＯＡ帅哥

基础篇

- T% W& H& ~( W( L( q

---

& S: N/ Y7 ?" s0 ?$ u; @

一、什么是FLASH？

　　FLASH是Macromedia公司出品的，用在互联网上动态的、可互动的shockwave。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。 　　FLASH可以用其生成动画，还可在网页中加入声音。这样你就能生成多媒体的图形和界面，而使文件的体积却很小。 FLASH虽然不可以象一门语言一样进行编程，但用其内置的语句并结合JAVASCRIPE，您也可作出互动性很强的主页来。 　　FLASH另外一个特点就是必须安装插件PLUG-IN，才能被浏览器所接受！当然这也避免了浏览器之间的差异，使之一视同仁！

/ _" y, L0 ?. w& T- F5 U3 j

　　有人曾经说过：下个世纪的网络设计人不会用FLASH，必将被淘汰出局！ 　　我相信这句话没错！

二、如何得到FLASH3/FLASH4？

; B" v5 D# U3 f8 J; S I' \- O

　　Macromedia公司提供试用版本的免费下载，您可通过该公司的主页得到 FLASH3/FLASH4。

{3 K* n4 u, e6 r$ v9 }

三、其他相关工具有哪些？

　　基本的工具有DREAMWEAVE2.0，同样也是Macromedia公司出品的网页编辑器，功能强大，与FLASH结合的非常好！（强烈推荐） ( z; W; Q9 B8 [$ g. O　　另外还有AFTERSHOCK，用这配合其它的网页编辑器工作。（比较麻烦）

　　如果你掌握了矢量图设计工具就更佳！如：Adobe illustator8.0 、CorelDraw8.0等。

ＯＡ帅哥

1. 首先按主菜单「插入」的「建立符号」选项，建立一个新的符号元件。

7 ?- k J" ]7 T* T& c

---

# m% ~' X! O# I6 I! |

2. 给予这个符号一个名称，并选为「图形」性质。

- ]' p" o8 a% @8 t- ] M

---

! y8 r: s/ e- d2 }, P8 n

3. 设定完符号内容后，会出现符号的编辑画面，请按左边「工具」图示中的「文字工具」.

2 ~# M% s- I- b' y

' b. p( d3 J1 `' |5 c- t

---

/ }3 o5 B% b; Z* n3 a0 S) d8 u

4. 选择您要使用的字型，及字体的大小。

" S. f. N( n# P/ F8 M

& \. X2 u" F* y" ~! e

---

6 |- C2 s6 T0 M( s0 @& W: ?

5. 在符号编辑画面中，输入文字。

5 j6 i r, t7 J+ }( [* E6 C

---

6. 按主菜单「检视」的「网格」选项，符号编辑画面会出现网格，这样可以方便精确地排列整齐喔！

---

$ J0 c" b% ]: V 7 a0 I" e" I: ~2 e' g3 M

7. 移动符号到中心点 + 的位置，建立网格比较容易对齐中心点。

---

8. 按 Ctrl + B ，将文字打散，这样可以为文字上漂亮的颜色，相对的输入文字也无法改变，除非重新输入，所以先确定所输入的文字，再做「打散」的动作！您也可以按主菜单「修改」的「打散」选项來完成。

4 H, w, b# F5 e. j* x: j

---

5 J% [" z" `3 d$ _' G, t# }' R

9. 按左边「工具」图示中的「油漆桶」，调配喜欢的渐层颜色，里面有一些渐层颜色供使用。

& Q5 H% ^, V8 Z4 [8 {3 F

---

3 q% R! H& n% P5 u 1 L3 S2 O: B4 X! Q" l1 D$ Y

10. 选好颜色，移动鼠标到打散后的文字处，这时键头已经变成像油漆桶的样子，点一下文字，隐约可以看到文字已经上了颜色啦！

& ]3 r! \0 b @/ i+ m

4 v9 N* L7 [3 E, K- x+ p' o

---

4 g% M* v- s1 q* u# b4 E( I/ k

11. 或许渐层颜色的效果不是很满意，没关系，可以做高速。按左边「工具」图示中的「油漆桶」，下面有两个小方块可以选取，请选右边的「转换填涂」小方块。

+ s8 {% p# V- N5 V6 Z' J, B

: b, H# ~2 o& X$ z1 j2 d" O% r6 V

---

0 B- B7 Y8 G5 W% N$ Q

12. 这时点一下文字，旁边会出现一个小圆圈和一个小方块。小圆圈就是旋转渐层颜色，小方块就是缩放渐层颜色，中心点就是移动渐层颜色，依自己的喜好做高速，可以达到很棒的效果喔！

( w; Z \/ m% J

---

' ?, E6 b+ @( V+ J z |& Z- x

13. 调整后的渐层颜色。

* ]/ {9 f% R1 z

---

4 v9 M: ^- \! z! }: K3 N7 }

14. 完成符号编辑后，右边有一排符号标签，按 钮回到主画面，这时就可以应用刚刚建立好的符号。按主菜单「视窗」的「图库」选项。

---

/ E' R- H) v" P" ?' l2 c! l! u

15. 这时会出现一个图库的小视窗，里面会列出您动画中所建立和使用到的符号。

/ l$ _* i8 x9 }+ `; Q

---

16. 拉住预览窗口中的符号，拉到编辑画面中，虚线方块就是该符号！

' y5 B2 V0 D1 S B `$ z, N+ S9 O

---

0 H4 x$ K( a0 L4 D( a2 l

17. 放开后，符号就跑出来啦！这时您的第一影格会有一个小蓝点，代表播放动画至时，就会出现这个画面。

; C8 g) `% o9 t9 K2 y. T5 ]2 ~1 u

---

) V$ n5 e7 V" V' G5 W9 e 4 x! e6 {8 c9 ^( u4 T9 z2 e$ v, d: k

18. 为了方便符号的排列与编辑，按主菜单「编辑」的「尺规」选项，就会出现尺。

% [+ d9 t" }" ]

---

19. 之前符号已经在第 1 影格处建立画面，因为我们要利用到这个画面，做点小变化，成为后面的画面，于是在第 10 影格处，按鼠标右键选择「插入关键画面」，这样第 1 影格的画面就复制过来了！

5 ]( X0 e* U& ^

4 W8 j9 N3 M4 y$ W

---

: n' T3 L/ W; o- r' r( l& Q3 \' P2 |4 V, ~ ; d: S* L) G0 }4 }

20. 在第 20 影格处，也是重复刚刚的步骤，复制影格画面！

---

21. 接着就是变化啦！将时间轴移到 第 10 影格处，选择符号，按工具列的 缩放工具，将符号放大缩小。

---

) `, C- L. [6 k+ u7 z

22. 放大后的符号将成为第 10 影格的画面，其他的画面將不受影响！

( a9 d. c; X2 A, ^" O1 z" I& Y

---

23. 建立好动画大概的画面后，再来是怎么表演啦！在第 1 影格按鼠标右鍵的「內容」选项。

/ u" Z1 f7 \$ D1 Y* [; O# A4 X

---

" D; V3 [5 M; l& Z, O( H

24. 定义第 1 影格至第 10 影格间的变化，在此我们设定它为「Motion」，意思是第 1 影格至第 10 影格间自动产生產生连续动画 , 够厉害吧！Flash 会依前后影格画面，自动替您产生中间的画面变化！

9 L. T( \# N! ^) W6 s, e

---

* _; Z2 z6 c& @ 5 K) Y1 L) c! A+ k' O

25. 记得选取「自动产生缩放」喔！因为我们做了缩放的动作。

5 R5 H2 b; T7 D( l. _3 s

---

! B7 B. [ f3 f; W

26. 您应该很聪明，现在应该知道接着要做什么了吧！？没错，就是产生第 10 影格至第 20 影格间的连续动画，重复前面的步骤，在第 10 影格按鼠标右键的「內容」选项，设定为「Motion」，一定要选取「自动产生缩放」喔！

---

27. Yeah！大致完工啦！剩下一些后续工作，或许这个动画您以后还要利用，深怕过一段时间，自己都忘记哪个图层是什么功用！所以就要养成好习惯,替符号、图层、场景、标签等等，取个有意义、好记的名称。现在就来更改图层名称吧！鼠标按一下「图层 1」的地方，它会变成 这个样子，就可以为图层输入新的名称。

- u2 s$ N8 N+ B2 {+ K9 W

---

$ q( W! J9 X& Z* r4 u

28. 迫不及待要输出作品啦！方法很简单，按主菜单「档案」的「输出电影」选项。

---

, c- f$ O7 z( Q; |4 G

29. 选择好储存动画文件的路径，并输入文件名，扩展名为swf。

1 C3 t K& f; M! ^& J" W

---

* W% F; X7 Y8 v4 E" ~* J+ T. _ * c8 d( x4 r3 z0 N

30. 设定Flash动画属性，以下是常使用到的项目说明： 产生大小报表：这个功能是输出动画时，附带的动画文件大小说明，可以此来酌情降低文件的大小。 输入保护：如果您认为自己辛苦的作品，不希望被别人修改变成他的作品，这个功能就可以保障您的辛苦。 1 M4 ` T. Y0 f7 y. sJPEG 品质：动画中如果使用到图形文件，您可以统一全部文件的压缩品质，值越大品质越好。 ) Y. ~( g7 c8 k; l: q( k( t& W音效：您可以在此统一设定动画中使用到的全部声音文件品质。

ＯＡ帅哥

1. 首先按主菜单「插入」的「建立符号」选项，建立一个新的符号元件。

( l6 h6 n6 w) j

3 t: |+ G; A& K7 U! K( [

---

& s) X V) C& u6 Q: x1 y: [ 7 R: a! x4 a3 j7 v2 t

2. 给予这个管理人员五个名称，并选为「图形」性质。

; O1 U/ m. R' q0 k1 O9 L& R

---

* R3 D: E% d8 X" {! K( h

3. 输入一个文件来当符号，按主菜单「文件」的「输入」选项。

5 z1 E, _/ s( |

w. u% K: [- s0 q

---

' X1 E7 w3 H4 v, X; d" o

4. 选择好输入文件的路径及文件，按下「打开文件」。

8 a+ K+ W* s2 K ~" H) F7 I

---

5. 简单的步骤，图形就输入到Flash中了！声音文件也一样。

3 h* K0 V1 l. h4 e) F O3 r

---

) e$ m6 P% \# M# u* v " `; j: {9 D6 P4 V8 c9 w5 Z# T" B

6. 因为输入的天使是向左，想把它转换成向右，方法很简单。按主菜单「修改」的「转换」的「水平翻转」选项。

---

, z4 T+ u j9 Y1 W

7. 瞧！是不是转向右了呢？！完成符号编辑后，右边有一排符号标签，按右边符号标签排列的 标签回到主画面。

; E9 J* p- v/ r5 j' {

5 R# r! {2 d6 x( B. s& P9 `3 }3 \8 }

---

6 J7 ~ x2 @# ]" S, [4 R

8. 这时就可以应用刚刚建立好的符号啦！按主选单「窗口」的「图库」选项。

) g+ F5 I0 ~9 ~, k4 \

---

9. 出现一个图库的小窗口，里面会列出您动画中所建立和使用到的符号。 % k. L) p7 [9 O ( P.s : flyg 是刚刚输入的文件 )

' A ?5 Q3 V) H+ ?) B0 z: a

---

0 g6 j# W4 b7 u3 Z' f. q + x- v6 z% Z- R9 e1 j0 T

10. 拉住预览窗口中的符号，拉到编辑画面中，虚线方块就是该符号啦！放开后，符号就跑出来了。

# b) @; ^& N$ L9 p0 I! B

---

9 }8 Y# E! q- _/ S

11. 接着就是开始应用「移动导线」。在图层 1 的位置按一下标签按钮，并选择「加入移动导线」选项。

! ?) C& u+ P6 t6 i; ^ y/ B7 s5 D

---

: ^/ y; Q: Q! z$ l6 v" ]7 B. H

12. 是不是新增一个图层，前面多了一个曲线的符号，代表您图层1使用「移动导线」。

3 t [ T- b9 J$ U8 E

---

[, o$ F' K: ^- U1 F- \ $ J: z7 z: K8 u# L, y! P9 N& Q

13. 目前编辑状态在「移动导线」图层 1 的位置，使用工具列中的「铅笔」的「曲线」，随便画一条曲线，主要是用来当符号的轨迹。

f* k! Y! V: o3 b/ ^

; V9 l% A# L/ Z( P' \; |+ W0 S( [

---

2 z% b' T" |8 J- R3 A: Z( C

14. 画完曲线后，可以做些小修改，使用工具列中的 工具，将曲线拉得更漂亮，记得要先选取曲线。

---

8 c! ~( `: K1 f4 C4 `

15. 鼠标从第 2 影格处，按住左键拉到第 20 影格处，再按「F 5」键插入画面。

---

16. 将鼠标移到第 1 影格的位置，接着拉住符号的中心點 , 移动到轨迹上，您会看到符号中心出现一个小圆圈圈，只要将小圆圈圈移到轨迹上即可放开，记得要点选選工具列中的 工具，才会出現小圆圈。

# ]6 a1 _# p, ^7 C% h

---

' ~9 f) C) E# c4 v

17. 接着在第 20 影格处，按鼠标右键「插入关键画面」，复制第 1 影格画面。

3 l8 k# ~! h- H( c" o6 H8 a7 L5 h

4 R J2 \7 P& v. @& H( m, M! k8 n

---

18. 将鼠标移到第 20 影格的位置，接着拉住符号的中心点，移动到轨迹上，您会看到符号中心出现一个小圆圈圈，只要将小圓圈圈移到轨迹s上即可放开。

" H9 K: J& G' B/ G. X) j

) r+ _, l) Q( {2 G% w# _

---

$ { |: }* v" L

19. 接着在第 1 影格处，按鼠标右键「內容」选项。

/ d+ h/ D' ?/ l; B' |4 O

& M, r; [* T3 B4 e R

---

20. 产生Motion连续动画，记得选中「沿路径方向」选项，因为我们使用了「移动导线」！

5 n' w5 A/ N/ ?' w y6 `: Z- e& A" s

---

" I. f4 a. Y j" I/ z 5 U1 ^( t) R# z& |+ U

21. 完成第 1 影格至第 20 影格的 Motion 设定后，接着把「移动导线」的图层「隐藏」起来。

# n% I; |5 X; A! S5 {

. j: I; Y4 K, q# @) H. H6 E. }

---

0 j; u& l; ]$ h/ w. P3 h

22.这个「移动导线」图层的标签就会变成一个打叉的眼睛，代表隐藏起来，播放动画时不会显示出来。

+ ^: M8 P( ?1 ^" K6 R

7 a. t9 E, K8 H d+ v, a

---

23. 完工啦！可以输出作品啦

ＯＡ帅哥

1. 每次制作动画前，您可以先行定义画面的大小、背景颜色等等，初始值是 550 px X 400 px、白色，修改方法：按主菜单「修改」的「电影」选项，就会出现如下图的设定。

4 M/ V, K" |/ G

---

2. 首先按主菜单「插入」的「建立符号」选项，建立一个新的符号元件。

& ?3 R' m& H% [

---

5 v0 E& N: k! s( Y. n# L5 {

3. 给予这个符号一个名称，并选为「图形」性质。

: x# g3 M# H5 |) _8 P8 C& V& c

! d) g! _3 R+ m/ I! p( d

---

( l- z" W8 i2 z5 G0 {, _

4. 完成符号编辑后，右边有一排符号标签，按右边符号标签列的 回到主画面。

9 ^; m H: m8 Z9 x- y6 I5 g5 l) p! T

Q2 C. Q' ~* g5 D' m( R _

---

, Z0 O \5 \# ~) G! v1 q3 K 2 @2 F0 ]# ]3 C% v0 z2 ^

5. 这时就可以应用刚刚建立好的符号啦！按主菜单「窗口」的「图库」选项。

% V& `; n3 a( M# {, k1 d

' {; {: p, R/ J9 {4 a( }

---

7 k# q H9 u' _7 \, W/ v/ D/ w * ]5 Z. o' u% O& P8 c3 y

6. 出现一个图库的小窗口，里面会列出您动画中所建立和使用到的符号。

6 u" L( R& v- ~% U+ u3 c

8 b, z- u' T0 m3 L9 f( [

---

" I) r. S4 h: F9 K1 F# m

7. 拉住预览窗口中的符号，拉到编辑画面中，虚线方块就是该符号。

9 r" J" C! s. L2 i- K; ^

---

5 _# w4 q" Y M7 v/ E n4 j. [ % D. q& P9 ~0 ]3 B

8. 放开后，符号就跑出来了。这时您的第一影格会有一个小蓝点，代表播放动画至第一影格时，就会出现这个画面。

, g2 z9 O3 `/ b, g# D2 s7 b

4 B/ }& i+ u* ?) M3 s

---

0 ]* Z3 {$ g4 [4 G

9. 接着就是开始应用「移动导线」啦！在图层 1 的位置按一下标签按钮，并选择「加入移动导线」选项。s

' Q: r" O0 @5 G( e. }5 S

8 x# S j( x3 H

---

10. 是不是新增一具图层，前面多了一个曲线的符号，代表图层 1 使用「移动导线」。

- u/ B! H; L8 t$ S

---

, H' b& K4 E* H% e+ }$ x& [* x * s) Y$ F' u/ v7 i

11. 目前编辑状态在「移动导线」图层 1 的位置，怎么看呢？ 就是「铅笔」的标签，就是目前编辑状态在哪个图层。现在可以加上符号移动的轨迹，在画面中使用工具列中的「铅笔」的「椭圆形」，随便画一个圆，不一定要是圆，曲线、直线都可以，主要是用来当符号移动的轨迹。

6 Z) C* H! t# V

---

; M& K k- |0 `( [; [

12. 在第 20 影格及第 40 影格处，分别按鼠标右键「插入关键画面」，复制第 1 影格的画面。

+ F2 R2 b6 ?: H! |" ?- H

---

% {: c0 k% v$ f' F % i1 i2 F0 P6 k- F+ @: v5 h

13. 将鼠标移到 第 1 影格的位置，接着拉住符号的中心点，移动到轨迹上，您会看到符号中心出现一个小圆圈圈，只要将小圆圈圈移到轨迹上即可放开，记得要选取工具列中的 ，才会出現小圆圈圈喔！

. J+ D! ~+ J2 f8 X3 k% [4 M

) _( N) Q+ b \6 R! L9 b! z

---

5 c& v4 a5 W0 m2 E( o% ?3 S4 y

14. 依样画葫芦，将鼠标移到 第 20 影格的位置，接着拉住符号的中心点，移动到轨迹上，您会看到符号中心出現一个小圆圈圈，只要将小圆圈圈移到轨迹上即可放开，做完第 20 影格后，并完成第 40 影格。

; B; w$ L* u. ], p7 B0 J1 B* E

---

" b5 G: E8 A! o. |2 t 2 e- Q! H7 \$ B# H6 X

15. 移动的位置在轨迹上的任何一点都可以，只要是让动画播放起來有连贯的动作，下面 3 张图片分別是第 1 影格、第 20 影格、第 40 影格移动放置的位置。

6 K" _$ p9 V! ?! O" r9 I

( P.s : 第 40 影格与第 1 影格的位置不同喔 ! 第 40 影格比较靠近第 20 影格的位置，至于为什么，请看此节的最后一个步骤即可明白 ! )

% ]1 w9 \0 `1 `7 K- v

C+ F8 {' D+ z5 d' f$ X

---

) Z0 e0 G- _% R- c1 Y- u- U1 ?

16. 接着在第 1 影格处，按鼠标右键「內容」选项。

/ `3 K( J4 X0 y' j0 w

( ~, T K' M! Q* l5 r% ~, y

---

0 y, C; Q$ w, r& c( D) ]7 i$ | [

17. 产生 Motion 连续动画，记得选取「沿路径方向」选项，因为我们使用了「移动导线」！

5 W6 Z" f3 Y- Y J& u/ L' B

---

18. 依循上一步骤，也将第 20 影格完成 Motion 设定。

: \3 g6 I: b5 L( ]1 B

! f [/ ]; {( W8 ?

---

0 i; U) V. Y; E/ \7 k- a; L 8 S3 ^# h/ W+ w$ b w) U& F" s# v

19. 如果您不想显示出符号移动的轨迹路径，可以在「移动导线」的图层中，按一下标签按钮设定为「隐藏」。

0 d/ {9 C# X. |1 Z

) l1 [, R" n. b& Y- e% B* V

---

0 }' R, B" L9 ~ $ _$ i0 ?! T9 T. H* s" H! u3 X

20. 这个「移动导线」图层的标签就會变成一个打叉的眼睛，代表隐藏起來，播放动画时不会显示出来。

: u5 m8 h! m) N1 N3 n; \: D" O

, a B# L a+ v5 x1 F6 I, U

---

5 ]. q6 `1 y* _* D% z! u4 F " M6 Y1 m5 V# V6 |7 P$ `1 W

21. 完工啦！可以输出作品了。 ( P.s : 输出电影方法及步骤可参考 [如何产生 Motion 变化])

---

/ w1 a v {" A: B8 t) d ) t' S5 P' K4 ?

22. 附带一提，以此例來說，为什么 Motion 要分成两个部分呢 ? 是这样的，当您使用到圆形的「移动导线」时， Motion 勾选「沿路径方向」，Flash 会依照第一个画面和最后一个画面产生连续动画，它会走捷径，也就是最短的移动路线，所以要分成两个 Motion！如果您只使用一个 Motion，第一个画面的放置位置完成，再来是最后一个画面放置位置移动一点点，设定 Motion，希望能依照着移动路径跑一圈，Sorry，没有办法，因为它会跑前后画面最短的移动路径，所以无法以一個 Motion 完成，要用两个 Motion 以上才可以完成喔！是不是又学会一招了呢？！

ＯＡ帅哥

1. 首先按主菜单「插入」的「建立符号」选项，建立一个新的符号元件。

---

K6 J+ P/ ~$ `8 L/ m $ }& C) X5 N! _* k' A E% L

2. 给予这个符号一个名称，并选为「按钮」性质。

1 _ _3 L3 s+ U/ f \- P/ _

---

& q* U5 V6 m7 |) \& O

3. 点取右边工具列中的「铅笔」，选择「椭圆形」并设定线条粗细。

: w ~! J* U3 Q. g

8 }# a: ]: L; F# _- U1 @) o6 }" T

---

9 d$ c6 d, E: U% w , q. _+ V# A7 `. m) J5 R$ s# V% Q: I

4. 在编辑画面中，画一个简单的形状。

---

& l4 y" [; G8 R/ g8 W' x: n

5. 接着点取右边工具列中的「油漆桶」，填入漂亮的渐层颜色，可以调自己喜欢的颜色！

---

6. 填入颜色至刚刚画的椭圆形区域里。

---

7. 这样就完成按钮原始的外型，不过没啥特别。所以接下來就来制作互动式的按钮。在「滑过」的影格处，也就是 Over , 按鼠标右键，选择「插入关键画面」选项，复制前一个影格画面 ( 一般 ) ，这样就不用辛苦地再画一次啦！

& f6 y; X$ N9 `2 c1 t% N

- K8 l- e! n: K# W) c! b

---

. c5 x' ~& c1 O$ a) H: B+ B) w

8. 来点特别的，填上不同的颜色，方法可参考前面第5步骤。这个画面就是鼠标「靠近」按钮时会产生的变化。

---

6 e* I2 K) T& `, J5 z7 O. W. `) T* _; Q

9. 同样的，在「按下」的影格处，也就是 Down，按鼠标右键，选择「插入关键画面」选项，复制前一个影格画面 ( 滑過 , 其实 Over 和 Down 都可以同时复制「一般」影格画面，因为我们只是改变里面的颜色，没有改变形状等)

/ `% R3 h$ {: G* B: S

---

- J( X* A: y1 C( z( s) l! N

10. 填上不同的颜色，方法可参考前面第 5 步骤！这个画面就是鼠标「按下」按钮时会产生的变化。

---

) [9 A; ?9 u4 O+ H/ T / f4 A1 ~+ a1 f, _

11. 按钮图层下新增一个图层，在「铅笔」图示的下方小方块，按滑鼠右鍵，选择「插入图层」，此图层是加上文字用的。

: h" e6 z) V7 y! T/ u- B6 [, s3 g

---

12. 可以为图层来命名，双击图层名称处，即可更改。

---

l7 O# U& q0 ] R2 }8 `2 E& Y 0 I( i6 m: |. d

13. 接下來就是加上文字，点右边工具列中的「文字」，设定好字型、字体大小属性等等。

( @: G- ]0 J5 D8 ?: x6 x

---

, D3 X- p" ~7 Q7 q

14. 在适当的位置加上文字，可以用鼠标移动文字调整位置。

' j2 w; w1 E8 x* m3 J0 _. h$ o

---

# c! I) x/ ]/ W

15. 文字输入完成的画面。

---

) G+ a( i( t& z' G( S / k6 E: u7 i7 {; i' E9 w

16. 同样的，我也想在「滑过 Over」、「按下 Down」的影格画面加上文字，可是文字不一样怎么办？方法很简单，只要插入空白画面即可啦！鼠标移至「滑过」影格处，按住鼠标左键拉至「按下」影格处，即可放开，就选择这两个影格了！再按鼠标右键，选择「插入空白关键画面」。

4 w! r( x( X6 u4 g

---

17. 将时间轴移到按钮的「滑过」 影格处，这样所编辑的动作才是「滑过」影格的画面，不然，很容易更改到其他的画面。

% b+ E$ K1 y/ K3 ]( F; l7 i

---

% g2 F( ^: [+ ^- p# A; @5 ~/ o . r6 h6 @; W4 ^9 ]: Y4 `: ]7 c

18. 文字输入完成的画面。

- \8 y. E3 ~& A C# G1 V+ |: Y$ G

7 k0 y) p' B! |$ p6 K0 n

---

19. 同样的，将时间轴移到铵钮的「按下」 影格处，这样所编辑的动作才是「按下」影格的画面。

8 e9 X& s3 ^- r' s5 ?

---

* [7 y" u' a; ]3 E: H5 D7 S3 p6 f

20. 文字输入完成的画面。

$ s+ l5 h, m! N$ L7 d: X

---

21. 完成符号编辑后，右边有一排符号标签，按右边符号标签列的 标签回到主画面。

' p, p5 v+ S0 E6 t2 |5 z

---

, Q, d; S/ W! `; I

22. 这时就可以应用刚刚建立好的符号啦！按主菜单「视窗」的「图库」选项。

9 g3 U- h2 {: p% ?

---

23. 出现一个图库的小窗口，里面会列出您动画中所建立和使用到的符号，鼠标按住左键拖曳符号至主画面中。

---

$ p9 o t0 M1 i/ o+ {) E% h4 f

24. 虚线方块就是该符号啦！

# f4 |+ ~) V- J! i2 D$ x* s

---

25. 放开后，符号就跑出来啦！

8 a; C# g o+ j

---

/ g/ |+ M b7 s9 C8 r3 i / S3 i2 c# U: D

26. 想不想先预览成果呢？沒问题，按主菜单中的「控制」的「启动按钮功能」，就可以试试按钮的动作了！

/ g1 B% A. T- w" ?3 I y' x' T

---

27. 互动式铵钮。

! G5 ^) H) c3 ]% C3 y6 T. E$ Z+ O3 f$ c9 {# ^6 i/ T+ g% |! m/ t' Z8 o1 b" S Y+ J* V4 A0 o! I& D: O7 ~- Z) G& x# A; a

按钮「一般」画面	按钮「滑过」画面	按钮「按下」画面

---

5 s: c+ p4 _4 Y4 M7 K0 p 1 ?5 L! P0 [; E, t

28. 完工啦！可以输出作品啦！

& n( m8 ^6 l# G" t4 k7 V

---

- O3 K7 j2 u+ T' ^ + \' Z# X7 k. [1 H; ? V# r2 i

29. 此篇为「基础篇」，让您知道「按钮」的互动观念，接下来的「按钮」教学，将越来越「进阶」。不会很难，只要脑筋转地过来，会感觉「按钮」很有趣且好用！只要是互动式动画，一般都会使用到「按钮」，所以要用心的学喔.....

ＯＡ帅哥

1. 延续「 互动式按钮(1)」，此课将为按钮加上「超链接」以及「目的窗口」的动作！

' I \0 I1 V8 t) F! Z0 N

---

; t+ N% Z& |% L7 U; S' T, }

2. 应用「互动式按钮(1)」做好的按钮，在场景按钮处，按鼠标右键，选择「內容」选项。

# D" E" H% {+ X

---

0 ~& K5 H m( d8 ?

3. 会弹出符号的属性设定窗口，请点「动作」属性设定。

5 m4 {+ q Z% {& t7 z, Q

6 F( K" e, v% G8 ~- T

---

4. 接着在右边处，可以看到一个类似「+」的按钮，按下去会弹出菜单，请选择「鼠标事件中」。

$ Y' W0 f5 W/ E" B [

---

5. 在动作的项目中，增加了「鼠标 ()」以及「鼠标結束」两项，请点击右边鼠标事件的参数，可以依自己的喜好来设定，「按下」的意思是「当按钮按下时，马上执行动作」，「放开 」的意思是「当按钮按下时，不执行动作，直到按钮被放开后，才去执行动作」，至于下面几个事件参数，将在往后跟大家介绍。

---

7 F+ U6 w7 D& y' ? 7 ?; l) a ] }) G

6. 设定完鼠标事件后，接下来就是「超链接」以及「目的窗口」的设定了！在动作「鼠标 (放开)」的下面增加一个「超链接」的动作，方法很简单，按「+」按钮，请选择「取得 URL」。

; P* c; a) B" Q& p# j$ C! j- g

---

, c( y# d% s' F. F9 Q 0 v* [* j, q% S& f7. 在动作的项目中，是不是在「鼠标 (放开)」的下面新增加一个「取得 URL」的动作呢？！至于参数设定，URL 当然就是输入「网址」啦！可以应用 HTML 语法 , 如「http://」、「ftp://」、「*.htm」等等的超链接语法，很多人都问要如何加超链接 E-Mail，只要输入「mailt电子邮件地址」超链接语法即可！语法与 HTML 一样！！ 4 Z2 s: J# d) Z# W$ w& H

---

. z) {& K- `( V, L* V* B4 y. o8. 「目的窗口」也是众多网友的疑惑，在此說明一下。「目的窗口」其实相当于 HTML 语法中的「Target」语法，可以应用 HTML 语法，如「_blank」或「new」两者一样，都是「另外开启新窗口」、「_top」则是「在现有的窗口中开启」等等的目的窗口语法。也有相当多的网友问，使用了分割窗口 ( Frame ) 后，要如何指定网页显示的窗口呢？！方法很简单，不过有个前提，就是您的分割窗口(Frame) 要指定 Name，这样才能指定目的窗口。 ( A0 r5 p6 m. j3 s: e7 t0 n3 b

举例來说：分割窗口主要文件的 Frame 语法中要有 Name 参数！

$ Z/ I9 U, Z8 p+ E* V0 m

<frame src="left.htm" name="left"> <frame src="right.htm" name="right">

假设您的按钮 .swf 放在右边窗口中，想指定网页显示在右边窗口，那「目的窗口」就要填入右边 Frame 窗口的 Name，也就是「right」.

4 N* L7 i2 d$ ~( R1 L4 @5 `

---

X3 `0 ~* g; t+ g2 k, N A

9. 按下「确定」按钮完成设定。

# B- y5 u" p8 |# ]

---

" a6 L" o9 v# x+ a) y

10. 完工啦！可以输出作品了！

---

- Z% o5 j7 {+ K! W$ Y8 @7 N+ T5 H& c

11. 附带一提，在 Flash 3 软件或单独的 .swf 文件，无法测试「超链接」等等的动作！要输出 .swf 文件，在用 Aftershock 产生 .htm 文件，最后用浏览器开启 .htm 文件，才能测试「超链接」动作是否正确！

ＯＡ帅哥

1. 接着「互动式按钮 (2)」，本节交赤按钮加上「动画」效果！

---

5 X, s( C8 A& z

2. 应用「互动式按钮 (2)」做好的按钮，并建立一个「电影片段」( Movie Clips ) 的符号，按主菜单「插入」的「建立符号」选项。

* M# X0 }0 Z& V& B* e9 R0 K9 G$ Z* Q# h

5 o, U+ T# I+ N9 c

---

4 N. s1 S# o: Y" [' b# d0 a

3. 符号的内容设定，请选「电影片段」选项，并按下「确定」。

% b7 {3 B: P, v! S

---

4. 接着应用「如何产生 Motion 变化」，来当作我们的「电影片段」，您也可以自己做不一样的电影片段...以下是文字 Motion 缩放变化。

, H/ U0 w: L& y- E. v. c8 W: l

---

' s8 X% e9 p& _- w3 d$ h

5. 时间轴影格间的变化。

9 L0 v, r; x( r2 l9 [; D9 `

---

6. 在按钮的「图层 1」下面「插入图层」，准备用来放置「电影片段」。

$ p. } d. m7 ? C

---

; z$ t" K$ a0 ^+ q0 i, X0 p

7. 图层的名称随便取一个，在这里我们取「动画」好了，方便大家学习！因为我们是想在按钮「Over」滑过时，产生动画的效果，所以时间轴移至「滑过」影格位置，您也可以将它改成按钮「Down」按下时，产生动画的效果，那时间轴就移至「按下」影格位置。

/ y) b* |8 g0 Z6 Y9 D" h( i

: j6 [& o9 S+ M3 e* W% g% d& [" @

---

) s( I9 I' j$ r, p# w" m

8. 接下来就是把刚刚制作好的「电影片段」应用上來啦！按主菜单「窗口」的「图库」选项。

( T2 V- N( X# } N; T

) J: O$ C* ^0 J6 ?" x. \

---

( Q. ]" u$ M2 R

9. 选择好我们的符号 2「电影片段」，并用鼠标拖曳至编辑画面中。

- n% V& W7 l2 e% l. G: a

/ p, G2 h; m; d O9 S) C6 k

---

10. 按钮动画图层的「滑过」影格，是不是从原來的「空白影格」变成「蓝色影格」了呢？！

I( f2 D. j7 T# O3 e' O

---

11. 按钮「滑过」的画面，在这里无法真正看到按钮「滑过」所产生的动画效果，需透过主菜单「控制」的「测试电影」选项，浏览结果。

1 t5 Y" p- G9 t% L7 K) r) C

+ }% f3 X- A/ k+ d' [$ J) |0 [! q& P

---

5 N* c. J4 o" o& q$ k0 u ]

12. 附带一提，若您按钮的「按下」影格没有加上「空白影格」的话，那按钮的动作就会怪怪的，变成鼠标一靠近「电影片段」文字时，就会产生动画效果！会误当作是按钮的一部分，所以在按钮的「按下」影格加上「空白影格」，使按钮的「滑过」影格之「电影片段」没有延续下去，这样按钮「滑过」时才会产生动画！

---

7 Q# }4 G2 a7 Y v9 w7 `

13. 完工啦！可以输出作品啦！

╃無名草╃

这个帖真的很好

加分！

熙佑

不错！