ActionScript3打造很酷的晃动菜单

本教程将教你如何使用ActionScript 3创建一个很酷的晃动的菜单。所有的动画是通过ActionScript完成的，所以没有时间轴动画。我们可以看看最终的成果！
获取TweenMax
我们将使用TweenMax来做菜单的动画。因此，下载as3的TweenMax将节省我们很多时间！将“gs”文件夹保存在你的根目录下。

新建文件
启动您的Flash并创建一个新的Flash的ActionScript 3文件。
Flash文档属性
设置下列文件属性：
宽度： 400像素
高： 100像素
背景颜色： 黑色
帧频：30
菜单矩形形状
在舞台上，绘制一个具有以下属性的矩形。
宽度： 8px
高度： 8px
笔触颜色： 无！
填充颜色： ＃FF8800

菜单矩形MovieClip
将矩形转换为影片剪辑（选择矩形并按F8键）。将它命名为“Menu Rectangle”，并将中心设置为注册点。同样，将矩形链接一个名为“MenuRectangle”的类。
更多矩形菜单MovieClip
从完成的影片中，你可以看到，每个菜单项我们需要多个矩形菜单。因此，拖7个矩形菜单到舞台上（现在舞台上应该一共有8个矩形菜单）。将它们水平对齐和均匀分布。你可以使用对齐功能来帮助你。注意，当您选择按空间均匀分布矩形按钮时，你不应该 选择“相对舞台”。

再更多的矩形菜单
菜单按钮上，我们仍然需要更多的的矩形菜单。因此，选择所有8个矩形菜单，按住Alt键并拖动和放下以创建新一行矩形菜单。同样的方法创建第三排。现在，你应该有一个8 × 3的长方形矩阵（8 列和3行）。
Home按钮的MovieClip
现在，我们准备创建一个菜单按钮影片剪辑。选择所有矩形菜单并将其转换为一个单一的影片剪辑。将它命名为“主页按钮”，并将中心设置为注册点。
按钮标签
双击舞台上的Home按钮的影片剪辑，进到“内部”。在影片剪辑中，选择所有矩形菜单，并设置alpha为30％。
菜单文本层
仍然在Home按钮影片剪辑中，创建一个命名为“text”新层。

文本字段
在文字层中，创建一个静态文本和并设置为“Home”。文本字段的位置在菜单上矩形和大小的顶部，以便它涵盖大部分的矩形区域。设置下列属性。
字体： Berlin Sans
大小： 14磅
颜色： 白色
格式： 居中
碰撞区域层
仍然在home按钮影片剪辑中，创建一个名为“hit area”的层。
碰撞区域MovieClip
在hit area层中，绘制一个白色矩形，覆盖所有的菜单矩形。将矩形转换为影片剪辑。并命名为“hit area”，并将中心设置为注册点。
实例名称
给hit area影片剪辑的实例名称设为“mouseArea”。
碰撞区域的alpha
我们不希望hit area是可见的，它唯一的功能是捕捉鼠标事件。因此，设定hit area的alpha为0。
ActionScript层
仍然在Home按钮影片剪辑中，创建一个名为“actions”的层。
ActionScript  - 初始化
现在，我们已经准备好了所有图形和影片剪辑，我们可以开始ActionScript编写了。因此，在actions层中，键入以下代码。
//Import TweenMax 

import gs.*; 

 

//This array will contain all the rectangles 

var rectangles:Array = new Array(); 

 

//Loop through the items in this movie clip 

for (var i:uint = 0; i < this.numChildren; i++) { 

 

        //Get an object 

        var object:* = this.getChildAt(i); 

 

        //Check to see if the object is a MenuRectangle 

        if (object is MenuRectangle) { 

 

                //Save the rectangle’s coordinates (we need these later on) 

                object.origX = object.x; 

                object.origY = object.y; 

 

                //Add the rectangle to the rectangles array 

                rectangles.push(object); 

        } 

}
这段代码应该是很简单的。我们首先导入TweenMax，并创建一个包含所有矩形菜单的数组。在for循环我们遍历舞台上所有的单元。我们检查的这个单元是不是一个矩形菜单，如果是，则添加到矩形数组中。这样一来即使不修改ActionScript代码，我们也能在按钮中容易地添加更多的矩形。

ActionScript- 鼠标处理函数
键入下面的代码，添加一些鼠标的功能。

//Add mouse listeners for the mouse area 

mouseArea.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); 

mouseArea.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler); 

mouseArea.addEventListener(MouseEvent.CLICK, itemClicked); 

 

//This function is called when the cursor is over the mouse area 

function mouseOverHandler(e:Event):void { 

 

        //Loop through the rectangle array 

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

 

                //Assign the rectangle to a local variable 

                var rectangle:MenuRectangle = rectangles[i] as MenuRectangle; 

 

                //Calculate random target coordinates for the rectangle 

                var randomX:Number = rectangle.x + 10 * Math.cos(Math.random() * Math.PI * 2); 

                var randomY:Number = rectangle.y + 10 * Math.sin(Math.random() * Math.PI * 2); 

 

                //Animate the rectangle to the random coordinates 

                TweenMax.to(rectangle, 0.4, {x: randomX, y: randomY, alpha: 0.6, tint: Math.random() * 0xffffff}); 

 

        } 

 

        //Add an ENTER_FRAME listener for the shake effect 

        addEventListener(Event.ENTER_FRAME, shake); 

} 

 

//This function is called when the cursor moves out of the mouse area 

function mouseOutHandler(e:Event):void { 

 

        //Loop through the rectangle array 

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

 

                //Assign the rectangle to a local variable 

                var rectangle:MenuRectangle = rectangles[i] as MenuRectangle; 

 

                //Tween the rectangle to the original position 

                TweenMax.to(rectangle, 0.4, {x: rectangle.origX, y: rectangle.origY, rotation: 0, alpha: 0.3, tint: 0xff8800}); 

        } 

 

        //Remove the ENTER_FRAME listener (we don’t want to shake the rectangle anymore) 

        removeEventListener(Event.ENTER_FRAME, shake); 

} 

 

//This function is called when the mouse area is clicked 

function itemClicked(e:Event):void { 

 

        //Navigate to some URL 

        var urlRequest:URLRequest = new URLRequest("http://tutorials.flashmymind.com"); 

        navigateToURL(urlRequest); 

}
正如你所看到的一样，我们侦听鼠标区域的经过、移出和点击事件。在 mouseOverHandler（） 函数中，我们计算每个菜单矩形的随机坐标。然后我们使用TweenMax的完成补间动画。我们同时进行了矩形的颜色和alpha的补间。我们还添加了一个ENTER_FRAME侦听来完成震动效果（在下一步中仔细介绍）。在mouseOutHandler（） 中， 我们只需在菜单矩形做一个补间动画将其恢复到其原始状态。如果该单元被点击，将跳转到一个URL地址。接下来，让我们来看看产生动摇效果的shake（） 函数，。

ActionScript-摇动效果
为了添加摇动效果，我们要键入以下代码。

function shake(e:Event):void { 

 

        //Loop through the rectangles array 

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

 

                //Assign the rectangle to a local variable 

                var rectangle:MenuRectangle = rectangles[i] as MenuRectangle; 

 

                //Rotate the rectangle a random amount  (from -4 to 4)  

                rectangle.rotation += Math.random() * 8 - 4; 

 

                //Assign a new random position (from -4 to 4)  

                rectangle.x+=Math.random()*8-4; 

                rectangle.y+=Math.random()*8-4; 

        } 

}
在 shake（） 函数中，我们随机旋转和随机分配每个矩形菜单的坐标。在每一帧都调用一次这个函数，以产生一个动摇的效果。

创造更多的按钮
现在我们有一个简单的按钮了，您可以测试一下您的影片！然而，通常在菜单中我们应该有一个以上的按钮，所以让我们看看如何实现这一目标。

复制影片剪辑
做一个例子，我们将创建一个“About”按钮。首先转到主时间轴。在库面板中，右键点击“Home Button”影片剪辑，并选择“复制”。

About按钮MovieClip
Flash将会给新的MovieClip要求一个名字，将它命名为“About Button”。
现在我们完成了创建一个新的按钮！您需要做的仅仅是将其拖到舞台上，并将其中的文本改为“About”。