sign up!

Are you interested in learning, then sign up to be notified about new tutorials.

Email:


helpfull links


website solutions

Do you need a website?
We can have you online in 24 hrs for less then $100


master flash

Are you looking to learn flash? If so you need to check out Flash, the Information you need. You will find all of these tutorials, source files and more...

Get your copy today!

Flash, This Information you need

a few friends


follow Us On

FrenchSquared on Linked in

FrenchSquared on Twitter

Frenchsquared on Facebook



Flash How To: Analog Clock

Most desktops display the time somewhere on the screen. However, some times when programming you may want an event to happen based on the time of day, such as a custom header that changes based on the time. It can also be rather impressive to show that you can actually make an analog clock, or a series of clocks to display the time in other locations. This Flash CS3 Tutorial will cover the basics of time and how to make an analog clock.

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

How to get the Time

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.

Press Control-Enter and test your movie.

Download Tutorials