Flash实例教程:制作水平缓动的导航菜单

http://www.webjx.com/  2010-03-11 07:44:30  来源:中国教程网论坛 作者:cao4811

Webjx核心提示:这一教程中,将学习如何创建一个水平菜单。

这一教程中,将学习如何创建一个水平菜单。

演示:


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

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

2、选用基本矩形工具,画一个没有笔触的圆角长方形。边角半径为3, 颜色和大小任意。图1:
sshot-1.png
3、右键单击长方形,将长方形转换成影片剪辑。命名为 " Button Background " 设定注册点居中。图2:
sshot-2.png
4、在属性面板中输入影片剪辑的实例名称 " buttonBackground" 。图3:
sshot-3.png
5、图层1改名为 " button background " 。然后添加新的图层名为 " buttons "。

6、在 " buttons " 层中,在它里面创建一个静态的本文而且输入 "Home " 。图4:
sshot-4.png
7、将本文转换成影片。剪辑命名为 " Home button "  设定设定注册点居中。图5:
sshot-5.png
8、重复6、7步骤,创建另外三个按钮。输入文本为:" About button " , " Portfolio button " 和 " Contact button "。库如图6:
sshot-6.png
9、在舞台上水平地排列按钮。图7:
sshot-7.png
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、全部完成,测试你的影片。

水平菜单.rar附件下载
更多