在這個快速教程中你將學會如何使用AS3’s的補間類創建一個橫向滑動條欄菜單，一個非常棒的導航條。

最終效果預覽讓我們看一看我們將要做的作品的最終效果

第一步：創建文本新建一個600*300px的Flash Actionscript3.0文件首先，選擇文本工具并輸入你的導航菜單文字，在這個教程中，我用的是Button1|Button2|Button3|Button4，字體選擇”Arista Light”，大小為30點，顏色選擇#999999.然后進入對齊面板(如果你看不到它的話就點擊窗口>對齊)，使文本相對于舞臺水平中齊，垂直中齊。

第二步：畫一個按鈕

將當前的圖層重新命名為”文本”并將其鎖定，這樣就不會誤將其修改。然后創建一個名為”按鈕”的新圖層。選擇矩形工具并在”button

1″的邊緣外畫一個矩形(任意顏色)。這將是你菜單條中可以點擊的區域。

第三步：完善按鈕選中你剛剛畫的矩形，執行修改>轉化為元件，并將其命名為”按鈕”。確保注冊點在中間(你可能還要使用對齊面板)

然后，在屬性面板中，將其實例名稱命為”button1″并將alpha值設為0%。

第四步：添加更多的按鈕復制你的”無形”的按鈕，并將其粘貼到其它三個按鈕中，并分別將其實例名稱命為”button2,button3,button4″使用任意變形工具將它們放大或縮小，使它們正好在菜單條的外框，且每個之間沒有間隔。

第五步：畫條欄(bar)還是選擇矩形工具，將矩形邊角半徑設為5pixels并畫一個高為4pixels，寬和第一個按鈕差不多的矩形。

把它放在第一個按鈕的下面，點擊修改>轉化為元件并將其命名為bar。確保注冊點在中間。

將它的實例名稱命為”bar”，且和那些按鈕一樣alpha值為0%。將”按鈕”圖層鎖定，并創建一個新的圖層命名為”動作”也將這一層鎖定。現在在你新建的動作圖層上的第一幀上單擊右鍵，并點擊動作。

第六步：輸入類

//為補間導入所需的類

import fl.transitions.Tween;

import fl.transitions.easing.*;

我們需要使用這些代碼和補間類讓條欄動起來，所以將這些導入。這個”緩動”類也是必須的，這樣我們就可以明確所使用的補間動作類型。

第七步：定義變量

// 為條欄的x坐標定義補間變量

var barX:Tween;

// 為條欄的淡入定義補間變量

var barAlphaIn:Tween;

// 為條欄的淡出定義補間變量

var barAlphaOut:Tween;

// 為條欄的寬定義補間變量

var barWidth:Tween;

為補間條欄定義這些變量

第八步：添加事件監聽器

// 為鼠標滑入button1添加事件監聽器

button1.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);

//為鼠標滑出button 1添加事件監聽器

button1.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

// 為鼠標滑入button 2添加事件監聽器

button2.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);

// 為鼠標滑出button 2添加事件監聽器

button2.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

//為鼠標滑入button 3添加事件監聽器

button3.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);

// 為鼠標滑出button 3加事件監聽器

button3.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

// 為鼠標滑入button 3添加事件監聽器

button4.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);

// 為鼠標滑出button 4添加事件監聽器

button4.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

看起來好像有很多代碼，但是它們確實很簡單

首先我們添加一個事件監聽器，當鼠標滾動到Button 1的時候就執行rollOverHandler函數。然后我們添加另一個事件監聽器，當鼠標在Button 1范圍之外時就執行rollOutHandler 函數。像這樣這些監聽器可作用于這四個按鈕。

第九步：函數

//滑入事件的函數執行方法

function rollOverHandler(e:MouseEvent):void

{

// 將菜單條的x坐標調整到按鈕的當前位置。參數是：

// 添加補間的對象（例如添加運動補間）

// 添加補間的對象的屬性

// 緩動（動作）的類型

// 初始值（例如補間開始時的屬性值）

// 末尾值（例如補間結束時的屬性值）

// 運動補間的持續時間duration of tween

// 是用時間（true）還是幀（false）來測量持續時間

barX = new Tween(bar,”x”, Back.easeOut, bar.x, e.target.x, 1,true);

// 為條欄的透明度添加補間使它淡入

barAlphaIn = newTween(bar, “alpha”, Regular.easeOut,bar.alpha, 1, 1, true);

//為條欄的寬度添加補間使其與按鈕的一樣寬

barWidth = newTween(bar, “width”, Regular.easeOut,bar.width, e.target.width, 1, true);

}

// 滑出事件的函數執行方法

function rollOutHandler(e:MouseEvent):void

{

//為條欄的透明度添加補間使它淡出

barAlphaOut = newTween(bar, “alpha”, Regular.easeOut,bar.alpha, 0, 1, true);

}

當鼠標在按鈕之上時，將執行rollOverHandler
功能，這將使條欄從它當前的位置運動到鼠標當前所指的按鈕的位置。如此以來這個條欄就會平穩水平地運動。然后，條欄的alpha值將會從當前值變到1（100%alpha)，寬將從當前值變到與引發Handler功能的按鈕相同的寬度。

當我們將鼠標移出按鈕時，rollOutHandler功能將被執行，條欄的alpha值將會從當前值變到0（全透明）。

由于按鈕之間沒有縫隙，緊貼在一起，所以如果你立刻將鼠標移出所有按鈕所在的區域，你只會看到條欄消失了，否則它又會太快的顯示出來，這樣你就看不見了。

總結：

現在你應該可以得到與教程上差不多的作品了。很棒。你已經學會了如何使用ActionScript 3.0中的補間類創建有效的動畫菜單，這與眾不同的菜單將更吸引人們的目光。

后續：為每一個按鈕添加一個鼠標點擊監聽器和執行器當我們在其上點擊的時候出現不同的動作如何？

參與討論和交作業：http://www.missyuan.com/viewthread.php?tid=454667