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

电脑资料 时间:2019-01-01 我要投稿
【www.unjs.com - 电脑资料】

介绍

通过一个经典示例,即闹钟,对使用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!")
        {
            // 调用父类的构造函数,

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

。参数为事件类型,可以作为 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 ();

            // 时, 分, 秒指针做相应的旋转,

电脑资料

积少成多Flash(5) ActionScript 3.0 实例之闹钟(自定义事件,画图,动画)》(https://www.unjs.com)。单位:度数
            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;
        }
    }
}

原文地址:

http://www.cnblogs.com/webabcd/archive/2009/03/05/1403566.html

最新文章