• home
  • forum
  • my
  • kt
  • download
  • Analog Clock in flash 5

    Author: 2007-06-14 11:10:49 From:

    Starting with the tutorial




    Making the background

    Start flash 5 Select the new file option from the file menu Press Ctrl + m to launch movie properties , now select the movie size and background color Now design the clock background on the first frame of the layer 1 , example press 'o' to select the oval tool and now draw a circle to represent the clock followed by the use of text tool to write the numbers on clock.
    see figure 1

    Making the movie

    Now insert a movie symbol in this file by pressing Ctrl + F8 , name it as 'clock' and set its behaviour as movie Now the movie clock will open with a blank screen Now again insert a new movie symbol in this 'clock movie ' by pressing Ctrl + F8 , name it as 'seconds' and set the behaviour as movie. Remeber that the movie symbol 'seconds' is created in the movie symbol 'clock' which was created in our main file. Press Ctrl + l to see the movie library , it must contain 2 movies namely 'clock' and seconds'. Double click on movie 'clock' from the library (do not click on the text but on the small graphic next to it ) Now we are in movie symbol 'clock' again , now repeat step 3 & 4 to insert movie symbols namely 'minutes' and 'hours' into the clock movie. Press Ctrl + l and now there must be 4 movies in the library as shown in the picture
    see figure 2

    Designing the clock hands

    Now we've created a movie clip 'clock' inside our main file and 3 more movies namely 'seconds' , 'hours' & 'minutes' in the 'clock' movie. Its time now to design the hands for each of the 3 movie symbols , lets start with the 'seconds' movie Select the 'seconds' movie either by double clicking from the library ( Ctrl + l ) or from the edit symbols button . ( remember to double click on the small symbol besides the text when selecting a movie from library ) Now you're in movie 'seconds' and we have to draw the seconds hands now. To draw select the line tool ( press n ) and draw a small line in the centre to represent the seconds hands. Now copy the first frame of the layer 1 (right click at the frame 1 ) and paste it as frame 2 so we have two frames having the same images. Now it should look like this :
    see figure 3

    Minute and hour hands

    After completing the work for seconds hands , go to the movie symbol ' minutes' and draw the hand . Remeber this hands should be the longest as it is for the minutes . Again copy the first frame to the second . Repeat this process for the 'hour' movie.
    see figure 4

    Making the instances

    Now go the the movie 'clock' and press Ctrl + l to view the library . Single click and drag the clip 'seconds' from the library to the centre of the current movie ' clock' Press Ctrl + i to open the instance box and now name the instance as 'sec' Align the hands with the centre Reapeat steps for other 2 hands and name their instances as 'hrs' and 'min' for hours and minutes respectively .
    see figure 5

    Programming the clock

    Now the instances have been named and we to program the clock to rotate these intances according to the need , for example the seconds hands must rotate 6 degrees every second so as to complete the 360 deg revolution after 60 secs . For this we define a new date element , the use the newdate.getsec() properties to get the particular time element and then set the property ' _rotation ' accordingly . By now you must have got some idea about this programming , lets start it . Select the first frame of the movie ' clock ' where all instances have been names and then right click and select 'actions ' or press Alt + Ctrl + a to open the action window . Now paste this code in the action window

    x = new Date();
    y = x.getSeconds();
    z = x.getHours();
    setProperty (sec, _rotation, y*6);
    setProperty (min, _rotation, x.getMinutes()*6);
    if (z>12) { z = z-12; }
    setProperty (hrs, _rotation, ((z*30)+(x.getMinutes()/2)))


    see figure 6

    Some final steps

    Now copy the first frame and paste it as the second frame as shown Now click on the 'scene' to go to the main scene where the clock background was designed or just click "modify " from the menu then select scene option by single clicking. You should now have the clock background Press Ctrl + l and drag the 'clock' movie to the centre
    see figure 7

    Running the clock

    Now press Ctrl +Enter to run the clock Its should work fine You may now modify the background , colors and shape of the hands to make it more attractive Finally save this .fla file as .swf file by pressing Alt + Ctrl + Shift + s (exporting)
    Go to http://www.themallshimla.com to see a running example
    see figure 8

    » Level Intermediate

    Added: : 2001-12-25
    Rating: 6.79 Votes: 29
    Hits: 18
    » Author
    Currently doing computer engineering
    » Download
    Download the files used in this tutorial.
    Download (0 kb)

    discuss this topic to forum

    relation tutorial

    No relevant information

    Category

      3D (20)
      Math Physics (14)
      3rd Party (5)
      Navigation (60)
      Actionscripting (26)
      Optimization (16)
      Animation (32)
      Projector (9)
      Audio (46)
      Special Effects (112)
      Backend (25)
      Text Effects (65)
      Drawing (18)
      Tips and Techniques (41)
      Dynamic Content (25)
      Tricks (6)
      Games (66)
      Utilities (19)
      Getting Started (71)
      Video (10)
      Interactivity (21)
      Web Design (22)

    New

    Hot