Building flash web widgets - Part III

This is the third part of the series "Building flash web widgets". If you haven't read the previous posts, please check the following links:
- Building flash web widgets - Part I
- Building flash web widgets - Part II

ok, let's continue.
So far if you test your movie, you should see something like:



is static and is boring, so let's add some more code:

function attachSecond():Void {
seconds++;
seconds_mc._width = seconds*3+6;
seconds_mc._height = seconds*3+6;
}

timer = setInterval(attachSecond, 1000);

with this code we are telling flash to change seconds_mc width and height to a bigger number every 1000 milliseconds (1 second), and if we test the movie, in fact seconds_mc grows every second. The problem is that it doesn't stop growing, so let's add some more code:

function attachSecond():Void {
seconds++;
seconds_mc._width = seconds*3+6;
seconds_mc._height = seconds*3+6;
checkSeconds();
}

function removeSeconds():Void {
seconds_mc._width = 6;
seconds_mc._height = 6;
}

function checkSeconds():Void {
if(seconds>59){
seconds = 0;
removeSeconds();
}
}

timer = setInterval(attachSecond, 1000);

In our function "attachSecond" we are calling "checkSeconds" to see whether the cycle has been completed and we have already 60 seconds, if so, we call removeSeconds to resize seconds_mc to 6 pixels that we decided to have (in the previous tutorial) instead of a 0 (zero) to see something on the stage. Then we should attach another minute:

function attachSecond():Void {
seconds++;
seconds_mc._width = seconds*3+6;
seconds_mc._height = seconds*3+6;
checkSeconds();
}

function removeSeconds():Void {
seconds_mc._width = 6;
seconds_mc._height = 6;
}

function checkSeconds():Void {
if(seconds>59){
seconds = 0;
removeSeconds();
attachMinute();
}
}

function attachMinute():Void {
minutes++;
minutes_mc._width = minutes*3+6;
minutes_mc._height = minutes*3+6;
}

timer = setInterval(attachSecond, 1000);

How about if it was minute number 60? so we would need to check if it is, reset the value back to zero and attach one more hour...

function attachMinute():Void {
minutes++;
minutes_mc._width = minutes*3+6;
minutes_mc._height = minutes*3+6;
checkMinutes();
}

function checkMinutes():Void {
if(minutes>59){
minutes = 0;
removeMinutes();
attachHour();
}
}

function removeMinutes():Void {
minutes_mc._width = 6;
minutes_mc._height = 6;
}

function attachHour():Void {
hour++;
hours_mc._width = hour*15+6;
hours_mc._height = hour*15+6;
}

timer = setInterval(attachSecond, 1000);

and, how about if it's hour 13? or even worse, hour 25?
then, we need to check the hours and set it as it should be:

function attachHour():Void {
hour++;
checkHours();
hours_mc._width = hour*15+6;
hours_mc._height = hour*15+6;
}

function checkHours():Void {
if(hour>11){
hour = (realHours<12)?12:removeHours();
}
}

function removeHours():Number {
hours_mc._width = 6;
hours_mc._height = 6;
hour = 1; return hour;
}

timer = setInterval(attachSecond, 1000);

if we test our movie, it should work fine and the clock should be ok, adding minutes and/or hours when adequate.
The whole code looks as follows:

var timer:Number;
var timedate:Date = new Date();
var realHours = timedate.getHours();
var hour:Number = (realHours<=12) ? realHours : realHours-12;
var minutes:Number = timedate.getMinutes();
var seconds:Number = timedate.getSeconds();
delete timedate;

trace(hour+":"+minutes+":"+seconds);

seconds_mc._width = seconds*3+6;
seconds_mc._height = seconds*3+6;
minutes_mc._width = minutes*3+6;
minutes_mc._height = minutes*3+6;
hours_mc._width = hour*15+6;
hours_mc._height = hour*15+6;

function attachSecond():Void {
seconds++;
seconds_mc._width = seconds*3+6;
seconds_mc._height = seconds*3+6;
checkSeconds();
}

function removeSeconds():Void {
seconds_mc._width = 6;
seconds_mc._height = 6;
}

function checkSeconds():Void {
if(seconds>59){
seconds = 0;
removeSeconds();
attachMinute();
}
}

function attachMinute():Void {
minutes++;
minutes_mc._width = minutes*3+6;
minutes_mc._height = minutes*3+6;
checkMinutes();
}

function checkMinutes():Void {
if(minutes>59){
minutes = 0;
removeMinutes();
attachHour();
}
}

function removeMinutes():Void {
minutes_mc._width = 6;
minutes_mc._height = 6;
}

function attachHour():Void {
hour++;
checkHours();
hours_mc._width = hour*15+6;
hours_mc._height = hour*15+6;
}

function checkHours():Void {
if(hour>11){
hour = (realHours<12)?12:removeHours();
}
}

function removeHours():Number {
hours_mc._width = 6;
hours_mc._height = 6;
hour = 1;
return hour;
}

timer = setInterval(attachSecond, 1000);

As a good practice, we have declared the variable timer at the beginning so flash knows that the variable exists and which sort of variable is.
Then is up to you to add more stuff, for example tweenings, changing design, etc. and don't forget to add something to help "reading" the clock, for example the cross I drew in mine showing numbers from 1 to 12 and from 10 to 60 so the users will have an idea about the time...
and basically that's it! you have a clock working 100% and you can now upload it to any widget distributor like widgipedia, widgetbox or yourminis.
One of these days I will post a clock I'm working on using the same code but different design to give you an idea of what you can actually do.

Any question or comment is very welcomed ;)

salut!