AS3 CookBook学习整理(三)

1.在可视化对象列表中添加项目

解决方法：
Flash Player 现在把ActionScript 虚拟机(AVM)和渲染引擎两块功能集成在一起了。AVM 完成执行ActionScript 代码，而渲染引擎负责在屏幕上绘制对象，绘制对象需要两步骤：通过ActionScript引擎创建可视化对象。渲染引擎把可视化对象绘制在屏幕上。

AVM中创建了一个可视化对象后，并没有绘制在屏幕上，因为它还不存在于渲染引擎里，要把它放到渲染引擎里需要添加该对象到可视化对象列表，通过调用DisplayObjectContainer实例的addChild()或addChildAt()方法添加。

Example:

1. package {
2.     import flash.display.Shape;
3.     import flash.display.Sprite;
5.     public class Sample1120 extends Sprite
6.     {
7.         public function Sample1120()
8.         {
9.             var red:Shape = new Shape();
10.             var green:Shape = new Shape();
11.             var blue:Shape = new Shape();
12.             
13.             red.graphics.beginFill(0xFF0000);   
14.             red.graphics.drawCircle(10,20,10);
15.             red.graphics.endFill();
16.             green.graphics.beginFill(0x00FF00);
17.             green.graphics.drawCircle(15,25,10);
18.             green.graphics.endFill();
19.             blue.graphics.beginFill(0x0000FF);
20.             blue.graphics.drawCircle(20,20,10);
21.             blue.graphics.endFill();
22.             
23.             stage.addChild(red);
24.             stage.addChild(green);
25.             stage.addChildAt(blue,2);
27.             //下面演示重复添加同一对象
28. //          var container1:Sprite = new Sprite();
29. //          container1.addChild(red);
30. //          container1.addChild(green);
31. //          container1.addChild(blue);
32. //          this.addChild(container1);
33. //                      
34. //          var container2:Sprite = new Sprite();
35. //          container2.addChild(red);
36. //          this.addChild(container2);
37.         }
38.     }
39. }

2.在可视化对象列表中删除项目

解决方法：
使用DisplayObectContainer类的removeChild()和removeChildAt()方法

Example:

1. package {
2.     import flash.display.DisplayObjectContainer;
3.     import flash.display.Sprite;
4.     import flash.text.TextField;
6.     public class Sample1120 extends Sprite
7.     {
8.         public function Sample1120()
9.         {
10.             this.addChild(new TextField());
11.             this.addChild(new TextField());
12.             this.addChild(new TextField());
13.             
14.             trace("删除前："+this.numChildren);
15.             RemoveAllElement(this);
16.             trace("删除后："+this.numChildren);
17.         }
18.         
19.         private function RemoveAllElement(container:DisplayObjectContainer):void
20.         {
21.             var length:int = container.numChildren;
22.             for(var i:int=0;i<length;i++)
23.             {
24.                 this.removeChildAt(0);
25.             }
26.         }
27.     }
28. }

3.在可视化对象列表中移动对象位置

解决方法：
使用DisplayObectContainer类的setChildIndex()方法改变项目的位置，getChildIndex()和getChildAt()方法得到项目在显示列表中的位置。getChildIndex()返回当前对象的索引，getChildAt()返回当前对象的引用。

Example:

1. package {
2.     import flash.display.Shape;
3.     import flash.display.Sprite;
4.     import flash.events.MouseEvent;
6.     public class Sample1120 extends Sprite
7.     {
8.         public function Sample1120()
9.         {
10.             var arrColor:Array = [0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00FFFF];
11.             stage.addEventListener(MouseEvent.CLICK,OnClick);
12.             for(var i:int=0; i<arrColor.length;i++)
13.             {
14.                 var shape:Shape = AddElement(arrColor[i]);
15.                 shape.x = i*3+20;
16.                 shape.y = 20;
17.             }
18.         }   
19.         private function AddElement(color:int):Shape
20.         {
21.             var shape:Shape = new Shape();
22.             shape.graphics.beginFill(color);
23.             shape.graphics.drawCircle(10,10,30);
24.             shape.graphics.endFill();
25.             this.addChild(shape);
26.             return shape;
27.         }
28.         private function OnClick(event:MouseEvent):void
29.         {
30.             this.setChildIndex(this.getChildAt(0),this.numChildren-1);
31.         }
32.     }
33. }

4.创建自定义可视化类

解决方法：
继承DisplayObject 或它的子类来创建新类

Example:

1. package {
2.     import flash.display.Shape;
3.     import flash.display.Sprite;
5.     public class Sample1121 extends Sprite
6.     {
7.         public function Sample1121()
8.         {
9.             var _circle:Circle = new Circle(0xFF0000,80);
10.             _circle.x = 100;
11.             _circle.y = 100;
12.             addChild(_circle);
13.         }
14.     }
15. }
17. import flash.display.Shape;
18.     
19. internal class Circle extends Shape
20. {
21.     private var _color:uint;
22.     private var _radius:uint;
23.     public function Circle(color:uint=0x000000,radius:uint=10)
24.     {
25.         _color = color;
26.         _radius = radius;
27.         Draw();
28.     }
29.     private function Draw():void
30.     {
31.         graphics.beginFill(_color);
32.         graphics.drawCircle(0,0,_radius);
33.         graphics.endFill();
34.     }
35. }

5.创建简单的按钮

解决方法：
创建SimpleButton 类实例和创建upState,downState,overState和hitTestState等对象。当用户点击按钮时用click事件激活方法

Example:

1. package {
2.     import flash.display.Sprite;
4.     public class Sample1124 extends Sprite
5.     {
6.         public function Sample1124()
7.         {
8.             var button1:MyButton = new MyButton( "Button 1", 100, 20 );
9.             button1.x = 20;
10.             button1.y = 20;
11.             var button2:MyButton = new MyButton( "Button 2", 100, 30 );
12.             button2.x = 180;
13.             button2.y = 20;
14.             var button3:MyButton = new MyButton( "Button 3", 100, 40 );
15.             button3.x = 340;
16.             button3.y = 20;
17.             addChild( button1 );
18.             addChild( button2 );
19.             addChild( button3 );
20.         }
21.     }
22. }
24. import flash.display.SimpleButton;
25. import flash.display.Sprite;
26. import flash.display.Shape;
27. import flash.filters.DropShadowFilter;
28. import flash.text.TextField;
29. import flash.text.TextFormat;
30. import flash.text.TextFormatAlign;
32. internal class MyButton extends SimpleButton
33. {
34.     private var _text:String;
35.     private var _width:Number;
36.     private var _height:Number;
37.     
38.     public function MyButton(text:String,width:Number,height:Number)
39.     {
40.         this._text = text;
41.         this._width = width;
42.         this._height = height;
43.         
44.         this.upState = CreateUpState();
45.         this.downState = CreateDownState();
46.         this.overState = CreateOverState();
47.         this.hitTestState = upState;
48.     }
49.     
50.     private function CreateUpState():Sprite
51.     {
52.         var sprite:Sprite = new Sprite();
53.         var background:Shape = CreateColoredRectangle(0x33FF66);
54.         var text:TextField = CreateTextField(false);
55.         sprite.addChild(background);
56.         sprite.addChild(text);
57.         return sprite;
58.     }
59.     
60.     private function CreateDownState():Sprite
61.     {
62.         var sprite:Sprite = new Sprite();
63.         var background:Shape = CreateColoredRectangle(0xCCCCCC);
64.         var text:TextField = CreateTextField(true);
65.         sprite.addChild(background);
66.         sprite.addChild(text);
67.         return sprite;
68.     }
69.     
70.     private function CreateOverState():Sprite
71.     {
72.         var sprite:Sprite = new Sprite();
73.         var background:Shape = CreateColoredRectangle(0x70FF94);
74.         var text:TextField = CreateTextField(false);
75.         sprite.addChild(background);
76.         sprite.addChild(text);
77.         return sprite;
78.     }
79.     
80.     private function CreateColoredRectangle(color:uint):Shape
81.     {
82.         var rect:Shape = new Shape();
83.         rect.graphics.lineStyle(1,0x000000);
84.         rect.graphics.beginFill(color);
85.         rect.graphics.drawRoundRect(0,0,_width,_height,10);//最后那个参数，值越大，越接近椭圆
86.         rect.graphics.endFill();
87.         rect.filters = [new DropShadowFilter(2)];//滤镜
88.         return rect;
89.     }
90.     
91.     private function CreateTextField(downState:Boolean):TextField
92.     {
93.         var textField:TextField = new TextField();
94.         textField.text = _text;
95.         textField.width = _width;
96.         var format:TextFormat = new TextFormat();
97.         format.align = TextFormatAlign.CENTER;
98.         textField.setTextFormat(format);
99.         //垂直居中
100.         textField.y = (_height - textField.textHeight)/2;
101.         textField.y -= 2; //Subtract 2 pixels to adjust for offset
102.         if(downState)
103.         {
104.             textField.x += 1;
105.             textField.y += 1;
106.         }
107.         return textField;
108.     }
109. }

6.动态载入外部图片

解决方法：
使用新的Loader类载入图片(jpg，png，gif)，load()方法下载图片或.swf文件，它需要一个URLRequest 对象作为参数，该对象指定一个需要下载资源的URL。

flash.display.Loader 类非常类似于flash.net.URLLoader 类。不同的是Loader实例能载入外部图片和flash，在传输数据方面URLLoader更有用些。

载入外部内容需要三个步骤：
创建Loader 类实例
把Loader 实例加到显示列表里
调用load( )方法载入外部内容

Loader实例的contentLoaderInfo属性会对不同的情况作出不同的反应事件。contentLoaderInfo 属性是flash.display.LoaderInfo 类实例，用来提供目标被载入时的信息，下面是LoaderInfo 类的一些有用的事件：
open
当资源开始下载时触发
progress
资源在下载中时触发
complete
当资源下载完成时触发
init
当载入外部的.swf初始化时触发
httpStatus
当载入外部资源的HTTP请求产生状态代码错误时触发
ioError
当一个错误导致下载被终止时触发，比如找不到相应资源
securityError
当试图读取安全沙漏以外的数据时触发
unload
当unload( ) 方法被调用或移除载入的内容时或再次调用load( ) 方法时都会触发该事件

Example:

1. package {
2.     import flash.display.Loader;
3.     import flash.display.Sprite;
4.     import flash.events.Event;
5.     import flash.events.ProgressEvent;
6.     import flash.net.URLRequest;
7.     import flash.text.TextField;
8.     
9.     public class Sample1127 extends Sprite
10.     {
11.         private var label:TextField;
12.         public function Sample1127()
13.         {
14.             var loader:Loader = new Loader();
15.             this.addChild(loader);
16.             loader.contentLoaderInfo.addEventListener(Event.OPEN,OnOpened);
17.             loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,OnProgressing);
18.             loader.contentLoaderInfo.addEventListener(Event.COMPLETE,OnCompleted);
19.             loader.load(new URLRequest("http://images.cnblogs.com/cnblogs_com/dudu/SubwayStation/cnblogs_subway_station_02.jpg"));
20.         }
21.         private function OnOpened(event:Event):void
22.         {
23.             label = new TextField();
24.             this.addChild(label);
25.         }
26.         private function OnProgressing(event:ProgressEvent):void
27.         {
28.             label.text = parseInt((event.bytesLoaded/event.bytesTotal*100).toString())+"%";
29.         }
30.         private function OnCompleted(event:Event):void
31.         {
32.             this.removeChild(label);
33.         }
34.     }
35. }

7.载入外部swf文件并与之交互

解决方法：
使用Loader类载入.swf 文件，然后通过Loader实例的content属性访问被引入对象的实例。

Example:

1. 主swf文件：
3. package {
4.     import flash.display.Loader;
5.     import flash.display.Sprite;
6.     import flash.events.Event;
7.     import flash.net.URLRequest;
9.     public class Sample1128 extends Sprite
10.     {
11.         public function Sample1128()
12.         {
13.             var loader:Loader = new Loader();
14.             loader.contentLoaderInfo.addEventListener(Event.INIT,OnInit);
15.             this.addChild(loader);
16.             loader.load(new URLRequest("Sub1128.swf"));
17.         }
18.         
19.         private function OnInit(event:Event):void
20.         {
21.             trace(event.target.content); //打印出：object Sub1128 (被导入的对象)
22.             var movie:Object = event.target.content;
23.             trace(movie.GetColor());
24.             movie.SetColor(0xFFFF00);
25.         }
26.     }
27. }

1. 被引用swf文件：
3. package
4. {
5.     import flash.display.Shape;
6.     import flash.display.Sprite;
7.     
8.     public class Sub1128 extends Sprite
9.     {
10.         private var _color:uint = 0x000000;
11.         private var _circle:Shape;
12.         public function Sub1128()
13.         {
14.             DisplayCircle();
15.         }
16.         
17.         private function DisplayCircle():void
18.         {
19.             if(_circle==null)
20.             {
21.                 _circle = new Shape();
22.                 this.addChild(_circle);
23.             }
24.             _circle.graphics.clear();
25.             _circle.graphics.beginFill(_color);
26.             _circle.graphics.drawCircle(100,100,40);
27.             _circle.graphics.endFill();
28.         }
29.         
30.         public function GetColor():uint
31.         {
32.             return _color;
33.         }
34.         
35.         public function SetColor(color:uint):void
36.         {
37.             _color = color;
38.             DisplayCircle();
39.         }
40.     }
41. }

8.理解this,root,parent

说明：
如下图所示，处在最顶层的是stage对象，而我们一般在文档里声明的this，其实在层级关系里处于第二层。而在文档里声明的root，则指向文档类(第二层)，可以通过root.parent得到stage对象。

Example:

1. package {
2.     import flash.display.Sprite;
3.     import flash.events.MouseEvent;
4.     import flash.text.TextField;
6.     public class Sample1209 extends Sprite
7.     {
8.         private var lblMain:TextField = new TextField();
9.         private var lblSub:TextField = new TextField();
10.         
11.         public function Sample1209()
12.         {
13.             trace(this);    //object Sample1209
14.             trace(root);    //object Sample1209
15.             trace(this.parent); //object Stage
16.             trace(root.parent); //object Stage
17.         }
18.     }
19. }

9.得到当前坐标值

解决方法：
使用DisplayObject实例的只读属性mouseX和mouseY检查鼠标相对位置，或者MouseEvent事件的localX和localY属性。

Example:

1. package {
2.     import flash.display.Sprite;
3.     import flash.events.MouseEvent;
4.     import flash.text.TextField;
5.     import flash.text.TextFieldAutoSize;
7.     [SWF(backgroundColor="#004D84")]
8.     public class Sample1209 extends Sprite
9.     {
10.         private var lblMain:TextField;
11.         private var lblSub:TextField;
12.         private var rect:Sprite;
13.         
14.         public function Sample1209()
15.         {
16.             this.lblMain = new TextField();
17.             lblMain.autoSize = TextFieldAutoSize.CENTER;
18.             this.addChild(lblMain);
19.             
20.             this.lblSub = new TextField();
21.             lblSub.autoSize = TextFieldAutoSize.CENTER;
22.             lblSub.y = 40;
23.             this.addChild(lblSub);
24.             
25.             this.rect = new Sprite();
26.             rect.graphics.beginFill(0xFFFF00);
27.             rect.graphics.drawRect(0,0,200,100);
28.             rect.graphics.endFill();
29.             rect.addEventListener(MouseEvent.MOUSE_MOVE,rect_OnMouseMove);
30.             rect.x = 30;
31.             rect.y = 60;
32.             this.addChild(rect);
33.         }
34.         
35.         private function rect_OnMouseMove(event:MouseEvent):void
36.         {
37.             this.lblMain.text = "stage里的X是："+Math.round(this.mouseX)+",Y是："+Math.round(this.mouseY);
38.             this.lblSub.text = "sprite里的X是："+Math.round(this.rect.mouseX)+",Y是："+Math.round(this.rect.mouseY);
39.             //this.lblSub.text = "sprite里的X是："+Math.round(event.localX)+",Y是："+Math.round(event.localY);
40.         }
41.     }
42. }

10.用鼠标拖拽对象

解决方法：
使用Sprite的startDrag()和stopDrag()来实现拖拽效果，同时使用dropTarget属性判断是否是目标位置。

startDrag()有两个参数：

lockCenter

当为true时Sprite的中心被鼠标位置锁定，不管鼠标是否按下。当为false时只有鼠标点击它时Sprite才会跟着移动，默认为false。

bounds

一个矩形范围来约束拖动，被拖动Sprite是不能超出这个范围，默认为null，意味着没有约束。

一般会指定一个flash.geom.Rectangle作为被拖动元素的限制框。如果这个限制框和被拖动元素没有重合点(即不在一起)，则点击被拖动元素开始拖动时，会马上进入到限制框。

Sprite还有一个重要的方法：hitTestPoint(x,y,ShapeFlag)，它返回一个Boolean值，用来检测Sprite是否与指定的坐标点重合。

它接受三个参数：X坐标，Y坐标，ShapeFlag。其中X，Y为定义的坐标点。ShapeFlag用来指定是检测对象实际像素，还是边框实际像素。对于一个circle形状的Sprite，则这个参数就显得尤为重要，如果指定为true，则检测对象实际像素，只有当circle与点有重合，方法才会返回true。而指定为flase，则检测边框实际像素，此时只需要该circle的边框与点重合，则返回true(此时该circle可能并未到达该坐标点)。

 

直接使用Sprite的startDrag()和stopDrag()方法的确可以实现拖拽效果，但是有很多局限性。首先，Sprite的Drag受到FrameRate(画面更新率)的影响。如果FrameRate很低，则拖动效果会很不流畅。其次，一次只能拖动一个Sprite，无法实现同时拖动多个Sprite。

ascb里有一个DraggableSprite类(ascb.display.DraggableSprite)，扩展了Sprite的拖拽效果，使其不受到FrameRate的影响，且可同时拖动多个对象。但是在DraggableSprite里dropTarget属性不能用了，代替它的是getObjectsUnderPoint()方法，
它返回鼠标位置下面的对象数组。索引为0为最底层元素(如果在stage上则为自身)，索引为length-1则为自身(因为它在最顶层)，索引为length-2则为最上层的容纳元素。

Example:

演示DraggableSprite类的getObjectsUnderPoint()方法：

1. package {
2.     import ascb.display.DraggableSprite;
3.     
4.     import flash.display.Sprite;
5.     import flash.events.MouseEvent;
6.     import flash.geom.Point;
7.     import flash.text.TextField;
8.     import flash.text.TextFieldAutoSize;
10.     public class Sample1230 extends Sprite
11.     {
12.         private var label:TextField;
13.         
14.         public function Sample1230()
15.         {
16.             var red:Sprite = new Sprite();
17.             red.name = "red";
18.             red.graphics.beginFill(0xFF0000);
19.             red.graphics.drawRect(40,40,300,300);
20.             red.graphics.endFill();
21.             this.addChild(red);
22.             
23.             var blue:Sprite = new Sprite();
24.             blue.name = "blue";
25.             blue.graphics.beginFill(0x0000FF);
26.             blue.graphics.drawRect(80,80,200,200);
27.             blue.graphics.endFill();
28.             this.addChild(blue);    
29.             
30.             var yellow:Sprite = new Sprite();
31.             yellow.name = "yellow";
32.             yellow.graphics.beginFill(0xFFFF00);
33.             yellow.graphics.drawRect(120,120,100,100);
34.             yellow.graphics.endFill();
35.             this.addChild(yellow);  
36.             
37.             var circle:DraggableSprite = new DraggableSprite();
38.             circle.name = "circle";
39.             circle.graphics.beginFill(0x00FF00);
40.             circle.graphics.drawCircle(400,200,25);
41.             circle.graphics.endFill();      
42.             circle.addEventListener(MouseEvent.MOUSE_DOWN,OnMouseDown);
43.             circle.addEventListener(MouseEvent.MOUSE_UP,OnMouseUp);
44.             this.addChild(circle);  
45.             
46.             label = new TextField();
47.             label.autoSize = TextFieldAutoSize.CENTER;
48.             label.text = "label";
49.             this.addChild(label);   
50.         }
51.         
52.         private function OnMouseDown(event:MouseEvent):void
53.         {
54.             var tmpSprite:DraggableSprite = event.target as DraggableSprite;
55.             tmpSprite.drag();   
56.         }
57.         
58.         private function OnMouseUp(event:MouseEvent):void
59.         {
60.             var tmpSprite:DraggableSprite = event.target as DraggableSprite;
61.             tmpSprite.drop();
62.             
63.             var arr:Array = getObjectsUnderPoint(new Point(mouseX,mouseY));
64.             
65.             //this.label.text = arr[0].name; //当在stage上移动时，值是"circle"，否则为最底层元素
66.             
67.             //this.label.text = arr[arr.length-1].name; //值为它自己，也为"circle"
68.             
69.             this.label.text = arr[arr.length-2].name;   //值为其最上层元素
70.         }
71.     }
72. }

综合示例：

1. package {
2.     import ascb.display.DraggableSprite;
3.     
4.     import flash.display.Sprite;
5.     import flash.events.MouseEvent;
6.     import flash.filters.DropShadowFilter;
7.     import flash.geom.Point;
9.     public class Sample1231 extends Sprite
10.     {
11.         private var curPoint:Point;
12.         private var white:Sprite;
13.         
14.         public function Sample1231()
15.         {
16.             var red:DraggableSprite = new DraggableSprite();
17.             red.name = "red";
18.             red.graphics.beginFill(0xFF0000);
19.             red.graphics.drawCircle(40,40,20);
20.             red.graphics.endFill();
21.             red.addEventListener(MouseEvent.MOUSE_DOWN,OnMouseDown);
22.             red.addEventListener(MouseEvent.MOUSE_UP,OnMouseUp);
23.             this.addChild(red);
24.             
25.             var yellow:DraggableSprite = new DraggableSprite();
26.             yellow.name = "yellow";
27.             yellow.graphics.beginFill(0xFFFF00);
28.             yellow.graphics.drawCircle(40,100,20);
29.             yellow.graphics.endFill();
30.             yellow.addEventListener(MouseEvent.MOUSE_DOWN,OnMouseDown);
31.             yellow.addEventListener(MouseEvent.MOUSE_UP,OnMouseUp);
32.             this.addChild(yellow);
33.             
34.             var blue:DraggableSprite = new DraggableSprite();
35.             blue.name = "blue";
36.             blue.graphics.beginFill(0x0000FF);
37.             blue.graphics.drawCircle(40,160,20);
38.             blue.graphics.endFill();
39.             blue.addEventListener(MouseEvent.MOUSE_DOWN,OnMouseDown);
40.             blue.addEventListener(MouseEvent.MOUSE_UP,OnMouseUp);
41.             this.addChild(blue);
42.             
43.             white = new Sprite();
44.             white.graphics.beginFill(0xFFFFFF);
45.             white.graphics.drawCircle(0,0,40);
46.             white.x = 140;
47.             white.y = 100;
48.             white.graphics.endFill();
49.             this.addChild(white);
50.         }
51.         
52.         private function OnMouseDown(event:MouseEvent):void
53.         {
54.             var tmpSprite:DraggableSprite = event.target as DraggableSprite;
55.             this.setChildIndex(tmpSprite,this.numChildren-1);
56.             tmpSprite.filters = [new DropShadowFilter()];
57.             tmpSprite.drag();
58.             curPoint = new Point(tmpSprite.x,tmpSprite.y);
59.         }
60.         
61.         private function OnMouseUp(event:MouseEvent):void
62.         {
63.             var tmpSprite:DraggableSprite = event.target as DraggableSprite;
64.             tmpSprite.filters = null;
65.             tmpSprite.drop();
66.             
67.             var arr:Array = getObjectsUnderPoint(new Point(mouseX,mouseY));
68.             var color:uint = 0xFFFFFF;
69.             if(tmpSprite.name == "red")
70.             {
71.                 color = 0xFF0000;
72.             }
73.             else if(tmpSprite.name == "yellow")
74.             {
75.                 color = 0xFFFF00;
76.             }
77.             else if(tmpSprite.name == "blue")
78.             {
79.                 color = 0x0000FF;
80.             }
82.             if(arr[arr.length-2]==white&&tmpSprite.hitTestPoint(white.x,white.y,true))
83.             {
84.                 white.graphics.clear();
85.                 white.graphics.beginFill(color);
86.                 white.graphics.drawCircle(0,0,40);
87.                 white.x = 140;
88.                 white.y = 100;
89.                 white.graphics.endFill();
90.                 this.addChild(white);
91.             }
92.             
93.             tmpSprite.x = curPoint.x;
94.             tmpSprite.y = curPoint.y;   
95.         }
96.     }
97. }