Hi all and welcome to another Flash actionscript 3.o tutorial brought to you by the EZ DESIGN team, In this tutorial we are going to show you how to make a very simple Flash analogue clock.
This tutorial is written once again with Adobe Flash CS4 however the code used in this is also compatible with Adobe Flash CS3, we are just using some of CS4’s new features, so when you are ready lets begin by opening a new Flash AS3.0 file.
Once we have the new file open we are going to adjust the colour of the stage to black and change the size of the stage to 300px by 300px.
The first thing we are going to do is create our clock face graphics, to do this we are going to select the oval tool from the tools panel and draw a circle on the stage that fills the majority of the stage (we are using a circle with a default blue radial gradient).
Now lets move down to the layers palette and create a new layer, once we have created the new layer we want to select the “Deco” tool from the tool bar. Once the “Deco” tool is selected we are going to modify the drawing effect of the tool and from the drop down box we are going to select Symmetry Brush.
With the symmetry brush selected we want to change the colour of the brush to white, then draw on the stage, once we have drawn on the stage we want to adjust the brush by moving the tool points so that we have 12 points positioned like they would be on a clock face.
Now that the 12 points are on the screen we are going to create another new layer, this time we are going to select the text tool and make sure that static text is selected, Once static text is selected we need to make the numbers for the clock face.
Now that the face of our clock is made we need to make the hands of the clock, to keep this simple we are going to use simple lines as our clock hands. Lets make another layer called seconds, on this layer we will create a simple red line to be used as the second hand. Once we have the line on the stage we are going to convert it to a movie clip with the registration point set as the bottom center.
Once the registration point is set as the bottom center we want to set the instance name of this movie clip seconds, and align it in the center of the stage.
We now have our seconds hand made, so lets once again create a new layer this time called hours, once we have the layer created lets draw our hour hand on the stage this time in white. Once the hand is drawn on the stage lets turn it to a movie clip with the registration point set to the bottom center again. Then lets align the hand to the center of the stage so that is is on top of our seconds hand, Then let us set the instance name of this clip as hours.
We now have 2 of the clock hands on the stage all that is left is to repeat the last step again this time naming the layer minutes and naming the hands instance as minutes,
The only thing we need to do now is to create one final layer for our actionscript to be put, remember for this clock we are using actionscript 3.0. So lets make a new layer and call this Actions, in the actions window we need to enter the following lines of code:-
var time = new Date();
var seconds = time.getSeconds()
var minutes = time.getMinutes()
var hours = time.getHours()
//controls the positions of the hands
hours = hours + (minutes/60);
seconds = seconds*6;
minutes = minutes*6;
hours = hours*30;
//Controls the rotation
stage.addEventListener(Event.ENTER_FRAME, clockMotion)
function clockMotion (event:Event):void{
seconds_mc.rotation=seconds;
minutes_mc.rotation=minutes;
hours_mc.rotation=hours;
}
Once we have the actionscript in place the final thing that we need to do is to make sure that each layer on the timeline spans a minimum of 2 frames this will ensure that the clock refreshes every second.
Now you can save and test your movie clip and you should see a working clock on your screen, as always if you would like to download the source files for this you can do so by clicking here , Download Source.
You might also like
 |
 |
 |
 |
