|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
用于设计和编辑Flash文档。1996年11月,美国Macromedia公司收购了FutureWave,并将其改名为Flash。后又被Adobe公司收购。
poluoluo中心提醒:横向滑动的菜单条栏.
怎样建一个横向滑动的菜单条栏
在这个疾速教程中你将学会怎样利用AS3’s的补间类创立一个横向滑动条栏菜单,一个十分棒的导航条。
最后的效果预览让我们看一看我们将要做的作品的最后的效果
http://www.webjx.com/files/media/1_100420214621.swf第一步:创立文本新建一个600*300px的FlashActionscript3.0文件起首,选择文本工具并输出你的导航菜单笔墨,在这个教程中,我用的是Button1|Button2|Button3|Button4,字体选择”AristaLight”,巨细为30点,色彩选择#999999.然落后进对齐面板(假如你看不到它的话就点击窗口>对齐),使文原形关于舞台程度中齐,垂直中齐。
第二步:画一个按钮
将以后的图层从头定名为”文本”并将其锁定,如许就不会误将其修正。然后创立一个名为”按钮”的新图层。选择矩形工具并在”button
1″的边沿外画一个矩形(恣意色彩)。这将是你菜单条中能够点击的地区。
第三步:完美按钮选中你方才画的矩形,实行修正>转化为元件,并将其定名为”按钮”。确保注册点在两头(你大概还要利用对齐面板)
然后,在属性面板中,将实在例称号命为”button1″并将alpha值设为0%。
poluoluo中心提醒:横向滑动的菜单条栏.
第四步:增加更多的按钮复制你的”有形”的按钮,并将其粘贴到别的三个按钮中,并分离将实在例称号命为”button2,button3,button4″利用恣意变形工具将它们缩小或减少,使它们恰好在菜单条的外框,且每一个之间没有距离。
第五步:画条栏(bar)仍是选择矩形工具,将矩形边角半径设为5pixels并画一个高为4pixels,宽和第一个按钮差未几的矩形。
把它放在第一个按钮的上面,点击修正>转化为元件并将其定名为bar。确保注册点在两头。
将它的实例称号命为”bar”,且和那些按钮一样alpha值为0%。将”按钮”图层锁定,并创立一个新的图层定名为”举措”也将这一层锁定。如今在你新建的举措图层上的第一帧上单击右键,并点击举措。
第六步:输出类
//为补间导进所需的类
importfl.transitions.Tween;
importfl.transitions.easing.*;
我们必要利用这些代码和补间类让条栏动起来,以是将这些导进。这个”缓动”类也是必需的,如许我们就能够明白所利用的补间举措范例。
第七步:界说变量
//为条栏的x坐标界说补间变量
varbarX:Tween;
//为条栏的淡进界说补间变量
varbarAlphaIn:Tween;
//为条栏的淡出界说补间变量
varbarAlphaOut:Tween;
//为条栏的宽界说补间变量
varbarWidth:Tween;
为补间条栏界说这些变量
第八步:增加事务监听器
//为鼠标滑进button1增加事务监听器
button1.addEventListener(MouseEvent.ROLL_OVER,rollOverHandler);
//为鼠标滑出button1增加事务监听器
button1.addEventListener(MouseEvent.ROLL_OUT,rollOutHandler);
//为鼠标滑进button2增加事务监听器
button2.addEventListener(MouseEvent.ROLL_OVER,rollOverHandler);
//为鼠标滑出button2增加事务监听器
button2.addEventListener(MouseEvent.ROLL_OUT,rollOutHandler);
//为鼠标滑进button3增加事务监听器
button3.addEventListener(MouseEvent.ROLL_OVER,rollOverHandler);
//为鼠标滑出button3加事务监听器
button3.addEventListener(MouseEvent.ROLL_OUT,rollOutHandler);
//为鼠标滑进button3增加事务监听器
button4.addEventListener(MouseEvent.ROLL_OVER,rollOverHandler);
//为鼠标滑出button4增加事务监听器
button4.addEventListener(MouseEvent.ROLL_OUT,rollOutHandler);
看起来仿佛有良多代码,可是它们的确很复杂
起首我们增加一个事务监听器,当鼠标转动到Button1的时分就实行rollOverHandler函数。然后我们增加另外一个事务监听器,当鼠标在Button1局限以外时就实行rollOutHandler函数。像如许这些监听器可感化于这四个按钮。
第九步:函数
//滑进事务的函数实行办法
functionrollOverHandler(e:MouseEvent):void
{
//将菜单条的x坐标调剂到按钮确当前地位。参数是:
//增加补间的工具(比方增加活动补间)
//增加补间的工具的属性
//缓动(举措)的范例
//初始值(比方补间入手下手时的属性值)
//开端值(比方补间停止时的属性值)
//活动补间的延续工夫durationoftween
//是用工夫(true)仍是帧(false)来丈量延续工夫
barX=newTween(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);
}
//滑失事件的函数实行办法
functionrollOutHandler(e:MouseEvent):void
{
//为条栏的通明度增加补间使它淡出
barAlphaOut=newTween(bar,“alpha”,Regular.easeOut,bar.alpha,0,1,true);
}
当鼠标在按钮之上时,将实行rollOverHandler
功效,这将使条栏从它以后的地位活动到鼠标以后所指的按钮的地位。云云以来这个条栏就会安稳程度地活动。然后,条栏的alpha值将会从以后值变到1(100%alpha),宽将从以后值变到与激发Handler功效的按钮不异的宽度。
当我们将鼠标移出按钮时,rollOutHandler功效将被实行,条栏的alpha值将会从以后值变到0(全通明)。
因为按钮之间没有漏洞,紧贴在一同,以是假如你立即将鼠标移出一切按钮地点的地区,你只会看到条栏消散了,不然它又会太快的显现出来,如许你就看不见了。
总结:
如今你应当能够失掉与教程上差未几的作品了。很棒。你已学会了怎样利用ActionScript3.0中的补间类创立无效的动画菜单,这不同凡响的菜单将更吸惹人们的眼光。
后续:为每个按钮增加一个鼠标点击监听器和实行器当我们在其上点击的时分呈现分歧的举措怎样?
但愿你会喜好这个教程,感谢浏览。
ActionScript是一种程序语言的简单文本文件.FLA档案能够直接包含ActionScript。 |
|