有聲有色的按鈕

1. 有聲有色的按鈕 • 預覽成品：btn_1.fla • 概念提要 • Symbol: buttonUP/OVER/DOWN and HIT • New layer for Sound • Button的instance property可設Action，如Get URL… • 步驟解析 • 繪製button symbol • Ctrl-F8, New "colorful btn" symbolbutton屬性 • 第一個顏色漸變的圓圈 • Oval tool, fill color選linear gradient（左白右粉紅） • 雙擊邊框，將之delete • Ctrl-A, ctrl-G • 選圓，Ctrl-D, Modify\Transform\Scale and Rotate90%, 33 degrees • 重覆上步驟，共做出6個圓 • Inspectors中的Transform似乎不適用因為它只紀錄相對於第一個圓！ • Scale and Rotate固定後，造成圓圈漸小、顏色旋轉的效果 • Ctrl-Alt-S中的數值會自動延續上次設定，按下OK即可 • 將六個圓6群組：Ctrl-A, Ctrl-K, 水平與垂直置中，Ctrl-G • UP/OVER/DOWN and HITF6 • UP為一般顯示狀態，通常OVER變亮，DOWN時移位 • HIT為反映區域（所以不需在意長相如何），按鈕若非實心區域，則要定義 • 加入音效 • New "sound" layer: File\import (Ctrl-R)bass.wav, 自動加入library • DOWN frame: F6drag bass.wav in library (原btn_1 and btn_2用的是plastic.wav) • 雙擊DOWN frameframe property: Sound選bass.wav後，可加key淡出淡入 • Effects會自動變成Custom，Sync: Event不要改！ • 注意事項：PCM wave才能順利import，可利用錄音程式open後『另存新檔』更改設定。 • 測試按鈕 • Ctrl-E回到movie stage • Ctrl-L，drag colorful_btn as instance • Control\Enable Buttons注意HIT的影響 • 指定超連結 • 關閉Enable Buttons的選項 • 雙擊按鈕，instance property: Actions • 加入Get URL: http://…（On MouseEvent: Release會自動加入） • Get URL的Window選_top，可將網頁呈現在一個完整無分割的視窗裡 • 除了http://…，填入mailto:xx@….也可以，或是<a href="….">直接連結到swf

2. 追蹤屬標遠近的按鈕 • 預覽成品：btn_2.fla • 概念提要 • 隱形按鈕亦即此按鈕只有在OVER時有一外框 • 在btn_1.fla的週遭放進n個同心圓隱形按鈕的instance小按鈕在上面 • 步驟解析 • 繪製隱形按鈕 • Open "btn_1.fla" • Ctrl-F8: "outer circle" Button • UP:空白，OVER:F6:圓形，將內部刪除，HIT:F6:將內部填滿 • 記住按F6 • OVER只要外框（所以movie的背景可改），但HIT要恢復整個圓的反應區域 • 拉入隱形按鈕的分身 • Ctrl-E, new "outer circle" layer • Ctrl-L, Drag "outer circle" symbol to stage淡藍色表示UP沒有東西 • Ctrl-D, ctrl-alt-S: scale90% • 重覆上步驟，直到縮小至btn_1的外圍左右 • Ctrl-A, Ctrl-K小在上、大在下的同心圓 • 觀念 • btn_1與outer circle的位置也是同心圓 • 原來btn_1的instance Action: Get URL要注意 • 在library中的button與movie clip symbol只是內容，主要利用stage上的instance action或是frame action來控制其流程！preload_1.fla有更好的說明

3. 亮標的按鈕分身 • 預覽成品：btn_3.fla • 概念提要 • button: UP空白，OVER亮塊，DOWN暗塊 • 利用button symbol的分身，instance Action可有不同設定 • 步驟解析 • 選單文字 • New "type" layer因為字指出現一次，所以不用成為symbol（有沒有存為symbol的差異在於：在stage雙擊後出現instance property或是編輯文字） • 若選項文字為數個objects，有行距可調的優點，可利用ctrl-K來對齊 • 上鎖 • 繪製button symbol • New "button" layer • 利用pencil或rectangle順著item1的大小畫出框 • F8設為symbol:buttonctrl-E編輯此按鈕symbol • OVER/DOWN: F6分別填入不同的alpha顏色，邊框可去除，UP亦去除（注意：選取時，frame的反白與否會造成區域顯示方式的差異！） • 定義反映區域與動作 • Ctrl-E回movie stage • Frame1 at "button" layer: Drag btn as instance，畫面以藍色來表示一個隱形物件（btn的UP沒有東西）此時可測試：開啟Control\Enable Buttons • Enable Buttons取消後，雙響進入instance property，指定Actions的Get URL… • 利用btn的instance，分別設定item2-4的Actions • btn_3_mod.fla • button的動作除了ctrl-enter，可能要swf才能看到？ • Frame 11-14鍵入了文字，所以Frame1需stop • Frame1: Button instanceActions: goto and play frame11-14 • 改良為goto and stopframe11-14只keyin "item1-4"，若存為graphic symbol，instance property中的behavior設為button後，Action就有作用，可再goto frame1??? Sol: frame11-14真正成為button symbol後（要定義HIT）動作才行還不如利用原本的button symbol就好了！選取區的按鈕要在frame11-14的文字之下，否則色塊會影響。btn_3_mod2.fla

4. 包含movie clips的按鈕 • 預覽成品：btn_4.fla • 概念提要 • 製作movie clip的symbolimport gif後會自動展成frames與library • 將不同的movie clip指定為button的OVER與DOWN的frame即可 • Movie clip需要swf才能測試，執行Ctrl-Enter或Control\Test Movie • 步驟解析 • 製作OVER的movie clip • Ctrl-F8New "mv clip:over" symbol: movie clip屬性 • File\import: click_ani.gif直接用tweening動畫也可以 • UP狀態 • 若按鈕的UP只是靜態圖形，可copy OVER movier clip的第一個frame，paste至"grafx:up"的graphic symbol • 製作DOWN的movie clip • Ctrl-F8New movie clip symbol "mv clip:down" • Copy所有的OVER frames，paste至第一個frame • 縮小所有的影格字樣 • 選擇timeline上的設定：Edit Multiple Frames與"Onion All" Marker • Ctrl-A (Edit\Select All) • Scale • 將movie clip整合進按鈕 • Ctrl-F8New button symbol "btn" • Ctrl-L • UP/OVER/DOWN分別drag指定的圖片或影片 • 測試 • Ctrl-E, drag btn至movie stage • Ctrl-Enter

5. 選單的製作pop menu#1 • 預覽成品：menu_1.fla • 概念提要 • 點按主項目會出現次項目，次項目點按後有動作並回復為主選單 • Movie frame1有button，要stop，利用button的instance Actions:Goto…來繼續底部有一個大按鈕，按後會回到frame1 • 利用button的instance property:Track as Menu Item，即使到次選單，主選單的按鈕仍可作用 • 按鈕Instance Actions: On (Press/Release/Roll Over…)可有不同的處理 • 步驟解析 • Frame1 • 準備主選項的按鈕：在movie stage上配好大小顏色後，再F8較方便 • Menu_1.flaeat, drink, play, entertain四個symbols • Menu_1_mod.fla的示範做法 • keyin item1, ctrl-D三次，移動某一個到最下方，ctrl-K對位與平均分佈 • Item1F8, ctrl-E, OVER:F6/改顏色，DOWN:F6/右下移位，HIT:F6/定範圍 • Ctrl-E，改為item2-4，選後按F8，重覆上面步驟完成另外三個按鈕 • 在Library中利用Options\Duplicate，將item1變成item1_1~4四個按鈕（字小一點） • 將Stage中的四個按鈕instance排列整齊 • 指定frame1 Actions:Stop • 按鈕指定Actions • 雙擊instance：Track as Menu Item，Actions: On MouseEvent:PressGo to and Stop: frameXXX按鈕的Actions會破除影格的Actions限制！ • frameXXX將安排相對應的次項目 • 準備次項目 • 也是n個按鈕symbols • F6: 分別置入上一個步驟的frameXXX之位置 • Menu_1_mod.fla的示範做法：利用copy frame1, paste至另一layer的frame5，全部scale 90%並改為goto(1)後，再F6至frame6-8，只剩位置要移動就行了！ • Layer1 F5至frame8後，可方便layer2次選項的對位 • Instance Actions: On (Release)… Get URL | Goto and Stop (1) • 隱形按鈕 • UP/OVER/DOWN都空無一物 • HIT定義按鈕反應的面積要夠大 • Drag至stage後，要放到最下層，要用F5加長至整個電影長度！ • Instance Actions: On (Press)… Goto and Stop(1)

6. 選單的製作pop menu#2 • 預覽成品：menu_2.fla • 概念提要 • 選單與漢堡皆為movie clips，並不理會或配合對方的時間軸只佔一個frame • 按了Food或是之後選單上的選項，這是啟動movie clip的開關 • 步驟解析 • 製作各symbols說明時利用inspectors的顯示，包括Track as menu item… • btn: clear rollover只有OVER時的alpha亮塊（UP/DOWN都沒東西） • btn: food黑底塊與四個不同顏色的字母，UP/OVER/DOWN改顏色 • Grafx: list items3 layers, 上面兩個按鈕都用到了，二者instance的設定如下 • Actions"btn: clear rollover" in "Grafx: list items" • 先做好一個instance的設定，再用Ctrl-D之後，更改部分的Actions放置於同一個layer • Button:Track as menu item • Actions乃利用：MouseEvent (On Release), Tell Target, Play, Get URL (or Goto) …目前的pop_up（為movie clip分身）尚未製作 • Tell Target與movie clips: • Movie clips的instance要命名 Instance Name • Fla/swf的所在路徑為"/"，若clip XXX內含clip YYY，則為"Target:/XXX/YYY" • Actions"btn: food" in "Grafx: list items" • 放在"brown bg" layer • Track as menu itemOn Press: 這是不同之處！ • 其他symbols • mv: pop_up利用"Grafx: list items"由下而上、由上而下的tweening • Frame1 and frame10設stop，frame20設Goto and Stop(1) • "Grafx: list items"內含的"btn: food"與"btn: clear rollover"都有PLAY可以觸發 • mv clip: hamburger兩個layer • 畫面由下而上，frame77: Goto and Play(1) • Sound: bass-guitar-bass-tada (loops=2 or 0…)QQ: sync:Stream??? • clear btn只有定義HIT的區域，其餘都沒東西 • 安排畫面 • "pop_up menu" layer • 將"mv: pop_up"置於stage左下角利用View\work area輔助 • Instance Name: pop_up • "hamburger bg" layer將"mv clip: hamburger" drag 至stage右下角 • "clear btn" layer • Drag "clear btn", 並予以放大 • 設其ActionsOn(Press)-Tell Target-Play