learning AS3.0 case by case(适合刚从AS2.0过渡到3.0的ASER)【棍棍节更新】

lzyy 楼主

首先声明：本人大菜鸟一个，刚接触AS3不久，许多理念还没来得及灌输，这些case都是从网上down的，但因为解说是英文的，不利我们学习，我就充当一个translater，顺便可以让自己巩固一下知识。

水平有限，错误难免，欢迎大虾小虾，大鸟小鸟指正。

下面进入正题：

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

说明：拖动小人到滑板上，然后拖动滑板，可以发现小人已经跟滑板粘在了一起。

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

代码：

1. boarder_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
   
2. boarder_mc.addEventListener(MouseEvent.MOUSE_UP, drop);
   
3. 
   
4. red_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
   
5. red_mc.addEventListener(MouseEvent.MOUSE_UP, drop);
   
6. 
   
7. blue_mc.addEventListener(MouseEvent.MOUSE_DOWN, drag);
   
8. blue_mc.addEventListener(MouseEvent.MOUSE_UP, drop);

复制代码

AS3采用了新的监听机制，而且注意到对每个mc的鼠标按下弹起都使用了相同的函数，这就需要在函数里判断事件的发生者，从而做出相应的处理。

1. function drag(event:MouseEvent):void
   
2. {
   
3.         if(event.target.name == "boarder_mc")
   
4.         {
   
5.                 addChild(boarder_mc);
   
6.                 event.target.startDrag(true);
   
7.                 boarder_mc.x = mouseX;
   
8.                 boarder_mc.y = mouseY;
   
9.         }
   
10.         else
    
11.         {
    
12.         event.target.startDrag();
    
13.         }
    
14. 
    
15. }

复制代码

通过event.target.name来取得事件发生的对象名，AS3里没有了root，addChild相当于把某个mc搬到了舞台上，其实是TimeLine0.addChild(mc)，同时保证该mc是在舞台的最顶层（AS3里没有了深度管理）。
通过event.target来获取事件发生的对象

接着来看drop函数

1. function drop(event:MouseEvent):void
   
2. {
   
3.         event.target.stopDrag();
   
4.         if(boarder_mc.hitTestObject(red_mc))
   
5.         {
   
6.                 red_mc.addChild(boarder_mc);
   
7.                 boarder_mc.x = 0;
   
8.                 boarder_mc.y = 0;
   
9.         }
   
10.         else if(boarder_mc.hitTestObject(blue_mc))
    
11.         {
    
12.                 blue_mc.addChild(boarder_mc);
    
13.                 boarder_mc.x = 0;
    
14.                 boarder_mc.y = 0;
    
15.         }
    
16. }

复制代码

当鼠标弹起时，啥也不管，先停止拖动，如果小人和滑板有重合区域，则将小人放到滑板里，滑板就像一个container，boarder_mc成了red_mc的child，将boarder_mc的x坐标和y坐标清零是为了将小人放到滑板的正确位置。

如果小人已经成为了滑板的child，那么再次拖动滑板时，由于又执行了一次addChild(boarder_mc);所以滑板的父类又变成了舞台。

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


<我是分隔线>----------------------------------------------------------------------------------------------------</我是分隔线>


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

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

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

代码：

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

1. var loader:Loader = new Loader();
   
2. loader.load(new URLRequest("Popup.swf"));
   
3. 
   
4. picture_btn.addEventListener(MouseEvent.CLICK, showPicture);
   
5. 
   
6. function showPicture(event:MouseEvent):void
   
7. {
   
8.         addChild(loader);
   
9. }

复制代码

AS3里用loader代替了loadMovie,load的时候不能直接添加路径名，需要通过URLRequest来载入。
整段代码都很简单，首先载入Popup.swf，然后给监听按钮的click事件定义一个showPicture函数，这个函数的功能很简单，通过addChild把刚刚载入的swf放到舞台上。

swfB（载入的flash->Popup.swf）

1. close_btn.addEventListener(MouseEvent.CLICK, closeWindow);
   
2. 
   
3. function closeWindow(event:MouseEvent):void
   
4. {
   
5.         this.parent.parent.removeChild(this.parent);
   
6. }

复制代码

很简洁，监听close按钮的click事件，事件触发时调用closeWindow函数，这里用到了parent，简单分析一下，由于这个swf已经被载入到另一个swf里，所以this.parent应该指代的是loader，而this.parent.parent则指代的是TimeLine0，也就是舞台。所以这句话也就比较好理解了：从舞台上卸下载入该swf的loader。

案例2分析到此结束。


<我是分隔线>----------------------------------------------------------------------------------------------------</我是分隔线>

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

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

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

代码：

初始化，给一些变量赋值

1. import fl.transitions.Tween;
   
2. import fl.transitions.easing.*;
   
3. import fl.transitions.TweenEvent;
   
4. 
   
5. var homeX:Number = -301;
   
6. var homeY:Number = 110;
   
7. 
   
8. var newsX:Number = -17;
   
9. var newsY:Number = -777;
   
10. 
    
11. var aboutX:Number = -1354;
    
12. var aboutY:Number = -445;
    
13. 
    
14. var xTween:Tween;
    
15. var yTween:Tween;
    
16. var inTween:Tween;
    
17. var outTween:Tween;

复制代码

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

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

1. xTween = new Tween(main_mc,"x",Strong.easeInOut,main_mc.x,homeX,2,true);
   
2. yTween = new Tween(main_mc,"y",Strong.easeInOut,main_mc.y,homeY,2,true);
   
3. 
   
4. inTween = new Tween(main_mc.home_mc,"alpha",None.easeNone,0,1,.5,true);
   
5. outTween = new Tween(main_mc.home_mc,"alpha",None.easeNone,1,0,.5,true);
   
6. 
   
7. xTween.addEventListener(TweenEvent.MOTION_FINISH,fadeIn);
   
8. xTween.addEventListener(TweenEvent.MOTION_START,fadeOut);
   
9. 
   
10. home_btn.addEventListener(MouseEvent.CLICK, navigate);
    
11. news_btn.addEventListener(MouseEvent.CLICK, navigate);
    
12. about_btn.addEventListener(MouseEvent.CLICK, navigate);

复制代码

实例化xTween，yTween后并不会马上就运行，如果在之后的代码发现了stop动作的话。这些参数跟AS2并没有多大差别。
xTween和yTween是实现mc的缓动效果，inTween和outTween是实现渐隐渐现效果的。
这里只监听xTween而没有监听yTween，因为这两个是同时进行的所以监听一个就行了。
最后是对3个按钮的click监听。

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

1. function navigate(event:MouseEvent):void
   
2. {
   
3.         if(event.target == home_btn)
   
4.         {
   
5.                 setTween(homeX,homeY,main_mc.home_mc);
   
6.         }
   
7.         else if(event.target == news_btn)
   
8.         {
   
9.                 setTween(newsX,newsY,main_mc.news_mc);
   
10.         }
    
11.         else
    
12.         {
    
13.                 setTween(aboutX,aboutY,main_mc.about_mc);
    
14.         }
    
15. }
    
16. 
    
17. function setTween(tweenX:Number,tweenY:Number,tweenMC:MovieClip):void
    
18. {
    
19.         xTween.begin = main_mc.x;
    
20.         yTween.begin = main_mc.y;
    
21.         xTween.finish = tweenX;
    
22.         yTween.finish = tweenY;
    
23.         tweenMC.alpha = 0;
    
24.         inTween.obj = tweenMC;
    
25.         xTween.start();
    
26.         yTween.start();
    
27.        
    
28. }
    
29. 
    
30. function fadeIn(event:TweenEvent):void
    
31. {
    
32.         inTween.start();
    
33.         outTween.obj = inTween.obj;
    
34. }
    
35. 
    
36. function fadeOut(event:TweenEvent):void
    
37. {
    
38.         outTween.start();
    
39. }

复制代码

先来看看navigate函数，这是被3个按钮共同调用的函数，通过判断不同的target.name设置不同的setTween。
再来看看setTween，参数tweenX和tweenY是目标坐标，tweenMC是目标mc，通过设置begin,finish,obj参数来改变xTween和yTween的初始坐标，目标坐标，作用对象，最后调用start函数开始运动。

fadeIn函数的作用是使inTween开始，并且将inTween作用的对象赋予outTween，这样outTween被调用的时候就能作用在正确的mc上了。

[ 本帖最后由 lzyy 于 2007-11-11 21:20 编辑 ]

lzyy 楼主

占位待编

jevin

不错啊 谢谢LZ

blueid2

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

说明：拖动小人到滑板上，然后拖动滑板，可以发现小人已经跟滑板粘在了一起。

演示：http://www.live-my-life-with-yuy ... g_Parents_Final.swf

奇怪了，这个案例在FF下有错误，小人拖不动。是怎么回事儿？

lzyy 楼主

不可能吧，我也是FF啊，没有问题啊，刷新一下试试

emobaby

这个教程我也下了    听不懂  只能看代码了··

元始天尊

哈哈 有意思 ~ 一个很典型的显示列表层级应用

lzyy 楼主

更新了个案例，小顶一下

blueid2

还真是不错，前几天我的FF也不知道是怎么了 今天又没事儿了~~

xbstu2006

中文资料够多了,学什么英文的
手册+殿堂之路这两样就够人学个一年半载了

lzyy 楼主

手册+殿堂之路这两样就够人学个一年半载了

你是喜欢通过听故事去学讲故事，还是喜欢老师教你，故事应该这么讲：故事要有时间、地点、人物、事情......。
当然手册里也有不少example，但是对于倾向于快速人们的人来说，这样的case教学岂不是捷径？

中文资料够多了,学什么英文的

确实中文资料是挺多的，但是没有找到合适我的（可能是我比较懒，没仔细找），正好看到有英文版的，正合我意，于是就消化了一下，拿了出来。

lzyy 楼主

很遗憾，我不能再编辑这个帖子了，所以从标题也看不出更新时间了，但教程还是会继续，直到translte完毕。

我不太明白蓝色一个小时后不让编辑的原因，但肯定有他的道理，不多对于我来说确实挺别扭的。

牢骚发完了，继续

__________________________________________________________________________________________________


案例4：熟悉xml的运用

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

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

代码：

1. import fl.transitions.Tween;
   
2. import fl.transitions.easing.*;
   
3. 
   
4. var imageText:TextField = new TextField();
   
5. var fadeTween:Tween;
   
6. var imageLoader:Loader;
   
7. var xml:XML;
   
8. var xmlList:XMLList;
   
9. var xmlLoader:URLLoader = new URLLoader();
   
10. xmlLoader.load(new URLRequest("data/images.xml"));
    
11. 
    
12. xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);

复制代码

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

1. function xmlLoaded(event:Event):void
   
2. {
   
3.         xml = XML(event.target.data);
   
4.         xmlList = xml.children();
   
5.         for(var i:int = 0; i < xmlList.length(); i++)
   
6.         {
   
7.                 imageLoader = new Loader();
   
8.                 imageLoader.load(new URLRequest(xmlList[i].attribute("thumb")));
   
9.                 imageLoader.x = 25;
   
10.                 imageLoader.y = i * 150 + 25;
    
11.                 imageLoader.name = xmlList[i].attribute("source");
    
12.                 addChild(imageLoader);
    
13.                 imageLoader.addEventListener(MouseEvent.CLICK, showPicture);
    
14.         }
    
15.                                                                                
    
16. }

复制代码

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

1. xml = XML(event.target.data);

复制代码

如果直接

1. xml = event.target.data

复制代码

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

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

1. function showPicture(event:MouseEvent):void
   
2. {
   
3.         imageLoader = new Loader();
   
4.         imageLoader.load(new URLRequest(event.target.name));
   
5.         imageLoader.x = 200;
   
6.         imageLoader.y = 25;
   
7.         addChild(imageLoader);
   
8.         imageText.x = imageLoader.x;
   
9.         imageText.y = 351;
   
10.         for(var j:int = 0; j < xmlList.length(); j++)
    
11.         {
    
12.                 if(xmlList[j].attribute("source") == event.target.name)
    
13.                 {
    
14.                         imageText.text = xmlList[j];
    
15.                 }
    
16.         }
    
17.         fadeTween = new Tween(imageLoader,"alpha",None.easeNone,0,1,1,true);
    
18. }
    
19. imageText.autoSize = TextFieldAutoSize.LEFT;
    
20. addChild(imageText);

复制代码

这个点击后显示大图的函数，由于前面已经给name属性添加了图片地址，所以这里直接拿来用就可以了。
大图载入后分配一下坐标，添加到舞台上，接下来就该显示图片的说明了。
这里的做法是循环xmlList，然后比较xml里source是否与这里的name相等，是的话，将该xml的值赋予imageText，不过显然有更简单的做法，就是在上面的xmlLoaded函数中为imageLoader添加一个text属性，然后在showPicture里直接拿来用就可以了。
然后给图片来一个渐入效果，这个之前已经讲过了。
最后两行是定义imageText的对齐方式，这里是左对齐，然后放到舞台上。

整个案例到此结束。

fangfeijing

支持。理论反映在实际的案例中要比纯粹的理论跟容易理解。
感谢lzyy的无私。
我们需要这些鲜活的实例。

wangwaizi

非常感谢楼主的教程，学习

flashow

顶一个

yalewu

LZ真是会找资料。赞一个。希望能如LZ所言，持续更新！等待新贴。

[ 本帖最后由 yalewu 于 2007-11-20 20:03 编辑 ]

lzyy 楼主

案例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的文件夹的路径，然后点击确定，前期工作就准备完了。

代码：

源文件里的代码很简单：

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

复制代码

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

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

1. package todd.interactive
   
2. {
   
3.         //其实只需载入display和events就可以了，不过多载入几个并不影响文件大小和效率
   
4.         import flash.display.*;
   
5.         import flash.events.*;
   
6.         import flash.filters.*;
   
7.         import flash.net.*;
   
8.         import flash.geom.*;
   
9.         import flash.ui.*;
   
10.         import flash.utils.*;
    
11.         import fl.transitions.*;
    
12.         import fl.transitions.easing.*;
    
13.        
    
14.         public class ButtonSet extends MovieClip
    
15.         {
    
16.                 public var buttons:Array;
    
17.                
    
18.                 public function ButtonSet()
    
19.                 {
    
20.                        
    
21.                 }
    
22.                
    
23.                 public function addButtons(buttonSet:Array):void
    
24.                 {
    
25.                         buttons = buttonSet;
    
26.                         for(var i:int = 0; i < buttons.length; i++)
    
27.                         {
    
28.                                 addChild(buttons[i]);
    
29.                         }
    
30.                 }
    
31.         }
    
32. }

复制代码

一个类应该被放在一个package里面，就像钱应该被放到钱包里一样。package后面定义的是该类的路径。然后一系列常用的类。
定义了一个全局变量buttons，在变量前面加一个public就可以了。这样就能在整个类中被访问到。
类名应该和文件名一样（区分大小写），然后定义一个同名函数，这个函数会在类被初始化时调用，就像php4的类一样。这里只是搭了个架子，没有具体内容。
然后定义了一个函数addButtons，它的作用就是将一些mc或者sprites放到自己的container里（addChild）。

还有一个类：DisablingButton，也是位于todd->interactive文件夹下，这也是这个案例的核心。对了，之前已经将RectButton的linkage里的baseClass设置为todd.interactive.DisablingButton。

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

1. package todd.interactive{
   
2.         import flash.display.*;
   
3.         import flash.events.*;
   
4.         import todd.interactive.ButtonSet;
   
5. 
   
6.         public class DisablingButton extends MovieClip {
   
7.                 var labels:Array;
   
8.                 var thisParent:*;
   
9.                 var thisIndex:int;
   
10. 
    
11.                 public function DisablingButton() {
    
12.                         labels = this.currentLabels;
    
13.                         this.addEventListener(MouseEvent.CLICK, disableButton);
    
14.                         this.addEventListener(MouseEvent.ROLL_OVER, over);
    
15.                         this.addEventListener(MouseEvent.ROLL_OUT, out);
    
16.                         this.addEventListener(Event.ADDED,setParent);
    
17.                 }
    
18.                 function disableButton(event:MouseEvent):void {
    
19.                         for (var i:int = 0; i < labels.length; i++) {
    
20.                                 if (labels[i].name == "disable") {
    
21.                                         this.gotoAndPlay("disable");
    
22.                                 }
    
23.                         }
    
24.                         this.removeEventListener(MouseEvent.CLICK, disableButton);
    
25.                         this.removeEventListener(MouseEvent.ROLL_OVER, over);
    
26.                         this.removeEventListener(MouseEvent.ROLL_OUT, out);
    
27.                         enableOthers();
    
28.                 }
    
29.                 function enableButton():void {
    
30.                         this.addEventListener(MouseEvent.CLICK, disableButton);
    
31.                         this.addEventListener(MouseEvent.ROLL_OVER, over);
    
32.                         this.addEventListener(MouseEvent.ROLL_OUT, out);
    
33.                         this.gotoAndStop(1);
    
34.                 }
    
35.                 function over(event:MouseEvent):void {
    
36.                         for (var j:int = 0; j < labels.length; j++) {
    
37.                                 if (labels[j].name == "over") {
    
38.                                         this.gotoAndPlay("over");
    
39.                                 }
    
40.                         }
    
41.                 }
    
42.                 function out(event:MouseEvent):void {
    
43.                         for (var k:int = 0; k < labels.length; k++) {
    
44.                                 if (labels[k].name == "out") {
    
45.                                         this.gotoAndPlay("out");
    
46.                                 }
    
47.                         }
    
48.                 }
    
49.                 function setParent(event:Event):void {
    
50.                         if (this.parent is ButtonSet) {
    
51.                                 thisParent=this.parent;
    
52.                                 for (var w:int=0; w < thisParent.buttons.length; w++) {
    
53.                                         if (this == thisParent.buttons[w]) {
    
54.                                                 thisIndex=w;
    
55. 
    
56.                                         }
    
57.                                 }
    
58.                         }
    
59.                 }
    
60.                 function enableOthers():void {
    
61.                         for (var z:int=0; z < thisParent.buttons.length; z++) {
    
62.                                 if (z != thisIndex) {
    
63.                                         thisParent.buttons[z].enableButton();
    
64.                                 }
    
65.                         }
    
66.                 }
    
67.         }
    
68. }

复制代码

载入了两个常用类后，又载入了刚刚定义的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就可以了。

案例分析完毕。

shenzhang

顶你呀，帮我学好多东西，我正发愁帮助看不懂，到百度一下，又回蓝色了，很羡慕你
有空多写点教程，我们好好跟你学呀

lkele

感谢大虾对小虾的帮助！

Feimen

严重支持的说，希望楼主继续。。。。。。。。。。。

yuanyc

很喜欢lz的文章,希望加油..再整点更精彩的出来..

King1988

支持一下..好文章..

lzyy 楼主

案例7：通过类来实现一个gallery

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

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

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

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

1. package interactive.gallery
   
2. {
   
3.         import flash.display.*;
   
4.         import flash.events.*;
   
5.         import fl.transitions.*;
   
6.         import fl.transitions.easing.*;
   
7.         import flash.filters.*;
   
8.         import flash.net.*;
   
9. 
   
10.         public class ImageGallery extends MovieClip
    
11.         {
    
12.                 var xml:XML;
    
13.                 var xmlList:XMLList;
    
14.                 var xmlLoader:URLLoader = new URLLoader();
    
15.                 var container:MovieClip = new MovieClip();
    
16.                 var imageLoader:Loader;
    
17.                 var segments:Number;
    
18.                 var currentSegment:int;
    
19.                 var fullLoader:Loader = new Loader();
    
20.                 var xmlPath:String;
    
21.                 var thumbAtt:String;
    
22.                 var fullAtt:String
    
23. 
    
24.                 public function ImageGallery(path:String,thumb:String, full:String)
    
25.                 {
    
26.                         section1
    
27.                 }
    
28. 
    
29. 
    
30.                 function xmlLoaded(event:Event):void
    
31.                 {
    
32.                         section2
    
33.                 }
    
34. 
    
35.                 function changeThumb(event:MouseEvent):void
    
36.                 {
    
37.                         section3
    
38.                 }
    
39. 
    
40.                 function showPicture(event:MouseEvent):void
    
41.                 {
    
42.                         section4
    
43.                 }
    
44. 
    
45.         }
    
46. }

复制代码

section1代码：

1. xmlPath = path;
   
2. thumbAtt = thumb;
   
3. fullAtt = full;
   
4. 
   
5. container.x = 25;
   
6. container.y = 25;
   
7. fullLoader.x = 200;
   
8. fullLoader.y = 25;
   
9. 
   
10. container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
    
11. container.addEventListener(MouseEvent.CLICK, showPicture);
    
12. 
    
13. xmlLoader.load(new URLRequest(xmlPath));
    
14. 
    
15. xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
    
16. 
    
17. container.filters = [new DropShadowFilter()];
    
18. addChild(container);
    
19. addChild(fullLoader);

复制代码

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

section2

1. xml = XML(event.target.data);
   
2. xmlList = xml.children();
   
3. for (var i:int = 0; i < xmlList.length(); i++)
   
4. {
   
5.         imageLoader = new Loader();
   
6.         imageLoader.load(new URLRequest(xmlList[i].attribute(thumbAtt)));
   
7.         container.addChild(imageLoader);
   
8. 
   
9. }

复制代码

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

section3

1. segments = container.width / container.numChildren;
   
2. currentSegment = Math.floor(container.mouseX / segments);
   
3. if (currentSegment <= container.numChildren - 1)
   
4. {
   
5.         for (var j:int = 0; j < container.numChildren; j++)
   
6.         {
   
7.                 container.getChildAt(j).visible = false;
   
8.         }
   
9. container.getChildAt(currentSegment).visible = true;
   
10. }

复制代码

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

section4

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

复制代码

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

再拉看一下完整的代码

1. package interactive.gallery
   
2. {
   
3.         import flash.display.*;
   
4.         import flash.events.*;
   
5.         import fl.transitions.*;
   
6.         import fl.transitions.easing.*;
   
7.         import flash.filters.*;
   
8.         import flash.net.*;
   
9. 
   
10.         public class ImageGallery extends MovieClip
    
11.         {
    
12.                 var xml:XML;
    
13.                 var xmlList:XMLList;
    
14.                 var xmlLoader:URLLoader = new URLLoader();
    
15.                 var container:MovieClip = new MovieClip();
    
16.                 var imageLoader:Loader;
    
17.                 var segments:Number;
    
18.                 var currentSegment:int;
    
19.                 var fullLoader:Loader = new Loader();
    
20.                 var xmlPath:String;
    
21.                 var thumbAtt:String;
    
22.                 var fullAtt:String
    
23. 
    
24.                 public function ImageGallery(path:String,thumb:String, full:String)
    
25.                 {
    
26.                         xmlPath = path;
    
27.                         thumbAtt = thumb;
    
28.                         fullAtt = full;
    
29. 
    
30.                         container.x = 25;
    
31.                         container.y = 25;
    
32.                         fullLoader.x = 200;
    
33.                         fullLoader.y = 25;
    
34. 
    
35.                         container.addEventListener(MouseEvent.MOUSE_MOVE, changeThumb);
    
36.                         container.addEventListener(MouseEvent.CLICK, showPicture);
    
37. 
    
38.                         xmlLoader.load(new URLRequest(xmlPath));
    
39. 
    
40.                         xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
    
41. 
    
42.                         container.filters = [new DropShadowFilter()];
    
43.                         addChild(container);
    
44.                         addChild(fullLoader);
    
45.                 }
    
46. 
    
47. 
    
48.                 function xmlLoaded(event:Event):void
    
49.                 {
    
50.                         xml = XML(event.target.data);
    
51.                         xmlList = xml.children();
    
52.                         for (var i:int = 0; i < xmlList.length(); i++)
    
53.                         {
    
54.                                 imageLoader = new Loader();
    
55.                                 imageLoader.load(new URLRequest(xmlList[i].attribute(thumbAtt)));
    
56.                                 container.addChild(imageLoader);
    
57. 
    
58.                         }
    
59.                 }
    
60. 
    
61.                 function changeThumb(event:MouseEvent):void
    
62.                 {
    
63.                         segments = container.width / container.numChildren;
    
64.                         currentSegment = Math.floor(container.mouseX / segments);
    
65.                         if (currentSegment <= container.numChildren - 1)
    
66.                         {
    
67.                                 for (var j:int = 0; j < container.numChildren; j++)
    
68.                                 {
    
69.                                         container.getChildAt(j).visible = false;
    
70.                                 }
    
71.                                 container.getChildAt(currentSegment).visible = true;
    
72.                         }
    
73.                 }
    
74. 
    
75.                 function showPicture(event:MouseEvent):void
    
76.                 {
    
77.                         fullLoader.unload();
    
78.                         fullLoader.load(new URLRequest(xmlList[currentSegment].attribute(fullAtt)));
    
79.                 }
    
80. 
    
81.         }
    
82. }

复制代码

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

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

复制代码

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

案例7分析到此结束。

源文件下载：

[ 本帖最后由 lzyy 于 2007-12-3 09:27 编辑 ]

shenzhang

顶到你不发贴为止.

jevin

17楼的例子是错误的 会报错 多打了个'}'

[ 本帖最后由 jevin 于 2007-12-6 14:56 编辑 ]

koy8866

首先说下，楼主辛苦了！我觉的是个不错的帖子。对于我们这些习惯了MC在时间轴上运动的人来说，你的实例反而让我更加容易的接受AS3带给我的新感觉，非常感谢楼主的帖子，希望楼主可以继续。

nicekids

1087: Syntax error: extra characters found after end of program.
错误提示如上？
怎么修改呢

nicekids

gotoAndPlay方法将触发EVENT.ADDED
这是为什么呢

lzyy 楼主

@nicekids
谢谢你提出问题，把65行的大括号去了就行了。jevin 已经在之前说过了。

关于gotoAndPlay方法将触发EVENT.ADDED，这个我也是在测试的时候发现的，至于为什么，我也不太清楚

[ 本帖最后由 lzyy 于 2007-12-17 08:43 编辑 ]

柳世杀神

楼主，你的解释真的很形象。而且循序渐进，看起来不费力。比起一些书，刚刚开始基础的让人想睡觉，然后突然一翻页，又讲得是云里雾里，又有一大堆新的东西不解释，或者说“参考XX章”舒服多了！