?? 07.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD W3 HTML//EN">
<html>
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<title>教學單元 07 : 互動式按鈕 ( 基礎篇 )</title>
<meta content="Rock Jack" name="Author">
<meta content="【傑克資訊站 - FLASH】版權所有" name="Copyright">
<meta content="Microsoft FrontPage 4.0" name="GENERATOR">
<style>
<!--
A:link {text-decoration: none; color: "blue"}
A:visited {text-decoration: none; color: "#000000"}
A:active {text-decoration: none；color:"black"}
A:hover {text-decoration: underline; color: ff0000}
-->
</style>
<style type="text/css">
<!--
p{font-size:9pt;line-height;13pt;}
td { font-size: 9pt ; line-height:13pt;
}
A{text-transform: none;
text-decoration: none;font-size: 9pt ; line-height:13pt;}
-->copyright fangame
</style></head>
<body bgColor="#ffffff" style="FONT-SIZE: 9pt">
<p align="center">教學單元 07 : 互動式按鈕 (
基礎篇 )</p>
<hr SIZE="0">
<p align="center">
<object align="baseline" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="100"
id="07" width="150" border="0"
xcodbase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=3,0,0,0">
<param name="Movie" value="07.swf">
<param name="Src" value="07.swf">
<param name="WMode" value="Window">
<param name="Play" value="-1">
<param name="Loop" value="-1">
<param name="Quality" value="High">
<param name="Menu" value="0">
<param name="Scale" value="ShowAll">
<param name="DeviceFont" value="0">
<param name="EmbedMovie" value="0">
<param name="BGColor" value="FFFFFF">
</object>
<br>
完成作品 ( 1.44 KB )</p>
<hr SIZE="0">
<p>1. 首先按主選單「插入」之「建立符號」選單 , 建立一個新的符號元件.</p>
<p><img height="112" src="01.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/01.jpg" width="235"
tppabs="http://tacocity.com.tw/flash/flash/07/01.jpg"></p>
<hr SIZE="0">
<p>2. 給予這個符號一個名稱 , 並點選為「按鈕」性質.</p>
<p><img height="166" src="02.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/02.jpg" width="345"
tppabs="http://tacocity.com.tw/flash/flash/07/02.jpg"></p>
<hr SIZE="0">
<p>3. 點選右邊工具列中的「鉛筆」, 選擇「橢圓形」並設定線條粗細.</p>
<p><img height="231" src="03.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/03.jpg" width="56"
tppabs="http://tacocity.com.tw/flash/flash/07/03.jpg"></p>
<hr SIZE="0">
<p>4. 在編輯畫面中 , 畫一個簡單的形狀.</p>
<p><img height="93" src="04.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/04.jpg" width="147"
tppabs="http://tacocity.com.tw/flash/flash/07/04.jpg"></p>
<hr SIZE="0">
<p>5. 接著點選右邊工具列中的「油漆桶」,
填入漂亮的漸層顏色 , 可以調自己喜歡的顏色喔 !</p>
<p><img height="143" src="05.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/05.jpg" width="57"
tppabs="http://tacocity.com.tw/flash/flash/07/05.jpg"></p>
<hr SIZE="0">
<p>6. 填入顏色至剛剛畫的橢圓形區域裡.</p>
<p><img height="112" src="06.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/06.jpg" width="166"
tppabs="http://tacocity.com.tw/flash/flash/07/06.jpg"></p>
<hr SIZE="0">
<p>7. 這樣就完成按鈕原始的外型 , 不過沒啥特別 ,
所以接下來就來製作互動式的按鈕 , 在「滑過」的影格處
, 也就是 Over , 按滑鼠右鍵 , 選擇「插入關鍵畫面」選項
, 複製前一個影格畫面 ( 一般 ) ,
這樣就不用辛苦的再畫一次啦 !</p>
<p><img height="169" src="07.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/07.jpg" width="254"
tppabs="http://tacocity.com.tw/flash/flash/07/07.jpg"></p>
<hr SIZE="0">
<p>8. 來點特別的 , 填上不同的顏色 , 方法可參考前面第 5 步驟 !
這個畫面就是滑鼠「靠近」按鈕時會產生的變化.</p>
<p><img height="111" src="08.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/08.jpg" width="165"
tppabs="http://tacocity.com.tw/flash/flash/07/08.jpg"></p>
<hr SIZE="0">
<p>9. 同樣的 , 在「按下」的影格處 , 也就是
Down , 按滑鼠右鍵 , 選擇「插入關鍵畫面」選項
, 複製前一個影格畫面 ( 滑過 , 其實 Over 和 Down 都可以同時複製「一般」影格畫面 , 因為我們只是改變裡面的顏色 ,
沒有改變形狀等 )</p>
<p><img height="172" src="09.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/09.jpg" width="286"
tppabs="http://tacocity.com.tw/flash/flash/07/09.jpg"></p>
<hr SIZE="0">
<p>10. 填上不同的顏色 , 方法可參考前面第 5 步驟 !
這個畫面就是滑鼠「按下」按鈕時會產生的變化.</p>
<p><img height="111" src="10.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/10.jpg" width="164"
tppabs="http://tacocity.com.tw/flash/flash/07/10.jpg"></p>
<hr SIZE="0">
<p>11. 按鈕圖層下新增一個圖層 , 在「鉛筆」圖示的下方小方塊 , 按滑鼠右鍵 , 選擇「插入圖層」,
此圖層是加上文字用的.</p>
<p><img height="244" src="11.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/11.jpg" width="199"
tppabs="http://tacocity.com.tw/flash/flash/07/11.jpg"></p>
<hr SIZE="0">
<p>12. 可以為圖層來命名 , 快速在圖層的名稱處 , 滑鼠按兩下
, 即可更改.</p>
<p><img height="38" src="12.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/12.jpg" width="156"
tppabs="http://tacocity.com.tw/flash/flash/07/12.jpg"></p>
<hr SIZE="0">
<p>13. 接下來就是加上文字 , 點選右邊工具列中的「文字」,
設定好字型、字體大小屬性等等.</p>
<p><img height="225" src="13.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/13.jpg" width="56"
tppabs="http://tacocity.com.tw/flash/flash/07/13.jpg"></p>
<hr SIZE="0">
<p>14. 在適當的位置加上文字 , 可以用滑鼠移動文字調整位置.</p>
<p><img height="96" src="14.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/14.jpg" width="166"
tppabs="http://tacocity.com.tw/flash/flash/07/14.jpg"></p>
<hr SIZE="0">
<p>15. 文字輸入完成的畫面.</p>
<p><img height="93" src="15.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/15.jpg" width="164"
tppabs="http://tacocity.com.tw/flash/flash/07/15.jpg"></p>
<hr SIZE="0">
<p>16. 同樣的 , 我也想在「滑過 Over」、「按下 Down」的影格畫面加上文字 , 可是文字不一樣怎麼辦 ? 方法很簡單 ,
只要插入空白畫面即可啦 ! 滑鼠移至「滑過」影格處
, 按住滑鼠左鍵拉至「按下」影格處
, 即可放開 , 就選擇這兩個影格了 ! 再按滑鼠右鍵 , 選擇「插入空白關鍵畫面」.</p>
<p><img height="148" src="16.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/16.jpg" width="305"
tppabs="http://tacocity.com.tw/flash/flash/07/16.jpg"></p>
<hr SIZE="0">
<p>17. 將時間軸移到按鈕的「滑過」<img
height="19" src="17.jpg" width="226" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/17.jpg">
影格處 , 這樣所編輯的動作才是「滑過」影格的畫面
, 不然 , 很容易更改到其他的畫面喔 !</p>
<hr SIZE="0">
<p>18. 文字輸入完成的畫面.</p>
<p><img height="94" src="18.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/18.jpg" width="163"
tppabs="http://tacocity.com.tw/flash/flash/07/18.jpg"></p>
<hr SIZE="0">
<p>19. 同樣的 , 將時間軸移到按鈕的「按下」<img
height="20" src="19.jpg" width="257" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/19.jpg">
影格處 , 這樣所編輯的動作才是「按下」影格的畫面.</p>
<hr SIZE="0">
<p>20. 文字輸入完成的畫面.</p>
<p><img height="89" src="20.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/20.jpg" width="163"
tppabs="http://tacocity.com.tw/flash/flash/07/20.jpg"></p>
<hr SIZE="0">
<p>21. 完成符號編輯後 , 右邊有一排符號標籤 , 按右邊符號標籤列的 <img
height="20" src="21.gif" width="20" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/21.gif">
標籤回到主畫面.</p>
<hr SIZE="0">
<p>22. 這時就可以應用剛剛建立好的符號囉 ! 按主選單「視窗」之「圖庫」選項.</p>
<p><img height="251" src="22.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/22.jpg" width="221"
tppabs="http://tacocity.com.tw/flash/flash/07/22.jpg"></p>
<hr SIZE="0">
<p>23. 出現一個圖庫的小視窗 ,
裡面會列出您動畫中所建立和使用到的符號 , 滑鼠按住左鍵拖曳符號至主畫面中.</p>
<p><img height="252" src="23.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/23.jpg" width="152"
tppabs="http://tacocity.com.tw/flash/flash/07/23.jpg"></p>
<hr SIZE="0">
<p>24. 虛線方塊就是該符號囉 !</p>
<p><img height="80" src="24.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/24.jpg" width="125"
tppabs="http://tacocity.com.tw/flash/flash/07/24.jpg"></p>
<hr SIZE="0">
<p>25. 放開後 , 符號就跑出來啦 !</p>
<p><img height="81" src="25.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/25.jpg" width="129"
tppabs="http://tacocity.com.tw/flash/flash/07/25.jpg"></p>
<hr SIZE="0">
<p>26. 想不想先預覽成果呢 ? 沒問題 , 按主選單中的「控制」之「啟動按鈕功能」,
就可以試試按鈕的動作了 !</p>
<p><img height="295" src="26.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/26.jpg" width="261"
tppabs="http://tacocity.com.tw/flash/flash/07/26.jpg"></p>
<hr SIZE="0">
<p>27. 互動式按鈕.</p>
<table border="0" cellPadding="5" cellSpacing="5" style="FONT-SIZE: 9pt">
<TBODY>
<tr>
<td align="middle" bgColor="#d5ffff">按鈕「一般」畫面</td>
<td align="middle" bgColor="#d5ffff">按鈕「滑過」畫面</td>
<td align="middle" bgColor="#d5ffff">按鈕「按下」畫面</td>
</tr>
<tr>
<td align="middle"><img height="91" src="29.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/29.jpg" width="134"
tppabs="http://tacocity.com.tw/flash/flash/07/29.jpg"></td>
<td align="middle"><img height="90" src="27.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/27.jpg" width="134"
tppabs="http://tacocity.com.tw/flash/flash/07/27.jpg"></td>
<td align="middle"><img height="88" src="28.jpg" tppabs="http://space.jjinfo.com/netschool/soft/tuxian/flash3b/07/28.jpg" width="130"
tppabs="http://tacocity.com.tw/flash/flash/07/28.jpg"></td>
</tr>
</TBODY>
</table>
<hr SIZE="0">
<p>28. 完工囉 ! 可以輸出作品啦 ! ( P.s : 輸出電影方法及步驟可參考「教學單元
01」)</p>
<hr SIZE="0">
<p>29. 此篇為「基礎篇」, 讓您知道「按鈕」的互動觀念 , 接下來的「按鈕」教學
, 將愈來愈「進階」囉 ! 不會很難 ,
只要腦筋轉的過來 , 會感覺「按鈕」很有趣且好用
! 只要是互動式動畫 , 一般都會使用到「按鈕」,
所以要用心的學喔.....</p>
<hr SIZE="0">
<p align="center">Copyright @ 1999 <a href="mailto:jk@a-vip.com">Rock Jack</a> All rights
reserved.</p>
</body>
</html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -