Make a smart clock with flash

Clock is a necessary item in daily life, with it we can have a planned study and work. This time we use Flash to make a fine little clock, you can drag it to the corner of the computer screen, so that you can easily see the current time and date.

The final effect of this example is shown in Figure 1.

The final effect of figure 1:

1. Start Flash First, create a new movie, set the movie stage size to 270px*320px (in pixels), background color is gray, color code for #cccccc.

2. First make the hour hand in the clock. Create a new movie clip symbol, named hours, after entering the component's editing area, use the Rectangle tool to draw a slender, borderless rectangle with a gray fill color and a color code of #999999, as shown in Figure 2;

Figure 2 Making the hour hand

3. Then make the minute hand in the clock. Create a new movie clip symbol, named minutes, after entering the component's editing area, use the Rectangle tool to draw a slender, borderless rectangle with a dark gray fill and a color code of #666666, as shown in Figure 3;

Figure 3 Making the minute hand

4. Finally make the second hand in the clock. Create a new movie clip symbol, named seconds, after entering the component's editing area, use the Rectangle tool to draw a slender, borderless rectangle with the fill color red and the color code as #ff0000, as shown in Figure 4;

Figure 4 Making the seconds hand

5. Create a new graphic symbol, named Outeregde, after entering the editing area of the component, make a circle using the method described in the previous example, the fill color is gray, the color code is #999999, as the border of the clock, as shown in Figure 5;

Figure 5 Making a clock border

6. Back to the main scene, rename the movie default layer Layer1 to Outeredge, and then drag the component Outeregde onto the stage and adjust its position to the center of the stage.

7. Create a new layer numbers, use the Text tool to enter the 12 digits from 1 to 12, and arrange the position around the clock border, as shown in Figure 6;

Figure 6 Adding a time number

8. Create a new layer clockhands, drag the component hours, minutes, and seconds to the scene, and then use the Oval tool to draw a black borderless positive circle, place it in the center of the dial, and then place the hour hand, the minute and the second seconds in the center of the Dial, Align the lower and central positions of the three hands, as shown in Figure 7;

Figure 7 Adding hands to the dial

9. Add layer pagetitle, use tools to draw a static text box and a dynamic text box, in the Static text box input clock label: Flash clock, set the dynamic text box text variable named time, used to dynamically display year, month, day and week.

10. Finally add a layer named action, set the action script to control the clock.

Add the following action on frame 1th:

Time = new Date ();//define time as Date object

Hours = Time.gethours ()//The hour of the current system and assigned to the variable hours

minutes = Time.getminutes ()//The minute of the current system and assigned to the variable minutes

seconds = Time.getseconds (), and/or the second of the current system and assigned to the variable seconds

if (hours>12) {

Hours = hours-12;

}

if (hours<1) {

Hours = 12;

}

Hours = Hours*30+int (MINUTES/2);

minutes = Minutes*6+int (SECONDS/10);

seconds = seconds*6;

Add the following action on frame 2nd:

gotoAndPlay (1);

11. The final step is to add each action to the three hands so that it can rotate according to its own rules

Add the following action to the hour:

Onclipevent (enterframe) {

SetProperty (This, _rotation, _root.hours);

}

Add the following action to the minute hand;

Onclipevent (enterframe) {

SetProperty (This, _rotation, _root.minutes);

}

Add the following action to the seconds hand:

Onclipevent (enterframe) {

SetProperty (This, _rotation, _root.seconds);

}