Flash制作横向滑动的导航菜单_FLASH动画交流群吧吧_直线网

FLASH动画交流群吧
已关注 | 取消 +关注
关注：8
帖子：91

签到

06月21日
尚未签到

看帖图片精品视频

共有回帖数 0 个

Flash制作横向滑动的导航菜单
只看楼主收藏回复

十万个为什么
等级：
在这个快速教程中你将学会如何使用AS3’s的补间类创建一个横向滑动条栏菜单，一个非常棒的导航条。
最终效果预览让我们看一看我们将要做的作品的最终效果

第六步：输入类//为补间导入所需的类
import fl.transitions.Tween;
import fl.transitions.easing.*;
我们需要使用这些代码和补间类让条栏动起来，所以将这些导入。这个”缓动”类也是必须的，这样我们就可以明确所使用的补间动作类型。
第七步：定义变量// 为条栏的x坐标定义补间变量
var barX:Tween;
// 为条栏的淡入定义补间变量
var barAlphaIn:Tween;
// 为条栏的淡出定义补间变量
var barAlphaOut:Tween;
// 为条栏的宽定义补间变量
var barWidth:Tween;
为补间条栏定义这些变量
第八步：添加事件监听器// 为鼠标滑入button1添加事件监听器
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中的补间类创建有效的动画菜单，这与众不同的菜单将更吸引人们的目光。
后续：为每一个按钮添加一个鼠标点击监听器和执行器当我们在其上点击的时候出现不同的动作如何？

楼主 2016-10-28 13:13 回复

共有回帖数 0 个

发表

登录直线网账号

本吧信息

查看详情

li414251269

本吧公告
FLASH软件制作动画，有这方面需求的可以互谅切磋讨论。有关运动规律的学习和二维动画制作的欢迎加入。

我常逛的吧

我管理的吧