博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
积少成多Flash(5) - ActionScript 3.0 实例之闹钟(自定义事件, 画图, 动画)
阅读量:6870 次
发布时间:2019-06-26

本文共 7137 字,大约阅读时间需要 23 分钟。





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


作者:



介绍

通过一个经典示例,即闹钟,对使用 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
     本文转自webabcd 51CTO博客,原文链接: http://blog.51cto.com/webabcd/342192
,如需转载请自行联系原作者
你可能感兴趣的文章
获取音视频文件AVMetadata数据
查看>>
sql serve 创建序列
查看>>
模型层的生成
查看>>
关于APP接口设计
查看>>
【VI】如何再执行上一个(历史)命令(已解决)
查看>>
KendoUI系列:DropDownList
查看>>
Axure7.0汉化方法
查看>>
我的MYSQL学习心得(九)
查看>>
JavaScript高级程序设计学习笔记--DOM
查看>>
shell变量注意事项
查看>>
BASH Shell 简易进度条小函数
查看>>
linux解压rar压缩文件
查看>>
[Android]Android端ORM框架——RapidORM(v2.0)
查看>>
使用Masstransit开发基于消息传递的分布式应用
查看>>
Windows下使用ffmpeg与java实现截取视频缩略图
查看>>
iOS10-- snapshotViewAfterScreenUpdates 失效
查看>>
微信小程序开发教程!博卡君第二弹【微信小程序项目结构以及配置】
查看>>
Andorid面试问题整理
查看>>
phalcon: 官方多模块
查看>>
RabbitMQ学习笔记3-使用topic交换器
查看>>