網頁彈跳選單－台南美食雞蛋貓異想世界(中餐技術士、數位電子技術士及格)

我們這個例子要製作的下拉選單不會是以傳統動畫的方式來製作，

而是全部都以 actionScript 程式來完成，這個範例中的選單被分成四個大項，

每次當滑鼠 Rollover 到按鈕大項時，選單就會向下彈跳出現。

此外我們還要介紹如何來載入外部的文字內容以做 Flash 的網頁內容。

範例效果的要求

1. 載入外部的純文字檔案。
2. 使用捲軸捲動文字內容。
3. 設定外部文字的 HTML 格式。
4. 畫面的 4 張下拉式選單，當滑鼠 Rollover 到任何一張選單時，選單就會出現。
5. 選單出現的方式以向下晃動的方式出現。

透過範例你將學會

1. 複合程式的運用。
2. onMouseUp事件。
3. 使用if ..... else判斷式。
4. attachMovie 貼上複製指令。
5. 物件變數路徑命名。
6. 使用Stage物件及其屬性。
7. 物件的綜合屬性（_x、_y、_rotation、_xscale、_yscale、_alpha ...........）。

操作步驟

Step 1. 檢視準備的檔案

檔案的基本配置如圖所示（），

你可以看到畫面上的4張選單，

其中選單的內容（）部份其實是在舞台以外的，

因此這些選單在一開始的時候是不會出現在網頁上的，

在網頁上你只會看到選單的標題部份（）。

此外在畫面上還有一個動態文字框是用來放置外部的文字檔的。

Step 2. 載入外部文字

1. 請點選畫面上〝text〞圖層上的〝hotnews〞動態文字框（），

接下來我們要利用 actionscript 程式將外部的文字檔讀入 flash 網頁之中。

2. 因為我們將要讀入外部的文字檔案，

因此我們必須要對外部的文字檔，

先來進行一些基本的處理，請利用 word 開啟 link.doc 檔案（），

在這裡為了配合後續的 actionScript 程式呼叫使用，

對這個檔案我們已經進行了以下的幾點HTML 的文字處理：

□ 將文章變數設定為 inner（），

這裡的做法是加上 inner=，稍後在 flash的程式中，我們就會呼叫 inner 變數來提供文字的內容。

3. 跟著在 word 中執行【檔案→另存新檔】指令，

叫出另存新檔對話框（），請選定檔案名稱，並設定檔案類型為純文字（），最後請按下儲存檔案按鈕。

4. 因為選取的檔案類型為純文字，

因此此時會出現檔案轉換對話框（），

請點選〝其他編碼方式〞（），

跟著在清單之中選取 Unicode（UTF-8）（），

後請按下確定按鈕。

5. 請回到 flash 中，點選〝actions〞圖層的第一個關鍵影格（），

並加入以下的影格程式（），

以載入先前儲存的〝link.txt〞檔案。

程式說明

this.loadVariables("link.txt");
// 第1 行說明：載入外部檔案link.txt。

hotnews.html = true;
// 第2 行說明：開啟hotnews 動態文字框的html 屬性。

this.onData = function() {
hotnews.htmlText = inner;
};
// 第3 ~5 行說明：當資料完整載入時設定hotnews

動態文字框的HTML 文字內容為載入的inner 變數。

6. 請執行【控制 Control → 測試影片 Test Movie】指令，

或按下鍵盤 Ctrl-Enter鍵（Windows）或是 Command-Return 鍵（Macintosh）

來測試外部文字是否已經加入，正確的情況應該如下圖，

文字已經被載入 hotnews 動態文字框之中了。

Step 3. 設定文字捲軸

1. 前面的文字框是沒有使用捲軸的，

在這樣的情況下文字是沒有辦法完全顯現出來的，

因此我要替文字框加上捲軸，這裡我們將使用 flash 內建的組件捲軸，

因為這是最方便的方法了，雖然使用 ActionScript 也可以完成同樣的效果，

不過坦白講非常的麻煩。使用組件也有缺點，

因為這些組件是使用 actionScript2 做的，因此只能使用 Flash8 製作，

如果你是使用 Flash MX 2004 的話，以下的捲軸你將會不能使用喔！

2. 請執行【視窗 Windows→組件 Components】指令（），

以叫出組件（Components）控制板，

在控制板中你可以找 UIScrollBar 這個組件（）。

3. 從組件（Components）控制板中拖拉 UIScrollBar 組件，

到 hotnews 動態文字框旁邊（），

跟著使用自由變形工具調整 UIScrollBar 組件的大小使其符合hotnews動態文字框的大小（）。

4. 點選 UIScrollBar 組件，在屬性控制板上點選參數標籤（Parameters）（），在 _targetInstanceName 欄位填上要控制的動態文字框名稱〝hotnews〞（）。

5. 重新執行【控制 Control → 測試影片 Test Movie】指令，

或按下鍵盤 Ctrl-Enter 鍵（Windows）或是 Command-Return 鍵（Macintosh）來測試動畫，

你就會發現被載入hotnews動態文字框旁邊就出現了捲軸了（）。

Step 4. 下拉彈跳選單

1. 我們的畫面上有4組選單，我們分別命名為〝menu1〞、〝menu2〞、〝menu3〞、〝menu4〞。

2. 我們先來檢視一下畫面上紫色的〝menu1〞影片片段的內容，

雙響〝menu1〞影片片段以進入〝menu1〞元件（）的編輯區，

這裡面有 3 個物件，整個紫色的選單按鈕與 2 個個別的連結按鈕，

我們要已經在這些按鈕上加上程式（因為每一顆都要加，有點囉唆，

所以我們事先已經加好了），以方便後續的程式處理，

點選套用自〝purple〞按鈕元件的按鈕（），加上以下的程式（）。

程式說明

on (rollOver) {
this.a = 2;
}
on (rollOut) {
this.a = 3;
}
// 第1 ~ 6 行說明：當滑過按鈕時宣告選單的變數a 等於2、當離開按鈕時宣告變數a等於3。

這個變數要用來判斷按鈕是否在選單上（這個時候選單將向下滑落），

或者是已經離開選單了（這個時候選單將向上縮回）。

3. 接著請接著點選任何個別的連結按鈕，

這裡兩顆按鈕的處理都是完全一樣的（後續其他選單中的連結按鈕也是一樣的喔！）

這裡我們點選套用自〝b12〞按鈕元件的按鈕（）在這裡加上 ActionScript 程式（）。

程式說明

on (rollOver) {
this.a = 2;
}
// 第1 ~ 3 行說明：當滑過按鈕時宣告選單的變數a 等於2（這個時候選單將維持向下滑落），

這麼做的目的是在於維持整個選單不會突然晃動，相同的程式需要加在每一顆按鈕上。

Step 5. 下拉彈跳選單

1. 請回到主要時間軸上，再次點選〝actions〞圖層的第一個關鍵影格（），

並加上 6~55 行的影格程式（），以製做當碰觸 4 張選單其中之一時，

選單都會向下彈跳伸展；並且?當滑鼠離開選單時，選單會彈跳往回縮的動畫效果。

程式說明

this.loadVariables("link.txt");
hotnews.html = true;
this.onData = function() {
hotnews.htmlText = inner;
};
// 第1~5 行說明：修改前的程式，請見前面的相關說明。
var factor = 0.69;
var ratio = 0.4;
// 第6~7 行說明：宣告變數factor 等於0.69，這個變數用在設定選單的反彈係數，數值越大則反彈的力道越大。宣告變數radio 等於0.4，這個變數用在設定選單下落與回復時的加速度係數。
menu1.speed = 0;
menu2.speed = 0;
menu3.speed = 0;
menu4.speed = 0;
// 第8~11 行說明：分別宣告4 個選單的speed 變數初值等於0，speed 變數將用在設定選單的垂直位置。
_root.menu1.onEnterFrame = function() {
// 第12 行說明：menu1 影片片段（紫色選單）的onEnterFrame 影格常式執行動畫迴圈，重複執行13~21 行的程式。
if (this.a == 2) {
// 第13 行說明：if 判斷式，設定當menu1 影片片段的a 變數等於2 的時候（也就是當rollover 到紫色按鈕部份的時候a 變數將被設定為2），執行14~16 行的程式，也就是執行選單的下落效果。
this.speed *= factor;
this.speed += (-20-this._y)*ratio;
// 第14~15 行說明：設定menu1 影片片段的speed 變數值乘上factor 變數後（這裡設定影片片段的彈跳效果），再累加上menu1 影片片段的停止目的位置（-20）減去垂直位置後再乘以ratio 變數（這裡設定選單的平滑下落效果）。
this._y += this.speed;
// 第16 行說明：menu1 影片片段的垂直位置累加上menu1 影片片段的speed 變數值。
} else if (this.a == 3) {
// 第17 行說明：執行else if 判斷式，設定當menu1 影片片段的a 變數等於3 的時候（也就是當rollout 紫色按鈕時a 變數將被設定為3），執行18~20 行的程式，也就是執行選單的向上還原效果。
this.speed *= factor;
this.speed += (-100-this._y)*ratio;
this._y += this.speed; // 第18~20 行說明：與14~16 行的運算方法相同，不過是設定menu1 影片片段的向上反彈的效果，menu1 影片片段的停止目的位置就是選單的起始位置（-100）。
}
// 第21 行說明：結束第13 行的if 判斷式。
};
// 第22 行說明：結束第12 行的onEnterFrame 影格常式。
_root.menu2.onEnterFrame = function() {
if (this.a == 2) {
this.speed *= factor;
this.speed += (100-this._y)*ratio;
this._y += this.speed;
} else if (this.a == 3) {
this.speed *= factor;
this.speed += (-100-this._y)*ratio;
this._y += this.speed;
}
};
// 第23~33 行說明：menu2 影片片段（藍色選單）的onEnterFrame 影格常式執行動畫迴圈，重複執行24~32 行的程式，運算效果與menu1 影片片段（紫色選單）相同。
_root.menu3.onEnterFrame = function() {
if (this.a == 2) {
this.speed *= factor;
this.speed += (70-this._y)*ratio;
this._y += this.speed;
} else if (this.a == 3) {
this.speed *= factor;
this.speed += (-100-this._y)*ratio;
this._y += this.speed;
}
};
// 第34~44 行說明：menu3（淺綠色選單）的onEnterFrame 影格常式執行動畫迴圈，重複執行34~44 行的程式，運算效果與menu1 或是menu2 影片片段相同。
_root.menu4.onEnterFrame = function() {
if (this.a == 2) {
this.speed *= factor;
this.speed += (10-this._y)*ratio;
this._y += this.speed;
} else if (this.a == 3) {
this.speed *= factor;
this.speed += (-100-this._y)*ratio;
this._y += this.speed;
}
};
// 第45~55 行說明：menu4 影片片段（淺綠色選單）的onEnterFrame 影格常式執行動畫迴圈，