Final effect:
=> Clock face clockface.
Package com. Cen. programmingas3.simpleclock
{
Import flash. display. shape;
Import flash. Text. textfield;
Import flash. Text. textformat;
Import MX. Core. uicomponent;
/**
* Clock plane implementation class
* @ Author CEN
*/
Public class clockface extends uicomponent
{
/**
* Attribute settings */
/* Width */
Public var W: U Int = 200;
/* Height */
Public var H: uint = 200;
/* Radius */
Public var radius: uint;
/* Center Coordinate */
Public var centerx: int;
Public var centery: int;
/* Hour */
Public var hourhand: shape;
Public var hourhandcolor: uint = 0x003366;
/* Sub-needle */
Public var minutehand: shape;
Public var minutehandcolor: uint = 0x000099;
/* Seconds */
Public var secondhand: shape;
Public var secondhandcolor: uint = 0xcc0033;
/* Background Color */
Public var bgcolor: uint = 0 xeeeeff;
/* Current time */
Public var currenttime: date;
/**
* Class constructor: You can set attributes with higher width;
*/
Public Function clockface (W: uint)
{
/**
* The width and height of the circular clock */
This. W = W;
This. H = W;
/* Set the radius */
This. radius = math. Round (this. W/2 );
/* Center Coordinate */
This. centerx = This. radius;
This. centery = This. radius;
}
/**
* Initialization function: Draw circles, hours, and needles;
*/
Public Function Init (): void {
/* Draw a circle */
Drawborder ();
/* Draw the hour text */
Drawhourlabels ();
/* Draw a needle */
Createhands ();
}
/**
* Draw the needle. Use the 2D drawing API to help draw the needle;
*/
Public Function createhands (): void {
/**
* Hour */
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;
/**
* Sub-needle */
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;
/**
* Seconds */
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;
}
/**
* General function for drawing a needle;
* @ 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 );
}
/**
* Draws the hour text;
*/
Public Function drawhourlabels (): void {
For (var I: Number = 1; I <= 12; I ++ ){
/**
* Create a textfield control to display the hour text */
VaR label: textfield = new textfield ();
Label. Text = I. tostring ();
/* Angle (radian )*/
VaR angleinradians: Number = I * 30 * (math. PI/180 );
/**
* Display position */
Label. x = centerx + (0.9 * radius * Math. Sin (angleinradians)-5;
Label. Y = centery-(0.9 * radius * Math. Cos (angleinradians)-9;
/**
* Set text styles */
VaR tformat: textformat = new textformat ();
Tformat. font = "Arial ";
Tformat. Bold = "true ";
Tformat. size = 12;
Label. settextformat (tformat );
/* Add to minutes */
Addchild (Label );
}
}
/**
* Draw a circle;
*/
Public Function drawborder (): void {
Graphics. linestyle (0.5, 0x999999 );
Graphics. beginfill (bgcolor );
Graphics. drawcircle (centerx, centery, radius); // draw a circle and fill it with the specified color;
Graphics. endfill ();
}
/**
* Painting time: it will be called by the parent container;
* @ Return
*/
Public Function draw (): void {
/**
* Store the current time */
Currenttime = new date ();
Showtime (currenttime );
}
/**
* Display time;
* @ Param time
*/
Public Function Showtime (Time: Date): void {
/**
* Truncation time period */
VaR seconds: uint = time. getseconds ();
VaR minutes: uint = time. getminutes ();
VaR hours: uint = time. gethours ();
/**
* At the beginning of the minute, the hour, minute, and second hands point to six points;
* If this. Secondhand. rotation is set to 90, the second hand turns clockwise to 90 degrees ;*/
This. Secondhand. Rotation = 180 + (seconds * 6); // 180 degrees indicates that the second needle starts to rotate when it returns to 12; you can calculate 6 degrees for 1 second;
This. minutehand. Rotation = 180 + (minutes * 6); // same as above, 1 minute and 6 degrees;
This. hourhand. rotation = 180 + (hours * 30) + (minutes * 0.5); // Yes, 1 hour and 30 degrees, that is, 60 points and 30 degrees, that is, the 1-time clock rotates 0.5 degrees;
}
}
}
=> Simpleclock.
Package com. Cen. programmingas3.simpleclock
{
Import com. Cen. programmingas3.simpleclock. clockface;
Import flash. Events. timerevent;
Import flash. utils. timer;
Import MX. Core. uicomponent;
/**
* Analog clock
* @ Author CEN
*/
Public class simpleclock extends uicomponent
{
/**
* Attribute settings */
/* Minutes */
Public var face: clockface;
/* Timer */
Public var ticker: timer;
/* Millisecond count per minute */
Public static const millisecondsperminute: Int = 1000*60;
/* The number of milliseconds per hour */
Public static const millisecondperhour: Int = 1000*60*60;
/* Number of milliseconds per day */
Public static const millisecondperday: Int = 1000*60*60*24;
/**
* Initialization (manual );
* @ Param facesize
*/
Public Function initclock (facesize: Number = 200): void {
/* Minutes */
Face = new clockface (math. Max (20, facesize ));
/* Manually initialize */
Face. INIT ();
/* Add the clock surface to this component */
Addchild (FACE );
/* Draw time */
Face. Draw ();
/**
* Use a calculator to refresh the clock surface */
Ticker = new timer (1000 );
Ticker. addeventlistener (timerevent. Timer, ontick );
/* Start */
Ticker. Start ();
}
/**
* Refresh each time and redraw the time;
* @ Param event
*/
Public Function ontick (Event: timerevent): void {
Face. Draw ();
}
}
}
=> Main program 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. *">
<! -- Zhong -->
<Simpleclock: simpleclock id = "Clock" creationcomplete = "clock. initclock ()"/>
</S: Application>