Flash AS3创建一个横向滑动的导航条菜单
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
在这篇教程里我们将学会如何利用Flash AS3创建一个横向滑动的导航条菜单，教程制作的导航条非常棒，方法也很简单，转发过来，希望对大家有所帮助。
最终效果预览让我们看一看我们将要做的作品的最终效果
第一步：创建文本新建一个600*300px的Flash Actionscript3.0文件，首先，选择文本工具并输入你的导航菜单文字，在这个教程中，我用的是Button1|Button2|Button3|Button4，字体选择Arista Light，大小为30点，颜色选择#999999.然后进入对齐面板(如果你看不到它的话就点击窗口>对齐)，使文本相对于舞台水平中齐，垂直中齐。
第二步：画一个按钮
将当前的图层重新命名为文本并将其锁定，这样就不会误将其修改。然后创建一个名为按钮的新图层。选择矩形工具并在button
1″的边缘外画一个矩形(任意颜色)。这将是你菜单条中可以点击的区域。
第三步：完善按钮选中你刚刚画的矩形，执行修改>转化为元件，并将其命名为按钮。确保注册点在中间(你可能还要使用对齐面板)
然后，在属性面板中，将其实例名称命为button1″并将alpha值设为0%。
第四步：添加更多的按钮复制你的无形的按钮，并将其粘贴到其它三个按钮中，并分别将其实例名称命为button2,button3,button4″使用任意变形工具将它们放大或缩小，使它们正好在菜单条的外框，且每个之间没有间隔。
第五步：画条栏(bar)还是选择矩形工具，将矩形边角半径设为5pixels并画一个高为4pixels，宽和第一个按钮差不多的矩形。
把它放在第一个按钮的下面，点击修改>转化为元件并将其命名为bar。确保注册点在中间。
将它的实例名称命为bar，且和那些按钮一样alpha值为0%。将按钮图层锁定，并创建一个新的图层命名为动作也将这一层锁定。现在在你新建的动作图层上的第一帧上单击右键，并点击动作。
第六步：输入类
import fl.transitions.Tween;
import fl.transitions.easing.*;
第七步：定义变量
var barX:Tween;
// 为条栏的淡入定义补间变量
var barAlphaIn:Tween;
// 为条栏的淡出定义补间变量
var barAlphaOut:Tween;
// 为条栏的宽定义补间变量
var barWidth:Tween;
第八步：添加事件监听器
button1.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
//为鼠标滑出button 1添加事件监听器
button1.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// 为鼠标滑入button 2添加事件监听器
button2.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// 为鼠标滑出button 2添加事件监听器
button2.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
//为鼠标滑入button 3添加事件监听器
button3.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// 为鼠标滑出button 3加事件监听器
button3.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
// 为鼠标滑入button 3添加事件监听器
button4.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
// 为鼠标滑出button 4添加事件监听器
button4.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
首先我们添加一个事件监听器，当鼠标滚动到Button 1的时候就执行rollOverHandler函数。然后我们添加另一个事件监听器，当鼠标在Button 1范围之外时就执行rollOutHandler 函数。像这样这些监听器可作用于这四个按钮。
第九步：函数
引用:
function rollOverHandler(e:MouseEvent):void
{
// 将菜单条的x坐标调整到按钮的当前位置。参数是：
// 添加补间的对象（例如添加运动补间）
// 添加补间的对象的属性
// 缓动（动作）的类型
// 初始值（例如补间开始时的属性值）
// 末尾值（例如补间结束时的属性值）
// 运动补间的持续时间duration of tween
// 是用时间（true）还是帧（false）来测量持续时间
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);
}
// 滑出事件的函数执行方法
function rollOutHandler(e:MouseEvent):void
{
//为条栏的透明度添加补间使它淡出
barAlphaOut = newTween(bar, alpha, Regular.easeOut,bar.alpha, 0, 1, true);
}
当鼠标在按钮之上时，将执行rollOverHandler
功能，这将使条栏从它当前的位置运动到鼠标当前所指的按钮的位置。如此以来这个条栏就会平稳水平地运动。然后，条栏的alpha值将会从当前值变到1（100%alpha)，宽将从当前值变到与引发Handler功能的按钮相同的宽度。
当我们将鼠标移出按钮时，rollOutHandler功能将被执行，条栏的alpha值将会从当前值变到0（全透明）。
由于按钮之间没有缝隙，紧贴在一起，所以如果你立刻将鼠标移出所有按钮所在的区域，你只会看到条栏消失了，否则它又会太快的显示出来，这样你就看不见了。
总结：
现在你应该可以得到与教程上差不多的作品了。很棒。你已经学会了如何使用ActionScript 3.0中的补间类创建有效的动画菜单，这与众不同的菜单将更吸引人们的目光。
后续：为每一个按钮添加一个鼠标点击监听器和执行器当我们在其上点击的时候出现不同的动作如何？
教程结束，以上就是Flash AS3创建一个横向滑动的导航条菜单过程，希望大家喜欢这篇教程！
相关文章
flash cs6想要实现鼠标跟随效果？该怎么制作呢？今天我们就来看看使用as2.0实现鼠标跟随效果的教程，需要的朋友可以参考下2019-05-19
Flash cs6怎么使用代码输入中英文文本？Flash cs6中可以使用文字工具直接输入文本，也可以使用代码来输入文本，该怎么使用代码输入文本呢？请看下文详细的教程，需要的朋友2018-03-11
flash as3.0抽象类怎么定义？ as3.0中有很多抽象类，该怎么定义抽象类和抽象方法呢？下面我们就来看看简单的例子，需要的朋友可以参考下http://www.jb51.net/softs/408402.2018-02-28
flash cs6中怎么使用ActionScript3.0?
flash cs6中怎么使用ActionScript3.0？flash cs6中想要使用ActionScript3.0功能，该怎么使用呢？下面我们就来看看详细的教程，需要的朋友可以参考下2018-01-25
本教程给大家分享一个Flash小教程，教大家在Flash CS6中怎么实现鼠标点击决定图像位置？方法很简单，感兴趣的朋友欢迎前来一起分享学习2018-01-12
本教程教程序员之家的ActionScript教程学习者在Flash中如何用代码将图片放在自己想要的舞台位置，教程讲解的详细，感兴趣的朋友欢迎前来分享学习2017-11-20
本教程教程序员之家的ActionScript教程学习者如何在Flash CS6中使用with函数绘制背景图？教程一步步讲解的挺详细，方法也不难，非常适合Flash新手入门学习2017-11-18
Flash怎么设置元件坐标?flash使用代码设置元件的坐标的教程
Flash怎么设置元件坐标？flash中导如的元件需要添加坐标，该怎么定位元件坐标呢？下面我们就来看看flash使用代码设置元件的坐标的教程，需要的朋友可以参考下2017-10-11
Flash怎么制作来回摇摆的花朵的动画？Flash中想要给花朵制作一段摇摆的动画效果，该怎么制作呢？下面我们就来看看详细的教程，很简单，需要的朋友可以参考下2017-05-23
Flash怎么制作流动七彩色的文字？想要让文字动起来，该怎么使用flash给文字制作一个流动七彩色的动画呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-04-23
最新评论