Building flash web widgets: adding Tweener

There was something missing from my previous series of posts "Building flash web widgets" that I want to talk about, in fact there are three things I want to add:

The code in AS3
- I haven't yet written a single line of actionscript 3 as both at home and at the office I'm still using Flash 8 but Felix Sanchez has re-written the code into actionscript 3 so please check it out if you are already using Flash CS3 or an alternative tool to publish Flash Player 9.

Customization
- As I said before, I have changed the design so its clearer for the user to understand and I have added something very important for web widgets: customizable colours.
Customization in one of the most important bits of a widget if in case you want it to be successful and popular, this is something I had to learn from trial and error as at the beginning I didn't think about giving more options to the users and their complains taught me the lesson...
Tip: add as many customizable options as you can because nowadays the web is very users centric and users want to show their own style and taste in their websites.

Adding Tweener
The clock shown in the first post of the series uses a slightly different code than the one in the third post. The difference is Tweener and the code used is:

import caurina.transitions.Tweener;

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;

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++;

Tweener.addTween(seconds_mc, {_width: seconds*3+6, _height: seconds*3+6, time:0.8, onComplete:checkSeconds});

}

function removeSeconds():Void {

Tweener.addTween(seconds_mc, {_width:0, _height:0, time:0.8});

}

function checkSeconds():Void {

if(seconds>59){

seconds = 1;

removeSeconds();

attachMinute();

}

}

function attachMinute():Void {

minutes++;

Tweener.addTween(minutes_mc, {_width: minutes*3+6, _height: minutes*3+6, time:1, onComplete:checkMinutes});

}

function checkMinutes():Void {

if(minutes>59){

minutes = 0;

removeMinutes();

attachHour();

}

}

function removeMinutes():Void {

Tweener.addTween(minutes_mc, {_width:6, _height:6, time:1});

}

function attachHour():Void {

hour++;

checkHours();

Tweener.addTween(hours_mc, {_width: hour*15+6, _height: hour*15+6, time:1});

}

function checkHours():Void {

if(hour>11){

hour = (realHours<12)?12:removeHours();

}

}

function removeHours():Number {

Tweener.addTween(hours_mc, {_width:6, _height:6, time:1});

hour = 1;

return hour;

}

timer = setInterval(attachSecond, 999);

and what's the difference?
well, now when changing from second to second, minute to minute and hour to hour, the change is more smooth and when reaching the limit, either 12 or 60, there's a very nice animation when they go back to the origin (the centre of the widget).
Oh lovely tweener! :D

Let's see one of the old functions:

function attachSecond():Void {

seconds++;

seconds_mc._width = seconds*3+6;

seconds_mc._height = seconds*3+6;

checkSeconds();

}

applying tweener:

function attachSecond():Void {

seconds++;

Tweener.addTween(seconds_mc, {_width: seconds*3+6, _height: seconds*3+6, time:0.8, onComplete:checkSeconds});

}

in the same line of code we are managing width, height and calling the next function. I think is cool, that's why I like tweener so much.

and the final widget:


That's using the same code but different design so now is you changing the design and getting your widget ready to upload to a widgets distributor (That I will explain in a future post)

salut!