Flash AS3創(chuàng)建一個橫向滑動的導航條菜單

發(fā)布時間：2014-07-10 12:06:01 作者：佚名

在這篇教程里我們將學會如何利用Flash AS3創(chuàng)建一個橫向滑動的導航條菜單，教程制作的導航條非常棒，方法也很簡單，轉(zhuǎn)發(fā)過來，希望對大家有所幫助

在這篇教程里我們將學會如何利用Flash AS3創(chuàng)建一個橫向滑動的導航條菜單，教程制作的導航條非常棒，方法也很簡單，轉(zhuǎn)發(fā)過來，希望對大家有所幫助。

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

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

第二步：畫一個按鈕

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

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

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

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

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

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

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

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

第六步：輸入類

復制代碼

代碼如下:

//為補間導入所需的類
import fl.transitions.Tween;
import fl.transitions.easing.*;

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

第七步：定義變量

復制代碼

代碼如下:

// 為條欄的x坐標定義補間變量
var barX:Tween;
// 為條欄的淡入定義補間變量
var barAlphaIn:Tween;
// 為條欄的淡出定義補間變量
var barAlphaOut:Tween;
// 為條欄的寬定義補間變量
var barWidth:Tween;

為補間條欄定義這些變量

第八步：添加事件監(jiān)聽器

復制代碼

代碼如下:

// 為鼠標滑入button1添加事件監(jiān)聽器
button1.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
//為鼠標滑出button 1添加事件監(jiān)聽器
button1.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// 為鼠標滑入button 2添加事件監(jiān)聽器
button2.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// 為鼠標滑出button 2添加事件監(jiān)聽器
button2.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
//為鼠標滑入button 3添加事件監(jiān)聽器
button3.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// 為鼠標滑出button 3加事件監(jiān)聽器
button3.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// 為鼠標滑入button 3添加事件監(jiān)聽器
button4.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// 為鼠標滑出button 4添加事件監(jiān)聽器
button4.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

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

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

第九步：函數(shù)

引用:

復制代碼

代碼如下:

//滑入事件的函數(shù)執(zhí)行方法
function rollOverHandler(e:MouseEvent):void
{
// 將菜單條的x坐標調(diào)整到按鈕的當前位置。參數(shù)是：
// 添加補間的對象（例如添加運動補間）
// 添加補間的對象的屬性
// 緩動（動作）的類型
// 初始值（例如補間開始時的屬性值）
// 末尾值（例如補間結(jié)束時的屬性值）
// 運動補間的持續(xù)時間duration of tween
// 是用時間（true）還是幀（false）來測量持續(xù)時間
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);
}
// 滑出事件的函數(shù)執(zhí)行方法
function rollOutHandler(e:MouseEvent):void
{
//為條欄的透明度添加補間使它淡出
barAlphaOut = newTween(bar, alpha, Regular.easeOut,bar.alpha, 0, 1, true);
}

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

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

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

總結(jié)：

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

后續(xù)：為每一個按鈕添加一個鼠標點擊監(jiān)聽器和執(zhí)行器當我們在其上點擊的時候出現(xiàn)不同的動作如何？

教程結(jié)束，以上就是Flash AS3創(chuàng)建一個橫向滑動的導航條菜單過程，希望大家喜歡這篇教程！