Create an amazing widget for your blogListThumbs

Create an amazing widget for your blog

February 18, 2008

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.

files/imagecache/Post640x480/originals/thumb.jpg
AttachmentSize
widget.fla266.5 KB
widget_v8.fla157.5 KB

About the author

User picture

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.

Sponsored Links:

More content from:

Help us to share this!

21 Comments

aniela05/29/2009

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!

federicoselero04/30/2009

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.

Tech Appeal12/10/2008

Hi, why do i cant get the source file?, all i get is a lot of different signs thanks!

sooraj11/28/2008

Hi friend kindly pls send me the action script 2 of your swf file.
Waiting for your reply.

Sooraj.dhavenues@gmail.com

sooraj11/28/2008

this is flash file.Can you send me swf file..

Anonymous07/12/2008

Thanx for the tuts

Nerus06/25/2008

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???

davez0r06/12/2008

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?

afg8904/28/2008

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 tag in feed or another tag.

Mista P03/08/2008

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!

abduzeedo03/06/2008

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..

ohbrooke03/05/2008

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

ohbrooke03/05/2008

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?

abduzeedo02/28/2008

Alice, that's probably because of I saved mine in Flash CS3. I will check that out...

And thank you all for the comments ;)

Alice Jones02/28/2008

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

Sandlog02/25/2008

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

sean steezy02/22/2008

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!

Claude02/21/2008

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 ?

Anton02/19/2008

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.

Alex02/19/2008

Cool stuff, nice simple reader.

oneday02/19/2008

Nice work, thanks for your help....

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?