Wednesday, August 01, 2007

Building flash web widgets - Part I

I have already written something about building small flash applications that later on I made them widgets:
- Flash add to del.icio.us & the widget in widgipedia. I used a similar script for the rest of the buttons I uploaded to widgipedia.

- Skype status in flash, used to build the widgets Flash Skype Status & Skype analogue clock uploaded to widgetbox.

- Flash-php file downloads counter, that easily can be made a widget.

So, the idea of this "series" of tutorials is to build a flash widget and upload it into a widget platform for the world to see, use, rate & you become famous as I did... :D (I'm joking, ok?)

I will not ask you to build the basic "hello world" as I would prefer to go much further than that, even though we will build a basic widget: a clock; but we will use the time units in a more creative way and we will build something like:


I assume you have Macromedia Flash 8 (or Adobe Flash CS3) installed and you are familiar with it.

Let's start:

- Create a new flash document and change its properties going to modify>document or pressing control+j (apple+j if in Mac), the new dimensions should be 200 width & 200 height, however, its better if your widget is even smaller; change its frame rate to 24fps and click ok.

- Our stage is empty and we have only one frame; rename that frame "actionscript" and lock it as we don't want anything else on that layer, just our actionscript (best practices, you see)



- Select the first frame (the only one we will use, best practices...) and add the following code:

var timedate:Date = new Date();
var realHours = timedate.getHours();
var minutes:Number = timedate.getMinutes();
var seconds:Number = timedate.getSeconds();

delete timedate;
trace(realHours+":"+minutes+":"+seconds);


Press control+enter to test your movie and you should see something like 22:44:38 in the output window and it is the actual time as taken from your computer's system.
What we are doing is:
- instantiating the date object in a variable called timedate.
- calling three different methods of the date object to get the hours, minutes and seconds and storing the values in three different variables: realHours, minutes & seconds.
- deleting the date object instance as its not needed any more so we clean it from the memory (best practices...)
- with trace we tell the output window to show us what the variables have stored.

ok, we now know how late it is, but, to be honest, I don't like that of "22 hours" as its sounds to military for me and I'm used to see 10pm instead of 22 hrs...
so, let's change the code:


var timedate:Date = new Date();
var realHours = timedate.getHours();
var hour:Number;
if (realHours<=12) {
hour = realHours;
} else {
hour = realHours-12;
}
var minutes:Number = timedate.getMinutes();
var seconds:Number = timedate.getSeconds();

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


Similar idea, we have just added a new variable: hour and its value depends on realHours value, using a conditional we are sure not to use the 22hrs format but a more understandable one (and better for this example). Testing our movie, we should have something like 10:45:14.

Actually, the code looks a bit too messy; having a conditional in the middle of the way doesn't look that good, but good job there is a short cut for that conditional, so, we change the code again:


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


It's exactly the same, just a different syntax that I find cleaner. If you test your movie, your output window should show you something like 10:50:11.

Well, I'm afraid that's it for today; I've got to do some house work now but we will continue soon. In the meantime, think about your design, read more about the date object and see you later.

salut!

No comments: