仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1135|回复: 8
打印 上一主题 下一主题

[学习教程] 来讲讲:Flash as进门(14):用AS完成补间动画-Flash actionscript

[复制链接]
灵魂腐蚀 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 20:52:57 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
网页设计者使用Flash创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash的前身是FutureWave公司的FutureSplash,是世界上第一个商用的二维矢量动画软件。
本例持续解说AS的基本常识,明天我们来进修FlashAS进门系列教程第七课:影片剪辑第8节用AS完成补间动画,对Flash的AS编程有乐趣的伴侣能够到论坛与作者交换。
上一篇文章:Flashas进门(13):用AS代码完成过渡
用AS完成补间动画
演示效果:

flashmx.transitions.Tween类能够完成相似补间动画的效果。要利用Tween类,起首仍是将它导进:
importmx.transitions.Tween;

然后用newTween()办法便可完成。NewTween()办法格局:
newTween(要使用补间的MC,要使用补间的MC的属性,缓动效果,属性的初始值,属性的停止值,补间的长度,补间长度的范例)

上面先容一下newTween()办法的参数。



要使用补间的MC:这个就是要使用补间的MC罗。

要使用补间的MC的属性:补间动画实践就是用必定的工夫改动工具的属性,好比位移就是改动_x或_y属性,另有别的的如_xscal、_alpha等。这里就是指这些属性的称号。

缓动效果:在上一节我们已先容了。

属性的初始值:好比要用补间的是_x属性,我们要创建工具从舞台右边移到右侧的补间动画,那末_x的初始值就应很小,好比0,10,50等,即工具在舞台右边时的_x值。

属性的停止值:补间停止时属性的值,好比工具移到舞台右侧时的_x的值。

补间的长度:能够有两种暗示体例:秒或帧,但这里只是一个数值,是用秒仍是用帧来盘算补间由前面一个参数来决意。

补间长度的范例:决意是用秒仍是用帧来盘算补间,假如为true则用秒来盘算,假如为false则用帧来盘算。

上面我们来制造我们的第一个补间动画,让一个小球从舞台的右边移到右侧:
画一个球吧,转换为MC,实例称号为:ball_mc.
翻开帧举措面板,输出以下代码:
importmx.transitions.Tween;
importmx.transitions.easing.*;//由于在用到缓动效果,以是将缓动类也导进
newTween(ball_mc,"_x",None.easeNone,20,500,3,true);
测试影片,小球将从右边(20像数处)移到右侧(500像素处),用时3秒。
下面这个效果没有效缓动效果,我们回想一下上一节先容的缓动效果,仿佛有一个叫Regular的缓动类,它将完成减慢的效果,我们给它挪用easeIn办法,即在补间入手下手时减慢,如许是否是就完成了从慢到快的效果呢?将代码改成上面的:
importmx.transitions.Tween;
importmx.transitions.easing.*;
newTween(ball_mc,"_x",Regular.easeIn,20,500,40,false);
测试影片,我们看到小球由慢到快从右边移到右侧。在这段代码中,改动了三个参数,一个是缓动效果,一个是补间长度用了40,再一个就长度范例用了false,如许这个补间长度不再是3秒,而是40帧。


onMotionFinished事务:Tween类的onMotionFinished事务在补间动画完成时挪用。在前面来实习它的用法。
continueTo()办法:持续实行补间动画,它以原补间动画属性的停止值作为入手下手值。这个办法从头指定停止值和补间长度。也就是说在原补间动画的停止点上从头入手下手新的动画。
使用下面的事务和办法可以使动画往复活动。
将代码改成上面的:
importmx.transitions.Tween;
importmx.transitions.easing.*;
vaemytween:Tween=newTween(ball_mc,"_alpha",Nonse.easeNonse,0,100,3,true);
mytween.onMotionFinished=function(){
mytween.continueTo(0,3)
}
测试影片,你会看到小球淡进然后又淡出的历程。
这段代码,我们做通明度的补间动画,使通明度用3秒工夫从0变成100,当补间停止时,挪用onMotionFinished事务代码,用continueTo(0,3)办法又用3秒工夫将通明度由100(方才补间的停止值)变成0。由于要挪用Tween的事务和办法,以是我们声了然一个Tween类mytween,这一点也与下面的代码纷歧样。
yoyo()办法:
下面的代码固然完成了,通明度由0到100,然后又从100回到0的动画,但回到0后,动画就中断了。我们经常必要一直的往复活动,好比闪灼的星星,跳动的心脏等。那末Tween类为我们供应了yoyo()办法,这个办法在补间停止时,将初始值变成停止值,将停止值变成初始值,再次举行补间,云云往复永一直止。
记得一个红星跳动的心情吗?我们如今来制造它:
画一个红星,转换为MC,实例称号为:hx_mc.
帧举措代码:
importmx.transitions.Tween;
importmx.transitions.easing.*;
varmytween:Tween=newTween(hx_mc,"_xscale",Nonse.easeNonse,80,100,0.5,true);
mytween.onMotionFinished=function(){
mytween.yoyo()
}
测试影片,我们看到了一个跳动的红星。看到这个效果,我俄然发明,假如把红星换成一只胡蝶,那不就让胡蝶飞起来了吗?
这个例子使用补间的属性是_xscale.


上面我们来制用一个弹性菜单的实习,完本钱节下面的动画:
起首来做弹性菜单,做4个MC,对照复杂,画一个黄色的矩形,假如你乐意,固然能够用别的色彩,在矩形下面放一个静态文本,内容分离是:“减速转动的球”,“闪灼的星”,“跳动的红心”,“飞动的胡蝶”。
有两点要注重:
1.将字打散(两次),由于文本框在缩小时会坚持长宽比例,而我们弹出菜单时只必要改动高度,以是必需将文本打散。
2.由于菜单是向下弹开(增添高度),因而,元件必需上对齐。即上边与十字对齐。
3.矩形的高度为20,假如你的高度不是20,那末上面的代码就要作响应改动。
4个元件做好后,将它们拖到舞台上,放好。实例称号为:cd1,cd2,cd3,cd4
然后翻开帧举措面板,输出以下代码:
importmx.transitions.Tween;
importmx.transitions.easing.*;
varcdtween:Tween;
functiontc(cd){
cdtween=newTween(cd,"_height",Bounce.easeOut,20,60,2,true);
}
cd1.onRollOver=function(){
tc(this);
}
cd1.onRollOut=function(){
cdtween.continueTo(20,1);
}
cd2.onRollOver=function(){
tc(this);
}
cd2.onRollOut=function(){
cdtween.continueTo(20,1);
}
cd3.onRollOver=function(){
tc(this);
}
cd3.onRollOut=function(){
cdtween.continueTo(20,1);
}
cd4.onRollOver=function(){
tc(this);
}
cd4.onRollOut=function(){
cdtween.continueTo(20,1);
}
测试影片,一个弹性菜单就做好了。
之前我们说过,假如要屡次利用的代码,最好做成函数,弹出菜单的代码在4个菜单项上都要挪用,以是我们将它做成函数tc.这个函数,用Tween类使菜单MC,的高度在2秒内由20酿成60,到达弹出的效果,缓动则菜用了Bounce.easeOut,在菜单睁开后发生一个弹跳的效果。在函数外声明Tween工具:varcdtween:Tween;是为了在鼠标移出菜单时可以挪用它。


接上去的代码是,在鼠标挪动菜单上时,挪用tc使菜单弹出。在鼠标移出菜单时,挪用Tween类的continueTo()办法,使菜单发出往。
接上去用下面先容的内容,做4个MC,分离是,一个减速活动的小球,一个闪灼的星,一个跳动的红心,一个飞动的胡蝶。在库中点右键,翻开毗连面板,为这4个MC取标识名:ballmc(小球),xingmc(星),hxmc(红心),hdmc(胡蝶)。
回到主场景,翻开帧举措面板,接着下面的代码,在每一个菜单项上,增加点击加载响应mc的命令。
cd1.onRelease=function(){
attachMovie("ballmc","ball_mc",1)
ball_mc._y=200;
}
cd2.onRelease=function(){
attachMovie("hxmc","hx_mc",1)
hx_mc._y=200;
hx_mc._x=260;
}
cd3.onRelease=function(){
attachMovie("xingmc","xing_mc",1)
xing_mc._x=260;
xing_mc._y=200;
}
cd4.onRelease=function(){
attachMovie("hdmc","hd_mc",1)
hd_mc._x=260;
hd_mc._y=200;
}
OK,尝尝吧。

与gif和jpg不同,用flash制作出来的动化是矢量的,不管怎样放大、缩小,它还是清晰可见。
小妖女 该用户已被删除
沙发
发表于 2015-1-17 14:52:14 | 只看该作者
alpha通道,图像的一部分可以变成透明,透明度可以从完全不透明到完全不可见。Alpha通道支持没有副作用。
深爱那片海 该用户已被删除
板凳
发表于 2015-1-26 17:24:26 | 只看该作者
不能设置“alt”属性,失去了一次被搜说引擎检索到的机会。
若天明 该用户已被删除
地板
发表于 2015-2-4 21:40:48 | 只看该作者
alpha通道,图像的一部分可以变成透明,透明度可以从完全不透明到完全不可见。Alpha通道支持没有副作用。
愤怒的大鸟 该用户已被删除
5#
发表于 2015-2-10 21:29:52 | 只看该作者
在网络营销中所提供的利益。如果我们仔细看看国内外的专业网站,很少看到应用FLASH格式的广告,如网络上的知名网站。相信它们并不缺乏FLASH图片的制作力量。
谁可相欹 该用户已被删除
6#
发表于 2015-3-1 16:59:33 | 只看该作者
假设一个Web设计者需要让一页上的不同元素之间相互作用。如果其中的一些元素出现在Box内,而另一些在Box之外,那么设计者就很不幸。
兰色精灵 该用户已被删除
7#
发表于 2015-3-10 23:33:36 | 只看该作者
在网络营销中所提供的利益。如果我们仔细看看国内外的专业网站,很少看到应用FLASH格式的广告,如网络上的知名网站。相信它们并不缺乏FLASH图片的制作力量。
爱飞 该用户已被删除
8#
发表于 2015-3-17 17:08:34 | 只看该作者
缺点方面~有些技术不能实现,不过FLASH技术在发展在进步,相信在以后FLASH可以取代,大部分的视频编辑软件,视频制作软件。
莫相离 该用户已被删除
9#
发表于 2015-3-24 19:35:44 | 只看该作者
flash制作的动画文件比较小,可以在网络上快速传播!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-22 23:20

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表