积少成多Flash ActionScript 3.0(5) - 实例之闹钟(自定义事件, 画图, 动画)_积少成多flash(5) - actionscript 3.0 实例之闹钟(自定-程序员宅基地

技术标签： date  button  timer  string  Flash ActionScript  actionscript  flash  

[源码下载]


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


作者： 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
[源码下载]
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webabcd/article/details/4608353

智能推荐

基于单片机的加热炉炉温控制系统设计-程序员宅基地

文章浏览阅读3.5k次，点赞7次，收藏41次。但由于输出控制量只有两种状态，使被控参数在两个方向上变化的速率均为最大，因此容易引起反馈回路产生振荡，对自动控制加热炉炉温控制系统会产生十分不利的影响，甚至会因为输出开关的频繁动作而不能满足加热炉炉温控制系统对控制精度的要求。但随着计算机与超大规模集成电路的迅速发展，以现代控制理论和计算机为基础，采用数字控制、显示、A/D与D/A转换，配合执行器与控制阀构成的计算机控制加热炉炉温控制系统，在过程控制过程中得到越来越广泛的应用。由于炉温控制加热炉炉温控制系统的控制对象具有惯性大，连续性的特点。_基于单片机的加热炉炉温控制系统设计

Oracle-----约束简介&非空约束&唯一约束&主键约束-程序员宅基地

文章浏览阅读2.1k次，点赞2次，收藏4次。上一篇????:Oracle-----为表重命名&数据表删除&闪回技术&修改表结构文章目录1、约束简介2、非空约束(not null、nk)2.1 范例1：使用非空约束2.2 范例2：正确地增加语句2.3 范例3：错误地增加语句3、唯一约束(unique、uk)3.1 范例1：使用唯一约束3.2 范例2：正确地增加语句3.3 范例3：错误地增加语句3.4 范例4：查询user...

CamVid数据集（智能驾驶场景的语义分割）_camvid数据集11类别-程序员宅基地

文章浏览阅读3.3k次，点赞2次，收藏7次。前言CamVid 数据集是由剑桥大学公开发布的城市道路场景的数据集。CamVid全称：The Cambridge-driving Labeled Video Database，它是第一个具有目标类别语义标签的视频集合。数据集包 括 700 多张精准标注的图片用于强监督学习，可分为训练集、验证集、测试集。同时， 在 CamVid 数据集中通常使用 11 种常用的类别来进行分割精度的评估，分别为：道路 （Road）、交通标志（Symbol）、汽车（Car）、天空（Sky）、行人道（Sidewalk）、电_camvid数据集11类别

ESP32 LVGL8.1 实现太空人显示（29）_lv_img_declare-程序员宅基地

文章浏览阅读8.7k次，点赞11次，收藏90次。文章目录一、ESP32 LVGL工程配置1.1从库中下载LVGL代码1.2配置适合ESP32 液晶屏1.3编译下载测试二、GIF图片处理2.1下载gif图片2.2将gif图片按照帧率导出成图片2.lvgl animimg对象实现图片的播放1.3下载测试 注：本博客作为学习笔记，有错误的地方希望指正一、ESP32 LVGL工程配置首先要通过液晶屏显示太空人，我们这里主要有两种方式可以实现，第一种直接使用厂家只带的液晶屏幕驱动去实现图片的显示，另外使用其他的GUI提供的控件去实现，嵌入式常见的GUI挺多_lv_img_declare

最小权顶点覆盖问题-程序员宅基地

文章浏览阅读1.5w次，点赞7次，收藏30次。问题描述：给定一个赋权无向图G=(V,E)，每个顶点v∈V都有一个权值w(v)。如果UV，且对任意（u,v）∈E有u∈U或v∈U，就称U为图G的一个顶点覆盖。G的最小权顶点覆盖是指G中所含顶点权之和最小的顶点覆盖。问题解决：用优先队列分支限界方法解最小权顶点覆盖，在算法的搜索的进程中保存当前已构造出的部分解空间树，在算法搜索达到叶节点时，其最优值对应的最优解同时保存下来。优先队列的优先_最小权顶点覆盖

matlab如何导入map,matlab添加M_map工具箱-程序员宅基地

文章浏览阅读517次。首先试了matlab自带的worldmap，感觉画出来的图形不尽如人意，比较杂乱。如下图。查阅了些资料，请教了Liangjing，一致推荐m_map。为了达到想要的效果，这次只要不再偷懒，下载M-Map工具箱(http://www.eos.ubc.ca/~rich/map.html)并进行安装。所幸过程比较顺利，现记录如下，回头把画出的效果图再添上。其他matlab的toolbox安装，也可参考进..._mmap工具包如何安装

随便推点

c语言编程实现strlen,C语言::模拟实现strlen函数(示例代码)-程序员宅基地

文章浏览阅读750次。编写一个C语言程序模拟实现strlen函数.算法strlen函数功能是计算字符串中字符的个数.(除\0外)而字符串本身就是一个字符数组,只不过末尾以\0结束.因此,我们只需遍历除\0之外的所有字符即可.有三种方法可以解决这个问题.算法总结方法一:设置一个整型计数器,遍历字符串.方法二:通过不断函数自身的递归.方法三:与方法一类似,设置一个char*变量标记字符串尾部,通过指针相减得到字符长度.核心..._c语言实现strlen

P74-前端基础项目开发-首页main部分开发广告栏-项目完整代码_首页广告开发-程序员宅基地

文章浏览阅读904次。P74-前端基础项目开发-首页main部分开发广告栏-项目完整代码1.概述这篇文章是首页开发最后一个部分，也是这个项目的结束部分。通过这个项目练习让我们掌握了HTML+CSS的基础使用。2.广告栏2.1.广告栏需求样式2.2.创建广告栏内容在index.html文件中创建广告栏内容 <!-- 创建广告容器 --> <div class="ad w"> <ul class="shortcut"> <li> _首页广告开发

TS流结构图_现代电视技术中解析ts包头的工作流程图-程序员宅基地

文章浏览阅读2k次。该说真正了解TS，还是看了朋友推荐的《数字电视业务信息及其编码》一书之后，MPEG2 TS和数字电视是紧密不可分割的，值得总结一下其中的一些关系。ISO/IEC－13818－1：系统部分；ISO/IEC－13818－2：视频；ISO/IEC－13818－3：音频；ISO/IEC－13818－4：一致性测试；ISO/IEC－13818－5：软件部分；ISO/IEC－138_现代电视技术中解析ts包头的工作流程图

android 添加依赖出现Failed to resolve:"你添加的依赖名" 或者出现 debug@Compileclasspath问题_android failed to resolve: com.github.xiaohaibin:x-程序员宅基地

文章浏览阅读4.8w次，点赞11次，收藏16次。首先出现的问题是debug@Compileclasspath的问题，经过一波百度之后都说是AS build.gradle版本3.0以上的问题，但是经过一波修改之后并没有什么卵用，并没有解决这个问题，并且出现了新的问题，就是Failed to resolve:.......这个问题了，这面贴下终极解决方案，希望可以帮到你。问题截图：解决方案：在整个工程的build.gradle中添加以..._android failed to resolve: com.github.xiaohaibin:xbanner:1.8.9

php路由类默认模块,Laravel学习教程之路由模块-程序员宅基地

文章浏览阅读169次。前言本文主要给大家介绍的是关于Laravel路由模块的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。备注：本文是基于Laravel 5.4版本的路由模块代码进行分析书写；模块组成下图展示了路由模块中各个文件的关系，并进行简要说明；剖析服务提供者看Laravel模块，首先找ServiceProvider文件，这是模块与IOC容器交互的入口，从这个文件，可以看出该模块提供向..._symfony app('router')->getcurrentrequest()

Google Chrome 浏览器 开发者工具 使用教程-程序员宅基地

文章浏览阅读354次。Google Chrome 浏览器 开发者工具 使用教程 12,912 9 3.83 / 5 53.83分(6票)8对于Chrome 浏览器，除了占用内存的缺点，其他都很不错。对于Chrome 浏览器的开发者工具，Jeff 除了Elements、Resources、Network..._开发者使用教程

推荐文章

热门文章

相关标签