Widgetbox business model is not good for devs

I just added a new widget to Widgetbox and noticed something I'm actually not happy with:

A widgets developer HAS to pay to avoid Widgetbox hijack his/her widget and inject ads...

What?

To be honest, I don't remember if this "feature" was already there in February when I added my first Flex Widget (Newest Games) but I today when my widget Play Random Game was approved I got an email encouraging me to upgrade to Pro and after checking, this is one of the benefits:

- No ads on widgets you develop or install

I just don't get it!
- We create content for them for free
- They use our content for Marketing adding a button with a link back to Widgetbox (which is fair as they are distributing the widgets)
- They add ugly ads covering our widgets without our approval
- They monetize with these ads without any revenue share option for us devs
- We MUST pay if we don't want to see the ads (???)

I think the idea of charging users if they don't want to see the "get widget" button is good but adding ads without sharing revenue with the devs and on top of that asking devs for money so the ads are not shown IS JUST PLAIN WRONG!

Very bad Widgetbox, very very bad. I wonder how much they make from widgets like my Flash Date Calendar which gets 50k+ views a day?

This makes me think about moving my widgets with other distributors...

salut!

Building Flash web widgets: distribution

It was about a year ago that I started playing with small flash applications that later on evolved to "widgets".
As I didn't know they were actually widgets, I called them "buttons" and offered an embed script to my readers so they could use them; the first one was "add to delicious flash button" and I offered many more after that one (and many people still use them!)
It was until December 2006 that I discovered Widgetbox and decided to register my widgets over there for a better distribution.
There are many advantages on registering widgets with any distributor, for example, more people will see them therefore more people will use them; usually distributors have a "comments" system so you can get feedback from your widgets users and feedback is one of the most important things when developing any application as it allows you to see what is good and what can be improved.

As you might now, there are many widget distributors around and is up to you where you want to register your widgets, but I would like to tell you my thoughts:
- Even though Google Gadgets offer money to their top developers, I wouldn't advise you to register a widget with them as it's not easy, there's no promotion, no proper statistics, and your widget will be completely lost in the wild...
- Clearspring it supposed to be the top distributor in the galaxy that has served billions of widgets but to be honest I had a very bad experience with them as the only widget I've submitted has few visits and seems like no-one is using it...

So, for web widgets distribution I recommend you three different sites:
- Widgetbox
- Widigipedia
- Yourminis
Each of these websites have their pros and cons but from the ones that I've tried they are the best for widgets distribution.

Now let's see how easy it is to register a widget on one of these sites, this time I've chosen Widgetbox.
From Widgetbox site, these are the benefits of registering flash widgets with them:

• No-paste installation into MySpace and other sites. Users can install into MySpace and TypePad without cutting and pasting. More platforms are coming soon.
• MySpace linking. We enable your widget to link out of MySpace.
• User configuration of Flash. Allow bloggers and other subscribers to configure your widget. This actually changes the generated <embed> tag. Users get a live preview of their changes as they make them.

In addition, Flash developers get everything we offer all widgets, such as:

• Widget Syndication Metrics. Track the spread of your widget across the internet with your own widget analytics dashboard. Learn more.
• Viral adoption. Widgetbox provides a simple, direct mechanism for people that see a widget in the wild to get it for themselves.

The first thing you would need to do is to register yourself with them (link at the top right of the page).
Then follow this link to register your widget.
- Select "Register an existing remote service as widget"
- Fill in the first form (yes, I'm afraid this is one of the bad things about Widgetbox, to register a widget there are many steps to follow... )
- When you click next you will get to the widget configuration page where you can add different options to your widget so it will be customizable.
One parameter you might want to add is the wmode= transparent. Please check the Flash Widget developer guide to find out more about this parameter and other options.
- Click next to preview your widget; if you don't want your widget to be resized then tick the related option. Bear in mind people like to customize the widgets as much as possible.
- When you are happy with your widget look, click next to fill in the final form (uh! at last! well, not quite...)
This is the most difficult bit as you will need to think categories, tags, summary, description and upload a picture of your widget for the gallery.
I will advice you to have ready a 96x96 pixels png thumbnail of your widgets best view.
When you have finished filling in the form, press save widget and you will get message similar to:




The widget is not in the gallery yet and to submit it you need to press "submit to gallery", if it's ready, there will be another message saying "your widget is ready to be submitted to the gallery" so press "submit to gallery" (déjà vu? no, is another thing Widgetbox has to review...) et voila!
well, again, not quite...
Unlike other distributors, Widgetbox people first check each widget before showing them in the gallery.
But basically is just a matter of time (usually one day) before your widget starts being seen & used by other people and the viral distribution takes place...
So, go on and submit your web widgets now :)

salut!

--- Update ---
As I said before, from the following day I submitted the widget to Widgetbox my widget is in the Gallery:

Building Flash web widgets: right click

If you are thinking "when is this guy going to finish speaking about 'building flash web widgets'"?
well, I still have got two more things to talk about (sorry, I know I said that before...), but my idea is to write as much as possible so you have a better understanding about "best practices" when building widgets ;)

This time is about managing the "right click" from the mouse and this is considered best practice in any web application, not only on widgets.
Best practice?
why do we need to care?
well, you never know what a users is going to do with your application and is better to prevent possible bugs testing whatever is possible to do. For instance, whenever I'm checking someone else's work, I'm always using the right click to zoom-in to their applications, press play, etcetera as I'm very curious and want to know if the developer cares about details; trust me it makes a difference.

The first thing we need to do is to get rid of the "built-in items", yes, the same from the picture above, and to do so we need only one line of code:

Stage.showMenu = false;

Adding that simple line helps us to avoid the user to do something we didn't want him/her to do like pressing "rewind" or "play" (if using more than one frame). I normally use one only frame so the right click menu doesn't show some options but still it shows the "zoom-in", "quality" & "print" among others. However, with this line of code we won't be able to get rid of all the items, for example the "about adobe flash player 9..." as is part of the "copyright" from Adobe.

And talking about copyrights, can we add our own copyright or something like that?
certainly we can and the way to do so is with the following actionscript in the first frame:

function linkToMe():Void {
getURL("http://overloadstudios.blogspot.com/");
}
function linkToDistributor():Void {
getURL("http://www.widgetbox.com");
}
var cmMenu:ContextMenu = new ContextMenu();
cmMenu.hideBuiltInItems();
cmMenu.customItems.push(new ContextMenuItem("Built by Overload Studios", linkToMe));
cmMenu.customItems.push(new ContextMenuItem("Powered by widgetbox", linkToDistributor));
this.menu = cmMenu;

We won't need the Stage.showMenu = false; anymore as with this code we are hiding the "traditional" menu.
What we have are two functions to link to this blog and to the widget distributor, in this case Widgetbox.
Then we are instantiating the class "ContextMenu", hiding the "built in items" and adding two items to the new "array" of items.
The last line is to tell flash which menu should show.
You can add more items if you want to or remove one or the other, but remember to add this right click menu to all your widgets to allow users to know who built the widget and to visit your website; this is a nice way to show that you are the developer and not with a cheese roll over banner as other people do. :P

Salut!

Mashup of the day: Moving Earth

Today I've got an email from the guys at MashupAwards telling me some really good news: the Moving Earth widget I built for the Big Widget Challenge (and won the contest) was nominated and selected as award winner for Mashup of the day at their website.



Thanks for the award! :)
And by the way, if you need inspiration or just want to see some cool stuff, go to the MashupAwards and check out the daily & monthly winners.

salut!

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!

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!

Squares Clock Widget

I'm a bit obsessed about data, I think of data as numbers because every single piece of data represents already a unit!
For example, when I built the CPU Usage widget, I translated the numbers into bars, tweening depending on the data; same when I built the Moving Earth widget, where the magnitude of earthquakes is shown using bars as well...
But if we take numbers and translate them into squares, so X units will be represented by squares, then we have something like my Firefox Screensaver or the Squares Clock widget:



As is experimental then expect some minor bugs :P
If you like it, you can get it from Widgetbox.

Salut!

my 15 minutes of fame

Andy Warhol said once:

"In the future, everyone will be world-famous for 15 minutes."

I think it was my turn as when my latest widget was announced winner of the Big Widget Challenge, the news were posted on MASHABLE, one of the most important news websites about social networking & web 2.0.
I did a quick search on Google and found the widget being mentioned on another couple of sites:
BOL - Business On-Line (Japanese), STUFFLEUFAGUS & Colechurch Consulting.

--- UPDATE ---
just wanted to add two more links:

Daniel Todd who's blog is part of the MXNA and
StickyWidgets (bookmarked) that I found just minutes after publishing this post
----------------

Big thanks to all of you!

To celebrate it, I've changed the look & feel of this blog. To be honest, it wasn't easy because Blogger is not as flexible as other blog platforms but hey! I like it! :)

I just hope I can manage to have some free time to experiment more with Flash, build more widgets, games & write some more tutorials...

salut!

Big Widget Challenge winner

Having built some widgets for Widgetbox, three weeks ago I've got an email from them inviting me to participate in the BIG Widget Challenge which was a contest organized by Freewebs and Widgetbox.
So, I did this Flash widget that takes information from the United States Geological Survey's Earthquake Hazards Program; this info is partly presented using Google Maps thanks to a component developed by AFComponents, and the rest of the info is presented in an info box which has a couple of animations made with the tweener class.

The contest winner has been officially announced at the WidgetCon 2007 website, so, I'm proud to say that I won the contest!.

If you want to have a look at the widget click here.


Salut!

Flash Counter Widget goes coloured

The Flash Web Counter widget has found a wide acceptance in the Widgetbox users community.
Shown in the top rated list as the highest rated is a big honour for me and from the 10 widgets I have uploaded to Widgetbox, is by far the one with more subscriptions.
One of its goodness is the small control panel where you can reset the counter to any convenient number and from today its possible as well change the counters background colour!

There is a number of files involved in the process for this widget to work:
- The flash counter itself
- An individual text file for each counter to store number of visits and selected colour (one text file per user)
- A php file that gets the current value of the counter and adds one more visit when required
- The Flash Control Panel
- A php file to get and set the values of both colour and number of visits.

All these 5 files have been updated today in order to have the option of changing the counters background colour. I know it would have been better to have a MySQL database instead of the hundreds of single text files I have currently but my hosting plan is very basic...

Anyway, don't be shy and leave your comments-feedback here ;)

Widget: Thunderbird Contact Form

I just uploaded a new web widget on Widgetbox.
from its page:

A simple contact form that promotes Mozilla Thunderbird. Let your visitors contact you giving them the option of sending you messages or get your contact details, ie mobile phone number and email address.

If you want to contact me, test it from here but as well I invite you to go and test it from Widgetbox


Available from:
http://www.widgetbox.com/widget/thunderbird-contact-form
Yes, I use Mozilla Thunderbird and this is my tribute to it.

Salut

widgets: yeah, I changed my mind...

more than a month ago, I wrote "My widgets on widgetbox" where I said I wouldn't write about my widgets on this blog anymore.

Well, actually I changed my mind as I have decided to continue writing about them and is because of many reasons:
- Feedback: I can get feedback, comments, suggestions and requests
- QA: To test them and to see how they look like when published on a blog
- Incompatibility: Some of the widgets I've done or updated are not compatible with widgetbox
- Promotion: I want my widgets to be used by other people so I need to let people know about them
- Personal: To use my blog :P (writing is a good habit and specially for me as English is not my mother tongue...)

so, to catch up I will write a short list of the web widgets I've done and I haven't mentioned here:
- Mini del.icio.us hotlist: shows hotlist from the del.icio.us homepage
- Flash Date Calendar: simple flash calendar with digital clock
- Firefox Digital Clock: firefox download counter and digital clock
- Digital Time and Date: simple digital clock and date (74 subscriptions so far)
- Flash web counter: website visits counter (123 subscriptions so far)

So far, I have submited 9 web widgets to widgetbox and all of them are doing well; I have many more ideas but haven't got the time but from now on, I will continue writing about them here on my blog.

Salut!

in the top 5!

Alex Iskold from AdaptiveBlue, has posted on his blog the top 5 widgets every blogger must have and to my supprise, one of my widgets is in the list!
The post R/WW Christmas - Widgets, not Cheese is mainly a tutorial on how to install and use widgets from widgetbox but has as well many interesting points about the importance and use of web widgets.
I know I promissed not to write about my widgets on this blog, but hey! I'm really exited to know that my Flash mini Digg viewer is a must have!
I'm already working on a 2007 version of it, so if you have any suggestion, I'm all ears (well, eyes...)


salut!

my widgets on widgetbox

I've decided to stop posting about my little experiments -widgets, eventhough I think is important for me too keep a record of what I was experimenting with and when... as for instance playing with php to get rid of the XML crossDomain policies was a good fun and for sure something new will come accross when continuing experimenting with flash and other technologies; I might post something about the solutions if any.
So, if anyone is looking for my widgets, they are available at Widgetbox, although the ones I've released here will continue working as usual.
You can see my widgets from this link.
I hope you like them and if you have any comments or suggestions, I will be very happy to read them ;)

Salut!