Flash制作水平缓动的导航菜单

演示：


注意：为了完成这一效果，需要 TweenMax 类，这是一个实现缓效果的外部类，在名为gs的开源类库中。把附件中的gs类库文件解压到任意目录下，把新建的fla文件保存在同一目录下。

1、新建Flash文件，设置属性：宽、高 500 × 100 , 背景黑色。

2、选用基本矩形工具，画一个没有笔触的圆角长方形。边角半径为3， 颜色和大小任意。图1：

3、右键单击长方形，将长方形转换成影片剪辑。命名为 " Button Background " 设定注册点居中。图2：

4、在属性面板中输入影片剪辑的实例名称 " buttonBackground" 。图3：

5、图层1改名为 " button background " 。然后添加新的图层名为 " buttons "。

6、在 " buttons " 层中，在它里面创建一个静态的本文而且输入 "Home " 。图4：

7、将本文转换成影片。剪辑命名为 " Home button "  设定设定注册点居中。图5：

8、重复6、7步骤，创建另外三个按钮。输入文本为：" About button " ， " Portfolio button " 和 " Contact button "。库如图6：

9、在舞台上水平地排列按钮。图7：

10、在属性面板中分别输入对应实例的名字 " homeButton" ， " portfolioButton" ， " aboutButton" 和 " contactButton"。

11、添加 AS 层输入代码：

//Import TweenMax

import gs.*;

import gs.plugins.*;

TweenPlugin.activate([BlurFilterPlugin]);  

//Add the buttons into an array

var buttonsArray:Array = new Array(homeButton,portfolioButton,aboutButton,contactButton);  

//Loop through the buttons array

for (var i:uint = 0; i < buttonsArray.length; i++) {  

        //Add event listeners for the button

        buttonsArray[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverButton);

        buttonsArray[i].addEventListener(MouseEvent.CLICK, buttonClicked);

}  

//Move the buttonBackground under the home button (= starting position)

buttonBackground.x = homeButton.x;

buttonBackground.y = homeButton.y;  

//Make the buttonBackground a bit bigger than the home button

buttonBackground.width = homeButton.width + 10;

buttonBackground.height = homeButton.height + 10;  

//Tween the buttonBackground to a random color using TweenMax

TweenMax.to(buttonBackground, 0.1, {tint: Math.random() * 0xffffff});  

//This function is called when the mouse is over a button

function mouseOverButton(e:Event):void {  

        //Assign the button to a local variable

        var button:MovieClip = (MovieClip)(e.target);  

        //Calculate the new target width and height for the buttonBackground

        var targetWidth:Number = button.width + 10;

        var targetHeight:Number = button.height + 10;

        //Tween the buttonBackground’s position, size and color (color is random)

        TweenMax.to(buttonBackground, 0.5, {x: button.x, y: button.y,

        width:targetWidth, height:targetHeight, tint: Math.random() * 0xffffff});

}  

//This function is called when a button is clicked

function buttonClicked(e:Event):void {

        //Add your logic here!

        trace(e.target.name + " was clicked!");

}
12、全部完成，测试你的影片。