Now: Tutorial for Web and Software Design > Flash > Basic > Flash Content
> Live Analogue Clock [Bookmark it]
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)

[Bookmark][Print] [Close][To Top]
  • Prev Article-Flash:

  • Next Article-Flash:
  • Related Materias
    Generating and Publishing 
    Movie Clips
    Attaching Movie Clips usin
    Controlling File Size in F
    Moving Lines
    Controlling File Size in F
    Flash Game (Exclusive Tuto
    Color Flash Light For Flas
    Clipping Paths
    Self-Animating Objects and
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial