《ActionScript 3.0 Cookbook》读书笔记6.2-SimpleButton

2007-01-02 [304] technology as3 cookbook note

SimpleButton

SimpleButton，相当于Flash中的按钮元件。在Flash中，它有“up”、“over”、“down”和“hit”四种状态，“hit”状态是用来控制按钮的可点击区域的。而在ActionScript 3中，SimpleButton类的实例同样有四种状态“upState”、“overState”、“downState”和“hitTestState”。

前面的三种状态都很好理解，正好和按钮元件的前三种状态对应，只需要将DisplayObject指定给它们即可。而“hitTestState”状态，则是让我郁闷了一下。

按照Flash中的原理，按钮的四种状态中，其实仅仅设置up状态，按钮就可以工作。但是在SimpleButton中，这个惯例行不通。如果不设定hitTestState状态，按钮根本不响应。

因此，要使用SimpleButton，必须至少设定两种状态，而hitTestState状态是必须设定的。而实际上，要实现一个正常的按钮效果，四种状态都必须设定。因为如果某个状态不被设定，当按钮显示这种状态时，按钮中就没有任何内容。

可以用下面的代码做个实验，注释10-13行中不需要状态，然后编译看效果：

 1package {
 2    import flash.display.SimpleButton;
 3    import flash.display.Sprite;
 4    import flash.display.Shape;
 5    import flash.events.MouseEvent;
 6    
 7    public class SimpleButtonSample extends Sprite{
 8        public function SimpleButtonSample(){
 9            var __button:SimpleButton = new SimpleButton();
10            __button.upState = createCircle(0xff0000, 50);
11            //__button.downState = createCircle(0x00ff00, 50);
12            //__button.overState = createCircle(0x0000ff, 50);
13            __button.hitTestState = createCircle(0x000000, 100);
14
15            __button.x = 100;
16            __button.y = 100;
17            
18            __button.addEventListener(MouseEvent.CLICK, onClickHandler);
19            
20            addChild(__button);
21        }   
22        
23        public function createCircle(color:uint, radius:Number):Shape{
24            var __shape:Shape = new Shape();
25            __shape.graphics.beginFill(color);
26            __shape.graphics.drawCircle(0, 0, radius);
27            __shape.graphics.endFill();
28            return __shape;
29        }
30        
31        private function onClickHandler(evt:MouseEvent):void{
32            trace("按下了按钮！" + evt);
33        }
34    }
35}