I have just uploaded a widget to Widgipedia called "Subscrbe to my feed", erm... I know, the name is not that nice but I'm not that creative to put names to my widgets :P This is the description from Widgipedia:
Replace that old RSS button for this cool Flash button to promote your feed and allow your viewers to subscribe to your site with ease. Just put this widget into your blog (or any other page with a feed) and flash will do the rest.
Technically speaking, via javascript-actionscript it gets the URL where is embedded into and sends it to a php, this php searches through the html of the page and returns the RSS (if any), then is easier for the user to add your feed to any reader.
The original design was made by UtomBox and you can find it here, and this is the way it looks:
Subscribe to my feed
Click on the "get" button to grab it and embed it into your blog and of course, click on the widget itself to add my feed to your reader ;)
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:
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
I remember when I started "blogging" I decided not to add any sort of adds as I thought they looked bad, they wouldn't add any good to my blog and anyway I didn't have many visits... nowadays I've got some more visits (more than a couple of thousands monthly) and even though I still think adds look bad, after reading so many stories about people who make money from them I decided to give them a try so I could pay a proper server to host all my experiments and make more interesting stuff mixing more technologies (PHP - MySQL - Flash) because at the moment I've got a very basic account without access to a database and millions of .txt files for some of my widgets users to store specific data (ie counters).
For about two months or so I tried an affiliate program and added some banners to the blog expecting some of my readers will click on them and buy some stuff... It happened that they clicked on the banners a couple of times but never bought anything, I guess it was because they where about UK based companies and most of my visitors are from other places.
Today I've decided to say goodbye to these "sponsors" as I didn't get any penny from them :D and I'm only leaving the old and worse looking Google adSense.
With that one is another story, I added it a couple of months ago and still don't understand why it shows some funny adds, not related at all with what I write about... I remember about a couple of weeks ago when I was about to say goodbye to them as well, someone clicked on one of the links and I got my first $0.15, then I decided to leave them, I don't know how long for as so far I have earned less than $0.50! :D
Well, anyway, affiliate programs are not for me, the banners where really annoying so I'm happy I got rid of them :)
So far I have uploaded widgets to three different sites: - Widgetbox - Widgipedia - Yourminis and I must say that the first time I uploaded a widget to any of these three sites it was not an easy task but not something out of this world, these three distributors are doing their best to help any developer to publish their widgets with ease, some of them have more steps, other ask for more information, but the requirements are not really a big deal. However, Google Gadgets is different cup of tea. After reading many different pages from its documentation I still haven't managed to find out how to allow users to change settings to a flash widget; the documentation is just too big and complicated, many pages with many links that don't give precise answers or at least I couldn't find them... I gave up trying to upload the clock from my previous post as it has some options to change the colours so I had to upload another experiment just as a test; after following their instructions and building a not too friendly xml file, I managed to upload a widget:
I still couldn't see if its in their library as whenever I look for its address I only get this error:
Sorry, http://hosting.gmodules.com/ig/gadgets/file/113526947643047156725/analoguecalendar.xml is unavailable. Please try another result.
well, maybe another day I will continue reading the dozens of documentation pages and I will manage to upload other widgets...
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.
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
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)
It was announced today at the Clicky blog; now I will tell you my secret on this one: The concept and graphics were made by José Peña Pocasangre, a great Art Director based in Barcelona, Spain. I told my friend "Penapoca" about the competition and immediately he started thinking about a concept, couple of days later he sent me the cool graphics and I just put them in flash, pulled the data from Clicky, added some animations and voila! a nice and customizable widget was in the way to the competition... the rest is history...
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.
There are many tools out there to check out your website's statistics and most of them offer you the same options, however, Clicky has something that really makes checking statistics an addiction: the Clicky spy. Of course my website doesn't have the traffic Clicky does but still I can check in real time who's visiting me and what my visitors are doing... It's really cool to see how my visitors jump from page to page internally and click on external links, etc.
Another cool thing is that Clicky has its own API so developers can play with it an create widgets or similar stuff and these days they are running a contest for widgets developers; of course I've submitted a widget that I hope I will be using here as soon as the guys at Clicky allow me (I guess until they decide the contest winners, the submitted widgets should remain "hidden").
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 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:
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;
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.
This is the second part of the series "building flash web widgets", click here to see the first part. Ok, I've done my homework and I know how my clock is going to look like, of course in the meantime I will continue explaining how to build something similar to the clock in Part I. Now that we have the time showing in the output window, we need to translate that into objects on the stage.
- From the menu, go to insert>timeline>layer to add another layer and rename it "elements"
- Press select the oval tool pressing "o" and draw an circle on the stage, the size is not important but has to be symmetric, mine is 25x25 pixels, and is better if it has no stroke so it won't look strange if at different size. Select the circle and go to modify>convert to symbol (or press F8) to convert it to a movieclip and call it "circle_mc".
- Select the instance of circle_mc you have on the stage and write "hours_mc" as its instance name and change its alpha value to 90.
- Add two more instances of circle_mc to the stage, one will be called "minutes_mc" and the one on top will be "seconds_mc"; minutes_mc will have an alpha value of 60 and seconds_mc will have an alpha value of 30. We need to align all the elements to the centre of the stage.
- Now the code. Lets add the following lines to the actioncript we already have:
What we are telling flash is, the width and height of each instance it will change depending on the value of the related variables. Minutes and seconds are multiplied by 3 and hours are multiplied by 15. why? ok, let's see the maths: - The idea is that the circles grow as much as 180 pixels so they will still be visible on the stage, as each minute has 60 seconds, then we divide 180 by 60 that give us 3 so the seconds will be different to one another by 3 pixels in size. Same for minutes. Now, hours is different as there are only 12 hours per cycle, so we divide our 180 pixels by 12 and that is 15, so every 15 pixels there will be one hour. But there is something I don't like; how about if the hours and minutes are 0 (zero)? visually will not be nice as the stage will be almost empty... As we still have space to complete our 200 pixels, let's add 6 pixels to each value:
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();
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();
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();
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.
