积少成多Flash(5) - ActionScript 3.0 实例之闹钟(自定义事件, 画图, 动画)
[索引页]
[源码下载]
作者：webabcd
介绍
通过一个经典示例，即闹钟，对使用 Flash ActionScript 3.0 画图、做动画有一个大概的了解，并通过此示例学习自定义事件的开发
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
[源码下载]
[源码下载]
积少成多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; } }}OK
[源码下载]
