Jikkyo Generator 2010

Hi, my name is Yasuhiko Nishimura and I am an interactive designer at Business Architects.
The Jikkyo Generator 2010 website build by us went live in May.

The previous version Jikkyo Generator 2008 was integrated with eyeVio for the videos but to enable more users to enjoy the website the new release features integration with YouTube.

In this entry I will explain a bit more about the integration with the YouTube API.
(This entry will be about AS2)

0.Prepare to use the YouTube API.

YouTube allows the use of the Data API or the Player API, however for a full Flash based site like this one you need to use the chromeless player which allows you to create your own player. Also you need to have developer key to use the YouTube API.
To get your developer key register at the following url: http://code.google.com/apis/youtube/dashboard/

1.Classes to use

Source Code: download from here.
(The sources comments are written in Japanese language)

The following 3 classes are used.

com.b_architects.lab.youtube.YTPlayer
This class load the chromeless player.
com.b_architects.lab.youtube.YTData
This class receives and manages the information abou the video from the Data API
com.b_architects.lab.youtube.YTConstant
This contants class holds the developer key and other YouTube related parameters.

Inside the YTConstant.as the following need to be registered
PRODUCT_NAME,CLIENT_ID,DEVELOPER_KEY
(You can also initialize these at execution time without rewriting the sourcecode)

2.Create and initialize the player

To create a player execute the following command:

    YTPlayer.getPlayer(target:MovieClip);

target here is the MovieClip instance which creates the player. First create an empty MovieClip instance and the replace the __proto__ property with YTPlayer.prototype. By doing so, you create an instance of the YTPlayer from script without having to create linkage from the library. (You can also do this by setting up a linkage to the MovieClip symbol from the library)

The YTPlayer is embedding the chromeless player from the YouTube servers and might take some time to load.
Once the player is loaded and ready to be used the YTPlayer.EVENT_PLAYER_READY event is issued.

the actual code look like:

    import com.b_architects.lab.youtube.YTPlayer;
    var player:YTPlayer = YTPlayer.getPlayer(this);
    player.addEventListener(YTPlayer.EVENT_PLAYER_READY,onPlayerReady);
    function onPlayerReady(e:Object) {
        //The process for once the initialization is finished
    }

and the player is ready.

3. Control and playback the video

To playback the video execute the following code:

    player.loadVideoById("2L0nGWDPt6A");


this exectution load the video based on the ID passed on the the loadVideoById.

For other video controls reference the following url: http://code.google.com/intl/en/apis/youtube/flash_api_reference.html#Operations

The YTPlayer implements the chromeless player's methods under the same method name.

4. Load Youtube data

By using the YTData class you can check wether the video for that ID exists, if you can use the API or not, thumbnail path and other usefull information for creating the site. When passing the ID with the String to the constructor the data gets initialized. Once the initialization is done the YTData.VIDEO_CHECK event is issued.

The basic usage is:

    import com.b_architects.lab.youtube.YTData;
    var data:YTData = new YTData("http://www.youtube.com/watch?v=2L0nGWDPt6A");
    data.addEventListener(YTData.VIDEO_CHECK,onChecked);
    function onChecked(e:Object):Void {
        trace(e.target.id);
    }

5. Conclusion

As stated above this is a general overview on how to use the YouTube API.
The Jikkyo Generator website uses the concepts stated above as its core and has additional features such as playback control, adding narations and other playback functions. The YouTube API has been altered over the years and it can easily change again soon.
When that change occures hopefully changes required on the website will be minimal because the API part stands alone from the website.

Although creating what we have created is not difficult it can be cumbersome and I hope by sharing this information it might benefit others.
If you have a chance, try this out.