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!