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”。 |