ActionScript 3.0 Cookbook 6.5

ActionScript 3.0 Cookbook 6.5

问题
你想要建立一个交互式的按纽，可以让用户点击和完成一个动作，像发送一个表单或者计算一个总额。

解决办法
建立一个 SimpleButton 类的实例和为 upStae, downState, overState, and hitTestState 四种状态建立可视化对像。
当用户按下按纽，随时用 click 事件去调用一个方法

示例:

package {
   import flash.display.*;
   import flash.events.*;
 
   public class SimpleButtonDemo extends Sprite {
     public function SimpleButtonDemo(  ) {
       // Create a simple button and configure its location
       var button:SimpleButton = new SimpleButton(  );
       button.x = 20;
       button.y = 20;
      
       // Create the different states of the button, using the
       // helper method to create different colors circles
       button.upState = createCircle( 0x00FF00, 15 );
       button.overState = createCircle( 0xFFFFFF, 16 );
       button.downState = createCircle( 0xCCCCCC, 15 );
       button.hitTestState = button.upState;
      
       // Add an event listener for the click event to be notified
       // when the user clicks the mouse on the button
       button.addEventListener( MouseEvent.CLICK, handleClick );
      
       // Finally, add the button to the display list
       addChild( button ); 
     }
    
     // Helper function to create a circle shape with a given color
     // and radius
     private function createCircle( color:uint, radius:Number ):Shape {
       var circle:Shape = new Shape(  );
       circle.graphics.lineStyle( 1, 0x000000 );
       circle.graphics.beginFill( color );
       circle.graphics.drawCircle( 0, 0, radius );
       circle.graphics.endFill(  );
       return circle;
     }
    
     // Event handler invoked whenever the user presses the button
     private function handleClick( event:MouseEvent ):void {
       trace( "Mouse clicked on the button" ); 
     }
   }
 }

 运行上面的代码，一个绿色的圆出现在影片中。当你的鼠标在它上面时，一个稍微大的白色圆出现，作为 rollover 。当你点击白色的圆，它转换到一个稍微小的灰色圆，这些视觉效果是由SimpleButton 实例建立的，基于你鼠标的动作来改变，在4个状态之间切换。

用 addEventListener()方法来侦听按纽实例的事件，click 事件，由 Mouse.CLICK 指定，操作以上代码的 handleClick()方法，任何时候，当用户点击这个按纽，handleClick()方法都会被调用，允许确定的某个动作发生，在这个例子中，在控制台中出现了 Mouse clicked on the button 这句短消息。

hitTestState 属性是完成大多数按纽状态交互的属性，你可能注意到了上面的代码设置 hitTestStage 等于 upState 。这么做是因为按纽应该是活跃性的，当用户的鼠标

下面建立一个新的 RectangleButton 类，这个类定义一个特殊类型的SimpleButton 行为，绘制一个绿色矩形，内部有一些文字。

效果如：

package {
import flash.display.*
import flash.text.*;
import flash.filters.DropShadowFilter;
public class RectangleButton extends SimpleButton {
// The text to appear on the button
private var _text:String;
// Save the width and height of the rectangle
private var _width:Number;
private var _height:Number;
public function RectangleButton( text:String, width:Number, height:Number ) {
// Save the values to use them to create the button states
_text = text;
_width = width;
_height = height;
// Create the button states based on width, height, and text value
upState = createUpState(  );
overState = createOverState(  );
downState = createDownState(  );
hitTestState = upState;
}
// Create the display object for the button's up state
private function createUpState(  ):Sprite {
var sprite:Sprite = new Sprite(  );
var background:Shape = createdColoredRectangle( 0x33FF66 );
var textField:TextField = createTextField( false );
sprite.addChild( background );
sprite.addChild( textField );
return sprite;
}
// Create the display object for the button's up state
private function createOverState(  ):Sprite {
var sprite:Sprite = new Sprite(  );
var background:Shape = createdColoredRectangle( 0x70FF94 );
var textField:TextField = createTextField( false );
sprite.addChild( background );
sprite.addChild( textField );
return sprite;
}
// Create the display object for the button's down state
private function createDownState(  ):Sprite {
var sprite:Sprite = new Sprite(  );
var background:Shape = createdColoredRectangle( 0xCCCCCC );
var textField:TextField = createTextField( true );
sprite.addChild( background );
sprite.addChild( textField );
return sprite;
}
// Create a rounded rectangle with a specific fill color
private function createdColoredRectangle( color:uint ):Shape {
var rect:Shape = new Shape(  );
rect.graphics.lineStyle( 1, 0x000000 );
rect.graphics.beginFill( color );
rect.graphics.drawRoundRect( 0, 0, _width, _height, 15 );
rect.graphics.endFill(  );
rect.filters = [ new DropShadowFilter( 2 ) ];
return rect;
}
// Create the text field to display the text of the button
private function createTextField( downState:Boolean ):TextField {
var textField:TextField = new TextField(  );
textField.text = _text;
textField.width = _width;
// Center the text horizontally
var format:TextFormat = new TextFormat(  );
format.align = TextFormatAlign.CENTER;
textField.setTextFormat( format );
// Center the text vertically
textField.y = ( _height - textField.textHeight ) / 2;
textField.y -= 2;  // Subtract 2 pixels to adjust for offset
// The down state places the text down and to the right
// further than the other states
if ( downState ) {
textField.x += 1;
textField.y += 1;
}
return textField;
}
}
}

package {
   import flash.display.*;
   public class SimpleButtonDemo extends Sprite {
     public function SimpleButtonDemo(  ) {
       
       // Create three rectangular buttons with different text and 
       // different sizes, and place them at various locations within 
       // the movie
       
       var button1:RectangleButton = new RectangleButton( "Button 1", 60, 100 );
       button1.x = 20;
       button1.y = 20;
       
       var button2:RectangleButton = new RectangleButton( "Button 2", 80, 30 );
       button2.x = 90;
       button2.y = 20;
       
       var button3:RectangleButton = new RectangleButton( "Button 3", 100, 40 );
       button3.x = 100;
       button3.y = 60;
       
       // Add the buttons to the display list so they appear on-screen
       addChild( button1 );
       addChild( button2 );
       addChild( button3 );
     }
   }
 }