Monday, May 25, 2009

JSON to Flash: YouTube Case Study

I had to implement a custom YouTube gadget in Flash. The term gadget does not refer to a specific gadget technology, such as Google Gadgets. YouTube Gadget refers only to small web applications, implemented in HTML or Flash, that are displayed within an iFrame on a YouTube brand channel.

And for that purpose I had to fetch the list of videos published by a particular YouTube user which can only be fetched in the form of JSON, RSS or Atom Feed. I decided to go with JSON, initially it was difficult for me to fetch the appropriate values I needed because the JSON returned by YouTube is quite complex in structured but finally I was able to sort it out.

JSON stands for JavaScript Object Notation and is mainly used to transmit such structured data over a network connection.

Example:
{
"firstName": "Atul",
"lastName": "Narang"
}

In my case the JSON has to be parsed from the following URL -
http://gdata.youtube.com/feeds/api/videos?max-results=5&alt=json&orderby=published&author=designworxz

If you change the last parameter in the URL which is "author=designworxz" to "author=your youtube username" it will fetch list of videos published by you in the form of JSON.

The great community over at http://json.org have created a JSON parsing library for AS1, AS2 & AS3. But we will focus on Flash CS3 & AS2.0. You can find that parse class here: http://json.org/JSON.as

Below is the code to parse the JSON returned by YouTube -


import JSON;

var jsondata:LoadVars = new LoadVars();

jsondata.onLoad = function(success) {

if (success) {
trace("load successful");
var o:Object = json.parse(
unescape(this.toString()));
var s:String = json.stringify(o);
trace(s);
} else {
trace("unable to load JSON data");
}
};

jsondata.load("http://gdata.youtube.com/feeds/api/videos?max-results=5&alt=json&orderby=published&author=designworxz");

The variable "s" will display the complete JSON returned by YouTube in the Output window & then the only thing you have to do is to fetch the required String, Variables & Values from the returned JSON.

Good Luck!!

7 comments:

ctrlaltdel said...

Nice post! Gadgets lack of documentation, and the JSON class is quite cool. Thanks mate!

Mark Hughes said...

I seem to be having difficulty with this. Is it ActionScript 3.0 or something?

I am trying to use the jSON class with ActionScript 2.0 and I keep getting the following error: "The class 'JSON' needs to be defined in a file whose relative path is 'JSON.as'."

JUJI said...

@Mark Hughes
u should put the 'JSON.as' in the same folder as your flash file.

or

define a new classpath
edit>preferences>actionscript>actionscript 2.0 settings

hope this help

Anonymous said...

Have you tried sending a JSON request using AS2? eg. {"name":"foo", "password":"fooPwd"}

I am unable to do this using LoadVars. Is there an alternate way to do it in AS 2.0?

Thanks

Atul Narang said...

Hi,

I think they have removed the parser built in AS2.

But you should be able to use the JSON connector which can be downloaded from here - http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=1078469

joe coolman said...

I've read your Case Study and helped me a lot. Then I tested my swf in mi computer and run ok. But, when I upload the swf and json files to a (free) server, the swf can't communicate with json file despite the permission is 666.
What am I doing wrong ?

Atul Narang said...

Hey Joe, can you see your json being loaded into the flash? Also check if the location of the json file being loaded is correct.