Scribd
Upload
405 views4 pages

Flash Analog Clock With Action Script

This document provides instructions for creating an analog clock in Flash using ActionScript. It involves: 1. Setting up the Flash file and layers for the clock elements (hours, minutes, seconds) and background. 2. Drawing and converting the clock hands to MovieClips symbols. 3. Adding ActionScript code to rotate the hands based on the current time, with the hours hand rotating 30 degrees per hour, the minutes hand rotating 6 degrees per minute, and the seconds hand rotating 6 degrees per second. 4. Testing the working analog clock.

Uploaded by

jhagopal
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
405 views4 pages

Flash Analog Clock With Action Script

This document provides instructions for creating an analog clock in Flash using ActionScript. It involves: 1. Setting up the Flash file and layers for the clock elements (hours, minutes, seconds) and background. 2. Drawing and converting the clock hands to MovieClips symbols. 3. Adding ActionScript code to rotate the hands based on the current time, with the hours hand rotating 30 degrees per hour, the minutes hand rotating 6 degrees per minute, and the seconds hand rotating 6 degrees per second. 4. Testing the working analog clock.

Uploaded by

jhagopal
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

FLASH ANALOG CLOCK WITH ACTIONSCRIPT

• 1

• 2

• 3

• 4

• 5

(133 votes)
Written by AnaS

In this tutorial it will be shown how to create a awesome flash analog clock using ActionScript.
For attempting this tutorial is required for you to have basic knowledge of Flash and
ActionScript . The result should be the following flash analog clock:

You should have installed Flash 8 on your computer and Flash Player 8 or later.

Prepare a good-looking background for your clock (in Flash, Photoshop, Corel, Fireworks or
what do you want) with 300x300 dimensions. If you don't have a background take the picture
below:
Let's begin!
1. Create a new Flash 8 document. Resize it, Choose Modify >> Document (Ctrl+J) or go to
the Properties panel and change dimensions to 300 px by 300 px. Save it on your computer as
flashclock.fla.
2. Add 4 new layers in your Timeline and rename them from top to bottom: actions, seconds,
minutes, hours, clock.

3. Go to the first frame of the clock layer and insert the picture you desire for background.
Choose File >> Import >> Import to Stage (Ctrl+R). Select the picture, go to the Properties
panel and assure the properties are set as it follows: W:300, H:300, X:0, Y:0. Lock the clock
layer we will not edit it anymore.

4. In the first frame of the hours layer draw a vertical line using the Line Tool (N) from the
Tools panel. Select it and in the Properties panel set H:60, Stroke color: #333333, Alpha: 70
%, Cap: Square. While the line is still selected choose Modify >> Convert to Symbol (F8). In
the Convert to Symbol window that appears choose MovieClip as type, give it hoursMC name
and assure the Registration point is set to center-bottom like in the following picture, the press
Ok button.
5. While the MovieClip is still selected go to the Properties panel and give it an instance name
of hours_mc. Also align it to center both horizontal and vertical. Double-click hours_mc, or
right-click >> Edit in Place. You are in the Edit Mode for hoursMC now. Select the line here,
go to the Properties panel and add 20 to the Y property (if old Y:-35, then the new Y is -15).

6. In the minutes layer draw a vertical line with H:90 and the rest of the propeties like in the
step 4. While the line is still selected choose Modify >> Convert to Symbol (F8). In the
Convert to Symbol window that appears choose MovieClip as type, give it minutesMC name
and assure the Registration point is set to center-bottom.
7. Give it an instance name of minutes_mc and repeat step 5 for minutes_mc.
8. Finally fo to seconds layer and draw a vertical line with H:115 and Stroke color:#99FF00.
All the rest of the Properties are like in the step 4. Convert it to a MovieClip with secondsMC
name and center-bottom Registration point.
9. Give it an instance name of seconds_mc and repeat step 5 for seconds_mc.
10. Now go to the first frame of the actions layer and put te following ActionScript code in:
this.onEnterFrame=function() {
var time = new Date(); /* we create a new Date() object*/
var hours = time.getHours(); /* currents hour represent like an integer between 0 and 23*/
var minutes = time.getMinutes(); /* currents minute represent like an integer between 0 and
59*/
var seconds = time.getSeconds(); /* currents second represent like an integer between 0 and
59*/
hours_mc._rotation = (hours*30) + (minutes/2); /* There are 12 hours on the clock, so if a
circle has 360 degrees, 360 divide by 12, means that the angle correspondig for each hour is
hours*30. The angle between every two consecutive hours is 30. We will add to the rotation the
angle correspondig for the minutes passed from current hour that is (minutes*30)/60, that
means minutes/2*/
minutes_mc._rotation = 6 * minutes; /* There are 60 minutes on the clock, so if a circle has 360
degrees, 360 divide by 60, means that the angle correspondig for each minute is minutes*6.*/
seconds_mc._rotation = 6 * seconds; /* There are 60 seconds on the clock, so if a circle has
360 degrees, 360 divide by 60, means that the angle correspondig for each second is
seconds*6.*/
}

11. Great test your flash analog clock and put it on your website.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy