Friday, September 15, 2006

Flash Skype Status - Part III


My friend Sebastian Recabarren pointed me out a little problem about my Skype Status flash widget. He asked me who was lying or his Skype or my blog.
Browser's cache memory!
I though this problem was only when the user goes online through a proxy server, which keeps everything in its cache, but seems like flash always takes the image from the browsers cache even if there is no proxy server in between.
To avoid this problem, we can use an XML provided by SkypeWeb instead of loading the image.
The XML is available from:
http://mystatus.skype.com/userID.xml

That data is easy to pull from flash and then show the right status attaching the right movieclip.
What I did is, instead of

image01.loadMovie("http://mystatus.skype.com/smallclassic/yourID");

I'm loading the XML as follows:

function loadXML(loaded:Boolean):Void {
if (loaded) {
xmlNode =
this.firstChild;
my_status = xmlNode.childNodes[0].childNodes[2].childNodes;
attachStatus();
}
else {
trace("XML not loaded!");
}
}
xmlData =
new XML();
xmlData.ignoreWhite =
true;
xmlData.onLoad = loadXML;
xmlData.load("http://mystatus.skype.com/myID.xml");
function attachStatus():Void {
image01.loader_mc.attachMovie(my_status,"status",1)
}

I have added 6 movieclips showing the different possible status, each of them have a linkage identifier name depending on the status. To add an identifier to a movieclip just right click on it (in the library) and select "linkage properties", tick the "Export for actionscript" option and change the identifier to its equivalent skype status, ie: Not Available
Voila!
Testing locally everything works fine.
But, as usual when debugging, there is a new problem: cross domain policies.
Due to security reasons, any online flash application cannot load data from a different server and my experiment doesn't work online.
My mate Stephen Downs (Tink) pointed me out the solution:

It is possible to get round the sandbox by loading the XML into some PHP or something on your server and then loading it into Flash from there. Tricks the player into thinking your serving it


and my colleague Thomas Van Steenwinckel gave me a hand with the php and together we put the following script on my server:

<?
header("Content-type: text/xml; charset=utf-8");
$filename = "http://mystatus.skype.com/myID.xml" ;
$dataFile = fopen($filename, "r" );
if ( $dataFile )
{
while (!feof($dataFile))
{
$buffer = fgets($dataFile, 4096);
echo $buffer;
}
fclose($dataFile);
}
else
{
die( "fopen failed for $filename" ) ;
}
?>

Now on flash I'm loading the XML created by this php instead of the one provided by skypeWeb and my blog shows the right status of my Skype account.
Nice way to get rid of the cross domain issues.

PD: Just in case, remember to update to the latest Skype.

Salut!

-- IMPORTANT UPDATE --
Part I
Part II
Free Skype Status Flash Button

and the latest one of this series:
Easy Skype status in Flash
---------

13 comments:

Anonymous said...

Hey there, awesome research you've all done here!
I've gone through and added it all to my site too!
One question though - now in stage 3 using the XML code it is surely possible to load your own images too right? In the last part of the code:

image01.loader_mc.attachMovie(my_status,"status",1)

Could you name some images according to the value returned by
"my_status" and link to them to display the related image/movieclip?

Just an idea - I'm not too familiar with xml.

Thanks and great work!

Ernesto said...

hi!
to be honest I'm a bit confused with your question.
In fact, the idea is that you have your own images, each of them in a movieclip.
The XML is just telling flash what your status is, for instance, if you are Away, flash loads only one thing, the text "Away".
So with the code written in this post, you can get a movieclip from the library with an identifier name "Away" to be attached to the movie.
In this very movieclip you can have any image you want to.
If you just want to have plain text with the word AWAY, is ok; if you want to have some image showing that you are AWAY, is ok.
So, there is one movieclip per status, I think are 6 in total, and inside those movieclips there are images showing their respective status.

If is not clear, please let me know ;)

Anonymous said...

Aha! I didn't realise! Like I said I'm not too familiar with XML thus I didn't implement step 3.
I'm going to give it a try now though!
By the way - the cache issue:
I have run across this before. I programmed my own webcam refresh in flash. It works by loading the cam image every second and comparing its size to the last image loaded and if different displays the new image.
This works fine in internet explorer but only if your cache settings are set to "check for newer version of stored pages every visit to the page". In Firefox I can't even find that setting.
It's a real bummer really that flash doesn't have some built in "Empty Cache" actionscript.
Anyway, I wonder if I can apply the same method you are using with this xml?
Thanks again!

Anonymous said...

Wow amazing! Super cool, thanks for this!

Anonymous said...

Dear Ernesto,

As I'm not familiar that much with flash and xml, could you please explain me where I've made a mistake:

1. I created new flash document
2. Loaded the XML in the 1st frame (of course changed my nickname in this code)
3. Created a MC called "skype_status", put it on the scene and gave it an instance name "image01"
4. Created 8 MCs with status names in "identifier" field according to Status Text listed in this document.

Still does not work :[
What is wrong with it?

Ernesto said...

Actually, on this example there are two movieclips nested.
The first one is called loader_mc (instance name) and is inside a second movieclip called image01.
It's not necessary to do it this way, but I did it like that for testing purposes...
Second thing, the identifier names are a bit tricky, they must be exactly the same as what your status is, ie Offline, please note the use of capital letter only for the first character and not all of them as stated on the skype documentation.
Please let me know how it goes ;)

Anonymous said...

Hi Ernesto, well I'm trying but does not work, I already upload the PHP code to my server, but I don´t understand how and when to call it

in flash I create a empty MC "loader_mc " (instance name) inside it another MC "image01" (instance name), in the very firt frame the code to load de XML

I thing something is missing, but i can not figure what

Ernesto said...

hey anonymous,
I have a most recent article about it at:
http://overloadstudios.blogspot.com/2007/03/easy-skype-status-in-flash.html

salut!

Natacha said...

Hi Ernesto!
I followed your tutorials and added a Skype button to my flash site. It works like a charm! The only thing I noticed is that when you click on the Skype button to start the chat/call it opens a "blank" browser page along with the application in the local computer. If the user is connected to Skype already it opens the "blank" browser window too. I would love to eliminate that window! Any ideas?
Awesome job!
Natacha.

Ernesto said...

hi Natacha,
I just tested the one I've got at the top left of this blog and I didn't get any blank page...

question:
which browser do you use?

I'm on Firefox and no problems here, I haven't tested it on IE, might be that so SPREAD FIREFOX :D

well, just in case, follow the latest tutorial on this:
http://tiny.pl/5qwm

if anything, please let me know

salut

Admin said...

hello dear,
this question not suitable with your topic but I'm really want to know how to make flash navigation button in blog. thanks

Lubi said...

Hello there,

I went through your tutorial, however, I didn't get the PHP bit, the last one adjusted to bypass the crossed domains.

When I test the file locally, works fine. However, it does nothing on a server.

How did you name the PHP file which is being uploaded to your server, proxy.php again?

Thanks for your help
L.

Ernesto said...

Hi Lubi,
to be honest I don't remember if the php file was called proxy.php as I wrote this tutorial more than a year ago... I guess that was its name as what I can see in my server is another script called proxy.php but is a better and more simple script explained a bit on the following link:
http://tiny.pl/5qwm
Check that link out as its the latest post I wrote related to Skype and flash.
Hope it helps :)