教學頁面製作

圖 4-8 SHELL-SORT 程式碼

例如輸入為：77,62,14,9,30,21,80,25 第 1 次執行結果：30,21,14,9,77,62,80,25 第 2 次執行結果：14,9,30,21,77,25,80,62 第 3 次執行結果：9,14,21,25,30,62,77,80

4.2 教學頁面製作 FLASH 的開發環境：

圖 4-9 為 Flash 的開發介面。

圖 4-9 FLASH 開發環境圖

Flash 按扭實作：

我們以圖4-10中的play的按鈕為例，首先先我們先將按鈕 這個元件單獨編輯，而在play的按鈕元件中有分成一般、滑鼠 經過、按下以及執行四個影格，以下我們將單獨的介紹這4個影 格的作用。

1. 一般正常的情況滑鼠不會去移動到按鈕時，此時按鈕所呈現 的狀態,如圖4-10（a）。

圖4-10（a）按鈕實作圖

2.當滑鼠移動到執行的範圍時候的影格時，此時按鈕呈現出來 給使用者看到的狀態,如圖4-10（b）。

圖4-10（b）按鈕實作圖

3.按下:當滑鼠一直按著執行區域時候的影格，此時按鈕呈現的 狀態, 如圖4-10（c）。

圖4-10（c）按鈕實作圖

4.執行:按鈕所感應到的部分，當滑鼠移動到執行區域時就會跳 到執行的影格, 如圖4-10（d）。

圖4-10（d）按鈕實作圖

這樣的按鈕元件編輯完成後，加到FLASH動畫中，可以讓 使用者很容易的看到表達的重點，並且方便控制流程。

Flash 的實作部分：

要呈現動畫的部分主要會用到兩個技巧：

1. 移動漸變：此功能主要用在物件的移動、大小旋轉變化。我 們在工作區建立一個圖形時，時間軸上的影格會出現一個實 心的小黑點，將所要移動的物件放在開始以及結束的影格並 且要設定相對的置，然後在開始的影格上按下滑鼠右鍵，選 取產生移動漸變，很明顯的時間軸上的箭號出現了。這項功 能不僅僅能製作移動的動畫，更可產生變大變小以及旋轉的 效果。如圖4-11中紅色圈圈所示。

圖4-11 FLASH移動漸變實作圖

2. 引導線：此功能可以引導物件隨著我們規定的路線前進。首 先我們先選取要隨規定路線前進物件的所在圖層，接著在圖 層上單擊滑鼠右鍵，選取增加引導線，這時候會產生一個導 引線的新圖層，這個圖層就是用來決定物件是要隨著哪一條 路線前進。接下來在這個新圖層的工作區中插入關鍵影格並 且畫出出我們希望物件所做的路線，然後將物件的開始位置 對齊此引導線的開端，並將物件的結束位置對齊此引導線的 末端，如同移動漸變的產生方法，在此物件的開始影格單擊 滑鼠右鍵，選取產生移動漸變，即可以產生出一個依引導線 軌跡運動的物件動畫。圖4-12中紅色圈圈即為導引線。

圖4-12 引導線製作圖

我們以Quick-Sort為例，我們可以看到在圖4-13(a)中左 邊紅色圈圈的部分，就是我們這個動畫用到的主要部分，裡面 主要是以導引線和物件為主，並且加上一些適當的程式碼去控 制動畫的流程。

圖4-13(a) Quick-Sort製作

以圖4-13(b)中19這一個元件為例，我們可以藉由產生 移動漸變去配合動畫的表現，並且使用導引線去控制此元件所 要經過的路線。

圖4-13(b) Quick-Sort製作

以圖 4-13(c)Quick-Sort 中的程式碼為例，我們要依此程 式碼的行為配合動畫目前所呈現的部分，因此我們將程式碼跟 動畫作在一起，以便利使用者觀看程式的變化，並且將程式馬 目前執行到哪一部分用紅色的文字表現出來，使得使用者更加 容易學習。經過 FLASH 動畫配合程式碼的變化表示，相信會讓 使用者更加容易觀看跟比較，並且更容易理解動畫的行為。

圖4-13(c) Quick-Sort製作