积少成多Flash(5) - ActionScript 3.0 实例之闹钟(自定义事件, 画图, 动画)-阿里云开发者社区

开发者社区> 技术小胖子> 正文

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

简介:
+关注继续查看
[索引页]
[源码下载]


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


作者: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;         
                } 
        } 
}
 
 




     本文转自webabcd 51CTO博客,原文链接:http://blog.51cto.com/webabcd/342192,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26337 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8310 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2734 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
10732 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10082 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
11926 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
8586 0
如何设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云安全组设置详细图文教程(收藏起来) 阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程。阿里云会要求客户设置安全组,如果不设置,阿里云会指定默认的安全组。那么,这个安全组是什么呢?顾名思义,就是为了服务器安全设置的。安全组其实就是一个虚拟的防火墙,可以让用户从端口、IP的维度来筛选对应服务器的访问者,从而形成一个云上的安全域。
7126 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
21473 0
21119
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载