Building flash web widgets - Part II

This is the second part of the series "building flash web widgets", click here to see the first part.
Ok, I've done my homework and I know how my clock is going to look like, of course in the meantime I will continue explaining how to build something similar to the clock in Part I.
Now that we have the time showing in the output window, we need to translate that into objects on the stage.

- From the menu, go to insert>timeline>layer to add another layer and rename it "elements"



- Press select the oval tool pressing "o" and draw an circle on the stage, the size is not important but has to be symmetric, mine is 25x25 pixels, and is better if it has no stroke so it won't look strange if at different size. Select the circle and go to modify>convert to symbol (or press F8) to convert it to a movieclip and call it "circle_mc".



- Select the instance of circle_mc you have on the stage and write "hours_mc" as its instance name and change its alpha value to 90.

- Add two more instances of circle_mc to the stage, one will be called "minutes_mc" and the one on top will be "seconds_mc"; minutes_mc will have an alpha value of 60 and seconds_mc will have an alpha value of 30. We need to align all the elements to the centre of the stage.



- Now the code. Lets add the following lines to the actioncript we already have:

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

What we are telling flash is, the width and height of each instance it will change depending on the value of the related variables. Minutes and seconds are multiplied by 3 and hours are multiplied by 15.
why?
ok, let's see the maths:
- The idea is that the circles grow as much as 180 pixels so they will still be visible on the stage, as each minute has 60 seconds, then we divide 180 by 60 that give us 3 so the seconds will be different to one another by 3 pixels in size. Same for minutes.
Now, hours is different as there are only 12 hours per cycle, so we divide our 180 pixels by 12 and that is 15, so every 15 pixels there will be one hour.
But there is something I don't like; how about if the hours and minutes are 0 (zero)? visually will not be nice as the stage will be almost empty...
As we still have space to complete our 200 pixels, let's add 6 pixels to each value:

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;

ok, now even if the value is zero we can still see the elements on the stage.
The whole code so far is:

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;

Testing the movie, you should be able to see how we are manipulating the size of the elements on the stage depending on the time. Cool!

In the following tutorial, we will see how to update the values and have a clock working 100%.

Salut!