Tuesday, August 07, 2007

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!

4 comments:

Anonymous said...

hi Ernesto.

nice trilogy of tutorials!
i've not redesigned the clock (yet) but rewritten the code into ActionScript 3.0...

actually it was just a question of changing Void to void, _width and _height to width and height and outcommenting the delete statement :O)

check out the ActionScript 3.0 source here:
http://felisan.wordpress.com/2007/08/10/ernesto_quezadas_ur_i_as30/


kind regards
Felix Sanchez

Ernesto said...

hey Felix, thanks for your comments and for the post in your blog.
The AS3 code doesn't look as scary as I thought it was... thanks!

salut!

Pletoo said...

I am fairly new to Flash and while exploring various tutorials I came upon this one and was inspired to make a unique clock. Currently it has a Christmas theme but I plan to make others. It can be found here: http://www.whirled.com/welcome/154/world-s144069 and while it isn't really practical as a widget - it does the job where I have it. If it isn't immediately obvious, the presents represent the hours and the toys are the minutes.

Thanks for a great idea!

Reena said...

Hi Ernesto,
Really nice tutorial! I'm also very VERY new to web widgets and came across this tutorial in my research. I was wondering if you could help point me in the right direction. For instance, if I wanted to create a flash web widget,is using actionscript the only way to go (aside from web widget platform sites like Sprout.com)? Can I put one together with an already existing flash file? What would I need to start (also wondering & searching on this for HTML, JavaScript web widgets)?