If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

XML Flash. How to embed YouTube video into the template

In this tutorial you will learn how to embed YouTube video into the Flash and/or XML Flash templates using AS3 Action Script

Open ‘main_cs5.fla’ file from /sources/flash folder in Adobe Flash program

Using the library, locate pages movie clip.

Find the page, on which you wish to add YouTube video.

Go to File->Insert in order to add new Symbol.

Make sure to use ‘Movie Clip’ type.

Click on the layer1 to select and press F9 key to open the Action Script panel.


// This will hold the API player instance once it is initialized.
var player:Object;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
// loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
// HK1EoALZKXQ
loader.load(new URLRequest("http://www.youtube.com/v/YOUR_CODE_HERE?version=3"));

function onLoaderInit(event:Event):void {
    addChild(loader);
    loader.content.addEventListener("onReady", onPlayerReady);
    loader.content.addEventListener("onError", onPlayerError);
    loader.content.addEventListener("onStateChange", onPlayerStateChange);
    loader.content.addEventListener("onPlaybackQualityChange", 
        onVideoPlaybackQualityChange);
}

function onPlayerReady(event:Event):void {
    // Event.data contains the event parameter, which is the Player API ID 
    trace("player ready:", Object(event).data);

    // Once this event has been dispatched by the player, we can use
    // cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
    // to load a particular YouTube video.
    player = loader.content;
    // Set appropriate player dimensions for your application
    player.setSize(480, 360);
}

function onPlayerError(event:Event):void {
    // Event.data contains the event parameter, which is the error code
    trace("player error:", Object(event).data);
}

function onPlayerStateChange(event:Event):void {
    // Event.data contains the event parameter, which is the new player state
    trace("player state:", Object(event).data);
}

function onVideoPlaybackQualityChange(event:Event):void {
    // Event.data contains the event parameter, which is the new video quality
    trace("video quality:", Object(event).data);
}

Now, we can search for video on youtube.com and copy the video code

Once that is done, go back to the Pages movie clip. Find our newly added symbol in the Library and drag it into the Scene.

Publish your .FLA file when you are done.

Note: you may not see the video while publishing the .FLA file. We should upload the template to the live server. (upload the content of ‘site_flash’ folder).

Once we have uploaded the template to the server, we can preview our YouTube video.

This is it. You know how to embed YouTube Video into the Flash and XML Flash templates, using AS3 action script.

XML Flash. How to embed YouTube video into the template