Flash Analog Clock with ActionScript

Flash Analog Clock with ActionScript Written by AnaS

In this tutorial it will be shown how to create a awesome flash analog clock using ActionScript. For attempting this tutorial is required for you to have basic knowledge of Flash and ActionScript . The result should be the following flash analog clock:   You should have installed Flash 8 on your computer and Flash Player 8 or later.   Prepare a good-looking background for your clock (in Flash, Photoshop, Corel, Fireworks or what do you want) with 300x300 dimensions. If you don't have a background take the picture below: Let's begin! 1. Create a new Flash 8 document. Resize it, Choose Modify >> Document (Ctrl+J) or go to the Properties panel and change dimensions to 300 px by 300 px. Save it on your computer as flashclock.fla. 2. Add 4 new layers in your Timeline and rename them from top to bottom: actions, seconds, minutes, hours, clock. 3. Go to the first frame of the clock layer and insert the picture you desire for background. Choose File >> Import >> Import to Stage (Ctrl+R). Select the picture, go to the Properties panel and assure the properties are set as it follows: W:300, H:300, X:0, Y:0. Lock the clock layer we will not edit it anymore. 4. In the first frame of the hours layer draw a vertical line using the Line Tool (N) from the Tools panel. Select it and in the Properties panel set H:60, Stroke color: #333333, Alpha: 70 %, Cap: Square. While the line is still selected choose Modify >> Convert to Symbol (F8). In the Convert to Symbol window that appears choose MovieClip as type, give it hoursMC name and assure the Registration point is set to center-bottom like in the following picture, the press Ok button. 5. While the MovieClip is still selected go to the Properties panel and give it an instance name of hours_mc. Also align it to center both horizontal and vertical. Double-click hours_mc, or right-click >> Edit in Place. You are in the Edit Mode for hoursMC now. Select the line here, go to the Properties panel and add 20 to the Y property (if old Y:-35, then the new Y is -15). 6. In the minutes layer draw a vertical line with H:90 and the rest of the propeties like in the step 4. While the line is still selected choose Modify >> Convert to Symbol (F8). In the Convert to Symbol window that appears choose MovieClip as type, give it minutesMC name and assure the Registration point is set to center-bottom. 7. Give it an instance name of minutes_mc and repeat step 5 for minutes_mc. 8. Finally fo to seconds layer and draw a vertical line with H:115 and Stroke color:#99FF00. All the rest of the Properties are like in the step 4. Convert it to a MovieClip with secondsMC name and center-bottom Registration point. 9. Give it an instance name of seconds_mc and repeat step 5 for seconds_mc. 10. Now go to the first frame of the actions layer and put te following ActionScript code in: this.onEnterFrame=function() { var time = new Date(); /* we create a new Date() object*/ var hours = time.getHours(); /* currents hour represent like an integer between 0 and 23*/ var minutes = time.getMinutes(); /* currents minute represent like an integer between 0 and 59*/ var seconds = time.getSeconds(); /* currents second represent like an integer between 0 and 59*/ hours_mc._rotation = (hours*30) + (minutes/2); /* There are 12 hours on the clock, so if a circle has 360 degrees, 360 divide by 12, means that the angle correspondig for each hour is hours*30. The angle between every two consecutive hours is 30. We will add to the rotation the angle correspondig for the minutes passed from current hour that is (minutes*30)/60, that means minutes/2*/ minutes_mc._rotation = 6 * minutes; /* There are 60 minutes on the clock, so if a circle has 360 degrees, 360 divide by 60, means that the angle correspondig for each minute is minutes*6.*/ seconds_mc._rotation = 6 * seconds; /* There are 60 seconds on the clock, so if a circle has 360 degrees, 360 divide by 60, means that the angle correspondig for each second is seconds*6.*/ } 11. Great test your flash analog clock and put it on your website.

Posted in: flash tutorial