How to add array to stage and rotate the individual roman numerals to make it look like a clock?

Question

var time:Date = new Date();


secmc.rotation = time.getSeconds() * 6; // rotation for the seconds hand
minmc.rotation = time.getMinutes() * 6; // rotation for the minutes hand
hourmc.rotation = time.getHours() * 30; // rotation for the minutes hand



// list of roman numerals
var numerals:Array = ["XII",
                      "I",
                      "II",
                      "III",
                      "IV",
                      "V",
                      "VI",
                      "VII",
                      "VIII",
                      "IX",
                      "X",
                      "XI"]; // Roman numerals I want to add to stage and rotate


function drawPic(xpos:int,ypos:int,ang:int)
{
    numerals[numerals.length]
    numerals.x=xpos;
    numerals.y=ypos;
    numerals.rotation=ang;

}


for ( var i:int=0 ; i<13 ; i++ )
{
    drawPic (200 ,200,30*i); // for loop to help rotate the roman numerals

}

Have been trying to do this for about 3 hours and its probably simple but am a noob when it comes to actionscript any help would be appreciated, i just wanna know how to add the numerals to stage and rotate it each numerals like on a clock help if you understand.

score 0 · Answer 1 · answered Nov 18 '14 at 14:24

If I understand correctly you want the to equally distribute the 12 roman numerals along a circle and have the 'bottom' of every number face inward. Try this:

/**
     * Start of the program
     */
    private function start():void
    {
        //the angle in radians
        var radians:Number = 0;

        //the angle in degrees
        var angle:Number = 0;

        //calculating how much we have to add to the angle each numeral
        var part:Number = Math.PI / 6;

        //the loop that distributes the numerals
        for (var i:int = 0; i < 12; i++) {
            var dx:Number = Math.sin(radians) * radius;//the offset on the x-axis
            var dy:Number = - Math.cos(radians) * radius;//the offset on the y-axis
            trace("dx: "  + dx + " dy: " + dy);
            //converting the radian angle to angle in degrees
            angle = radians * 180 / Math.PI;
            drawNumeral(dx + center.x, dy + center.y, angle, numerals[i]);

            radians += part;
        }
    }

    /**
     * Draws the provided numeral at the provided position
     * @param   x       the x-coordinate
     * @param   y       the y-coordinate
     * @param   angle   the angle in degrees
     * @param   text    the text to fill the textfield
     */
    private function drawNumeral(x:Number, y:Number, angle:Number, text:String):void
    {
        var tf:TextField = new TextField();
        tf.type = TextFieldType.DYNAMIC;
        tf.width = 20;//adjusting the size to fit only 1 numeral
        tf.height = 20;//adjusting the size to fit only 1 numeral
        tf.x = x; 
        tf.y = y;
        tf.z = 0;
        tf.rotationZ = angle;
        tf.text = text;
        stage.addChild(tf);
    }

This code works on my machine. I'm using 3D rotation (the rotationZ property of the textfield) because that makes it so I don't have to embed the font.

How to add array to stage and rotate the individual roman numerals to make it look like a clock?

1 Answers1