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

[源码下载]

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

作者：webabcd

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

1、自定义事件（闹钟到点后所触发的自定义事件）
AlarmEvent.as


package 






{


    import flash.events.Event;


    


    public class AlarmEvent extends Event 




    

{


        // 定义事件类型


        public static const ALARM:String = "alarm";


        


        // 定义闹钟在响铃时所显示的信息


        public var alermMessage:String;


        


        // 构造函数，msg 为提醒信息


        public function AlarmEvent(msg:String = "ALARM!")




        

{


            // 调用父类的构造函数。参数为事件类型，可以作为 Event.type 访问


            super(ALARM);


    


            alermMessage = msg;


        }


        


        // 重写 Event 的 clone() 方法


        public override function clone():Event




        

{


            return new AlarmEvent(alermMessage);


        }


        


        // 重写 Event 的 toString() 方法


        public override function toString():String




        

{


            // Event.formatToString() - 在自定义 Event 类中实现 toString() 方法的 utility 函数


            return formatToString("AlarmEvent", "type", "bubbles", "cancelable", "eventPhase", "message");


        }


    }


}

2、画图（绘制表盘，刻度，时分秒针等）
ClockUI.as


package






{


    import flash.display.Shape;


    import flash.display.Sprite;


    import flash.display.StageAlign;


    import flash.display.StageScaleMode;


    import flash.text.StaticText;


    import flash.events.*;


    import flash.text.TextField;


    import flash.text.TextFormat;


    import flash.display.Sprite;


    


    // 绘制表盘 UI


    public class ClockUI extends Sprite 




    

{


        // 表盘半径


        public var radius:uint;


        


        // 表盘中心点的 X 坐标和 Y 坐标


        public var centerX:int;


        public var centerY:int;


        


        // 时, 分, 秒指针的形状


        public var hourHand:Shape;


        public var minuteHand:Shape;


        public var secondHand:Shape;


        


        // 表盘背景颜色，以及时, 分, 秒指针颜色（0x代表16进制）


        public var bgColor:uint = 0xEEEEFF;


        public var hourHandColor:uint = 0x003366;


        public var minuteHandColor:uint = 0x000099;


        public var secondHandColor:uint = 0xCC0033;


        


        // 构造函数，r 为表盘半径


        public function ClockUI(r:uint) 




        

{


            this.radius = r;


                    


            this.centerX = r;


            this.centerY = r;


        }


        


        // 初始化表盘


        public function init():void 




        

{


            // 画表盘的边框


            drawBorder();


            


            // 画表盘上的小时的标记


            drawHourLabel();




            // 画时, 分, 秒指针


            drawHand();


        }


        


        public function drawBorder():void




        

{


            // 指定线条样式，两个参数分别为线条的粗细（以磅为单位）和线条的颜色


            this.graphics.lineStyle(0.5, 0x999999);


            // 以指定的颜色开始填充，在调用 endFill() 后才会呈现填充


            this.graphics.beginFill(bgColor);


            // 画园，三个参数分别为圆心的 X 坐标、圆心的 Y 坐标和园的半径。之前调用的 beginFill() 方法将填充此园


            this.graphics.drawCircle(centerX, centerY, radius);


            // 呈现上次的 beginFill() 的结果


            this.graphics.endFill();


        }


  


        public function drawHourLabel():void




        

{


            for (var i:Number = 1; i <= 12; i++)




            

{


                // 表盘的刻度标识，1 到 12


                var lbl:TextField = new TextField();


                lbl.text = i.toString();


                


                // 小时刻度标识所需旋转的弧度（使用弧度是为了方便之后的 sin() 和 cos() 计算）


                var angle:Number = i * 30 * (Math.PI / 180);


                


                // 计算刻度标识的位置


                lbl.x = centerX + (0.9 * radius * Math.sin(angle)) - 5;


                lbl.y = centerY - (0.9 * radius * Math.cos(angle)) - 9;


                


                // 格式化刻度标识的文本样式


                var tf:TextFormat = new TextFormat();


                // tf.font = "Arial";


                tf.bold = "true";


                tf.size = 12;


                lbl.setTextFormat(tf);


                


                // 在 Container 中添加指定的 DisplayObject ，返回值为被添加到 Container 后的 DisplayObject


                this.addChild(lbl);


            }


        }


        


        public function drawHand():void




        

{       


            hourHand = new Shape();


            hourHand.graphics.lineStyle(3, hourHandColor);


            // 移动当前的绘画起点到指定的位置


            hourHand.graphics.moveTo(0, -radius * 0.5);


            // 画直线到指定位置，起点位置由 moveTo() 决定


            hourHand.graphics.lineTo(0, 0);


            hourHand.x = centerX;


            hourHand.y = centerY;        


            addChild(hourHand);


                     


              minuteHand = new Shape();


            minuteHand.graphics.lineStyle(2, minuteHandColor);


            minuteHand.graphics.moveTo(0, -radius * 0.8);


            minuteHand.graphics.lineTo(0, 0);


             minuteHand.x = centerX;


            minuteHand.y = centerY;


            addChild(minuteHand);


 


             secondHand = new Shape();


            secondHand.graphics.lineStyle(0.5, secondHandColor);


            secondHand.graphics.moveTo(0, -radius * 0.9);


            secondHand.graphics.lineTo(0, 0);


            secondHand.x = centerX;


            secondHand.y = centerY;


            addChild(secondHand);


        }


        


        // 以当前系统时间刷新表盘的呈现


        public function refresh():void




        

{


            // new Date() - Flash 宿主的系统时间


            var currentTime:Date = new Date();


            


            var hour:uint = currentTime.getHours();


            var minute:uint = currentTime.getMinutes();


            var second:uint = currentTime.getSeconds();


    


            // 时, 分, 秒指针做相应的旋转。单位：度数


            this.hourHand.rotation = hour * 30 + minute * 0.5;


            this.minuteHand.rotation = minute * 6;


            this.secondHand.rotation = second * 6;


        }


    }


}

3、动画（让时,分,秒针动起来）
SimpleClock.as


package 






{


    import flash.display.Sprite;




    public class SimpleClock extends Sprite




    

{


        import flash.events.TimerEvent;


        import flash.utils.Timer;


        


        private var timer:Timer;


        private var clockUI:ClockUI;


        


        // 构造函数，radius 为表盘半径


        public function SimpleClock(radius:Number = 100):void 




        

{            


            // 实例化一个 ClockUI 对象，并将其添加到舞台上


            clockUI = new ClockUI(Math.max(20, radius));


            clockUI.init();


            addChild(clockUI);


        


            // 刷新表盘 UI


            clockUI.refresh();




            // 实例化一个计时器，每 1 秒 tick 一次


            timer = new Timer(1000);       


            timer.addEventListener(TimerEvent.TIMER, onTick);


            timer.start();


        }




        private function onTick(e:TimerEvent):void 




        

{


            // 刷新表盘 UI


            clockUI.refresh();


        }        


    }


}

4、组装以上各个类，以成为一个完整的闹钟对象（这里来确定如何触发我们开始写的那个自定义事件）
AlarmClock.as


package 






{


    public class AlarmClock extends SimpleClock 




    

{


        import flash.events.MouseEvent;


        import flash.events.TimerEvent;


        import flash.utils.Timer;


            


        private var alarmHour:Number = -1; 


        private var alarmMinute:Number = -1;


        private var alarmMessage:String;


        private var timer:Timer;


        


        // 构造函数， radius 为表盘半径


        public function AlarmClock(radius:Number = 100):void




        

{


            // 调用父类的构造函数


            super(radius);




            // 计时器，每 1 秒 tick 一次


            timer = new Timer(1000);


            timer.addEventListener(TimerEvent.TIMER, onTick);


            timer.start();


        }






        /**//*


         * 设置提醒时间


         * @param hour        提醒时间的小时数


         * @param minute    提醒时间的分钟数


         * @param message    提醒信息


         * @return 无返回值


         */


        public function setAlarm(hour:Number = 0, minute:Number = 0, message:String = "Alarm!"):void




        

{          


            alarmHour = hour;


            alarmMinute = minute;


             alarmMessage = message;


        }


        




        /**//*


         * 清除提醒时间


         */


        public function clearAlarm()




        

{


            alarmHour = alarmMinute = -1;


        }




        private function onTick(e:TimerEvent):void 




        

{


            var date:Date = new Date();


            


            if (alarmHour == date.hours && alarmMinute == date.minutes)




            

{


                // 如果到了提醒时间则实例化 AlarmEvent，并通过 dispatchEvent() 触发该事件


                var alarm:AlarmEvent = new AlarmEvent(alarmMessage);


                dispatchEvent(alarm);


            }


        }


    }


}

5、将闹钟对象显示到 UI 上，通过用户操作设置闹钟时间
在 UI 上放置两个 NumericStepper ，分别取名为 txtHour 和 txtMinute ，用来设置响铃的时间。再放置两份名称分别为 txtSet 和 txtClear 的 Button ，用来设置闹铃和取消闹铃。再放置一个名为 txtMessage 的 TextArea ，用来显示闹铃信息
Clock.as


package






{


    import flash.display.MovieClip;


    import flash.events.MouseEvent;


    


    public class Clock extends MovieClip 




    

{


        var alarmClock:AlarmClock;


        


        public function Clock():void




        

{


            btnSet.addEventListener(MouseEvent.CLICK, onSetAlarm);


            btnClear.addEventListener(MouseEvent.CLICK, onClearAlarm);


            txtHour.maximum = 23;


            txtMinute.maximum = 59;


            txtHour.value = new Date().hours;


            txtMinute.value = new Date().minutes;




            // 实例化 AlarmClock，并在舞台上添加此对象


            alarmClock = new AlarmClock(80);


            alarmClock.x = 200;


            alarmClock.y = 200;


            alarmClock.addEventListener(AlarmEvent.ALARM, onAlarm);


            addChild(alarmClock);


        }


        


        function onSetAlarm(e:MouseEvent):void




        

{


            alarmClock.setAlarm(txtHour.value, txtMinute.value, "起床啦");


        }


        


        function onClearAlarm(e:MouseEvent):void




        

{


            alarmClock.clearAlarm();


            txtMessage.text = "";


        }


        


        function onAlarm(e:AlarmEvent):void




        

{


            txtMessage.text += e.alermMessage + " " + new Date().toString() + "/n";


            txtMessage.verticalScrollPosition = txtMessage.maxVerticalScrollPosition;    


        }


    }


}



OK
[源码下载]