XII

Design Example作品展示

Chapter 5　精品手錶展示—日期與時間物件利用時間物件取得系統時間，在網頁設計上是十分常見的效果；像前一陣子風行一

時的「正妹報時」（如 http://www.arthur.com.tw/home/），這些效果我們都可以簡單地透過「時間物件」完成主體功能，之後再利用進階一點的技巧對外觀加以修飾即可。

由於時間物件沒有太多的語法變化，所以利用這個範例作為第一個完整的動畫程式教學

範例，帶大家快速體驗、領悟並進入 ActionScript 3.0實例設計的世界。

Chapter 6　質感手機介面—操控影片片段本章重點在利用 ActionScript 3.0 類別引用來針對影片片段的控制、呼叫及拖曳，

當滑鼠移入按鈕之上時，該按鈕就會呈現左右擺動的動態效果，按住按鈕可以對該按鈕

執行拖曳效果，如果拖曳至垃圾桶，則按鈕消失；如果拖曳時再放開滑鼠，則按鈕歸回

原本的定位。

ActionScript 3.0所形成的 Flash動畫世界裡，透過引用副檔名為 as的套件類別腳本可輕鬆操作 fla動畫檔中已事先準備好的元件，既可簡化程式的撰寫同時也可控制多個動作相同的動畫。

 

流程一 •建立 Date 物件取得目前系統時間

流程二 •利用 Rotation 屬性旋轉指針角度

流程三 •建立動態文字顯示當下時間

流程四 •使用 ENTER_FRAME 函式不間斷取得時間

流程一 • 設定元件庫中的按鈕動畫

流程二 • 建立配置介面按鈕的PhoneUI.as腳本，連接fla檔以完成介面初始化

流程三 • 建立控制介面中按鈕動畫的腳本，DragIcon.as

流程四 • 將元件按鈕與DragIcon.as連結，完成按鈕拖曳動畫

Pre.indd 12 2012/1/16 下午 05:00:35

XIII

作品展示　D

es

ign

Ex

am

ple

Chapter 7　手繪塗鴉板—滑鼠事件及繪圖本章重點在於游標變化以及使用 ActionScript 3.0所提供的基本繪圖類別，如單擊

鉛筆圖示按鈕或橡皮擦按鈕之後，游標即變成鉛筆或橡皮擦。如果變成鉛筆，就可以在

畫板範圍內透過滑鼠移動而在畫面上產生繪製線條與形狀的效果，反之變成橡皮擦，則

是擦除上述繪圖的畫面。

Chapter 8　接蘋果遊戲—鍵盤事件在電腦的操作過程中，鍵盤與滑鼠同屬於輸入資料的介面，兩者缺一不可，相互配

合才能使電腦的資料輸入操作順利完成。在 ActionScript 3.0程式中，除了可透過滑鼠捕捉動作事件來產生相對應的回應互動控制之外，還同時提供了對鍵盤操作事件的處理。

本章將透過範例「接蘋果遊戲」來了解 ActionScript 3.0中對鍵盤事件的判斷與控制。

流程一 • 建立鉛筆與橡皮擦切換的判斷

流程二 • 利用 ENTER_FRAME事件來準備繪圖事件

流程三 • 繪圖區塊的設定

流程四 • 圖形繪製的設定

流程一 • 場景元件的基礎設置

流程二 • 利用Timer計時來設計隨機掉落的蘋果元件

流程三 • 鍵盤事件捕捉

流程四 • 處理鍵盤事件的對應函數

Pre.indd 13 2012/1/16 下午 05:00:37

XIV

作品展示　D

es

ign

Ex

am

ple

Chapter 9　MP3播放器—音效的控制本章重點在於外部載入音效的控制（三首音樂），功能有播放、暫停、停止、前首

後首，以及音量的控制與靜音；另外播放音樂時，在中間介面會顯示音樂的相關資訊文

字，並且在音樂播放完畢之後會自動播放下一首。

Chapter 10　多媒體播放機—載入外部多媒體本章重點在於載入外部圖片與外部影片，我們將沿用前面章節的手機介面，利用

「相簿」與「影片」按鈕來直接設計本章程式的功能。圖片與影片的播放比例將以手機

介面的寬度為主，而在播放時會加上播放的場景，下方則是播放工具列，工具列會依據

播放的屬性來配置相對應的操作按鈕，同時圖片與影片都有自動循環播放的功能。

流程一 • 建立 Sound物件來播放外部音效

流程二 • 使用SoundChannel的配合來停止與播放音效資源

流程三 • 利用SoundTransform的配合來控制音量

流程四 • 用計時器類別Timer來實現播放時間的行進

流程一 • 建立Loader 、URLRequest類別物件取得外部資源

流程二 • 外部圖片資源的載入與操作

流程三 • 外部影片資源的載入與操作

流程四 • 資源的循環使用

Pre.indd 14 2012/1/16 下午 05:00:40

XV

作品展示　D

es

ign

Ex

am

ple

Chapter 11　找碴遊戲—載入外部動畫與音效本章重點在於載入外部 swf，搭配時間倒數、生命值、分數計算、每回合的容錯機

制功能來製作出在網路常見的找不同點遊戲。

首先載入事先設計好的遊戲題目 swf 檔，再利用主程式來調用是本章範例的主軸，透過範例可以學習到如何設定載入資料的進度、外部 swf資源互動以及場景中遊戲時間的進行、設定遊戲次數、遊戲音效播放、元件庫中音效的運用、遊戲關卡容錯判斷、計

算遊戲分數以及遊戲結果的畫面呈現。

Chapter 12　射擊小遊戲—亂數與三角函數本章重點在於自訂類別函數的使用，將三角函數運用動畫元件的轉動與行進、動

畫元件的載入與移除、以及隨機出現的動畫元件。場景中的角色不論是槍手、敵人、鹿

祡、子彈的產生以及動作完全建構在自訂的類別中。透過本章的解說，可以讓有心學習

ActionScript 3.0的玩家，能在 Flash的程式語言中更進一步地掌握動畫的設定，也讓初次接觸 ActionScript的設計師，在 Flash中創造無限的可能性。

流程一 • 使用Loader與URLRequest類別物件載入資源的運用

流程二 •載入進度、遊戲影格切換與塲景元件的初始化設計

流程三 • 遊戲邏輯與程式端的體現

流程四 • 遊戲與音效的結合

Pre.indd 15 2012/1/16 下午 05:00:42

XVI

作品展示　D

es

ign

Ex

am

ple Chapter 13　單字測驗—文字的建立

本章主要介紹文字欄位類別 flash.display.TextField以及文字格式 flash.diplay.TextFormat類別的應用。我們將全程使用 ActionScript 3.0的程式來設計並安排文字的內容與表現，借助文字框的輸入功能與互動來講解文字的比對與判斷，讓單純的文字遊

戲更加精彩豐富。

流程一 • 建立 自訂類別與引用

流程二 • 場景中動畫功能的設計規畫

流程三 • 元件庫的自製動畫元件配合運用

流程四 • 體現規畫的程式實作

流程一 • 場景元件的初期設置

流程二 • 利用TextField類別來建立文字欄位

流程三 • 利用TextFormat類別來操作顯式文字的變化

流程四 • 輸入文字答案的正確與錯誤的判斷與回應

Pre.indd 16 2012/1/16 下午 05:00:45

Chapter

利用時間物件取得系統時間，在網頁設計上是十分常見的效果；像前一陣子風

行一時的「正妹報時」（如 http://www.arthur.com.tw/home/），這些效果我們都

可以簡單地透過「時間物件」完成主體功能，之後再利用進階一點的技巧對外觀加

以修飾即可。由於時間物件沒有太多的語法變化，所以利用這個範例作為第一個完

整的動畫程式教學範例，帶大家快速體驗、領悟並進入 ActionScript 3.0實例設計

的世界。

05∼日期與時間物件

精品手錶展示

隨時間轉動的指針 隨時間變化的文字

Ch05.indd 1 2012/1/16 下午 05:12:42

5-2

5-1 學習導覽

首先希望大家先建立一個觀念：在 Flash的世界裡，物件大致可分為「可視物件」與「不可視物件」。顧名思義，前者就像我們經常使用的「影片片段」、「按鈕」

等可直接顯示在舞台上的元件；後者則是依靠語法取得的一種抽象「資料」，雖然

取得了資料，但若沒有可視物件做為資料的「顯示容器」，那麼這些資料就只能存

在記憶體中，無法在畫面上顯示出來。因此本章利用程式碼取得不可視的系統時間

之後，還需要藉由可視之手錶指針的轉動設計及動態文字的呈現，讓使用者看到實

際的時間資料。

5-1-1　應用解說在取得時間資料之前，必須先建立一個時間物件，並且利用它的各種方法

（Method），取得所想要的資料與數值。

方法 傳回值類型 說明 附註

toUTCString() String 取得世界標準時間的年、月、

日、星期、時、分、秒

toString() String 取得星期、日期、時間及時區

的字串

toTimeString() String 取得時間與時區的字串 不包括星期別與日期

toDateString() String 星期別與日期的字串形式 不包括時間或時區

toLocaleDateString() String 取得星期別與日期的字串形式 不包括時間或時區

toLocaleString() String 取得本地時間之星期別、日

期、時間的字串形式

toLocaleTimeString() String 取得時間的字串形式不包括星期別、日期、

年份或時區

getFullYear() Number 取得年份 四位數字，例如 2000

getMonth() Number 取得月份0代表一月，1代表二月⋯

getDate() Number 取得日期 從 1到 31的整數

getDay() Number 取得星期0代表星期日，1代表星期一⋯

getHours() Number 取得小時 從 0到 23的整數getMinutes() Number 取得分鐘 從 0到 59的整數

Ch05.indd 2 2012/1/16 下午 05:12:43

5-3

精品手錶展示︱日期與時間物件

0 5

方法 傳回值類型 說明 附註

getSeconds() Number 取得秒數 從 0到 59的整數getUTCFullYear() Number 根據世界標準時間取得年份 四位數字，例如 2000

getUTCMonth() Number 根據世界標準時間取得月份0代表一月，1代表二月⋯

getUTCDate() Number 根據世界標準時間取得日期 從 1 到 31 的整數

getUTCDay() Number 根據世界標準時間取得星期0代表星期日，1代表星期一⋯

getUTCHours() Number 根據世界標準時間取得小時 從 0到 23的整數getUTCMinutes() Number 根據世界標準時間取得分鐘 從 0到 59的整數getUTCSeconds() Number 根據世界標準時間取得秒數 從 0到 59的整數

■建立時間物件步驟

//建立一個時間類別的物件（變數容器）

var my_time:Date = new Date();

//利用『toUTCString』方法取得世界標準時間

var now_time = my_time.toUTCString();

//輸出『now_time』的內容，也就是 my_time.toUTCString()

trace(now_time);

從上述程式可以很簡單地看出，建立時間主要分為三個步驟：

1. var 時間物件名稱：Date=new Date()；

2. var變數 =時間物件名稱 .方法；

3. 利用可視物件顯示時間資料（此處僅以「輸出」面板做說明，後續將利用指針角度與動態文字做時間資料的呈現）。

Ch05.indd 3 2012/1/16 下午 05:12:43

5-4

下面這個程式將利用各種常用的方法，取得各種不同單位的時間，並且以字串

的形式將各個變數連結在一起。

■取得不同單位的時間

//建立一個時間類別的物件（變數容器）

var my_time:Date = new Date();

//利用各種常見的時間方法取得相對應的時間

var yearT = my_time.getFullYear();

var monthT = my_time.getMonth() + 1;

var dateT = my_time.getDate();

var dayT = my_time.getDay();

var hourT = my_time.getHours();

var minT = my_time.getMinutes();

var secT = my_time.getSeconds();

/*輸出『now_time』的內容，並且以字串形式將各個變數

連結在一起 */

trace("現在是 "+yearT+"年 "+monthT+"月 "+dateT+"日 "

+"星期 "+dayT+" "+hourT+"點 "+minT+"分 "

+secT+"秒 ");

從以上的 trace回傳結果來看，在使用時間物件時，必須注意以下幾點：

1. 因為月份是以 0為起始，所以在取得月份時，請記得加上 1。

2. 在此例中，為了方便辨識，所以在「dayT」後方加上「空字串（""）」，以區隔開「日期」與「時間」兩組文字。

3. 在傳回的訊息中，發現「星期」後面顯示的是「數字 1」，而不是「國字一」，這一點會在後續的操作中與大家分享解決的方式。

Ch05.indd 4 2012/1/16 下午 05:12:44

5-5

精品手錶展示︱日期與時間物件

0 5

5-1-2　設計思維

5-1-3　範例結構

 

流程一 •建立 Date 物件取得目前系統時間

流程二 •利用 Rotation 屬性旋轉指針角度

流程三 •建立動態文字顯示當下時間

流程四 •使用 ENTER_FRAME 函式不間斷取得時間

「圖層、實體對象、名稱、元件類型」配對示意圖

Ch05.indd 5 2012/1/16 下午 05:12:45

5-6

注 意 指針定位點

本例在設計上最重要的地方，在於設定指針的定位點（旋轉軸心）；若未正確設定，就可

能發生指針繪製完成後，就直接將其轉換為影片片段，並擺放到當時目視下的適當位置；

但卻在寫入程式語法後，發現指針完全走了樣！

如果沒有事先作好規劃與設定，出現與圖中一樣的畫面是可想而知的，但為何會這樣呢？

原因就在於沒有設定指針的旋轉軸心。由於軸心的預設值是在正中間，所以在設計時，必

須將定位點移至下方，並且利用「 變形工具」設定旋轉的軸心點。

最後，確定已經配置好所有元件，就可以全心全力撰寫程式碼：利用時間物件製作出一個

真實的手錶。

在場景中已經設置

好各指針的位置

發佈動畫後發現指針

亂成一團

一開始將定位點設置在下方

利用變形工具設定旋轉軸心

Ch05.indd 6 2012/1/16 下午 05:12:46

5-7

精品手錶展示︱日期與時間物件

0 5

補 充

5-2 著手設計

5-2-1　設定指針角度首先，除了利用時間物件抓到當下時間之外，還要藉由指針的轉動角度，顯示

當下的時間點。

由於手錶僅需要用到「時針」、「分針」、「秒針」，所以只要利用「getHours」、

「getMinutes」、「getSeconds」這三種方法取得「小時」、「分鐘」、「秒數」的變數即可。

前面已經測試出「now_min」、「now_hr」、「now_sec」等三個變數是可以正確

作用的，所以接下來要利用這三個變數代入指針轉動的角度。首先必須思考一個國小數學

問題：秒針每分鐘轉動 360度，每秒轉動 6度，這樣就可以寫下秒針的轉動語法。

出現負角度

Trace傳回訊息顯示：角度值一旦超過 180度，系統會直接以負角度做計算，也就是從逆

時針方向開始算起，所以測試時如果出現負角度是正常現象，並不用擔心。

01

02

出現負的角度

Ch05.indd 7 2012/1/16 下午 05:12:46

5-8

同前一步驟，分別推算出時針、分針與 360度的關係，並且可以繼續寫下時針與分

針的轉動角度語法；在測試影片時，就已經可以看到指針「幾乎」已經是指向當下的時間了。

5-2-2　調整指針角度從前面的程式範例，不知道大家會不會覺得指針怪怪的呢？其實當下確實是

11：50沒錯，但是看起來卻好像是「快要 11點」的感覺，原因在於只有對指針編寫「準確角度」的語法，因此如果取得的時間介於 11到 12點之間，時針一律都會指在 11的位置，當然這也是在後續步驟中必須修正與調整的地方，藉此也可以讓大家對於「角度」的觀念更加地熟悉。

為了解決指針角度問題，必須再一次回想一下國小數學的邏輯觀念：時針每小時會

移動 30度，而且會依照分針移動的平均值而漸進移動；60分鐘移動 30度，所以 1分鐘移

動 0.5度，因此把時針的原本角度加上「分針角度÷2」即可。

03

01

Ch05.indd 8 2012/1/16 下午 05:12:47