6.5.创建简单的按钮
问题
我想创建一个交互式按钮，点击鼠标执行一段代码，比如发送表单或计算结果
解决办法
创建SimpleButton 类实例和创建upState, downState, overState, 和hitTestState等对象。当用户点击按钮时用click事件激活方法
讨论
可视化对象列表模型提供一种简单的方法通过SimpleButton 类创建按钮。SimpleButton 类允许用户用鼠标和可视化对象进行交互，通过各种状态定义交互方法，SimpleButton 按钮的状态有以下这些：
upState
代表按钮默认"up"状态的对象，当鼠标不在按钮上，按钮就处于这个状态。
overState
当鼠标移动到按钮上时按钮的状态，鼠标离开时按钮又回到"up"状态。
downState
当鼠标按下左键时所处的状态
hitTestState
这个状态定义按钮的界限，只是用来跟踪鼠标的目的。
下面的例子创建了一个SimpleButton 实例，定义了四个状态属性。每个状态都需要一个DisplayObject 实例相关联，createCircle( ) 方法创建不同颜色的图形作为按钮状态：
运行上面的代码后，绿色圆显示在屏幕上。当你的鼠标移动到绿色圆上时，白色圆现实出来了，点击这个白色圆，白色圆变成了灰色圆，这就是SimpleButton 实例通过不同的状态显示不同的对象。
addEventListener( ) 方法注册鼠标事件和处理函数，上面的代码注册了MouseEvent.CLICK事件，也就是鼠标单击事件，激活该事件后由handleClick( ) 方法处理，任何时候只要用户点击该按钮，handleClick( ) 方法就被激活，在这里编写处理代码，这里只是简单的输出个字符串显示在控制台上。
hitTestState 属性可能最有意思了，我们注意到上面的代码中把hitTestState 和upState设成了一样的状态。也就说当鼠标进入upState 对象范围大小时就激活事件。
hitTestState 可以被设置成任何可显示的对象，像下面的代码那样把激活区域设大些：
再次运行你会发现，当鼠标还没靠近圆，over状态就激活了，这就是激活半径现在是50的缘故。
下面继承SimpleButton 创建可视化类，包括定义四个状态，命名为RectangleButton：
现在已经完成了RectangleButton 类的封装设计，只需要调用构造函数就可以创建实例了，看下面的代码演示：
我想创建一个交互式按钮，点击鼠标执行一段代码，比如发送表单或计算结果
解决办法
创建SimpleButton 类实例和创建upState, downState, overState, 和hitTestState等对象。当用户点击按钮时用click事件激活方法
讨论
可视化对象列表模型提供一种简单的方法通过SimpleButton 类创建按钮。SimpleButton 类允许用户用鼠标和可视化对象进行交互，通过各种状态定义交互方法，SimpleButton 按钮的状态有以下这些：
upState
代表按钮默认"up"状态的对象，当鼠标不在按钮上，按钮就处于这个状态。
overState
当鼠标移动到按钮上时按钮的状态，鼠标离开时按钮又回到"up"状态。
downState
当鼠标按下左键时所处的状态
hitTestState
这个状态定义按钮的界限，只是用来跟踪鼠标的目的。
下面的例子创建了一个SimpleButton 实例，定义了四个状态属性。每个状态都需要一个DisplayObject 实例相关联，createCircle( ) 方法创建不同颜色的图形作为按钮状态：
+展开
-ActionScript
package {
import flash.display.*;
import flash.events.*;
public class SimpleButtonDemo extends Sprite {
public function SimpleButtonDemo( ) {
var button:SimpleButton = new SimpleButton( );
button.x = 20;
button.y = 20;
button.upState = createCircle( 0x00FF00, 15 );
button.overState = createCircle( 0xFFFFFF, 16 );
button.downState = createCircle( 0xCCCCCC, 15 );
button.hitTestState = button.upState;
button.addEventListener( MouseEvent.CLICK, handleClick );
addChild( button );
}
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;
}
private function handleClick( event:MouseEvent ):void {
trace( "Mouse clicked on the button" );
}
}
}
import flash.display.*;
import flash.events.*;
public class SimpleButtonDemo extends Sprite {
public function SimpleButtonDemo( ) {
var button:SimpleButton = new SimpleButton( );
button.x = 20;
button.y = 20;
button.upState = createCircle( 0x00FF00, 15 );
button.overState = createCircle( 0xFFFFFF, 16 );
button.downState = createCircle( 0xCCCCCC, 15 );
button.hitTestState = button.upState;
button.addEventListener( MouseEvent.CLICK, handleClick );
addChild( button );
}
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;
}
private function handleClick( event:MouseEvent ):void {
trace( "Mouse clicked on the button" );
}
}
}
运行上面的代码后，绿色圆显示在屏幕上。当你的鼠标移动到绿色圆上时，白色圆现实出来了，点击这个白色圆，白色圆变成了灰色圆，这就是SimpleButton 实例通过不同的状态显示不同的对象。
addEventListener( ) 方法注册鼠标事件和处理函数，上面的代码注册了MouseEvent.CLICK事件，也就是鼠标单击事件，激活该事件后由handleClick( ) 方法处理，任何时候只要用户点击该按钮，handleClick( ) 方法就被激活，在这里编写处理代码，这里只是简单的输出个字符串显示在控制台上。
hitTestState 属性可能最有意思了，我们注意到上面的代码中把hitTestState 和upState设成了一样的状态。也就说当鼠标进入upState 对象范围大小时就激活事件。
hitTestState 可以被设置成任何可显示的对象，像下面的代码那样把激活区域设大些：
+展开
-ActionScript
button.hitTestState = createCircle( 0x000000, 50 );
再次运行你会发现，当鼠标还没靠近圆，over状态就激活了，这就是激活半径现在是50的缘故。
下面继承SimpleButton 创建可视化类，包括定义四个状态，命名为RectangleButton：
+展开
-ActionScript
package {
import flash.display.*
import flash.text.*;
import flash.filters.DropShadowFilter;
public class RectangleButton extends SimpleButton {
// 显示在按钮上的文本
private var _text:String;
// 保存矩形的宽度和高度
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;
// 创建按钮状态
upState = createUpState( );
overState = createOverState( );
downState = createDownState( );
hitTestState = upState;
}
// 创建状态对象
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;
}
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;
}
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;
}
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;
}
// 创建按钮上的文字
private function createTextField( downState:Boolean ):TextField {
var textField:TextField = new TextField( );
textField.text = _text;
textField.width = _width;
var format:TextFormat = new TextFormat( );
format.align = TextFormatAlign.CENTER;
textField.setTextFormat( format );
//垂直居中
textField.y = ( _height - textField.textHeight ) / 2;
textField.y -= 2; // Subtract 2 pixels to adjust for offset
if ( downState ) {
textField.x += 1;
textField.y += 1;
}
}
}
}
import flash.display.*
import flash.text.*;
import flash.filters.DropShadowFilter;
public class RectangleButton extends SimpleButton {
// 显示在按钮上的文本
private var _text:String;
// 保存矩形的宽度和高度
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;
// 创建按钮状态
upState = createUpState( );
overState = createOverState( );
downState = createDownState( );
hitTestState = upState;
}
// 创建状态对象
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;
}
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;
}
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;
}
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;
}
// 创建按钮上的文字
private function createTextField( downState:Boolean ):TextField {
var textField:TextField = new TextField( );
textField.text = _text;
textField.width = _width;
var format:TextFormat = new TextFormat( );
format.align = TextFormatAlign.CENTER;
textField.setTextFormat( format );
//垂直居中
textField.y = ( _height - textField.textHeight ) / 2;
textField.y -= 2; // Subtract 2 pixels to adjust for offset
if ( downState ) {
textField.x += 1;
textField.y += 1;
}
}
}
}
现在已经完成了RectangleButton 类的封装设计，只需要调用构造函数就可以创建实例了，看下面的代码演示：
+展开
-ActionScript
package {
import flash.display.*;
public class SimpleButtonDemo extends Sprite {
public function SimpleButtonDemo( ) {
// 创建三个不同文字不同大小和位置的矩形按钮
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;
addChild( button1 );
addChild( button2 );
addChild( button3 );
}
}
}
import flash.display.*;
public class SimpleButtonDemo extends Sprite {
public function SimpleButtonDemo( ) {
// 创建三个不同文字不同大小和位置的矩形按钮
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;
addChild( button1 );
addChild( button2 );
addChild( button3 );
}
}
}
加支付宝好友偷能量挖...
