Analog
Clock
E.J. aka IamNotJubba
This tutorial is designed to help you create an analog clock with a sweeping second hand:
Before we start, Click here to download the partial source. The partial source does not contain the important actionscript, only the images you will need to make this tutorial easier to follow.
There is not too much actionscript involved with this so it is not too difficult an effect to duplicate. I'll also explain each bit of code to make it more understandable. The code below is the code you will need to copy and paste into the final movie clip at the end of the tutorial.
Let's begin:
- To start, open the library by pressing CONTROL+L and right-click on the "minutes" movie clip, then select edit. Press CONTROL+K to bring up the Align Tool window. Make sure that the "To the Stage" button is selected, then press the 6th button in the Align row, and the 5th button in the Distribute row. You will only have to do this to the "minutes" movie clip if you downloaded the partial source, the others have already been done for you.
Now, return to the main stage. From the library, drag the "minutes" movie clip onto the main stage, and open the Info panel; Windows>Panels>Info or CONTROL+ALT+I. Make sure to select the center point, so that the center box is black (see image below) and enter 150 for your X and Y values. This will move the movie clip to the center of the stage. Repeat with the "seconds" and "hours" movie clip.
Now you must give the movie clips Instance names. Select the "minutes" movie clip, and press CONTROL+I to open up the Instance panel. In the name box enter "minutes". Repeat with "seconds" and "hours" giving them the instance names "seconds" and "hours" respectively.
[
This movie clip has the instance name "minutes" ]
Once, you are done with the instance name, you have two options. You can select the entire stage, white background and all, or you can select just the hands (which by now should all be on the main stage, all centered, with the appropriate Instance names). Either way, when you have everything selected, press F8. In the window that pops up, name the symbol anything you like, however, make sure that "Movie Clip" is selected. With this done its time to input the code. Back on the main stage, right-click on the new movie clip and select actions. Press CONTROL+E to change the Actions Panel to Expert Mode, then Copy the code above, and paste it into the actions panel.
That's it! The clock is finished. If any of the hands are not moving, go back to the main stage and make sure they all have the correct instance names. If any of them are moving in an odd way, you may have to edit the center like you did in step (i).
Now, I'm going to explain the code for you, so you can
duplicate this effect on your own, and so you understand
what the code is doing.
onClipEvent (enterFrame)
This bit of code loops the actions contained within it everytime the movie is
accessed.
time = new Date();
This creates a date object, and allows you execute ther next commands.
mil = time.getMilliseconds();
s = time.getSeconds();
m = time.getMinutes();
h = time.getHours();
This part of the code gets all the information from your system clock, and incorporates it into Flash.
seconds._rotation = s*6+(mil/(1000/6));
Since there are 60 seconds in a minute, and we want the seconds hand to rotate a full 360°, we mutiply the 60 seconds by 6. (60 x 6 = 360) Now, the milliseconds are there to create the constant sweep. "The milliseconds represent 6 degrees of rotation (one second), therefore you take the current milliseconds and divide it by total possible milliseconds (1000) to get a fraction, then you divide that fraction by the 6 degrees to get the milliseconds' rotation." --thanks to Suprabeener for this explaination
minutes._rotation = m*6+(s/6);
Again, since there are 60 minutes in an hour, and we want the minute hand to rotate a full 360°, we multiply the 60 minutes by 6. (60 x 6 = 360) The seconds are there to help create a continuous sweep. Every minute is 6° of rotation and every second is 6° of rotation, so with every second that goes by, this code adds one degree to the minute hand.
hours._rotation = h*30+(m/2);
Now, there are 12 hours in a full rotation, so we multiply hours by 30. (12 x 30 = 360) Each mark for hours is a full 30° so in order to get a sweeping motion, we want to add one degree for every two minutes that pass, and thats wut the "+(m/2)" part of the code does.
That's it. I hope this helped some people, and thanks to all the people that helped me with this.
If you have any questions, please post on the kirupa.com
Message Board!
J.E. aka IamNot Jubba
[email protected]
|
