Flash makes a beautiful alarm clock

In this article, readers will learn some basic design methods and the use of time objects, as well as some of the basic syntax. This alarm clock has the function of displaying time, date, week, hour, clock alarm, etc.

Effect Preview Chart:

Click here to download Source Files

Design steps:

First, design clock plate

1. Design clock face

1. Create a new Flash document, click the Size button in the Properties panel, and open the document Properties panel to set the scene size to 400px*400px, the background is ink blue (#00659C), and the frame frequency is 12fps.

2. Press the shortcut key Ctrl+f8 to open the new symbol panel and create a "clock disk" graphic symbol, as shown in Figure 1. Double-click the "Layer 1" in the "clock" symbol to change its name to "clock disk." This is convenient for the management and modification of components, improve work efficiency.

Figure 01

3. Click the Ellipse tool in the toolbar and remove the fill color, as shown in Figure 2. Hold down the SHIFT key and the left mouse button to pull out a hollow circle in the scene of the "clock disk" component. With the arrow tool, click the Hollow Circle you just drew, and set its properties panel as shown in Figure 3. You can also press the shortcut key ctrl+i to open the Info panel to set up after you select the empty circle. Now the use of the Info panel is to set the origin of the component--with the left vertex of the scene as the origin or the center point of the scene as the origin.

　　

Figure 02, Figure 03

4. Press the shortcut key SHIFT+F9 to open the Color mixer panel and select the "Emission" option in the Drop-down menu. As shown in Figure 4, the color of the left slider is #880000 and the right slider is #650101.

Figure 04

5. Click on the "Paint Bucket Tool", in the center of the hollow round the left mouse button coloring.

6. Click the Hollow circle that you just Drew, press the shortcut key CTRL + C (copy), and the shortcut key to Ctrl + V (paste) to copy out a hollow circle. It then sets its size to the 280PX*280PX,X axis in the property panel, the y-axis value to -140px, and the line width to 2px. This causes the center of the two hollow circles to coincide. Remove the outer edge of the circle. The inner Circle line width of 2px can show a sense of Zhongpan level.

7. Press shortcut key CTRL + A Select all the elements in the scene, press the shortcut key ctrl+g put them together. Here, a clock plate with three-dimensional sense is completed. The final effect is shown in Figure 5.

Figure 05

2. Design Clock Scale

1. Click the "line tool" to pull a line (longer than the diameter of the outer circle of the clock face), select it with the arrow tool, and press the shortcut key ctrl+g to combine it. In the Properties panel, set the y-axis value of the horizontal line to 0 px (through the center of the circle). The same method draws a vertical line through the center of the Circle, pressing the shortcut key CTRL+G combination.

2. Click to select the horizontal line, press the shortcut key CTRL + C copy, and then press the shortcut key Ctrl + V paste a horizontal. Press the shortcut key ctrl+t to open the variants panel. In the "Transform" panel, change the angle of the line to 30o in the Rotate option. Then tap enter to determine. Then make the angle of 60o, 120o, 150o three diagonal lines respectively. The final settings are shown in Figure 6.

Figure 06

3. Click the Insert Layer icon in the Timeline panel to create a new layer and rename the layer to scale.

4. Click the Text tool, as shown in Figure 7, set the properties panel, and the text fill color is black. Write down 12 digits in the position of the tick marks on the clock plate. Click the "Ellipse tool" to draw a core of 8px in diameter at the center of the Zhongpan, and then remove tick marks. In the whole design, the role of tick marks is very important, with a tick-mark line, not only easy to operate, the calibration is also very accurate.

Figure 07

5. Press the shortcut key CTRL + A to select all the scales, press the shortcut key ctrl+g to combine them. In this way, a clock with three-dimensional sense is completed. The final effect is shown in Figure 8.

Figure 08

Second, the design rotation pointer

1. Design pointers

Press the shortcut key Ctrl+f8 to open the new symbol panel, creating a movie clip symbol named "Hour Hand", "Minute Hand", and "second hand". The shape of the pointer everyone casually design, beautiful and generous can. However, there is a technical problem you must note: The pointer is rotated by the program control, is around the component scene Center "╬" rotation. So design, the tail of the pointer must be "╬" on, as shown in Figure 9.

Figure 09

2. Rotate pointer

Let's design a piece of code that controls the rotation of the pointer.

1. Press shortcut key ctrl+e back to "Scene 1", new four layers, renamed "Clock Plate", "Hour Hand", "Minute Hand", "second hand".

2. Press the shortcut key Ctrl+l open the library panel, drag the library's "clock", "hour", "Minute Hand", "second hand" components into the appropriate layer. Note: the tail "╬" of each component should be attached to the center of the clock surface, the order of the layers should not be reversed, and the designed layer should be locked or hidden to design the other layers. As shown in Figure 10.

Figure 10

3. Select the "Hour Hand", "Minute Hand", "second hand" three movie components, in the Properties panel, respectively, set its instance name "Hour", "Minute Hand", "Seconds Hand". As shown in Figure 11.

Figure 11

4. Create a new "code" layer, click on the 1th frame of the layer, press the shortcut key F9 pop-up "action" Panel, enter the following code.

function Clockfun () {
Declares a time object named
Time = new Date ();
30 degrees of clockwise rotation per hour
hour = Time.gethours () *30;
Minute hand, the second hand rotates 6 degrees
minute = Time.getminutes () *6;
Second = Time.getseconds () *6;
Every 10 seconds, the minute hand degree plus 1, increase the authenticity
Minute + + time.getseconds ()/10;
Every 2 minutes, the hour plus 1.
Hour + + time.getminutes ()/2;
_rotation is the angle property of a movie that controls the rotation of a movie instance
Second hand. _rotation = second;
Minute hand. _rotation = minute;
Hand hour _rotation = hour;
}
Perform a clockfun function every 1000 milliseconds
SetInterval (clockfun,1000);

5. Note: The following code is written in code function Clockfun () {...} Between.

Code design Well, quickly press the shortcut key Ctrl+enter test it. How to see the rotation of the pointer is not very happy, ha ah, is not very want to continue to do AH! All right, let's move on.

Third, the design date display

1). Lock other layers. Click the Insert Layer icon to create a new layer and rename it to the date layer.

2. Click the Text tool, and the properties panel settings are shown in Figure 12, and the text fill color is black.

3. Press and hold the left mouse button to pull a dynamic text box above the position of the Zhongpan 6 point. Name the dynamic text box "date." The final settings are shown in Figure 12.

Figure 12

4. Click the 1th frame of the "Code" layer, open the Actions panel, and enter the following code.

Assigns the current month value of the system to the variable months
months = Time.getmonth ();
If the month value is single-digit, display a 0 in front of it
if (length (months) = = 1) {
months = "0" +months;
}
Assign the current day value of the system to the variable dates
Dates = Time.getdate ();
If the day value is single-digit, display a 0 in front of it
if (length (dates) = = 1) {
Dates = "0" +dates;
}
Display the system date in the Date text box
Date = Time.getfullyear () + "." +months+ "." +dates;

Note: Because the date object's month is numbered from 0, you add it by 1 to get the true month value. Press the shortcut key Ctrl+enter test, if the operation is correct, should be able to see the date display.

Four, Design Week display

The design method of the same date display. Create a new "week" layer. Build a dynamic text box called "Week", the font is Arial, the size is 12. Place the text box below the date text box. Click the 1th frame of the code layer to open the Actions panel and enter the following code.

Define an array
days = new Array (' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ');
Assigns the system's week value to the variable day (Friday, when Day's value is 5)
Day = Time.getday ();
Display System Week in the Week text box
Week = Days[day];

Note: the Getday () method returns the week value starting at 0, so that the corresponding element is Sunday for ease of understanding. Press the shortcut key Ctrl+enter test.

Five, design time display

With the above steps, create a new "time" layer. Build a dynamic text box called time. Place the text box above the Zhongpan. Click the 1th frame of the code layer, open the Actions panel, and enter the following code.

Assigns the value of the system's current hour to the variable hours
Hours = Time.gethours ();
minutes = Time.getminutes ();
seconds = Time.getseconds ();
When 0 o'clock, show two 0
Hours = (time.gethours () ==0)?
"0" +hours:
Time.gethours ();
If the value of the minute is single-digit, show more than one 0 in front
minutes = (Length (minutes) = = 1)?
"0" +time.getminutes ():
Time.getminutes ();
If the second value is a number, show more than one 0 in the front
seconds = (Length (seconds) = = 1)?
"0" +seconds:
Time.getseconds ();
Show time
Time = hours+ ":" +minutes+ ":" +seconds;

Press the shortcut key Ctrl+enter test, if the system time can not be displayed normally, then check and try again.

Six, the pointer rotation sound

An example of no sound is always a bit dull and tedious. The following program is designed to give a ticking sound when the clock moves around. In this way, the effect is extended to the auditory range.

1. Click the Windows menu-> the other panel-> the common library-> the sound option to open the sound library. Press the shortcut key ctrl+l to open the library panel for this example. Press the sound file switch Toggle in the sound library with the left mouse button to drag it into the library of this example.

2. Right-click the sound file in the library panel, select the link ... command from the menu that pops up, and open the link Properties panel, as shown in Figure 13. Creates a sound identifier that is "tick".

Figure 13

3. Click the 1th frame of the code layer, open the Actions panel, and enter the following code.

Declaring a Sound Object
Dida = new Sound ();
Attach the tick to the new object
Dida.attachsound ("tick Sound");
Play sound
Dida.start ();

Seven, the whole hour timekeeping function

1. Click the File menu-> import-> the import to Library option. Select a music import for the timekeeping in the "Import to library" panel that pops up (recommended to import. mp3 format music).

2. Open the Library panel, right-click the timekeeping sound file in the panel, select the "link ..." command from the pop-up menu, and open the link Properties panel to create a sound identifier for the "timekeeping sound."

3. Click the 1th frame of the code layer, open the Actions panel, and enter the following code.

Declaring a Sound Object
Gugu = new Sound ();
Attach the timekeeping sound to the new object
Gugu.attachsound ("timekeeping sound");
if (seconds = = 0 && minutes = 0) {
Gugu.start ();
}

With the above code, when the whole point of the hour, the hour the sound will ring.

Eight, timed alarm function

1. Create a new layer in scene 1, named "Alarm."

2. Place two input text boxes on the right side of the Zhongpan, setting their variable name "clock" and "minutes" respectively. The properties panel is set at random, and the position of the text box is shown in the final effect. Place a "static" text box in the two input text box, and enter a colon.

Note: Determine the text range icon in the Properties panel to be selected. setting allows the maximum number of characters to be entered as 2 (Figure 14). Click character button, as shown in Figure 15. This allows you to enter only 2 digits in the Set dynamic text box.

Figure 14

Figure 15

3. Click the File menu-> import-> the import to Library option. Select an alarm import in the "Import to library" panel that pops up (recommended for import. mp3 format music).

4. Open the Libraries panel, right-click the sound file you just imported, and then click the "link ..." command in the pop-up menu to open the link Properties panel. In order to simplify the article, the author also uses the "timekeeping sound" here.

5. Click the 1th frame of the code layer, open the Actions panel, and enter the following code.

Alarm every 10 seconds.
if (Clock = = Time.gethours ()) && (minutes = = Time.getminutes ()) && (Time.getseconds ()%10 = = 0)) {
Gugu.start ();
}

Well, the article is finished here, the final effect is shown in Figure 16. When you learn to make this alarm clock, you can at least learn how to use some of the common panels in Flash MX 2004, as well as the use of time objects, sound objects, and some basic as syntax. From then on, a Flash master road is paved in front of you. Let's make progress together with the world!