Time, Flash CS3 Tutorial

Download Flash CS3 Source Files
Once the starting file is open look around for a few moments on check out the objects in the file. As normal you will be working on the actions layer and the objects have been created for you. Feel free to open any of the movie clips and change the look of the clock to your likings. Each component of the clock is a separate movie clip and can easily be changed. Just remember that if you start from scratch you will need to take note of the names of the objects ,so that you can adjust the code accordingly. Open the action's panel by pressing F9 and copy the example code.
var time = new Date();
trace(time)

In this code you are creating a new variable called time and setting it equal to the time settings on the computer accessing the .swf. You can access world time, but that is a more advanced tutorial and normally you want to work from the users time. The next line of ActionScript is simply a trace of time because you should see the format of the data. Go ahead and press Control-Enter so that you can see the date. You should get something like "Thu Jun 12 11:09:07 GMT-0600 2008" You can simple display the time in this format by setting a text field's text equal to time. Add the code from the example and press Control-Enter.

time_txt.text = time

The text field time_txt has already been created. If you noticed that the text field only displayed the day, month and hours it is simply because the text field isn't big enough to display the complete string. Just a simple trick if you are in a hurry.

When making an analog clock you will need to access the individual properties of the date property. Copy the code from the example.
var seconds = time.getSeconds()
var minutes = time.getMinutes()
var hours = time.getHours()

This ActionScript is creating three new variables and each of the variables is accessing a portion of the data contained in the time variable. Flash CS3 has made this vary simple. getSeconds, getMinutes and getHours access the specific data you would expect, meaning if you want the hours you simple need to use the method getHours. Now, that the variables are created you need to do a few things with them.
hours = hours + (minutes/60);
seconds = seconds*6;
minutes = minutes*6;
hours = hours*30;

As for hours you need to add the minutes divided by 60 to them. That will give you the position for the hour hand when it isn't exactly on the hour. If you did not add the minutes divided by 60 the hour hand, the hand would snap from one hour to the next. The seconds need to be multiplied by 6, this is because there are 60 seconds in an hour and 360 degrees in a circle. 360 divided by 60 equals 6. You want the all the hands to rotate around a circle, so all of the values need to be set to a percentage of 360. Minutes get multiplied by 6 and hours get multiplied by 30, same math applies.

stage.addEventListener(Event.ENTER_FRAME, clock)
function clock (event:Event):void{
sec.rotation=seconds;
min.rotation=minutes;
hour.rotation=hours;
}

Last, you need to create an event listener that will reset the clock hands every time the frame reloads, this will force the hands to move to the new time. Inside the function associated with the event listener the hands need to be set to the variables. Copy the code from the example to your action's layer. The names sec, min and hour reflect the names of the clock hands that were created for you, .rotation is simply the method to rotate the object, the hands in this case, equal to the variable.

Continue Smiley
Press Control-Enter to see you new analog clock in action

Download Flash CS3 Source Files