What's The Time, Beginner - Intermediate (SwishMax) Options

[cybernetix]

Sample: : Here :

CODE

onload() {
    c_=createEmptyMovieClip("_c_",1);
    c_._x=150,c_._y=150;
    for (c="0xFFFFFF",i=0,x=100;i<60;i++)
         m=c_.createEmptyMovieClip("m"+i,i+1),
         m.moveTo(0,x),
         m._rotation=i*6,
         m.lineStyle(i%5?3:4,c,x),
         m.lineTo(0,x-(i%5?4:7));
    for (i=1;i<=3;i++)
         t=c_.createEmptyMovieClip("t"+i,i+x),
         t.lineStyle(i==1?3:5,c,x),
         t.lineTo(0,(x-(i*(i==2?10:15)))*-1);
    c_.f=function() {
         d=new Date(),
         this.t1._rotation=d.getSeconds()*6,
         this.t2._rotation=d.getMinutes()*6+d.getSeconds()/10,
         this.t3._rotation=d.getHours()*30+d.getMinutes()/2;
    };
    c_.f(),
    c_.i=setInterval(c_,"f",1000);
}

create new swi file, make scene 500x500pix, movie background color let's say red or blue, open scene panel script copy/paste this code and test it in external browser.

swf file will be approx 0.5kb, means less than 1kb.

I will explain each row of code later.

[cybernetix]

thanks girls and guys. now, as I promissed, explanation.

CODE

onload() {

// create container (empty sprite) for clock, so we can, later, move it around
        c_=createEmptyMovieClip("_c_",1);

        // move container to position x and y
        c_._x=150,c_._y=150;

        // color c will be white, radius and alpha x will be 100. there are 60 markers,
        // so loop while i <60
        for (c="0xFFFFFF",i=0,x=100;i<60;i++)
            
            //in this loop minut and hour markers will be created, each one will be
           // sprite, with different name "m"+i (number) in level i+1, so each one
           // will be in different level. no intersection.
            m=c_.createEmptyMovieClip("m"+i,i+1),

            // now, move it to start position
            m.moveTo(0,x),

            // calculate rotation, we wants real clock and marker should be placed under             //  right angle. tehere are 60 markers, so angle between them is 360/60=6,
            // so right angle will be i (marker in row) *6.
            m._rotation=i*6,

            // now, determine is it minute marker or clock marker. if mod i%5 == 0 it
            // will return FALSE, so it is each fifth marker, means hour marker,
            // otherwise it is minute marker. if FALSE returned, line will be 4 pix,
            // otherwise 3 pix. also set color = c, and alpha = x.
            m.lineStyle(i%5?3:4,c,x),

            // draw line, if it is a minute draw shorter line 4 pix, otherwise 7 pix
            // same calculation as previous, but now we draw line on position
           // 0,x-line.width so we shall get them in perfect circle.
            m.lineTo(0,x-(i%5?4:7));

        // now tellers, there are 3 of them, for hours, minutes and seconds    
        for (i=1;i<=3;i++)
        
            // new sprite again, another level
            t=c_.createEmptyMovieClip("t"+i,i+x),
            
            // if i == 1 it is first one, it is seconds teller, tinny line 3 pix,
           // otherwise it is minutes or hours teller, means line 5 pix.
            t.lineStyle(i==1?3:5,c,x),
            
     // let's see which teller is in the row, seconds, minutes or houres and draw it.
     // calculate length of teller. see previous explanation for calculation.
            t.lineTo(0,(x-(i*(i==2?10:15)))*-1);

        // time function
        c_.f=function() {
        
            // let's create date/time object so we can  see what time is it now
            d=new Date(),

     // let's get seconds and change seconds teller rotation            
            this.t1._rotation=d.getSeconds()*6,
            
            // minutes and change minutes teller rotation
            this.t2._rotation=d.getMinutes()*6+d.getSeconds()/10,
            
            // hours and change hours teller rotation
            this.t3._rotation=d.getHours()*30+d.getMinutes()/2;
        };
        
        // call function f() of c_ object, just to place tellers on their positions
        c_.f(),
        
        // finally, intervaler will call f() function after ecach 1000ms (1 second)
        // and will change position of tellers whenever it is neccessary.
        c_.i=setInterval(c_,"f",1000);
}

[cybernetix]

and if you use this one, you will get rolex style clock

CODE

onload() {
        c_=createEmptyMovieClip("_c_",1);
        c_._x=150,c_._y=150;
        for (c="0xFFFFFF",i=0,x=100;i<60;i++)
            m=c_.createEmptyMovieClip("m"+i,i+1),
            m.moveTo(0,x),
            m._rotation=i*6,
            m.lineStyle(i%5?3:4,c,x),
            m.lineTo(0,x-(i%5?4:7));
        for (i=1;i<=3;i++)
            t=c_.createEmptyMovieClip("t"+i,i+x),
            t.lineStyle(i==1?3:5,c,x),
            t.lineTo(0,(x-(i*(i==2?10:15)))*-1);
        c_.f=function() {
            d=new Date(),
            // this.t1._rotation=d.getSeconds()*6, // standard style
            this.t1._rotation=d.getSeconds()*6+d.getMilliseconds()/1000*6, // rolex style
            this.t2._rotation=d.getMinutes()*6+d.getSeconds()/10,
            this.t3._rotation=d.getHours()*30+d.getMinutes()/2;
        };
        c_.f(),
        c_.i=setInterval(c_,"f",100); // rolex style
        //c_.i=setInterval(c_,"f",1000); // standard style
}

[Isabel_Maria]

Very nice script for this clock.
Thank you.

[Adrian]

Thanks. great script. I think i might use this on my latest website.

-Adrian

[icice]

wut's the time now??huhu..my dad'll love it..i'll try it in my dad's "birthday card"..

[Faakher]

thanks for sharing these codes

Faakher

[lucs]

Thanks a lot. I have SWiSHmax Unicode ENU, Build Date: 2005.08.15. It works fine!
I want to add a digital clock and a date displayer on this already made elegant and simple clock (at the bottom of it). I hope is not so difficult!

If anyone has done this already pls post it or link it.

PS I want something like that but without background animation and instead of that name I want to display the date.

[op0009]

Very nice script for this clock.

[osta90]

Thanks....