Create a 3D Flipping Youtube Player

In this new AS3 tutorial, learn how to create a 3D flipping Youtube Player consisting of a youtube player that you can flip 180 degrees to show a description of the video.

View DemoDownload Source

1. Create a new flash file (Actionscript 3.0) and save it as youtube.fla.

2. First we are going to create the back side that contains the video’s description.
To do so draw a rectangle 560×340 (dimensions of your youtube player) with the color of your choice. With the Text tool write your description on it. Select both text and rectangle and convert it to a movie clip with an instance name of back.
Once this movie clip is created, reselect it and convert it to a movie clip, set its registration point to the center and give it an instance name of container.
At this point you shoud have on the stage the “container” movie clip that contains the “back” movie clip.

3. Now create the button that will use to flip the container, convert it to a movie clip and give it an instance name of “flipBtn”.

4. All is set on the stage, now let’s add some actionscript code. Open the actions panel.
We’ll use the Tweenlite Engine and the Youtube AS3 API. If you are new to this, please visit our previous tutorial on the Youtube API.
First write the following statements in order to use the Tweenlite engine and communicate with www.youtube.com.

import flash.system.Security;
import com.greensock.*;

Security.allowInsecureDomain("*");
Security.allowDomain("*");

5. Then declare the following variables. Set the videoUrl variable to the id of your youtube video.

var videoUrl:String = "owGykVbfgUE";
var player:Object;
var loader:Loader = new Loader();
var flipped:Boolean = false;

6. Also set the back side’s rotationY property to -180 degrees and its visibility to false.

container.back.rotationY = -180;
container.back.visible = false;

flipBtn.buttonMode = true;

7. Next load the youtube video. Once the player is ready to play, we set the visibility of the back side to true and add a click event listener to the button.

loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/v/"+videoUrl+"?version=3"));

function onLoaderInit(event:Event):void {
	container.addChild(loader);
	loader.x = -container.width /2;
	loader.y = -container.height /2;
	loader.content.addEventListener("onReady", onPlayerReady);	
}

function onPlayerReady(event:Event):void {
  	player = loader.content;
   	player.loadVideoById(videoUrl);
   	player.setSize(560,340);
   	container.back.visible =true;
   	flipBtn.addEventListener(MouseEvent.CLICK,turn);
}

8. Inside the turn() function we checked the value of the flipped boolean variable. If it’s false, we use Tweenlite to rotate the container 180° vertically so that we can see the back side with the description and pause the video.
If it’s true, we use Tweenlite to rotate the container back to 0° so that we can see the youtube video and play it.
We also add to the Tweenlite.to method an onUpdate event listener that calls the setVisibility() function in which we set which side of the container is on top.

function turn(e:MouseEvent):void{
	if(!flipped){		
		TweenLite.to(container,1,{rotationY:180,onUpdate:setVisibility});
		flipped =  true;
		player.pauseVideo();		
	}
	else {
		TweenLite.to(container,1,{rotationY:0,onUpdate:setVisibility});
		flipped =  false;
		player.playVideo();
	}
}

function setVisibility():void{
	if(container.rotationY >= 90){
		container.addChild(container.back);
	}else if(container.rotationY < 90){
		container.addChild(loader);
	}
}

9. Here’s the final code :

import flash.system.Security;
import com.greensock.*;

Security.allowInsecureDomain("*");
Security.allowDomain("*");

var videoUrl:String = "owGykVbfgUE";
var player:Object;
var loader:Loader = new Loader();
var flipped:Boolean = false;

container.back.rotationY = -180;
container.back.visible = false;
flipBtn.buttonMode = true;

loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/v/"+videoUrl+"?version=3"));

function onLoaderInit(event:Event):void {
	container.addChild(loader);
	loader.x = -container.width /2;
	loader.y = -container.height /2;
	loader.content.addEventListener("onReady", onPlayerReady);	
}

function onPlayerReady(event:Event):void {
  	player = loader.content;
   	player.loadVideoById(videoUrl);
   	player.setSize(560,340);
   	container.back.visible =true;
   	flipBtn.addEventListener(MouseEvent.CLICK,turn);
}

function turn(e:MouseEvent):void{
	if(!flipped){		
		TweenLite.to(container,1,{rotationY:180,onUpdate:setVisibility});
		flipped =  true;
		player.pauseVideo();		
	}
	else {
		TweenLite.to(container,1,{rotationY:0,onUpdate:setVisibility});
		flipped =  false;
		player.playVideo();
	}
}

function setVisibility():void{
	if(container.rotationY >= 90){
		container.addChild(container.back);
	}else if(container.rotationY < 90){
		container.addChild(loader);
	}
}

4 thoughts on “Create a 3D Flipping Youtube Player

  1. Pingback: Create a 3D Flipping Youtube Player | Web design studio

  2. 4TheShow

    hmm u think its plausible to make its a rotate on mouseclick, if mouseY =+ 5 {rotate player Y + *
    so u can make the player turn by moving your mouse, more interactive 🙂

  3. MetadeZign

    Great, really great.
    Is it possible to avoid the “up Next” and Just wtached from the player at the end of the movie? ( or we must use chromeless player). Because I prefer this player wich contain sound control ect;
    Thanks;

Leave a Reply

Your email address will not be published. Required fields are marked *