Saturday, March 10, 2007

Easy Skype Status in Flash

After my post Flash Skype Status Part III I've received emails from some of my readers asking me for help as they couldn't understand 100% the whole process.
When I did the experiment in September last year, I didn't take into account many things and just continued playing with Flash, php and the XML from SkypeWeb.
To avoid confusion, let's see how to show in Flash my Skype Status in a simple way:

First of all, be sure you have the the latest SKYPE installed

Then follow one of the two options below:

TEXT ONLY
- Open a new Flash document
- Select the Text tool and put a dynamic text field on the stage with instance name "myStatus" as shown in the picture



- on a new layer, write the following actionscript:

function loadXML(loaded:Boolean):Void {
if (loaded) {
my_status = this.firstChild.firstChild.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 {
myStatus.text = my_status
}


You would need to change myID for your actual Skype ID, ie echo123
- Test your movie pressing ctrl+enter, your Skype status should be shown in the text field.
*There is still a problem: "cross-domain" policy. I will explain how to avoid it later on.

If you want to know more about XML and Flash, please follow this link.

ADDING INTERACTIVITY
If you want to show different images depending on your status and let users interact with you, then follow this steps:
- Open a new Flash document
- As there are 6 different status, you should have already 6 different images. Import them all into your document and create a movieclip for each of them



- The most important thing here is to put an identifier name to each of them; to do that, right click on the MovieClips in the Library and select "linkage" and write as Identifier the exact name of each status, for instance "Do Not Disturb"



- You might have noticed already that in the library there is a seventh movieclip called "loader_mc". So we need to put an instance of this empty movieclip on the stage and the stage will have nothing else but our "loader_mc" that in fact is empty!



- on a new Layer write the following code:
function loadXML(loaded:Boolean):Void {
if (loaded) {
my_status = this.firstChild.firstChild.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 {
loader_mc.attachMovie(my_status, "status", 1);
}

You would need to change myID for your actual Skype ID, ie echo123
- Test your movie pressing ctrl+enter, your Skype status should be shown on your movie.
- We can as well add a script to allow any visitor to contact us when pressing the movieclip. To do that just add the following actionscript:

loader_mc.onPress = function() {
getURL("skype:myID?chat");
};


People can have a chat with you through Skype if you're online or leave a message if you're not.
There are more options and all of them are explained on the Advanced Skype Links.

CROSS-DOMAIN POLICY
Cross domain in flash is when data from X website is loaded into a movie on another website with different domains; for security reasons, Flash Player is only allowed to do that under certain circumstances. To read more about Flash Player Security Sandbox, click here.
As the data we are trying to load is served by skype.com, we would need to by-pass the cross-domain policy; we can do that using a php script:


<?php
header("Content-type: text/xml; charset=utf-8");
echo file_get_contents($_GET["proxy_url"]);
?>
Save this script as proxy.php and upload it to your server.

- Now we need to change one line on our actionscript, so instead of

xmlData.load("http://mystatus.skype.com/myID.xml");


we will write
xmlData.load("http://domain.com/proxy.php?proxy_url=http://mystatus.skype.com/myID.xml");

- Remember to change myID for your actual Skype ID and domain.com for your own domain address.

The good thing about this php file is that we can use it on different projects, for example you can load the RSS feed from my blog just writing:
http://domain.com/proxy.php?proxy_url=http://overloadstudios.blogspot.com/feeds/posts/default

and it will appear as if the data is served from a different domain.

That's it!
This post is similar to Flash Skype Status Part III, however is more detailed and both the actionscript and php files are optimized.

salut!

12 comments:

Anonymous said...

it still doesn't allow for the flash document to display my skype status :(

Norman said...

You've mentioned "on a new layer..." twice in your article followed by "write the following actionscript" in the first instance, and "write the following code" in the second. I wonder if they are two different layers. Also, how could I put multiple actionable Skype buttons each addressed to different SkypeID on the same stage?

Ernesto said...

Hi Norman, I mentioned it twice because there are two different options to do it. The first option is just to show your status. The other option is a different movie in which your button doesn't only show your status but allows you to interaction.
You can add more buttons on the same stage and add more options as well...

salut!

sokratas said...

loader_mc.createEmptyMovieClip("image_mc",0);
var image_mcl = new MovieClipLoader();
image_mcl.loadClip("http://mystatus.skype.com/balloon/myID.png",loader_mc.image_mc);

loader_mc.onPress = function() {
getURL("skype:myID?chat");
};

sokratas said...

just a simpler approach ;)

Anonymous said...

Can you do this for AIM, too?

Ernesto said...

I'm afraid I don't use AIM therefore I have no idea if it's possible.
However is just a matter of "investigating" a bit, I guess is possible due to the competition in between different instant messengers they need to catch up with features offered by the rest.

Salut

Anonymous said...

great work Ernesto, can say the only tutorial about the thema.
But it didn't work by me.
When i test the fla file using xmlData.load(http://http://mystatus.skype.com/balloon/myID.xml) evrything is ok.but once integrated in a html file, nothing is showed.
And when i try to load it from the proxy.php file , it didn't work neither local nor on server.
need ur help ernesto.

Ernesto said...

if you managed to make it work locally that means there's something wrong with the php file. Have you tried pointing at proxy.php? what does it show?
you can email me if you want so I can give you a better advice. ernesto.quezada [@] gmail.com

davit said...

i use proxy.php and done everything by these instructions, but on site is "offline" status only and it's wrong. can u help me?

Ernesto said...

Do you have any link where I can test?
You're not telling us much therefore there's no much we can do to help...

Anonymous said...

Hi Ernesto, I've done everything like you explained. Swf and html works grate... from local.
But as I try to watch it from server, it doesn't work. =/
The swf is loading in html, but status movie clip or a or a loader_mc doesn't appear on the time line.
All movie clips are exported for AS and frame 1.

I hope you can help.
Thanks.

http://www.cmy.lt/skype/
try it