Analog Clock Tutorial for haXe
From GMpedia.org Wiki
Contents |
[edit] Pepe's example analog clock
I found a fine tutorial to bild an analog clock, see the external link, and tryed to use Haxe to get the SWF-file. I explain here what I have done ... .
[edit] Helpfile for compilation
I do compilation in a Cygwin-command-window on a W2000 PC.
Suppose Haxe is living at / ... /Haxe/ .
/.../Haxe/ Installation Directory /.../Haxe/clock/compile.hxml /.../Haxe/clock/src/clock.hx /.../Haxe/clock/bin Result directory of compilation will contain clock.swf after errorfree compilation. Go in a Cygwin-command-window to /.../Haxe/clock/ and execute prompt> ../haxe compile.hxml
Content of compile.hxml:
-cp src/ -swf bin/clock.swf -main Clock.hx
If you use a normal DOS-box for compilation, replace / by \.
[edit] Source of the clock
This is my source to build a running analog clock
Pay attention: Date.hx (von Haxe) has been adjusted, see below!
import flash.MovieClip;
class Clock
{
private var clock : MovieClip;
private var circle : MovieClip;
public function new ()
{
clock = flash.Lib._root.createEmptyMovieClip ("clock", 3);
clock._x = 150;
clock._y = 150;
circle = clock.createEmptyMovieClip ("circle", 1);
var circleRadius = 100.0;
var a = 0.0;
var radAngle = 0.0;
circle.lineStyle (3, 0x0000FF, 100);
circle.moveTo(100,0);
var xCoord = 0;
var yCoord = 0;
//for (a=0; a<361; a++) not possible in Haxe
while( a < 361.0){
radAngle = a*Math.PI/180;
xCoord = Math.floor(Math.cos(radAngle)*circleRadius);
yCoord = Math.floor(Math.sin(radAngle)*circleRadius);
circle.lineTo(xCoord, yCoord);
a = a +1.0;
}
clock.circle.lineStyle(3, 0x000000, 100);
clock.circle.moveTo(100, 0);
var circleRadius = 100;
var smallerCircleRadius = 90;
var h = 0;
var xCoord1 = 0.0;
var yCoord1 = 0.0;
var hourAngle = 0.0;
var radHourAngle = 0.0;
//for (h=0; h<12; h++) {
while( h< 12 ){
hourAngle = h*30;
radHourAngle = hourAngle*Math.PI/180;
xCoord1 = Math.cos(radHourAngle)*circleRadius;
yCoord1 = Math.sin(radHourAngle)*circleRadius;
//local variable is ok too
var xCoord2 = Math.cos(radHourAngle)*smallerCircleRadius;
var yCoord2 = Math.sin(radHourAngle)*smallerCircleRadius;
clock.circle.moveTo(xCoord1, yCoord1);
clock.circle.lineTo(xCoord2, yCoord2);
h++;
}
clock.circle.lineStyle(1, 0x000000, 100);
clock.circle.moveTo(100, 0);
circleRadius = 99;
smallerCircleRadius = 91;
var minuteAngle = 0;
var radMinuteAngle = 0.0;
//for (m=0; m<60; m++) { //not possible
var m = 0;
while( m < 60 ){
minuteAngle = m*6;
radMinuteAngle = minuteAngle*Math.PI/180;
xCoord1 = Math.cos(radMinuteAngle)*circleRadius;
var yCoord1 = Math.sin(radMinuteAngle)*circleRadius;
var xCoord2 = Math.cos(radMinuteAngle)*smallerCircleRadius;
var yCoord2 = Math.sin(radMinuteAngle)*smallerCircleRadius;
clock.circle.moveTo(xCoord1, yCoord1);
clock.circle.lineTo(xCoord2, yCoord2);
m++;
}
//Haxe Date.hx has to be adjusted !!!!!
clock.createEmptyMovieClip("hoursHand", 20);
clock.hoursHand.lineStyle(6, 0x000000, 100);
clock.hoursHand.moveTo(0, 0);
clock.hoursHand.lineTo(0, -50);
var minutesHand = clock.createEmptyMovieClip("minutesHand", 30);
clock.minutesHand.lineStyle(5, 0x000000, 100);
clock.minutesHand.moveTo(0, 0);
clock.minutesHand.lineTo(0, -81);
var seondsHand = clock.createEmptyMovieClip("secondsHand", 40);
clock.secondsHand.lineStyle(0, 0xFF0000, 100);
clock.secondsHand.moveTo(0, 0);
clock.secondsHand.lineTo(0, -90);
// This makes the clock running!
clock.onEnterFrame = mainLoop;
}
private function mainLoop () : Void
{
var clockDate = Date.now();
var seconds = clockDate.getSeconds();
clock.secondsHand._rotation = seconds * 6;
var minutes = clockDate.getMinutes();
clock.minutesHand._rotation = minutes * 6;
var hours = clockDate.getHours();
clock.hoursHand._rotation = (hours * 30) + (minutes/2);
}
public static function main ()
{
new Clock ();
}
}
[edit] HTML file
<html>
<head><title>Analog clock</title></head>
<body bgcolor="#dddddd">
<center>
<h1>Haxe build analog clock</h1>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="300"
height="300"
id="haxe"
align="middle">
<param name="movie" value="clock.swf"/>
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#f0f0f0"/>
<embed src="clock.swf"
bgcolor="#ff00ff"
width="300"
height="300"
name="haxe"
quality="high"
align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
/>
</object>
</center>
</body>
</html>
[edit] Adjustments for Date.hx
Add to Date.hx
function getSeconds(): Int; function getMinutes(): Int; function getHours(): Int;
[edit] External Links
- Tutorial bij Firdosh Tangri. No access anymore (Pepe)
- analog clock Starting from Actionscript Tutorial analog clock is used to produce the analog clock, using Haxe. Date.hx had to be expanded. On (my) German Wiki
Pepe.
