通过实例学习as3.docx
- 文档编号:7220626
- 上传时间:2023-01-22
- 格式:DOCX
- 页数:21
- 大小:22.92KB
通过实例学习as3.docx
《通过实例学习as3.docx》由会员分享,可在线阅读,更多相关《通过实例学习as3.docx(21页珍藏版)》请在冰豆网上搜索。
通过实例学习as3
案例1:
熟悉新的事件机制和addChild的运用
网页教学网
说明:
拖动小人到滑板上,然后拖动滑板,可以发现小人已经跟滑板粘在了一起。
演示:
http:
//www.live-my-life-with-
网页教学网
代码:
Webjx.Com
boarder_mc.addEventListener(MouseEvent.MOUSE_DOWN,drag);
boarder_mc.addEventListener(MouseEvent.MOUSE_UP,drop);
red_mc.addEventListener(MouseEvent.MOUSE_DOWN,drag);
red_mc.addEventListener(MouseEvent.MOUSE_UP,drop);
blue_mc.addEventListener(MouseEvent.MOUSE_DOWN,drag);
blue_mc.addEventListener(MouseEvent.MOUSE_UP,drop);
网页教学网
AS3采用了新的监听机制,而且注意到对每个mc的鼠标按下弹起都使用了相同的函数,这就需要在函数里判断事件的发生者,从而做出相应的处理。
Webjx.Com
functiondrag(event:
MouseEvent):
void
{
if(event.target.name=="boarder_mc")
{
addChild(boarder_mc);
event.target.startDrag(true);
boarder_mc.x=mouseX;
boarder_mc.y=mouseY;
}
else
{
event.target.startDrag();
}
}
通过event.target.name来取得事件发生的对象名,AS3里没有了root,addChild相当于把某个mc搬到了舞台上,其实是TimeLine0.addChild(mc),同时保证该mc是在舞台的最顶层(AS3里没有了深度管理)。
通过event.target来获取事件发生的对象网页教学网
接着来看drop函数Webjx.Com
functiondrop(event:
MouseEvent):
void
{
event.target.stopDrag();
if(boarder_mc.hitTestObject(red_mc))
{
red_mc.addChild(boarder_mc);
boarder_mc.x=0;
boarder_mc.y=0;
}
elseif(boarder_mc.hitTestObject(blue_mc))
{
blue_mc.addChild(boarder_mc);
boarder_mc.x=0;
boarder_mc.y=0;
}
}
网页教学网
当鼠标弹起时,啥也不管,先停止拖动,如果小人和滑板有重合区域,则将小人放到滑板里,滑板就像一个container,boarder_mc成了red_mc的child,将boarder_mc的x坐标和y坐标清零是为了将小人放到滑板的正确位置。
如果小人已经成为了滑板的child,那么再次拖动滑板时,由于又执行了一次addChild(boarder_mc);所以滑板的父类又变成了舞台。
Webjx.Com
整个案例1的分析到此结束,涉及的知识点不多,主要是熟悉一下AS3的语法。
网页教学网
本文来自:
网页教学网()原文链接:
案例2:
熟悉addChild和removeChild在不同的swf之间的运用,以及loader的用法
网页教学网
说明:
点击picture会载入另一个swf,点击载入的swf上的一个按钮,该swf消失。
演示:
http:
//www.live-my-life-with-
代码:
swfA(也就是按钮所在的flash)
varloader:
Loader=newLoader();
loader.load(newURLRequest("Popup.swf"));
picture_btn.addEventListener(MouseEvent.CLICK,showPicture);
functionshowPicture(event:
MouseEvent):
void
{
addChild(loader);
}
网页教学网
AS3里用loader代替了loadMovie,load的时候不能直接添加路径名,需要通过URLRequest来载入。
网页教学网
整段代码都很简单,首先载入Popup.swf,然后给监听按钮的click事件定义一个showPicture函数,这个函数的功能很简单,通过addChild把刚刚载入的swf放到舞台上。
网页教学网
swfB(载入的flash->Popup.swf)
close_btn.addEventListener(MouseEvent.CLICK,closeWindow);
functioncloseWindow(event:
MouseEvent):
void
{
this.parent.parent.removeChild(this.parent);
}
很简洁,监听close按钮的click事件,事件触发时调用closeWindow函数,这里用到了parent,简单分析一下,由于这个swf已经被载入到另一个swf里,所以this.parent应该指代的是loader,而this.parent.parent则指代的是TimeLine0,也就是舞台。
所以这句话也就比较好理解了:
从舞台上卸下载入该swf的loader。
案例2分析到此结束。
Webjx.Com
源文件下载
案例3:
熟悉tween以及tweenEvent的运用
说明:
点击标签载入特定的图片说明(其实是一个mc,只是坐标不同),同时还有渐隐渐现效果,没做loading,可能载入会有点慢。
演示:
http:
//www.live-my-life-with-
代码:
网页教学网
初始化,给一些变量赋值
importfl.transitions.Tween;
importfl.transitions.easing.*;
importfl.transitions.TweenEvent;
varhomeX:
Number=-301;
varhomeY:
Number=110;
varnewsX:
Number=-17;
varnewsY:
Number=-777;
varaboutX:
Number=-1354;
varaboutY:
Number=-445;
varxTween:
Tween;
varyTween:
Tween;
varinTween:
Tween;
varoutTween:
Tween;
先是导入一些需要用到的类,然后定义几个坐标,这几个坐标都是一个大mc的不同位置。
然后是初始化tween类,并对tween类监听。
xTween=newTween(main_mc,"x",Strong.easeInOut,main_mc.x,homeX,2,true);
yTween=newTween(main_mc,"y",Strong.easeInOut,main_mc.y,homeY,2,true);
inTween=newTween(main_mc.home_mc,"alpha",None.easeNone,0,1,.5,true);
outTween=newTween(main_mc.home_mc,"alpha",None.easeNone,1,0,.5,true);
xTween.addEventListener(TweenEvent.MOTION_FINISH,fadeIn);
xTween.addEventListener(TweenEvent.MOTION_START,fadeOut);
home_btn.addEventListener(MouseEvent.CLICK,navigate);
news_btn.addEventListener(MouseEvent.CLICK,navigate);
about_btn.addEventListener(MouseEvent.CLICK,navigate);
实例化xTween,yTween后并不会马上就运行,如果在之后的代码发现了stop动作的话。
这些参数跟AS2并没有多大差别。
xTween和yTween是实现mc的缓动效果,inTween和outTween是实现渐隐渐现效果的。
这里只监听xTween而没有监听yTween,因为这两个是同时进行的所以监听一个就行了。
最后是对3个按钮的click监听。
接下来就是最关键的上面提到的几个函数网页教学网
functionnavigate(event:
MouseEvent):
void
{
if(event.target==home_btn)
{
setTween(homeX,homeY,main_mc.home_mc);
}
elseif(event.target==news_btn)
{
setTween(newsX,newsY,main_mc.news_mc);
}
else
{
setTween(aboutX,aboutY,main_mc.about_mc);
}
}
functionsetTween(tweenX:
Number,tweenY:
Number,tweenMC:
MovieClip):
void
{
xTween.begin=main_mc.x;
yTween.begin=main_mc.y;
xTween.finish=tweenX;
yTween.finish=tweenY;
tweenMC.alpha=0;
inTween.obj=tweenMC;
xTween.start();
网页教学网
yTween.start();
}
functionfadeIn(event:
TweenEvent):
void
{
inTween.start();
outTween.obj=inTween.obj;
}
functionfadeOut(event:
TweenEvent):
void
{
outTween.start();
}
先来看看navigate函数,这是被3个按钮共同调用的函数,通过判断不同的target.name设置不同的setTween。
再来看看setTween,参数tweenX和tweenY是目标坐标,tweenMC是目标mc,通过设置begin,finish,obj参数来改变xTween和yTween的初始坐标,目标坐标,作用对象,最后调用start函数开始运动。
fadeIn函数的作用是使inTween开始,并且将inTween作用的对象赋予outTween,这样outTween被调用的时候就能作用在正确的mc上了。
源文件下载
案例4:
熟悉xml的运用
说明:
一个简单的相册,先载入xml,然后载入xml列表里的images缩略图,点击缩略图出现大图以及大图的说明。
这个案例较前面几个复杂了一些,不过如果熟悉了AS3的语法,还是比较容易理解的。
Webjx.Com
演示:
http:
//www.live-my-life-with-
代码:
importfl.transitions.Tween;
importfl.transitions.easing.*;
varimageText:
TextField=newTextField();
varfadeTween:
Tween;
varimageLoader:
Loader;
varxml:
XML;
varxmlList:
XMLList;
varxmlLoader:
URLLoader=newURLLoader();
xmlLoader.load(newURLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE,xmlLoaded);
网页教学网
跟之前的一样,先导入几个包,这是为了实现图片的渐入渐出效果。
然后是定义几个变量,这里xmlList可能比较陌生,这个变量的作用主要是获得xml的child列表,下面具体运用的时候,它的作用就一目了然了。
通过URLLoader载入xml,然后监听xml,一旦载入完成,就触发xmlLoaded函数。
Webjx.Com
functionxmlLoaded(event:
Event):
void
{
xml=XML(event.target.data);
xmlList=xml.children();
for(vari:
int=0;i { imageLoader=newLoader(); imageLoader.load(newURLRequest(xmlList[i].attribute("thumb"))); imageLoader.x=25; imageLoader.y=i*150+25; imageLoader.name=xmlList[i].attribute("source"); addChild(imageLoader); imageLoader.addEventListener(MouseEvent.CLICK,showPicture); } } 这里有一些地方需要注意,比如第一句Webjx.Com xml=XML(event.target.data); 网页教学网 如果直接 网页教学网 xml=event.target.data Webjx.Com 会报错,因为两个变量的类型不一样。 这里可以看到xmlList,它是取得xml的children,对于使用xml非常方便。 然后实例化imageLoader,并载入xmlList里定义的缩略图,注意这里的写法。 调整一下坐标,并给imageLoader添加了一个name属性,这个属性的值就是xml文件里的图片地址,这有利于下面的showPicture函数。 然后将缩略图放到舞台上,并监听它的鼠标点击事件。 网页教学网 functionshowPicture(event: MouseEvent): void { imageLoader=newLoader(); imageLoader.load(newURLRequest(event.target.name)); imageLoader.x=200; imageLoader.y=25; addChild(imageLoader); imageText.x=imageLoader.x; imageText.y=351; for(varj: int=0;j { if(xmlList[j].attribute("source")==event.target.name) { imageText.text=xmlList[j]; } } fadeTween=newTween(imageLoader,"alpha",None.easeNone,0,1,1,true);网页教学网 } imageText.autoSize=TextFieldAutoSize.LEFT; addChild(imageText); 这个点击后显示大图的函数,由于前面已经给name属性添加了图片地址,所以这里直接拿来用就可以了。 大图载入后分配一下坐标,添加到舞台上,接下来就该显示图片的说明了。 这里的做法是循环xmlList,然后比较xml里source是否与这里的name相等,是的话,将该xml的值赋予imageText,不过显然有更简单的做法,就是在上面的xmlLoaded函数中为imageLoader添加一个text属性,然后在showPicture里直接拿来用就可以了。 然后给图片来一个渐入效果,这个之前已经讲过了。 最后两行是定义imageText的对齐方式,这里是左对齐,然后放到舞台上。 整个案例到此结束。 Webjx.Com 源文件下载 案例5: 熟悉AS3的package,以及多个package之间的相互通信网页教学网 说明: 一个很简单的demo,有4个按钮,当鼠标划过和移开时会呈现出不同的状态,单击后变成disabled,再点击其他的按钮时,之前disabled的按钮恢复,被点击的按钮失效。 演示: http: //www.live-my-life-with- 准备工作: 打开源文件communicating_final.fla,点击属性里的发布设置,点击Actionscript3旁边的设置,在最下面的classpath里,引入classes的文件夹的路径,然后点击确定,前期工作就准备完了。 Webjx.Com 代码: Webjx.Com 源文件里的代码很简单: Webjx.Com importtodd.interactive.ButtonSet; varbuttons: ButtonSet=newButtonSet(); buttons.addButtons([one_mc,two_mc,three_mc,four_mc]); addChild(buttons); Webjx.Com 导入ButtonSet类,实例化,然后调用里面的一个方法,最后将它放到舞台上。 Webjx.Com classes文件夹下面的todd->interactive文件夹里有两个as文件,其中一个就是刚刚调用的ButtonSet,来看看ButtonSet的源码: 网页教学网 packagetodd.interactive { //其实只需载入display和events就可以了,不过多载入几个并不影响文件大小和效率 importflash.display.*; importflash.events.*; importflash.filters.*; import.*; importflash.geom.*; importflash.ui.*; importflash.utils.*; importfl.transitions.*; importfl.transitions.easing.*; publicclassButtonSetextendsMovieClip { publicvarbuttons: Array; publicfunctionButtonSet() { } publicfunctionaddButtons(buttonSet: Array): void { buttons=buttonSet; for(vari: int=0;i { addChild(buttons[i]); } } } } 网页教学网 一个类应该被放在一个package里面,就像钱应该被放到钱包里一样。 package后面定义的是该类的路径。 然后一系列常用的类。 定义了一个全局变量buttons,在变量前面加一个public就可以了。 这样就能在整个类中被访问到。 类名应该和文件名一样(区分大小写),然后定义一个同名函数,这个函数会在类被初始化时调用,就像php4的类一样。 这里只是搭了个架子,没有具体内容。 然后定义了一个函数addButtons,它的作用就是将一些mc或者sprites放到自己的container里(addChild)。 还有一个类: DisablingButton,也是位于todd->interactive文件夹下,这也是这个案例的核心。 对了,之前已经将RectButton的linkage里的baseClass设置为todd.interactive.DisablingButton。 代码稍微有点长,且听我细细道来 网页教学网 packagetodd.interactive{ importflash.display.*; importflash.events.*; importtodd.interactive.ButtonSet; publicclassDisablingButtonextendsMovieClip{ varlabels: Array; varthisParent: *; varthisIndex: int; publicfunctionDisablingButton(){ labels=this.currentLabels; this.addEventListener(MouseEvent.CLICK,disableButton); this.addEventListener(MouseEvent.ROLL_OVER,over); this.addEventListener(MouseEvent.ROLL_OUT,out); 网页教学网 this.addEventListener(Event.ADDED,setParent); } functiondisableButton(event: MouseEvent): void{ for(vari: int=0;i if(labels[i].name=="disable"){ this.gotoAndPlay("disable"); } } this.removeEventListener(MouseEvent.CLICK,disableButton); this.removeEventListener(MouseEvent.ROLL_OVE
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 通过 实例 学习 as3