积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)

时间:2021-02-13 14:53:46
[源码下载]


积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)

作者: webabcd


介绍
通过一个经典示例,即闹钟,对使用Flash ActionScript 3.0 画图、做动画有一个大概的了解,并通过此示例学习自定义事件的开发
  • 自定义事件 - 继承自 Event ,一个 public static const 定义事件类型,其他 public 变量定义事件属性
  • 画图 - 通过 Shape 对象的 graphics 属性来执行矢量绘图命令 
  • 动画 - 通过 Timer 对象或监听 Event.ENTER_FRAME 事件 


1、自定义事件(闹钟到点后所触发的自定义事件)
AlarmEvent.as
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)package 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.events.Event;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    public class AlarmEvent extends Event 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 定义事件类型
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public static const ALARM:String = "alarm";
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 定义闹钟在响铃时所显示的信息
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public var alermMessage:String;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 构造函数,msg 为提醒信息
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public function AlarmEvent(msg:String = "ALARM!")
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 调用父类的构造函数。参数为事件类型,可以作为 Event.type 访问
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            super(ALARM);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            alermMessage 
= msg;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 重写 Event 的 clone() 方法
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public override function clone():Event
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
return new AlarmEvent(alermMessage);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 重写 Event 的 toString() 方法
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public override function toString():String
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// Event.formatToString() - 在自定义 Event 类中实现 toString() 方法的 utility 函数
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            return formatToString("AlarmEvent""type""bubbles""cancelable""eventPhase""message");
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)}


2、画图(绘制表盘,刻度,时分秒针等)
ClockUI.as
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)package
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.display.Shape;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.display.Sprite;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.display.StageAlign;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.display.StageScaleMode;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.text.StaticText;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.events.
*;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.text.TextField;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.text.TextFormat;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.display.Sprite;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
// 绘制表盘 UI
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
    public class ClockUI extends Sprite 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 表盘半径
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public var radius:uint;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 表盘中心点的 X 坐标和 Y 坐标
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public var centerX:int;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
var centerY:int;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 时, 分, 秒指针的形状
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public var hourHand:Shape;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
var minuteHand:Shape;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
var secondHand:Shape;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 表盘背景颜色,以及时, 分, 秒指针颜色(0x代表16进制)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public var bgColor:uint = 0xEEEEFF;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
var hourHandColor:uint = 0x003366;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
var minuteHandColor:uint = 0x000099;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
var secondHandColor:uint = 0xCC0033;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 构造函数,r 为表盘半径
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public function ClockUI(r:uint) 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
this.radius = r;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                    
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
this.centerX = r;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
this.centerY = r;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 初始化表盘
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public function init():void 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 画表盘的边框
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            drawBorder();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 画表盘上的小时的标记
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            drawHourLabel();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 画时, 分, 秒指针
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            drawHand();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
function drawBorder():void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 指定线条样式,两个参数分别为线条的粗细(以磅为单位)和线条的颜色
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            this.graphics.lineStyle(0.50x999999);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 以指定的颜色开始填充,在调用 endFill() 后才会呈现填充
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            this.graphics.beginFill(bgColor);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 画园,三个参数分别为圆心的 X 坐标、圆心的 Y 坐标和园的半径。之前调用的 beginFill() 方法将填充此园
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            this.graphics.drawCircle(centerX, centerY, radius);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 呈现上次的 beginFill() 的结果
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            this.graphics.endFill();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)  
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
function drawHourLabel():void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
for (var i:Number = 1; i <= 12; i++)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
// 表盘的刻度标识,1 到 12
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
                var lbl:TextField = new TextField();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                lbl.text 
= i.toString();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
// 小时刻度标识所需旋转的弧度(使用弧度是为了方便之后的 sin() 和 cos() 计算)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
                var angle:Number = i * 30 * (Math.PI / 180);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
// 计算刻度标识的位置
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
                lbl.x = centerX + (0.9 * radius * Math.sin(angle)) - 5;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                lbl.y 
= centerY - (0.9 * radius * Math.cos(angle)) - 9;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
// 格式化刻度标识的文本样式
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
                var tf:TextFormat = new TextFormat();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
// tf.font = "Arial";
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
                tf.bold = "true";
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                tf.size 
= 12;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                lbl.setTextFormat(tf);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
// 在 Container 中添加指定的 DisplayObject ,返回值为被添加到 Container 后的 DisplayObject
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
                this.addChild(lbl);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
function drawHand():void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{       
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            hourHand 
= new Shape();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            hourHand.graphics.lineStyle(
3, hourHandColor);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 移动当前的绘画起点到指定的位置
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            hourHand.graphics.moveTo(0-radius * 0.5);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 画直线到指定位置,起点位置由 moveTo() 决定
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            hourHand.graphics.lineTo(00);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            hourHand.x 
= centerX;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            hourHand.y 
= centerY;        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            addChild(hourHand);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                     
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)              minuteHand 
= new Shape();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            minuteHand.graphics.lineStyle(
2, minuteHandColor);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            minuteHand.graphics.moveTo(
0-radius * 0.8);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            minuteHand.graphics.lineTo(
00);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)             minuteHand.x 
= centerX;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            minuteHand.y 
= centerY;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            addChild(minuteHand);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画) 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)             secondHand 
= new Shape();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            secondHand.graphics.lineStyle(
0.5, secondHandColor);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            secondHand.graphics.moveTo(
0-radius * 0.9);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            secondHand.graphics.lineTo(
00);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            secondHand.x 
= centerX;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            secondHand.y 
= centerY;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            addChild(secondHand);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 以当前系统时间刷新表盘的呈现
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public function refresh():void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// new Date() - Flash 宿主的系统时间
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            var currentTime:Date = new Date();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
var hour:uint = currentTime.getHours();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
var minute:uint = currentTime.getMinutes();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
var second:uint = currentTime.getSeconds();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 时, 分, 秒指针做相应的旋转。单位:度数
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            this.hourHand.rotation = hour * 30 + minute * 0.5;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
this.minuteHand.rotation = minute * 6;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
this.secondHand.rotation = second * 6;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)}


3、动画(让时,分,秒针动起来)
SimpleClock.as
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)package 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.display.Sprite;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    public class SimpleClock extends Sprite
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        import flash.events.TimerEvent;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        import flash.utils.Timer;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        private 
var timer:Timer;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        private 
var clockUI:ClockUI;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 构造函数,radius 为表盘半径
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public function SimpleClock(radius:Number = 100):void 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{            
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 实例化一个 ClockUI 对象,并将其添加到舞台上
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            clockUI = new ClockUI(Math.max(20, radius));
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            clockUI.init();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            addChild(clockUI);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 刷新表盘 UI
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            clockUI.refresh();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 实例化一个计时器,每 1 秒 tick 一次
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            timer = new Timer(1000);       
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            timer.addEventListener(TimerEvent.TIMER, onTick);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            timer.start();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        private 
function onTick(e:TimerEvent):void 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 刷新表盘 UI
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            clockUI.refresh();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }
        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)}


4、组装以上各个类,以成为一个完整的闹钟对象(这里来确定如何触发我们开始写的那个自定义事件)
AlarmClock.as
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)package 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    public class AlarmClock extends SimpleClock 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        import flash.events.MouseEvent;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        import flash.events.TimerEvent;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        import flash.utils.Timer;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        private 
var alarmHour:Number = -1
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        private 
var alarmMinute:Number = -1;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        private 
var alarmMessage:String;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        private 
var timer:Timer;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
// 构造函数, radius 为表盘半径
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
        public function AlarmClock(radius:Number = 100):void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 调用父类的构造函数
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            super(radius);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 计时器,每 1 秒 tick 一次
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            timer = new Timer(1000);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            timer.addEventListener(TimerEvent.TIMER, onTick);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            timer.start();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
/*
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)         * 设置提醒时间
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)         * @param hour        提醒时间的小时数
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)         * @param minute    提醒时间的分钟数
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)         * @param message    提醒信息
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)         * @return 无返回值
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)         
*/

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
function setAlarm(hour:Number = 0, minute:Number = 0, message:String = "Alarm!"):void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{          
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            alarmHour 
= hour;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            alarmMinute 
= minute;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)             alarmMessage 
= message;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
/*
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)         * 清除提醒时间
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)         
*/

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
function clearAlarm()
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            alarmHour 
= alarmMinute = -1;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        private 
function onTick(e:TimerEvent):void 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
var date:Date = new Date();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
if (alarmHour == date.hours && alarmMinute == date.minutes)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                
// 如果到了提醒时间则实例化 AlarmEvent,并通过 dispatchEvent() 触发该事件
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
                var alarm:AlarmEvent = new AlarmEvent(alarmMessage);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)                dispatchEvent(alarm);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)}


5、将闹钟对象显示到 UI 上,通过用户操作设置闹钟时间
在 UI 上放置两个 NumericStepper ,分别取名为 txtHour 和 txtMinute ,用来设置响铃的时间。再放置两份名称分别为 txtSet 和 txtClear 的 Button ,用来设置闹铃和取消闹铃。再放置一个名为 txtMessage 的 TextArea ,用来显示闹铃信息
Clock.as
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)package
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.display.MovieClip;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    import flash.events.MouseEvent;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    public class Clock extends MovieClip 
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
var alarmClock:AlarmClock;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        public 
function Clock():void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            btnSet.addEventListener(MouseEvent.CLICK, onSetAlarm);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            btnClear.addEventListener(MouseEvent.CLICK, onClearAlarm);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            txtHour.maximum 
= 23;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            txtMinute.maximum 
= 59;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            txtHour.value 
= new Date().hours;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            txtMinute.value 
= new Date().minutes;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            
// 实例化 AlarmClock,并在舞台上添加此对象
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)
            alarmClock = new AlarmClock(80);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            alarmClock.x 
= 200;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            alarmClock.y 
= 200;
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            alarmClock.addEventListener(AlarmEvent.ALARM, onAlarm);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            addChild(alarmClock);
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
function onSetAlarm(e:MouseEvent):void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            alarmClock.setAlarm(txtHour.value, txtMinute.value, 
"起床啦");
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
function onClearAlarm(e:MouseEvent):void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            alarmClock.clearAlarm();
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            txtMessage.text 
= "";
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
function onAlarm(e:AlarmEvent):void
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        
{
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            txtMessage.text 
+= e.alermMessage + " " + new Date().toString() + "/n";
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)            txtMessage.verticalScrollPosition 
= txtMessage.maxVerticalScrollPosition;    
积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)        }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)    }

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)}

积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)


OK
[源码下载]