Our Flash tutorials provide you with step-by-step instructions on how to create beautiful Flash animations and integrate them into your website.  Home Flash & Swish Flash Tutorials Live Analogue Clock
Your Ad Here

Live Analogue Clock


This is a real-time clock (well, real time for me, if not for you...)
It uses a very simple ASP script, a bit of ActionScript, and some easy Flash.

Start a new movie.
Begin by drawing the 2 clock hands. The minute hand must be less than half the total height of the stage (so that it can revolve).
You can probably draw some nicer hands than this...

Next, select the minute hand, and press F8 to convert it into a Movie symbol - call it MinuteHand. Do the same for the Hour hand (call this HourHand).



Go to the instance properties for each movie (Right-click on the movie and select 'Properties') and give them names (e.g. HourHandMovie and MinuteHandMovie).

Add a new layer and cut and paste one of the movies to this layer.
Refer to the illustration to see if you've done it correctly (the library will appear if you press Ctrl-L).



Next, you need to define the centre point of each hand. Right-click on one of the hands and select 'Edit'. Move the graphic so that the centre of rotation is on the '+' symbol. Return to the scene and do the same for the other hand.

In the scene, ensure that the hands are both centred on the middle of the stage.



Now add some ActionScript to load the Minute and Hour values for the hands from an ASP...
Insert a new layer and name it 'Actions'. Double-click on the first frame to open up the frame properties and add the script shown below.
This will load variables from the file clock.asp, which you will create later.


Add a fourth layer, and draw some fancy background graphics for the clock on it.

Next, insert a second frame for all the layers. In the 'Actions' layer, add the following ActionScript at frame 2:

Set Variable: "h" = Hour
Set Variable: "m" = Minute
If (h > 12)
Set Variable: "h" = h - 12
End If
Set Variable: "HourAngle" = h*30 + m/2
Set Variable: "MinuteAngle" = m*6
Set Property ("HourHandMovie", Rotation) = HourAngle
Set Property ("MinuteHandMovie", Rotation) = MinuteAngle

Here, the Hour and Minute variables returned from the ASP are converted into angles in degrees.
The rotation property of each movie is then set to the calculated angle.



Below is the content of the clock.asp ASP file which provides the Hour and Minute variables. Notice that the response is set to expire at a negative time - this ensures that the page refreshes correctly (rather than being cached). The script simply returns a URL-encoded string something like:
Hour=5&Minute=15
which is the URL-encoded syntax required by Flash 4 to set the two variables.

<%@Language = "VBScript"%>
<%
Option Explicit
Response.Buffer = True
Response.Expires = -1000
Response.Write "Hour=" & Hour(Now) & "&Minute=" & Minute(Now)
Response.Flush
%>

Here's the clock.

Your next task is to show the day of the week in a little box like you see on watches...
You'll have to work that out yourself, though.

Download Source (zipped)

Author's URL: Pipey.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Internet & computing Flash is a vector-based moving graphics format created by Macromedia for the publication of animations on the World Wide Web. More Flash & Swish: Most Popular Materials | Fresh Materials | More Flash Tutorials at FlashPerfection.com

Add comments to "Live Analogue Clock"

Only registered users can write comment

No comments yet...