ENG

Programming screensavers for your desktop

Theme 2: Analog clock the simple program.

The most simple analog clock are created by means of the simple program. What is the analog clock? These are lines changing the position. Recollect a school rate of trigonometry. I remember, I on the BASIC, on the ZX-Spectrum wrote clock, using change of lines. Well, away memoirs. So, we shall start.

For the beginning we shall create the new document. The size anyone. We shall name this Layer a name Clock. Now in Tools we choose the tool Oval Tool, look drawing 1. Key "O" Corresponds to the given tool. On a working table Flash The document we draw a circle. The size at own discretion. This circle will be at us a dial. Look drawing 2, here that at us should it will turn out. Simply a circle and all.

Drawing 1

Drawing 2

The most interesting begins. For the beginning we shall lead round our future dial the tool Selection Tool (key "V"). Look drawing 3 It should turn out here so (drawing 4).

Drawing 3

Drawing 4

Arrow of "mouse" it is directed on edge of our dial, we press the right key of "mouse". The menu will appear. In it the menu to us should be chosen Convert to Symbol. Look drawing 5. The window will open Convert to Symbol. In line Name let's write Time. It is possible to leave generally to default. In Behavior we choose Movie clip. Registration let's leave on the middle. We press OK.

Drawing 5

Drawing 6

It will turn out here that. Look drawing 7. Our dial is allocated.

Drawing 7

Red arrow on drawing 7 the center is marked. Then we open "Action - Movie Clip" and in it we write the program. In the program I have given some explanatories. A code of clock in the table 1.

onClipEvent (load) {
                    for (i=0; i>60; i++)
                    //hour
                    //lineStyle(thickness, @);
                    //lineTo(the size, the size);
                    this.createEmptyMovieClip("hour", 5);
                    with (this.hour) {
                      lineStyle(5, "0x990000");
                      lineTo(0, -70);
                    }
                    //minute
                    this.createEmptyMovieClip("minute", 2);
                    with (this.minute) {
                      lineStyle(4, "0x666666");
                      lineTo(0, -90);
                    }
                    //second
                    this.createEmptyMovieClip("second", 3);
                    with (this.second) {
                      lineStyle(3, "0xFF9900");
                      lineTo(0, -100);
                    }
                    //turnovers
                    function turn() {
                      time = new Date();
                      s = time.getSeconds();
                      m = time.getMinutes();
                      h = time.getHours();
                      this.second._rotation = s*6;
                      this.minute._rotation = m*6;
                      this.hour._rotation = h*30;
                    }
                  }
                  onClipEvent (enterFrame) {
                    turn();
                  }

The table 1

Here our clock also have turned out. Look drawing 9.

Drawing 9

For smoothness of a course of arrows of hours it is possible to change a code of the program. The changed code in the table 2.

onClipEvent (load) {
                    for (i=0; i>60; i++)
                    //hour
                    //lineStyle(thickness, @);
                    //lineTo(the size, the size);
                    this.createEmptyMovieClip("hour", 5);
                    with (this.hour) {
                      lineStyle(5, "0x990000");
                      lineTo(0, -70);
                    }
                    //minute
                    this.createEmptyMovieClip("minute", 2);
                    with (this.minute) {
                      lineStyle(4, "0x666666");
                      lineTo(0, -90);
                    }
                    //second
                    this.createEmptyMovieClip("second", 3);
                    with (this.second) {
                      lineStyle(3, "0xFF9900");
                      lineTo(0, -100);
                    }
                    //turnovers
                    function turn() {
                      time = new Date();
                      ms = time.getMilliseconds();
                      s = time.getSeconds();
                      m = time.getMinutes();
                      h = time.getHours();
                      this.second._rotation = s*6+ms/1000*6+(1.8*(1-(ms/500-1)*(ms/500-1)));
                      this.minute._rotation = m*6+s/10+ms/1000/60;
                      this.hour._rotation = h*30+m/2+s/2/60;
                    }
                  }
                  onClipEvent (enterFrame) {
                    turn();
                  }

The table 2

With the help of the program it is possible to draw: a dial, figures, etc. But it already other history.

The script of the given clock is here (6 Kbyte) .

Programming and site support: Maxim Okopnyak
Copyright: 2004-2015.
For advertising and other issues - admin@screensaver-clock.ru