Create an amazing widget for your blogListThumbs
Create an amazing widget for your blog
Last December I was working on a cool project, the web design for a brazilian online job board. It was a very pleasant project to work on mainly because we had total freedom to create and suggest features. Of course some of our suggestions didn't make to the final version, however one did, the widget.
The web widget is a portable chunk of code that can be installed and executed within any separate HTML-based web page by an end user without requiring additional compilation. They are derived from the idea of code reuse. Other terms used to describe web widgets including: gadget, badge, module, capsule, snippet, mini and flake. Web widgets often but not always use DHTML, JavaScript, or Adobe Flash. Wikipedia
Basically what I did was get the data from the RSS feed and show it in a nicer way using Flash. In other words, it’s a sort of RSS reader.
So in this post I will show you how you can create your own widget using the FLA file I created for the Openjobs widget.
There’s one more thing, as I’m a designer and not a real programmer, my AS2 (actionscript 2) code won’t be the best code ever, but if you are an AS ninja and want to contribute with a better code, feel free. Actually it would be awesome to have the widget using AS3 rather the AS2.
Design
Widgets are like banners but they deliver more information. For this widget I follow the idea we used on the Openjobs website design, where there's a person holding an ad sign, in this case he's showing the jobs available.
Flash Customization
To create your widget you won't even need to touch the code. Just change the visual elements and that’s it. Below you can see the elements of each layer.
Dynamic elements
If you want to change the font or text size just edit the "title" and "description box" symbols in the library.
The widget
You will have to publish the widget’s swf file in your site's server in order to distribute it only with the embed code. The feed’s url goes direct in the embed code as well, just change the url in the Feed parameter. Below you can see the widget and the code.
| Attachment | Size |
|---|---|
| widget.fla | 266.5 KB |
| widget_v8.fla | 157.5 KB |
About the author
My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.
21 Comments
Fabio, thank you for sharing .fla needs xml to display correctly, do u have it? it would be great and dandy to see this one, too. Can you please send it to my email?
Cheers.
Keep up a good job!
Can you get something off one's chest me who did your layout? I’ve been looking in favour of anybody compassionate of like yours. Through you.
By.
Hi, why do i cant get the source file?, all i get is a lot of different signs thanks!
Hi friend kindly pls send me the action script 2 of your swf file.
Waiting for your reply.
Sooraj.dhavenues@gmail.com
this is flash file.Can you send me swf file..
Thanx for the tuts
If I test it in flash it works perfectly, but when I try to use it on my site it doesn't display any items. Why???
I can't get the widget to display any RSS feed other than the Openjobs one. No matter what feed I plug in there it doesn't seem to load. Any suggestions?
I have tried to edit several times, but the news won't appear. anyone know why ? and i used this widget with my feed but still no positive result. Does this widget read the
This works great... although i get the url address instead of the feed description after i click the feed title, any idea?
thanks again for sharing!
ohbrooke, there's a mask so the texts appear only when they are over the widget. Besides that there're the functions new Tween, and continueTo. Those functions move the texts. thanks and let me know if you have more questions..
I created an Rss and played with the flash file. How do I change how the text "rolls" in so that it stays in the white box I created?
http://www.brookehalldesign.com/widgettest.html
This is great straight-forward information. I, like you am a designer who knows programming to a certain degree. I am going to try this technique. Looks like I need to know how to create a rss feed? Any tips on where to find information on that?
Alice, that's probably because of I saved mine in Flash CS3. I will check that out...
And thank you all for the comments ;)
Hi,
I'm trying to open your Fla file in flash professional 8 and it's bringing up an error 'unknown file format'. It seems that other people have been able to access the file without any problems but I was wondering if you could advise me nonetheless.
Thanks,
Alice
This is great.
What would i need to change in the AS if one of the XML fields in the feed isn't the same?
For example if I were going to parse a feed from CNN using this, the description field isn't the same and in it's place it just shows the URL instead of the brief description.
please help if you can! thanks
this is awesome. i was at work yesterday talking about how to do this on our site. RSS feeds are sweetness, its how I found this and freelanceSwitch and PSDtuts. Flippin sweet, thank you so much!
Thanx for this widget ...
I have some problem of compatibility with internet explorer ... but it's work with Firefox...
http://www.bidibule.net/widget/
Have you any idea ?
Instead of using embed to put the widget into your page I'd recommend something like swfobject (http://blog.deconcept.com/swfobject/). This is so that you avoid the 'Click to activate and use this control' problem in internet explorer.
Cool stuff, nice simple reader.
Nice work, thanks for your help....
Post new comment