AS3实例教程一——下雪效果[原创][本文已收录教程库]
AS3.0入门练习-下雪效果与AS2.0相比较,AS3.0有了很大的变化,它改变了我们以往的编程习惯。今天我们通过一个非常简单的入门练习-下雪效果,来认识一下AS3.0,主要了解一下AS3.0与AS2.0的区别。
首先,我们来介绍一下AS3的一些基础知识。
[b] 在AS3中怎样把库中的元件加载舞台
[/b] 我们知道在AS2中我们可以通过attachMovie将库中的mc加载到舞台上。在使用这个命令前我们必须要做的事情是在库中右击元件,打开连接面板,然后在标识符框中为元件取上一个连接名,这样才能用attachMovie()来加载它。现在我们在AS3中来做一下,在库中右击元件,打开连接面板,这时你会叫道:“为什么我的标识符框是灰色的,不能用。”不是你的是灰色的,而是在AS3中都是灰色的,因为在AS3中是不能用attachMovie()来加载元件的。AS3据说是完全面向对象编程的语言了,这就必须要了解类,对象等概念。类就是一类东西的一个名称,比如动物类就包括了所有动物,动物类下面的所有人就是人类了。又如所有电器可叫电器类,电器类下面又可有电视机类等。对象是某类的一个具体的实例。比如你就是人类中的一个具体的人,你就是人类的一个对象。看到这里你说:“我晕”,我说:“我更晕”。介绍类,对象这些概念看的人不容易看懂,说的人更不容易说清。在AS3中要加载一个显式对象(我们在舞台上看得见的东西),必须要载入一个类,然后要声明这个类的一个实例,再用new关键字创建它,最后用addChild()将它加载到舞台。我们将舞台着是一个展台,将库看着是一个仓库,现在仓库中有一台电视机要放到展台上,该怎样做呢?首先需要一个电视机类,然后需要声明一个实例:
var 电视机甲(实例名):电视机(类名)= new 电视机();
addChild(电视机甲);
现在我们回到flash中来看看,现在库中有一个元件,我们要将它加载到舞台上,应该这样做:
在库中右击该元件,打开连接面板,我们会看到一个叫类的文本框,在这里给这个类取一个名字,比如myl.确定。这样我们就加载了一个叫myl的类了。接下来,在场景的帧动作中,输入:
var mymc:myl = new myl();
addChild(mymc);
mymc.x = 100;
mymc.y = 100;
测试影片,我们会看到,库中的这个元件已被加载到舞台的(100,100)坐标处了。
[b]AS3的事件侦听机制
[/b] 什么是事件呢?当某件事情发生的时候就做些什么事。这个某件事情就是事件。比如:press,当鼠标按下的时候,这就是一个事件。在AS2中,我们有两种方式来实现事件驱动。一种是将代码直接写在元件上(mc或按钮)。比如,在场景中有一个叫mymc的影片剪辑元件,我们在其上点右键,打开动作面板,输入:
on(press){
干点坏事;
}
这样,当我们在mymc元件上按下鼠标时,就会去干点坏事。第二种方法是在帧动作上输入代码:
mymc.onPress = function(){
干点坏事;
}
这样,当我们在mymc元件上按下鼠标时,同样会去干点坏事。
接下来,我们在AS3中来看看:在元件上点右键,打开动作面板,你会看到“无法将动作应用于当前所选内容”。哦嗬,搞不成。在AS3中无法将代码写在元件上,只能写在帧动作上。而AS3的事件侦听,也有它自已,的格式,不管你乐意不乐意,你都必须这样做。AS3在事件侦听格式是:
function 函数名称(事件对象:事件类型):void
{
// 此处是为响应事件而执行的动作。
}
触发事件的对象.addEventListener(事件类型.事件名称, 函数名称);
必须先声明一个函数,将要执行的代码放在其中,然后触发事件的对象用addEventListener去侦听事件,如果事件发生则调用函数。还用上面那个干坏事的例子。打开帧动作面板,输入:
function 干坏事(event:MouseEvent):void {
干点坏事;
}
mymc.addEventListener(MouseEvent.CLICK,干坏事);
这样,当我们在mymc元件上按下鼠标时,会再一次去干点坏事。上面代码中的MouseEvent是鼠标事件的意思,CLICK是单击的意思,即在元件上单击就会触发事件。
[b]在AS3中改变对象的位置和缩放对象
[/b] 我们知道,对象在舞台上位置由其x,y轴的坐标来决定。在AS2中有两个属性:_x,和_y,用来指定对象的x,y坐标,这一点在AS3中也是一样的,只是AS3中去掉了下划线,属性名就叫x,y.比如,在AS2中,要将mymc的位置定在(100,100)处,要这样:
mymc._x = 100;
mymc._y = 100;
而在AS3中是这样的:
mymc.x = 100;
mymc.y = 100;
在AS2中对象的大小可以用width,height,_xscale,_yscale四个属性来确定,在AS3中width和height是一样的,不再说它了。AS3用scaleX和scaleY属性取代了_xscale,_yscale属性。同时它们的值也是有区别的。AS2中的,_xscale,_yscale属性值是百分比。而AS3中的scaleX和scaleY值是一分比。一分比?这是我发明的,博士专用名词,嘿嘿。scaleX和scaleY值实际就是放大缩小的倍数。比如,在AS2中 mymc._xscale = 30; 这是将mymc的宽度缩小到原来的30%。
在AS3中 mymc.scalex = 30; 这是将mymc的宽度放大到原来的30倍。要将宽度缩小到30%,就要用
mymc.scale = 0.3;
好了,基础知识就介绍这么多,本文就当是AS3的入门教程吧,介绍的就几个入门知识。
[b]实例练习-下雪效果[/b]
下面我们就来做一个下雪效果的练习,将上面的知识点运用到实例中。
效果:
[swf]http://bbs.jcwcn.com/attachment.php?aid=861401&k=7037cc00d6f79c0e1a9cecee4bfa789b&t=1214356310[/swf]
[attach]861401[/attach]
打开flash cs3,选择新建flash文件(ActionScript 3.0).
导入一张背景图片,在场景中放好。
新建一个影片剪辑元件,将舞台放大到800%,用椭园工具,画一个无笔触,填充色为放射将白色左色标透明度为100%,右色标透明度0%的椭园,大小这4x3,用选择工具调整一下,使其不太规则。在第30帧插入关键帧。插入引导层,画一条由上向下的弯曲引导线。回到第一层,在第一帧和30帧,分别将椭园放到引导线的两端,建立补间动画。
如图:
[attach]861398[/attach] [attach]861399[/attach]
(800%时)
打开库,在元件上右击,打开连接面板,在类文本框中输入:xl,确定。
[attach]861400[/attach]
回到主场景,新插入一图层,命名为action,打开动作面板:输入:
var i:Number = 1;
addEventListener(Event.ENTER_FRAME,xx);
function xx(event:Event):void {
var x_mc:xl = new xl();
addChild(x_mc);
x_mc.x = Math.random()*550;
x_mc.scaleX = 0.2 + Math.random();
x_mc.scaleY = 0.2 + Math.random();
i++;
if(i>100){
this.removeChildAt(1);
i=100;
}
}
ok,完成。
上面的代码,在基础介绍中都已说明了,应该一看就明白了。有几句解释一下。
x_mc.scaleX = 0.2 + Math.random();
x_mc.scaleY = 0.2 + Math.random();
0.2 + Math.random();会产生0.2-1.2间的随机数,这就让雪花缩小到20%到放大到120%间,落下来的雪花,大小不一,显得更加真实一些。
removeChildAt(n);是删除已加载的显式对象,其中的n是已加载的对象的索引号。从addEventListener(Event.ENTER_FRAME,xx);这一句可以看出,运行一帧,就会从库中加载一个雪花,同时i加,这样当i等于100时,场景中就已有100个雪花了。这个时候我们用this.removeChildAt(1);将最先加载的雪花删除。然后将i设为100,到下一帧,i就又大于100了,那么要加载1个雪花,同时又删除了一个雪花,这就达到了一个动态平衡,场景中始终只有100个雪花。要不然,就会雪越下越多,造成雪灾就不好了。
[[i] 本帖最后由 sanbos 于 2009-3-4 22:56 编辑 [/i]] var x_mc:xl = new xl();
**错误** 符号=雪花, 图层=图层 1, 帧=1:第 1 行: 无法加载类或接口'xl'
ActionScript 错误总数:3 报错:3
为什么显示错误,我不懂啊 请博士指教jc:shout jc:shout
回复 沙发 逍遥兔 的帖子
你在元件的连接面板中为类命名了吗?你新建的是不是AS3文档呢?请教
在flash 8.0中不能用AS3.0?,如果能用应怎么办? Flash 8.0是不能用AS3.0的代码.只有CS3版本才能向下兼容回复 板凳 sanbos 的帖子
博士我命名了,我的是flash8能用吗?回复 6楼 逍遥兔 的帖子
在flash8中不能用,必须要flashcs3及以上版本.回复 7楼 sanbos 的帖子
晕,请问现在最新的版本是哪个?jc:yiwen jc:yiwen jc:yiwen
回复 8楼 逍遥兔 的帖子
应该是flash10吧,cs3是flash9. 这教程写的很详细啊!回复 楼主 sanbos 的帖子
真诚感谢朋友.前几天刚换的F9.因为代码的事我还想换F8.很高兴认识朋友.你发的教程我学会了..辛苦请朋友多发些F9代码教程.请问朋友F9按扭怎么做??就是能点击的按扭.原来F8中用的代码.能改成在F9中用吗?回复 11楼 伊人彩虹 的帖子
请参考该帖:[url]http://bbs.jcwcn.com/viewthread.php?tid=154165&highlight=%2Bsanbos[/url]AS下雪效果作业
[i=s] 本帖最后由 zctmh0336 于 2009-5-7 17:47 编辑 [/i]作业
[swf]http://bbs.jcwcn.com/attachments/month_0809/20080904_166ad708d2a2b39a8facDtrcIfVbpPjH.swf[/swf]
[[i] 本帖最后由 sanbos 于 2008-11-19 09:43 编辑 [/i]] 楼上朋友的作品,支持练习。
[swf]http://bbs.jcwcn.com/attachment.php?aid=918243&k=42ac9b69cf2a88585e0fa2e7c1d0dbac&t=1220540153[/swf] [quote]原帖由 [i]sanbos[/i] 于 2008-9-4 15:10 发表 [url=http://bbs.jcwcn.com/redirect.php?goto=findpost&pid=4417972&ptid=189796][img]http://bbs.jcwcn.com/images/common/back.gif[/img][/url]
请参考该帖:[url]http://bbs.jcwcn.com/viewthread.php?tid=154165&highlight=%2Bsanbos[/url] [/quote]
谢谢朋友我学不会。能用实例讲解?? [quote]原帖由 [i]伊人彩虹[/i] 于 2008-9-12 14:08 发表 [url=http://bbs.jcwcn.com/redirect.php?goto=findpost&pid=4451170&ptid=189796][img]http://bbs.jcwcn.com/images/common/back.gif[/img][/url][/quote]
[color=green][b][size=5][font=楷体_GB2312]谢谢朋友我学不会,能用实例讲解?? 就像这个教程样,图方并用
我很想学模糊遮罩和按扭,还有下雨.这三个F9教程.请朋友发个图文并茂.就像下雪这教程.或是视频录像.jc:cnheart [/font][/size][/b][/color] 模糊遮罩AS2和AS3是完全一样的.下雨和本文也完全一样,只将雪花元件换成雨滴就行了.按钮我推荐的帖子及本文应该说很祥细了.
请教
jc:yun 博士你能不能帮帮我啊我做的雪怎么老师出错啊!回复 18楼 小坏蛋 的帖子
你要具体说明是什么问题我才好帮你啊。 脚本我就是学不会,不知道该怎么办``jc:weep这贴子的动画效果今天不知道为什么看不到,下载看也看不了,不知道为什么
[swf]http://bbs.jcwcn.com/attachments/month_0810/20081021_479dc01c46fbf814bddcPP6J2hbFoSiQ.swf[/swf]
这两个我也不知道像不像,请老师指点下,谢谢老师
[swf]http://bbs.jcwcn.com/attachments/month_0810/20081021_e850762443c59abeb8e8IGDSeQBVZT2E.swf[/swf]
[[i] 本帖最后由 sanbos 于 2008-11-19 09:40 编辑 [/i]]
交作业
我来交作业了. 21楼朋友的作业[swf]http://bbs.jcwcn.com/attachments/month_0811/20081118_abf24a53abb0508c8a0etZLODDWwqn06.swf[/swf] 我的雪花就是出不来怎怎么办呢!
连接是这样的[attach]987242[/attach][attach]987243[/attach]
回复 23楼 十兄 的帖子
这是AS3的代码,从截图上看,你用的是AS2,因为在AS3中标识符是不可用的. 感谢老师指导[swf]http://bbs.jcwcn.com/attachments/month_0811/20081119_5fbd03db9e08015572a4y93NcE7Ck9Bb.swf[/swf]
[[i] 本帖最后由 zctmh0336 于 2008-11-19 14:47 编辑 [/i]]
AS3下雪效果
AS3下雪效果[[i] 本帖最后由 sanbos 于 2008-12-7 17:48 编辑 [/i]]
AS3下雪效果2
[attach]1007024[/attach]版主:我在图片层添加文字,印章后,为什么只显示一会就没了?怎么解决?
[[i] 本帖最后由 zhang1918 于 2008-12-6 22:17 编辑 [/i]]
26楼的作业
[swf]http://bbs.jcwcn.com/attachments/month_0812/20081206_0f5fda5d2cf9d9f1c6bf25qoPubwQoaJ.swf[/swf]回复 27楼 zhang1918 的帖子
打开你的类文件,在xx函数中有这样一句:this.removeChildAt(1);改为:this.removeChildAt(numChildren-1); 谢谢版主指教[attach]1009367[/attach]