Chapter8动态按钮的制作.doc

Chapter 8 動態按鈕的製作 「按鈕」(Button)功能之延伸應用 千萬別以為Flash所定義的「按鈕」只能做為「超連結」(Hyperlink)的按鍵，而認定它只是應用在硬梆梆的操作介面上。這實在浪費了Flash按鈕背後所提供的強大功能，以及延伸創意的可能性 。本章所提到的範例，就是一種「按鈕」的延伸應用。 淺談按鈕 懂得編輯網頁的讀者，對於「按鈕」(Button) 可能並不陌生。它基本上是「超連結」(HyperLink)功能的視覺化設計，也是延續人類日常生活中，開關切換之習慣的延伸。在Frontpage 或Dreamweaver當中，已經提供所謂動態按鈕(Rollover Button)的功能。所謂Rollover Button就是當游標移向一個網頁中的按鈕時，該按鈕會受到感應而產生變化，比方說像變色、變形或是出現「提示畫面」(Bubble Menu)等等效果。這種動態式的設計，除了增加趣味外，最重要的是，它能夠提供使用者在操作上的協助。 在Flash當中，Button除了擔任Frame與Frame、Scene與Scene、File與File間連結的工作外，還有一項更有趣的貢獻，那就是互動 性設計。它讓使用者在操作一個動畫網頁時，能夠像是尋寶一般，在任意探觸圖像時，隨時都會發現意想不到的驚喜。 按鈕結構 當我們新增一個Button角色時，待出現Button的編輯視窗後，會看到Timeline上出現四格Frame。 它們分別是︰Up、Over、Down以及Hit。 Up是Button圖像的原貌，也就是被碰觸前的模樣。 Over是當游標移到Button上方時，圖像所作的改變。 Down是「點選」(Click)時，圖像所產生的反應。 Hit是該Button的感應範圍。 在每個Frame中加入圖像時，和一般的Frame做法相同，都必須插入Keyframe。 以下讓我們先看一組最基本的按鈕結構。 這組的按鈕造型，讀者一看便懂，它是一般影音設備的操作按鈕，每一個按鈕都被賦予一個特定功能。 我們以PLAY Button為例，可以看出Up、Down、Over、Hit四個階段的變化。 UP Over Down Hit ? 範例：貓兒養魚 貓兒養魚是描述一隻貪嘴的黑貓，一天趁著主人不在的時候，偷偷溜到魚缸旁，假藉觀賞之名，行偷吃之實。可是黑貓面對著充滿各類魚兒與螃蟹的魚缸，一時之間竟不知如何下手，於是使用者就得幫黑貓決定要先挑哪一個對象開刀。當使用者將游標移至任何一隻魚蟹時，這些可憐的小傢伙馬上會露出驚恐的神色，一直發抖，如果再點一下滑鼠，貓爪就立即伸入魚缸，將它從水中抓走。 ? 草圖階段 在構思這個Idea的同時，筆者進行鉛筆的Layout，將黑貓偷吃魚的故事，依照電影分鏡手法，把每個場景及動 作詳細作成記錄，評估這個主題將來能夠發展成一個故事網站，而貓兒捉魚的畫面則成為網站的主選單。 角色繪製階段 這段動畫影片包含了幾個關鍵角色，黑貓、三條小魚、螃蟹、貓爪以及一個球形的玻璃缸。它們都是事先在Illustrator描繪完成後，再Import到Flash中修正而成的。 這個範例中的魚兒與螃蟹都是製作成Button角色，當使用者接觸Button時會產生三個不同階段的變化。 這個動畫可以分成三的階段， 第一階段是魚兒自由游動 的動畫；第二階段是當游標接觸魚兒身體時，魚兒瞬間臉色發青全身發抖的動畫；第三階段是當游標點選時，貓爪伸入魚缸將魚抓走的動 畫，而這三個分解動作則必須分別製作成Movie Clip。 Step1: 首先是螃蟹第一階段的動畫。螃蟹是一種橫行動物，因此根據其行走的特徵，製作螃蟹來回移動 的Movie Clip（命名為crab-1）。 ? Step2: 接著是第二階段的Movie Clip（命名為crab-2），也就是螃蟹被使用者的游標鎖定時的表情。這個時候的螃蟹臉色發青、冷汗直流、瞳孔放大，一副驚嚇過度的表情。 Step3: 再來是第三階段的Movie Clip，也就是螃蟹被突然伸出的貓爪捕走的動作。這個動 畫稍微複雜，是個連續動作，得利用Motion功能，製造出貓爪攫取螃蟹的連續動 畫（命名為crab-3）。 ? Step4: 新增一個Button角色，命名為crab button。將先前所製作的三個螃蟹的Movie Clip分別依順序放到Up、Over、Down三個Frame中；至於Hit的位置，則畫一個螃蟹大小的實心圓形，作為感應區。 ? Step5: 將crab button從Library拖曳至Scene上。 接著除了crab layer外，其餘Layer的Frame2都插入Keyframe，也就是要讓螃蟹在Frame2消失。 ? Step6: 回到Frame1，點選