Widget: iClock

More than 3 years ago I decided to move from developing small applications and left the 'widgetsphere' to focus more in the casual games industry. I created Games-Garden, a facebook app and a bunch of games.
These days my mode has changed a bit and I don't feel like spending all of my spare time creating games which might be played only a few thousand times. The competition is too big and there are lots of 'pirates' stealing games (specially from China) which is not fun at all.
So, I've decided to go back to create these small apps known as widgets. The first one I'm releasing is this iClock. Similar to the Digital Time and Date widget that I created more than 5 years ago, which by the way it has been cloned many times already, the iClock shows the time in a 12 hours format and as well it shows the date when moving your mouse over the small calendar icon which shows the day. The graphics obviously have a big influence from the iDevices and so far it looks like people like it. What do you think?

iClock

Personally I think is nice :)
I had the idea of creating a similar widget many years ago when at my previous job I worked on a countdown and these days the idea came back after my current task at work includes a copy of that old countdown. So yeah, it looks like everything is a remix... :D

Tweener for games: Updating Amounts

Following up on the Tweener for games tutorials, this time we will see how to update amounts gradually using Tweener to make them look nice & smooth.

As an example we can see my game GAIA - Guess Who? where the score is updated gradually instead of in one step (immediately) adding more to the user's experience and making the game more playable and enjoyable. Trust me, these little details can make a difference ;)

Update amounts gradually using Tweener:
What I've got on stage is a dynamic textfield with instance name "txtScore".
To give it a value, we declare a variable called myScore:

var myScore : Number = 100;
txtScore.text = myScore;

If you run the movie, your txtScore shows 100.
Nothing exiting I know... :P

Because we need to update this amount when a certain event happens, then we add a button, we will call it mcAddBonus.
Now let's use tweener to update the score adding a 50 points bonus:

import caurina.transitions.Tweener;

var myScore : Number = 100;
txtScore.text = myScore;

mcAddBonus.onRelease = function() : Void
{
Tweener.addTween(this._parent, {myScore:myScore + 50, time:1, onComplete:function() { txtScore.text = Math.round(myScore); }});
}

Testing the movie, whenever we press our button after a second myScore updates by 50.
Still nothing special :(
but, how about if we use the tweener onUpdate parameter instead of onComplete?
the onComplete only updates our score when the tween has finished but as we saw on the previous example, onUpdate updates the value gradually before the tween finishes.
Let's change the code:

import caurina.transitions.Tweener;

var myScore : Number = 100;
txtScore.text = myScore;

mcAddBonus.onRelease = function() : Void
{
Tweener.addTween(this._parent, {myScore:myScore + 50, time:1, onUpdate:function() { txtScore.text = Math.round(myScore); }});
}

Sweet!
I must say I love Tweener, is a great tool :)
and this is the example:



salut!

Tweener for games: Countdown

Last week I came back from holidays, I was back in my home country after almost 6 years since I left, that's why I couldn't update the blog...
Anyway, as mentioned before, I'll be writing some tutorials on how to use Tweener for games development, however, take into account that the code can be used on other applications as well...
The first "tutorial" is

Creating a countdown using Tweener
From my point of view, adding a countdown to a game helps to improve the playability as the user feels more challenged to finish certain task.
After reading Arthur Debert's Tweener Tips, I got the idea on developing further his "Poor's man timer":

Tweener.addTween(this, {time:0.3, onComplete: myFunction});

Right, so if we put it into a function, then we have:

var timeleft : Number = 30;

function tweenDown() : Void
{
trace(timeleft);
timeleft--;
Tweener.addTween(this, {time:1, onComplete:tweenDown});
}

tweenDown();

First we declare a variable called "timeleft" and set it to 30, so we will count down from 30 seconds to 0.
The function tweenDown() traces the updated "timeleft", decreases the timeleft value by one and using tweener it calls itself every second thanks to the onComplete parameter.

If we tide up a bit, we can add another function to trace the updated value of timeleft, then we have something like:

var timeleft : Number = 30;

function showTimeleft() : Void
{
trace(timeleft);
}

function tweenDown() : Void
{
timeleft--;
Tweener.addTween(this, {time:1, onUpdate:showTimeleft, onComplete:tweenDown});
}

tweenDown();

The function showTimeLeft() will trace the updated value of timeleft thanks to the parameter onUpdate and this allow us to do something else instead of only tracing; we can add a textfield (with instance name txtTime) to show us the updated timeleft value and the updated script would be:

var timeleft : Number = 30;

function showTimeleft() : Number
{
return txtTime.text = timeleft;
}

function tweenDown() : Void
{
Tweener.addTween(this, {time:1, onUpdate:showTimeleft, onComplete:tweenDown});
}
tweenDown();

Now, the problem is that when the countdown reaches 0, it doesn't stop!
so we can add another function to check if there's any "timeleft" and if there isn't, then do something else. The final script for a simple countdown is:

import caurina.transitions.Tweener;

var timeleft : Number = 30;

function showTimeleft() : Number
{
return txtTime.text = timeleft;
}

function tweenDown() : Void
{
Tweener.addTween(this, {time:1, onUpdate:showTimeleft, onComplete:countDown});
}

function countDown() : Void
{
if(timeleft > 0){
timeleft--;
tweenDown();
} else {
trace("GAME OVER!");
Tweener.removeAllTweens();
}
}

tweenDown();

and this is the example:

Salut!

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!

Widget: Radial Clock

Last weekend I was experimenting a bit more with different ways to display the time, again working with clocks using Tweener and a bit of Maths and this is one of the widgets I did, the Radial Clock has similar idea to my Squares Clock but tweening the time units in a radial way similar to an analogue clock. I've used the ChangeColour AS2 class to show the rollOver state of a button that links to this blog.

Radial Clock

As you can see, this time I've added it to the yourminis website, and it's the first widget I've uploaded over there. To my surprise, few hours later, the clock had been cloned! of course immediately I wrote an email to yourminis letting them know about it... later on I realized that "cloning" widgets is actually a feature in the yourminis platform called "remix".
I'm a bit jealous with my widgets and didn't find it funny though... :P

Well, it was interesting trying a new widget platform, maybe another day I will write something about my experience using the different platforms I've used so far.

salut!

// --- Edit ---
It seems like yourminis doesn't exist any more. The widget shown here is powered by Widgipedia.

Actionscript: Tween vs Tweener

The other day I asked my mate ThatBlokeMike which Tween class was he using, the answer: Rob Penner's one, included by default when you install Flash.
I talked to him about the goodness of Tweener & how it helped me to speed up my developing process, but still couldn't convince him...
That's why I've decided to have a look at both options and see why I prefer using Tweener rather than Tween.

When I first started "Tweening with Actionscript", I was checking every time a great tutorial on Kirupa about it: Using the Tween Class.

It was good at the beginning, in fact I used it for several months and was happy about it, but still had to go back to Kirupa to check the options; the reason: the code needed to do a simple tween is a bit too long...

For instance, if we want to blur a Movieclip on an OnMouseDown event, if using the Tween class, we will need to import the the Tween class, the Filter class, play a bit and after writing a long code and spent some good minutes doing it, we will get what we want. But, if using Tweener, with a couple of lines of code we will get the same effect!
Click anywhere on the flash movie:

Let's see it the code:

import caurina.transitions.Tweener;

function blurIt():Void {
Tweener.addTween(my_mc, {_blur_blurX:15, time:1});
Tweener.addTween(my_mc, {_blur_blurX:0, time:1, delay:1});
}
this.onMouseDown = blurIt;

That's it!
easy, isn't it? now, your homework, do the same using the "traditional" Tween & Filter Classes...

More good things about Tweener:
- is open source
- the best bit, you can add more properties to the same tween, ie:

Tweener.addTween(my_mc, {_x:15, _y:25, _alpha:85, time:1});

& even a change of event in the same line:

Tweener.addTween(my_mc, {_x:15, time:1, onComplete:doSomething});

- has loads of parameters, special properties and many more transitions, so for sure you will fine one that suits you ;)

of course, it has some "back downs" but is up to you if you consider them "too bad", anyway, after using Tweener for some months now, I've found just two of them:
- It doesn't (yet) have anything similar to the "yoyo();" method found in the original Tween Class.
- It adds to your final swf 5 or 6kb more than if you were using the Tween Class only.
for me, that's not a big deal, so my advice:

Download Tweener, try it out, if you like it, keep on using it, if not, don't use it and all of us happy :)

salut!