最终效果：
=>钟面类ClockFace.as
package com.cen.programmingas3.simpleclock
{
?? ?import flash.display.Shape;
?? ?import flash.text.TextField;
?? ?import flash.text.TextFormat;
?? ?
?? ?import mx.core.UIComponent;
?? ?/**
?? ? * 钟面实现类
?? ? * @author cen
?? ? */
?? ?public class ClockFace extends UIComponent
?? ?{
?? ??? ?/**
?? ??? ? * 属性设置*/
?? ??? ?
?? ??? ?/*宽度*/
?? ??? ?public var w:uint = 200;
?? ??? ?
?? ??? ?/*高度*/
?? ??? ?public var h:uint = 200;
?? ??? ?
?? ??? ?/*半径*/
?? ??? ?public var radius:uint;
?? ??? ?
?? ??? ?/*圆心坐标*/
?? ??? ?public var centerX:int;
?? ??? ?public var centerY:int;
?? ??? ?
?? ??? ?/*时针*/
?? ??? ?public var hourHand:Shape;
?? ??? ?public var hourHandColor:uint = 0x003366;
?? ??? ?
?? ??? ?/*分针*/
?? ??? ?public var minuteHand:Shape;
?? ??? ?public var minuteHandColor:uint = 0x000099;
?? ??? ?
?? ??? ?/*秒针*/
?? ??? ?public var secondHand:Shape;
?? ??? ?public var secondHandColor:uint = 0xCC0033;
?? ??? ?
?? ??? ?/*背景颜色*/
?? ??? ?public var bgColor:uint = 0xEEEEFF;
?? ??? ?
?? ??? ?/*当前时间*/
?? ??? ?public var currentTime:Date;
?? ??? ?
?? ??? ?/**
?? ??? ? * 类构造函数:可以设置宽高等属性；
?? ??? ? */?? ??? ?
?? ??? ?public function ClockFace(w:uint)
?? ??? ?{
?? ??? ??? ?/**
?? ??? ??? ? * 圆钟宽高等长*/
?? ??? ??? ?this.w = w;
?? ??? ??? ?this.h = w;
?? ??? ??? ?
?? ??? ??? ?/*设置半径*/
?? ??? ??? ?this.radius = Math.round(this.w / 2);
?? ??? ??? ?
?? ??? ??? ?/*圆心坐标*/
?? ??? ??? ?this.centerX = this.radius;
?? ??? ??? ?this.centerY = this.radius;
?? ??? ?}
?? ??? ?
?? ??? ?/**
?? ??? ? * 初始化函数：绘制圆圈、小时以及针；
?? ??? ? */?? ??? ?
?? ??? ?public function init():void{
?? ??? ??? ?/*绘制圆圈*/
?? ??? ??? ?drawBorder();
?? ??? ??? ?
?? ??? ??? ?/*绘制小时文本*/
?? ??? ??? ?drawHourLabels();
?? ??? ??? ?
?? ??? ??? ?/*绘制 针*/
?? ??? ??? ?createHands();
?? ??? ?}
?? ??? ?
?? ??? ?/**
?? ??? ? * 绘制针；使用2D绘制API来帮忙绘制；
?? ??? ? */?? ??? ?
?? ??? ?public function createHands():void{
?? ??? ??? ?
?? ??? ??? ?/**
?? ??? ??? ? * 时针*/
?? ??? ??? ?var hourHandShape:Shape = new Shape();
?? ??? ??? ?drawHand(hourHandShape,Math.round(radius*0.5),hourHandColor,3.0);
?? ??? ??? ?this.hourHand = Shape(addChild(hourHandShape));
?? ??? ??? ?this.hourHand.x = centerX;
?? ??? ??? ?this.hourHand.y = centerY;
?? ??? ??? ?
?? ??? ??? ?/**
?? ??? ??? ? * 分针*/
?? ??? ??? ?var minuteHandShape:Shape = new Shape();
?? ??? ??? ?drawHand(minuteHandShape,Math.round(radius*0.8),minuteHandColor,2.0);
?? ??? ??? ?this.minuteHand = Shape(addChild(minuteHandShape));
?? ??? ??? ?this.minuteHand.x = centerX;
?? ??? ??? ?this.minuteHand.y = centerY;
?? ??? ??? ?
?? ??? ??? ?/**
?? ??? ??? ? * 秒针*/
?? ??? ??? ?var secondHandShape:Shape = new Shape();
?? ??? ??? ?drawHand(secondHandShape,Math.round(radius*0.9),secondHandColor,0.5);
?? ??? ??? ?this.secondHand = Shape(addChild(secondHandShape));
?? ??? ??? ?this.secondHand.x = centerX;
?? ??? ??? ?this.secondHand.y = centerY;
?? ??? ?}
?? ??? ?
?? ??? ?/**
?? ??? ? * 绘制针通用函数；
?? ??? ? * @param hand
?? ??? ? * @param distance
?? ??? ? * @param color
?? ??? ? * @param thickness
?? ??? ? */?? ??? ?
?? ??? ?public function drawHand(hand:Shape,distance:uint,color:uint,thickness:Number):void{
?? ??? ??? ?hand.graphics.lineStyle(thickness,color);
?? ??? ??? ?hand.graphics.moveTo(0,distance);
?? ??? ??? ?hand.graphics.lineTo(0,0);
?? ??? ?}
?? ??? ?
?? ??? ?/**
?? ??? ? * 绘制小时文本；
?? ??? ? */?? ??? ?
?? ??? ?public function drawHourLabels():void{
?? ??? ??? ?for(var i:Number=1; i<=12; i++) {
?? ??? ??? ??? ?/**
?? ??? ??? ??? ? * 创建TextField控件来显示小时文本*/
?? ??? ??? ??? ?var label:TextField = new TextField();
?? ??? ??? ??? ?label.text = i.toString();
?? ??? ??? ??? ?
?? ??? ??? ??? ?/*夹角角度(弧度)*/
?? ??? ??? ??? ?var angleInRadians:Number = i * 30 * (Math.PI/180);
?? ??? ??? ??? ?
?? ??? ??? ??? ?/**
?? ??? ??? ??? ? * 显示位置*/
?? ??? ??? ??? ?label.x = centerX + (0.9 * radius * Math.sin(angleInRadians)) - 5;
?? ??? ??? ??? ?label.y = centerY - (0.9 * radius * Math.cos(angleInRadians)) - 9;
?? ??? ??? ??? ?
?? ??? ??? ??? ?/**
?? ??? ??? ??? ? * 设置文本样式*/
?? ??? ??? ??? ?var tformat:TextFormat = new TextFormat();
?? ??? ??? ??? ?tformat.font = "Arial";
?? ??? ??? ??? ?tformat.bold = "true";
?? ??? ??? ??? ?tformat.size = 12;
?? ??? ??? ??? ?label.setTextFormat(tformat);
?? ??? ??? ??? ?
?? ??? ??? ??? ?/*添加到钟面*/
?? ??? ??? ??? ?addChild(label);
?? ??? ??? ?}
?? ??? ?}
?? ??? ?
?? ??? ?/**
?? ??? ? * 绘制圆圈；
?? ??? ? */?? ??? ?
?? ??? ?public function drawBorder():void{
?? ??? ??? ?graphics.lineStyle(0.5,0x999999);
?? ??? ??? ?graphics.beginFill(bgColor);
?? ??? ??? ?graphics.drawCircle(centerX,centerY,radius);???? // 绘制圆并用指定颜色填充；
?? ??? ??? ?graphics.endFill();
?? ??? ?}
?? ??? ?
?? ??? ?/**
?? ??? ? * 绘制时间：会被父容器调用；
?? ??? ? * @return
?? ??? ? */?? ??? ?
?? ??? ?public function draw():void{
?? ??? ??? ?/**
?? ??? ??? ? * 存储当前时间*/
?? ??? ??? ?currentTime = new Date();
?? ??? ??? ?showTime(currentTime);
?? ??? ?}
?? ??? ?
?? ??? ?/**
?? ??? ? * 显示时间；
?? ??? ? * @param time
?? ??? ? */?? ??? ?
?? ??? ?public function showTime(time:Date):void{
?? ??? ??? ?/**
?? ??? ??? ? * 截取时间段*/
?? ??? ??? ?var seconds:uint = time.getSeconds();
?? ??? ??? ?var minutes:uint = time.getMinutes();
?? ??? ??? ?var hours:uint = time.getHours();
?? ??? ??? ?
?? ??? ??? ?/**
?? ??? ??? ? * 钟面初始时，时针、分针以及秒针都指向6点；
?? ??? ??? ? * 如果设置this.secondHand.rotation = 90;就表示此时秒针顺时针转90度；*/
?? ??? ??? ?
?? ??? ??? ?this.secondHand.rotation = 180 + (seconds*6);?? ?// 180度指的是使秒针回到12时才开始转动；可以算出1秒6度；
?? ??? ??? ?this.minuteHand.rotation = 180 + (minutes*6);?? ?// 同上，1分6度；
?? ??? ??? ?this.hourHand.rotation = 180 + (hours*30) + (minutes*0.5);?? ?//知道，1小时30度，那1分就是60分之30度，即1分时时钟转动0.5度；
?? ??? ?}
?? ??? ?
?? ?}?? ?
}
=>时钟类SimpleClock.as
package com.cen.programmingas3.simpleclock
{
?? ?import com.cen.programmingas3.simpleclock.ClockFace;
?? ?
?? ?import flash.events.TimerEvent;
?? ?import flash.utils.Timer;
?? ?
?? ?import mx.core.UIComponent;
?? ?
?? ?/**
?? ? * 模拟时钟类
?? ? * @author cen
?? ? */
?? ?public class SimpleClock extends UIComponent
?? ?{
?? ??? ?/**
?? ??? ? * 属性设置*/
?? ??? ?/*钟面*/
?? ??? ?public var face:ClockFace;
?? ??? ?
?? ??? ?/*计时器*/
?? ??? ?public var ticker:Timer;
?? ??? ?
?? ??? ?/*每分钟毫秒数*/
?? ??? ?public static const millisecondsPerMinute:int = 1000 * 60;
?? ??? ?
?? ??? ?/*每小时毫秒数*/
?? ??? ?public static const millisecondPerHour:int = 1000 * 60 * 60;
?? ??? ?
?? ??? ?/*每天毫秒数*/
?? ??? ?public static const millisecondPerDay:int = 1000 * 60 * 60 * 24;
?? ??? ?
?? ??? ?/**
?? ??? ? * 初始化(手动)；
?? ??? ? * @param faceSize
?? ??? ? */?? ??? ?
?? ??? ?public function initClock(faceSize:Number=200):void{
?? ??? ??? ?/*钟面*/
?? ??? ??? ?face = new ClockFace(Math.max(20,faceSize));
?? ??? ??? ?
?? ??? ??? ?/*手动初始化*/
?? ??? ??? ?face.init();
?? ??? ??? ?
?? ??? ??? ?/*把钟面添加到此组件上*/
?? ??? ??? ?addChild(face);
?? ??? ??? ?
?? ??? ??? ?/*绘制时间*/
?? ??? ??? ?face.draw();
?? ??? ??? ?
?? ??? ??? ?/**
?? ??? ??? ? * 使用计算器来刷新钟面*/
?? ??? ??? ?ticker = new Timer(1000);
?? ??? ??? ?ticker.addEventListener(TimerEvent.TIMER,onTick);
?? ??? ??? ?
?? ??? ??? ?/*开始*/
?? ??? ??? ?ticker.start();
?? ??? ?}
?? ??? ?
?? ??? ?/**
?? ??? ? * 每次都刷新，重新绘制时间；
?? ??? ? * @param event
?? ??? ? */?? ??? ?
?? ??? ?public function onTick(event:TimerEvent):void{
?? ??? ??? ?face.draw();
?? ??? ?}
?? ?}?? ?
}
=>主程序SimpleClockApp.mxml
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" ?? ??? ??? ??? xmlns:s="library://ns.adobe.com/flex/spark" ?? ??? ??? ??? xmlns:mx="library://ns.adobe.com/flex/mx" ?? ??? ??? ??? minWidth="955" minHeight="600" pageTitle="theStudioOfCenyebao" xmlns:simpleclock="com.cen.programmingas3.simpleclock.*"> ?? ? ?? ?<!--钟--> ?? ?<simpleclock:SimpleClock id="clock" creationComplete="clock.initClock()"/> </s:Application>
