Friday, November 24, 2006

Flash Firefox Downloads counter widget

For a flash web counter, please follow this link.

The next one of my flash web widgets series is a Firefox 2 Downloads Counter with an analogue clock.
Again, I had to deal with CrossDomain policies as flash cannot load any XML if the domain where the swf lives is not allowed to.
Instead of writing to the mozilla fundation and asking them to either host my swf or to allow my domain to get the XML data from them, I tricked these policies getting the data on a php and loading this php onto my flash file as I did with my Skype Status Flash Button.
Well, to the point...
For those of you who want to use this widget, just copy and paste this code onto your html page:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="firefox_clock" width="120" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" height="240" align="middle">

<
param value="always" name="allowScriptAccess"/>
<
param value="http://overloadstudios.co.uk/ewa/firefox_clock.swf" name="movie"/><param value="high" name="quality"/><param value="transparent" name="wmode"/><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="always" align="middle" type="application/x-shockwave-flash" height="240" src="http://overloadstudios.co.uk/ewa/firefox_clock.swf" width="120" wmode="transparent" name="firefox_clock"/>
<
/embed></object>


Example:






hope you like it.
salut!

Wednesday, November 22, 2006

Flash Skype Analogue Clock

From the Skype Status Flash Button came the idea of having your Skype status shown on an analogue clock. So there it is, your skype status shown in the middle of this Skype Clock.
If you click on it, your Skype application will open giving you the option to start a conversation with me (or the person hosting the clock...)
Feel free to put it on your website, just copy and paste the following code on your html:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="skype_clock" width="96" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" height="96" align="middle">

<
param value="always" name="allowScriptAccess"/>
<
param value="http://overloadstudios.co.uk/ewa/skype_clock.swf?myID=yourSkypeID" name="movie"/><param value="high" name="quality"/><param value="transparent" name="wmode"/><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="always" align="middle" type="application/x-shockwave-flash" height="96" src="http://overloadstudios.co.uk/ewa/skype_clock.swf?myID=yourSkypeID" width="96" wmode="transparent" name="skype_clock"/>
<
/embed></object>

As the previous Skype Status Flash Button, the only change you will need to do is to replace "yourSkypeID" for your skype user name or ID (allowing before your status to be shown)
Preview:




Enjoy!

Tuesday, November 21, 2006

Add to Bloglines Flash button


Even though I personally preffer netvibes as RSS agregator, Bloglines is one of the most popular ones out there and to give the option to the readers to add RSS content from your website to their bloglines account, I've done this "add to Bloglines Flash button"

Feel free to use it. As usual just copy and paste the following code on your HTML page:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="bloglines" width="100" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" height="30" align="middle">

<
param value="always" name="allowScriptAccess"/>
<
param value="http://overloadstudios.co.uk/ewa/bloglines.swf" name="movie"/><param value="high" name="quality"/><param value="transparent" name="wmode"/><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="always" align="middle" type="application/x-shockwave-flash" height="30" src="http://overloadstudios.co.uk/ewa/bloglines.swf" width="100" wmode="transparent" name="bloglines"/>
<
/embed></object>

This is the first one with a different look and feel, and as soon as I have some spare time, I will change the design of the other ones.

Salut!

Wednesday, November 15, 2006

Free Skype Status Flash button

Celebrating the recent release of Skype 3.0 beta and following my "flash skype status part 1, part 2 and part 3" previous posts, there it is my latest widget: a free Skype Status flash button.
The flash movie has two functionalities:
- shows your skype status
- it opens skype to start a conversation with you
If you want to use it, just copy and paste the following code onto your html page:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="skype_me" width="130" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" height="40" align="middle">

<
param value="always" name="allowScriptAccess"/>
<
param value="http://overloadstudios.co.uk/ewa/skype_me.swf?myID=yourSkypeID" name="movie"/><param value="high" name="quality"/><param value="transparent" name="wmode"/><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="always" align="middle" type="application/x-shockwave-flash" height="40" src="http://overloadstudios.co.uk/ewa/skype_me.swf?myID=yourSkypeID" width="130" wmode="transparent" name="skype_me"/>
<
/embed></object>

The only change you will need to do is to replace "yourSkypeID" for your skype user name or ID (and of course, allow your status to be shown)



Any feedback is very welcomed.

-- IMPORTANT UPDATE --

I've changed the dimensions of the skype flash button.
If you are using it, please edit your page acordingly.
New dimensions: width="130" height="40".

I've uploaded two widgets to Widgetbox:
- Flash Skype Status
- Skype Analogue Clock (with Skype status)

Please use the ones at Widgetbox instead.
-------------------------------

Salut!

Monday, November 13, 2006

Photoshop: badge buttons tutorial

Some time ago I did a tutorial in Spanish on how to create a "badge like" button using photoshop.
As my friend Atash asked me to translate it for him into English and as I guess more people can find it useful, here it is:
- The final button will look similar to

so, let's start!
- open a new photoshop document of 100 by 100 pixels.
- you can put your logo or anything you want to have the "effect"; in this case, I put Neoflashers logo on an orange background

- right click on the layer where our image is and select blending options
- on the blending options window, select drop shadow and change the settings as in the image below



- without closing the blending options window, select inner shadow and change the settings as shown in the image below



- click ok to close the blending options window and from the tools, select the "eliptical marquee tool" (if you have the "rectangular marquee tool" selected by default, click on it to select the needed one)
- create a new layer on top of the one that contains our logo or image and on this new layer, create an eliptical shape as shown in the image below



- select the "Gradient Tool", if you have the "Paint bucket tool" selected, click on it to be able to select the "gradient tool", and create a gradation from the top of the elipse to its bottom by pressing the mouse left key and dragging the mouse where the elipse finishes. You will have something similar to:



- deselect and change the layers opacity to 70% and that's it!

you should have a button similar to:


salut!