通过实例学习AS3.0--转自N神

通过实例学习AS3.0

Posted by greenidea on 周六, 01/26/2008 - 08:39 in

• AS3

 

作者：lzyy　文档类型：翻译　来自：蓝色理想

案例1：熟悉新的事件机制和addChild的运用

说明：拖动小人到滑板上，然后拖动滑板，可以发现小人已经跟滑板粘在了一起。
演示：
http://www.live-my-life-with-yuyi.com/as3_cases/changing_parents/

代码：

 

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的鼠标按下弹起都使用了相同的函数，这就需要在函数里判断事件的发生者，从而做出相应的处理。

 

function drag(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函数

 

function drop(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;
    }
    else if(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);所以滑板的父类又变成了舞台。

整个案例1的分析到此结束，涉及的知识点不多，主要是熟悉一下AS3的语法。

下载源代码

• 要发表评论，请先登录 或 注册

案例2：熟悉addChild和re

 

案例2：熟悉addChild和removeChild在不同的swf之间的运用，以及loader的用法

说明：点击picture会载入另一个swf，点击载入的swf上的一个按钮，该swf消失。

演示：http://www.live-my-life-with-yuyi.com/as3_cases/different_movies/

代码：

swfA（也就是按钮所在的flash）

 

var loader:Loader = new Loader();
loader.load(new URLRequest("Popup.swf"));
picture_btn.addEventListener(MouseEvent.CLICK, showPicture);
function showPicture(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);
function closeWindow(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分析到此结束。

源文件下载

Posted by greenidea on 周六, 01/26/2008 - 08:46

• 要发表评论，请先登录 或 注册

案例3：熟悉tween以及tw

 

案例3：熟悉tween以及tweenEvent的运用

说明：点击标签载入特定的图片说明（其实是一个mc，只是坐标不同），同时还有渐隐渐现效果，没做loading，可能载入会有点慢。

演示：
http://www.live-my-life-with-yuyi.com/as3_cases/dynamic_with_events/

代码：

初始化，给一些变量赋值

 

mport fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
var homeX:Number = -301;
var homeY:Number = 110;
var newsX:Number = -17;
var newsY:Number = -777;
var aboutX:Number = -1354;
var aboutY:Number = -445;
var xTween:Tween;
var yTween:Tween;
var inTween:Tween;
var outTween:Tween;

 

先是导入一些需要用到的类，然后定义几个坐标，这几个坐标都是一个大mc的不同位置。

然后是初始化tween类，并对tween类监听。

 

xTween = new Tween(main_mc,"x",Strong.easeInOut,main_mc.x,homeX,2,true);
yTween = new Tween(main_mc,"y",Strong.easeInOut,main_mc.y,homeY,2,true);
inTween = new Tween(main_mc.home_mc,"alpha",None.easeNone,0,1,.5,true);
outTween = new Tween(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监听。

接下来就是最关键的上面提到的几个函数

 

function navigate(event:MouseEvent):void
{
    if(event.target == home_btn)
    {
        setTween(homeX,homeY,main_mc.home_mc);
    }
    else if(event.target == news_btn)
    {
        setTween(newsX,newsY,main_mc.news_mc);
    }
    else
    {
        setTween(aboutX,aboutY,main_mc.about_mc);
    }
}
function setTween(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();
  
}
function fadeIn(event:TweenEvent):void
{
    inTween.start();
    outTween.obj = inTween.obj;
}
function fadeOut(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上了。

源文件下载

Posted by greenidea on 周六, 01/26/2008 - 08:51

• 要发表评论，请先登录 或 注册

案例4：熟悉xml的运用

 

案例4：熟悉xml的运用

说明：一个简单的相册，先载入xml，然后载入xml列表里的images缩略图，点击缩略图出现大图以及大图的说明。这个案例较前面几个复杂了一些，不过如果熟悉了AS3的语法，还是比较容易理解的。

演示：http://www.live-my-life-with-yuyi.com/as3_cases/gallery_tween/

代码：

 

import fl.transitions.Tween;
import fl.transitions.easing.*;
var imageText:TextField = new TextField();
var fadeTween:Tween;
var imageLoader:Loader;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.load(new URLRequest("data/images.xml"));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

 

跟之前的一样，先导入几个包，这是为了实现图片的渐入渐出效果。然后是定义几个变量，这里xmlList可能比较陌生，这个变量的作用主要是获得xml的child列表，下面具体运用的时候，它的作用就一目了然了。
通过URLLoader载入xml，然后监听xml，一旦载入完成，就触发xmlLoaded函数。

function xmlLoaded(event:Event):void
{
    xml = XML(event.target.data);
    xmlList = xml.children();
    for(var i:int = 0; i < xmlList.length(); i++)
    {
        imageLoader = new Loader();
        imageLoader.load(new URLRequest(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);
    }
                                      
}

 

这里有一些地方需要注意，比如第一句

xml = XML(event.target.data);

如果直接

xml = event.target.data

会报错，因为两个变量的类型不一样。

这里可以看到xmlList，它是取得xml的children，对于使用xml非常方便。
然后实例化imageLoader，并载入xmlList里定义的缩略图，注意这里的写法。
调整一下坐标，并给imageLoader添加了一个name属性，这个属性的值就是xml文件里的图片地址，这有利于下面的showPicture函数。
然后将缩略图放到舞台上，并监听它的鼠标点击事件。

function showPicture(event:MouseEvent):void
{
    imageLoader = new Loader();
    imageLoader.load(new URLRequest(event.target.name));
    imageLoader.x = 200;
    imageLoader.y = 25;
    addChild(imageLoader);
    imageText.x = imageLoader.x;
    imageText.y = 351;
    for(var j:int = 0; j < xmlList.length(); j++)
    {
        if(xmlList[j].attribute("source") == event.target.name)
        {
            imageText.text = xmlList[j];
        }
    }
    fadeTween = new Tween(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的对齐方式，这里是左对齐，然后放到舞台上。

 

整个案例到此结束。

源文件下载

Posted by greenidea on 周六, 01/26/2008 - 08:58

• 要发表评论，请先登录 或 注册

案例5：熟悉AS3的package

 

案例5：熟悉AS3的package，以及多个package之间的相互通信

说明：一个很简单的demo，有4个按钮，当鼠标划过和移开时会呈现出不同的状态，单击后变成disabled，再点击其他的按钮时，之前disabled的按钮恢复，被点击的按钮失效。

演示：http://www.live-my-life-with-yuyi.com/as3_cases/communicating/

准备工作：打开源文件communicating_final.fla，点击属性里的发布设置，点击Actionscript3旁边的设置，在最下面的classpath里，引入classes的文件夹的路径，然后点击确定，前期工作就准备完了。

代码：

源文件里的代码很简单：

import todd.interactive.ButtonSet;
var buttons:ButtonSet = new ButtonSet();
buttons.addButtons([one_mc,two_mc,three_mc,four_mc]);
addChild(buttons);

导入ButtonSet类，实例化，然后调用里面的一个方法，最后将它放到舞台上。

 

classes文件夹下面的todd->interactive文件夹里有两个as文件，其中一个就是刚刚调用的ButtonSet，来看看ButtonSet的源码：

package todd.interactive
{
    //其实只需载入display和events就可以了，不过多载入几个并不影响文件大小和效率
    import flash.display.*;
    import flash.events.*;
    import flash.filters.*;
    import flash.net.*;
    import flash.geom.*;
    import flash.ui.*;
    import flash.utils.*;
    import fl.transitions.*;
    import fl.transitions.easing.*;
  
    public class ButtonSet extends MovieClip
    {
        public var buttons:Array;
      
        public function ButtonSet()
        {
          
        }
      
        public function addButtons(buttonSet:Array):void
        {
            buttons = buttonSet;
            for(var i:int = 0; i < buttons.length; i++)
            {
                addChild(buttons[i]);
            }
        }
    }
}

一个类应该被放在一个package里面，就像钱应该被放到钱包里一样。package后面定义的是该类的路径。然后一系列常用的类。
定义了一个全局变量buttons，在变量前面加一个public就可以了。这样就能在整个类中被访问到。
类名应该和文件名一样（区分大小写），然后定义一个同名函数，这个函数会在类被初始化时调用，就像php4的类一样。这里只是搭了个架子，没有具体内容。
然后定义了一个函数addButtons，它的作用就是将一些mc或者sprites放到自己的container里（addChild）。
还有一个类：DisablingButton，也是位于todd->interactive文件夹下，这也是这个案例的核心。对了，之前已经将 RectButton的linkage里的baseClass设置为todd.interactive.DisablingButton。

 

代码稍微有点长，且听我细细道来

package todd.interactive{
    import flash.display.*;
    import flash.events.*;
    import todd.interactive.ButtonSet;
    public class DisablingButton extends MovieClip {
        var labels:Array;
        var thisParent:*;
        var thisIndex:int;
        public function DisablingButton() {
            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);
        }
        function disableButton(event:MouseEvent):void {
            for (var i:int = 0; i < labels.length; i++) {
                if (labels[i].name == "disable") {
                    this.gotoAndPlay("disable");
                }
            }
            this.removeEventListener(MouseEvent.CLICK, disableButton);
            this.removeEventListener(MouseEvent.ROLL_OVER, over);
            this.removeEventListener(MouseEvent.ROLL_OUT, out);
            enableOthers();
        }
        function enableButton():void {
            this.addEventListener(MouseEvent.CLICK, disableButton);
            this.addEventListener(MouseEvent.ROLL_OVER, over);
            this.addEventListener(MouseEvent.ROLL_OUT, out);
            this.gotoAndStop(1);
        }
        function over(event:MouseEvent):void {
            for (var j:int = 0; j < labels.length; j++) {
                if (labels[j].name == "over") {
                    this.gotoAndPlay("over");
                }
            }
        }
        function out(event:MouseEvent):void {
            for (var k:int = 0; k < labels.length; k++) {
                if (labels[k].name == "out") {
                    this.gotoAndPlay("out");
                }
            }
        }
        function setParent(event:Event):void {
            if (this.parent is ButtonSet) {
                thisParent=this.parent;
                for (var w:int=0; w < thisParent.buttons.length; w++) {
                    if (this == thisParent.buttons[w]) {
                        thisIndex=w;
                    }
                }
            }
        }
        function enableOthers():void {
            for (var z:int=0; z < thisParent.buttons.length; z++) {
                if (z != thisIndex) {
                    thisParent.buttons[z].enableButton();
                }
            }
        }
    }
}

载入了两个常用类后，又载入了刚刚定义的ButtonSet类，这样我们就能使用ButtonSet的一些方法了。

 

注意：这个类必须继承Movieclip类，因为该类的对象是一个mc。
然后定义了一些全局变量（默认均为public）。
创建析构函数DisablingButton，labels = this.currentLabels; 这句话的意思是取得当前mc的label属性，以array的形式返回，包含了label.frame，label.name等等的属性。
然后监听自己的鼠标点击、移入、移出事件。
this.addEventListener(Event.ADDED,setParent);这句话的意思是当自己被添加进一个容器时调用setParent函数。
disableButton这个函数作用是，将当前mc的状态变成disabled，然后取消监听事件，同时激活其他的按钮。
enableButton函数的作用就是激活自己的监听事件，并初始化自己的状态。
over和out函数很简单，就是设置自己当前的状态。
setParent函数的最终目的是捕获点击事件发生在哪个mc上（gotoAndPlay方法将触发EVENT.ADDED，所以over和out函数都将触发setParent函数，这也是一个待改进的地方）。
enableOthers函数顾名思义，激活其他的按钮。因为setParent已经记住了，最后的点击事件发生在哪个mc上，所以只要遍历一下buttons，然后激活其他的mc就可以了。

案例分析完毕。

源文件下载

Posted by greenidea on 周六, 01/26/2008 - 09:01

• 要发表评论，请先登录 或 注册

案例6：通过类来实现

 

案例6：通过类来实现一个gallery
说明：一个比较简单的相册，通过类来实现。

演示：http://www.live-my-life-with-yuyi.com/as3_cases/gallery_class/

准备工作：打开源文件class_final.fla，点击属性里的发布设置，点击Actionscript3旁边的设置，在最下面的classpath里，引入classes_final的文件夹的路径，然后点击确定，前期工作就准备完了。

代码：

唯一的一个类文件：ImageGallery.as

package interactive.gallery
{
    import flash.display.*;
    import flash.events.*;
    import fl.transitions.*;
    import fl.transitions.easing.*;
    import flash.filters.*;
    import flash.net.*;
    public class ImageGallery extends MovieClip
    {
        var xml:XML;
        var xmlList:XMLList;
        var xmlLoader:URLLoader = new URLLoader();
        var container:MovieClip = new MovieClip();
        var imageLoader:Loader;
        var segments:Number;
        var currentSegment:int;
        var fullLoader:Loader = new Loader();
        var xmlPath:String;
        var thumbAtt:String;
        var fullAtt:String
        public function ImageGallery(path:String,thumb:String, full:String)
        {
            section1
        }
        function xmlLoaded(event:Event):void
        {
            section2
        }
        function changeThumb(event:MouseEvent):void
        {
            section3
        }
        function showPicture(event:MouseEvent):void
        {
            section4
        }
    }
}

section1代码：

xmlPath = path;
thumbAtt = thumb;
fullAtt = full;
container.x = 25;
container.y = 25;
fullLoader.x = 200;
fullLoader.y = 25;
container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
container.addEventListener(MouseEvent.CLICK, showPicture);
xmlLoader.load(new URLRequest(xmlPath));
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
container.filters = [new DropShadowFilter()];
addChild(container);
addChild(fullLoader);

这段代码的功能就是在初始化类时，给一些以后会用到的变量赋值，因为这些变量是全局变量，所以后面的function都能用。
对container添加了监听事件，监听鼠标移动和点击。
然后载入xml文件，当xml载入完成后，执行xmlLoaded函数
然后对container应用了阴影滤镜，这个container就是将来我们要载入图片的mc。
然后将container和fullLaoder放到舞台上，fullLoader将来会载入大图。

 

section2

xml = XML(event.target.data);
xmlList = xml.children();
for (var i:int = 0; i < xmlList.length(); i++)
{
    imageLoader = new Loader();
    imageLoader.load(new URLRequest(xmlList[i].attribute(thumbAtt)));
    container.addChild(imageLoader);
}

当xml载入完成后就会执行这个函数，先是获取xml对象列表，然后获取xml的子元素。这个在前面的教程提及过。
遍历子元素，然后通过Loader载入图片，并将imageLoader添加到container里。

 

section3

segments = container.width / container.numChildren;
currentSegment = Math.floor(container.mouseX / segments);
if (currentSegment <= container.numChildren - 1)
{
    for (var j:int = 0; j < container.numChildren; j++)
    {
        container.getChildAt(j).visible = false;
    }
container.getChildAt(currentSegment).visible = true;
}

这个函数是响应鼠标在缩略图上移动的事件，有一个算法在里面。
将mc的宽除以载入的缩略图的数量，得到一个平均数。
然后将当前鼠标的x位移除以刚刚得到的平均数就得到了当前鼠标所在的图片（听着有点别扭）
然后先将所有container里的child隐藏起来，再显示当前的图片。

 

section4

fullLoader.unload();
fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt)));

这个是响应缩略图点击事件，当点击后先去掉先前载入的大图，然后再去载入缩略图对应的大图。
其实也不难，不是吗？

 

再拉看一下完整的代码

package interactive.gallery
{
    import flash.display.*;
    import flash.events.*;
    import fl.transitions.*;
    import fl.transitions.easing.*;
    import flash.filters.*;
    import flash.net.*;
    public class ImageGallery extends MovieClip
    {
        var xml:XML;
        var xmlList:XMLList;
        var xmlLoader:URLLoader = new URLLoader();
        var container:MovieClip = new MovieClip();
        var imageLoader:Loader;
        var segments:Number;
        var currentSegment:int;
        var fullLoader:Loader = new Loader();
        var xmlPath:String;
        var thumbAtt:String;
        var fullAtt:String
        public function ImageGallery(path:String,thumb:String, full:String)
        {
            xmlPath = path;
            thumbAtt = thumb;
            fullAtt = full;
            container.x = 25;
            container.y = 25;
            fullLoader.x = 200;
            fullLoader.y = 25;
            container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
            container.addEventListener(MouseEvent.CLICK, showPicture);
            xmlLoader.load(new URLRequest(xmlPath));
            xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
            container.filters = [new DropShadowFilter()];
            addChild(container);
            addChild(fullLoader);
        }
        function xmlLoaded(event:Event):void
        {
            xml = XML(event.target.data);
            xmlList = xml.children();
            for (var i:int = 0; i < xmlList.length(); i++)
            {
                imageLoader = new Loader();
                imageLoader.load(new URLRequest(xmlList[i].attribute(thumbAtt)));
                container.addChild(imageLoader);
            }
        }
        function changeThumb(event:MouseEvent):void
        {
            segments = container.width / container.numChildren;
            currentSegment = Math.floor(container.mouseX / segments);
            if (currentSegment <= container.numChildren - 1)
            {
                for (var j:int = 0; j < container.numChildren; j++)
                {
                    container.getChildAt(j).visible = false;
                }
                container.getChildAt(currentSegment).visible = true;
            }
        }
        function showPicture(event:MouseEvent):void
        {
            fullLoader.unload();
            fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt)));
        }
    }
}

类说完了，接下来就来看看fla里面都是怎么写的。
这个就简单多了

import interactive.gallery.ImageGallery;
var gallery:ImageGallery = new ImageGallery("data/images.xml","thumb","full");
addChild(gallery);

我不说了，聪明的你一看就明白了。

 

案例分析到此结束。