In this tutorial we are going to create a flash analog clock that is going to cling at mouse over.  You can use this clock to add a nice effect on your websites. To do this work, the tutorial reader must have basic knowledge about Photoshop and Flash as this is a medium level tutorial.

First we must  design a clock in Photoshop.

Open Photoshop and make a new document at 115px – 115px size. Then draw a rectangle that is going to be the main background of the clock.

Give the clock a big stroke with some metal gradient.

Make a small circle in the center of the clock,  and also a small light shadow to give a nice effect to the clock.

Then draw the main digits of the clock, place them on initial positions.

At the end export a png from the Photoshop and save it.

We are done with Photoshop.

Next open Flash and make a new document with the next details, 260px – 200px size and 36 fps, like in the screenshot:

On the first layer import the clock png we saved from Photoshop. You can do that by clicking File-> Import-> Import to stage and then select the png from the specific location you saved. Align the clock to the center of the stage.

Click on the shape we just import and convert it to symbol : Modify-> Convert to Symbol ( F8),  and make the selections you see in the screenshot. We are going to make this a movie clip with a center regitration.

Double click the movie clip we created and make the next layer structure you see in the next screenshot. We are going to create 4 new layers, 3 for the clock needles and one for the main actions. As you can see the clock background layer and the 3 needles layer are build on 2 frames and the actions on one, that is to continuously loop the “animation”.

On the “seconds” layer draw the seconds needle and convert it to symbol, make it movie clip with regitration on center bottom. Position the movie clip needle with the center bottom regitration in the main center of the clock.

The same way build the minutes needle on “minutes” layer and make it a movie clip.

And the last needle is for the hours. Make sure you draw all the needles at different sizes.

After we draw all needles and made them movie clip we are going to atach some actions to every movie clip.

Select the seconds needle and then press F9 to open the actions panel (like in the screenshot). There write the following actions:

onClipEvent (enterFrame) {
setProperty(this, _rotation, _root.clock.seconds);
}

Make sure you are applying these actions to the movie clip and not to the layer.

Do the same way for the rest of the needles movie clips.

Minutes movie clip actions:

onClipEvent (enterFrame) {
setProperty(this, _rotation, _root.clock.minutes);
}

Hours movie clip actions:

onClipEvent (enterFrame) {
setProperty(this, _rotation, _root.clock.hours);
}

On the last layer, the actions layer insert the following actions:

time = new Date();
hours = time.getHours();
minutes = time.getMinutes();
seconds = time.getSeconds();
if (hours>12) {
hours = hours-12;
}
if (hours<1) {
hours = 12;
}
hours = hours*30+int(minutes/2);
minutes = minutes*6+int(seconds/10);
seconds = seconds*6;

Remember that we are now in the main clock movie clip. Next we will return to the scene1 of our document, the root.

Here we are going to create a new layer above the layer where the clock movie clip is. Apply the next actions here:

stop();
_root.circle_animation = 1;

Also we are going to add some actions to the main clock movie clip, so click and select the movie clip from the first layer and add the next code:

onClipEvent (construct)
{
friction = 8.000000E-001;
ratio = 1.000000E-001;
maxDistance = 2;
}
onClipEvent (load)
{
defaultX = _x;
defaultY = _y;
newXpos = defaultX;
newYpos = defaultY;
newXpos = 0;
newYpos = 0;
xDifference = 1;
yDifference = 1;
newX = 1;
newY = 1;
num = 5;
}
onClipEvent (enterFrame)
{
if (_root.circle_animation == 1)
{
if (this.hitTest(_root._xmouse, _root._ymouse, true))
{
xDifference = _root._xmouse – defaultX;
yDifference = _root._ymouse – defaultY;
newXpos = _root._xmouse – xDifference / maxDistance;
newYpos = _root._ymouse – yDifference / maxDistance;
}
else
{
newXpos = defaultX;
newYpos = defaultY;
} // end else if
newX = newX * friction + (newXpos – _x) * ratio;
newY = newY * friction + (newYpos – _y) * ratio;
setProperty(”", _x, _x + newX);
setProperty(”", _y, _y + newY);
setProperty(”", _x, int(_x) + 1.000000E-001);
setProperty(”", _y, int(_y) + 1.000000E-001);
} // end if
}

That it! We are now ready to test our analog clock. To do that hit Control+Enter and test you work.

Related Posts

1. Halloween E-card – Photoshop Tutorial
2. Build a retro TV poster in Illustrator and Photoshop – Tutorial
3. Root Arms Photoshop Tutorial
4. NEW Creative Flash Websites
5. Learn to make your own icons in Illustrator