網頁彈跳選單
http://www.flag.com.tw/book/cento-5105.asp?bokno=FS431&id=374
我們這個例子要製作的下拉選單不會是以傳統動畫的方式來製作，而是全部都以 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 變數來提供文字的內容。
□ 設定標題的顏色（ ），做法是加上HTML 語法到文章裡面，<FONT COLOR="#0066FF">長毛象復活記</FONT>。
□ 設定段落的位置（ 
），做法是加上 <BR> 標籤來取代每一個段落記號。
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 影格常式執行動畫迴圈，重複執行46~54 行的程式，運算效果與其他選單相同。
2. 到這裡整個程式已經完成了，請執行【控制 Control → 測試影片 Test Movie】 指令，或按下鍵盤 Ctrl-Enter 鍵（Windows）或是 Command-Return 鍵（Macintosh）測試最後的動畫效果，當滑鼠移到選單上時，選單就會以加速度方式下落並且彈跳停止。然後當滑鼠離開選單時，選單就會以加速度方式 向上回到原來的位置並且彈跳停止。
留言列表
