GreenJay Blog

package {
    //The usual imports
    import flash.display.*;
    import flash.net.URLRequest;
    import flash.events.*;
 
    //Security to allow communication with the YouTube swf
    import flash.system.Security; 
 
    //A great Tween package that I use all the time
    import com.greensock.TweenLite;
 
    public class YouTubeVideo extends flash.display.MovieClip
    {		
        private var _player:Object; //The player
        private var _loader:Loader; //The loader to get the player
 
        //Three buttons: Pause, Play and Fullscreen
        private var _fullButton:SimpleButton;
        private var _pauseButton:SimpleButton;
        private var _playButton:SimpleButton;
 
        private var _controls:Sprite; //A sprite to hold the controls
 
        private var _blank:Sprite; //A sprite to act as a detect area for the controls
 
        public function YouTubeVideo() 
        {
            //Allow coms between our swf and YouTube's
            Security.allowDomain("www.youtube.com");  
 
            //Load in the chromeless YouTube player swf 
            _loader = new Loader();
            _loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
            _loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3"));
        }
 
        private function onLoaderInit(event:Event):void 
        {
            addChild(_loader); //Add the loader to the display list
            _player = _loader.content; //Load the content of the loader into a player object
 
            //Set up a bunch of event listeners on the player to handle any changes
            _player.addEventListener("onReady", onPlayerReady);
            _player.addEventListener("onError", onPlayerError);
            _player.addEventListener("onStateChange", onPlayerStateChange);
            _player.addEventListener("onPlaybackQualityChange", onVideoPlaybackQualityChange);
        }
 
        private function onPlayerReady(event:Event):void 
        {
            // Once this event has been dispatched by the player, we can use
            // cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
            // to load a particular YouTube video.		     
            _player.loadVideoById("YOUTUBE_ID", 0, "default");
 
            // Set appropriate player dimensions for your application
            _player.setSize(533, 300);
 
            //Add controls to the display list
            _controls = new Sprite();
            addChild(_controls);
 
            //This invisible sprite gives us an area of interaction for the controls
            //which we can use to fade out the controls when the mouse leaves.
            _blank = new Blank();
            _blank.width = 485;
            _blank.height = 240;
            _blank.x = 30;
            _blank.y = 30;
            _controls.addChild(_blank);
 
            //Create the three buttons we want for the interface and add
            //mouse click event listeners to them
            _fullButton = new FullScreenButton();
            _fullButton.addEventListener(MouseEvent.CLICK, onFullScreenClick);
            _fullButton.x = 40;
            _fullButton.y = 240;
            _controls.addChild(_fullButton);
 
            _pauseButton = new PauseButton();
            _pauseButton.addEventListener(MouseEvent.CLICK, onPauseClick);
            _pauseButton.x = 240;
            _pauseButton.y = 120;
            _controls.addChild(_pauseButton);
 
            //Play button isn't added to the display list as the video is already playing
            //and so only the pause button can be seen
            _playButton = new PlayButton();
            _playButton.addEventListener(MouseEvent.CLICK, onPlayClick);
            _playButton.x = 240;
            _playButton.y = 120;
 
            //Events to detect if the mouse is hovering over the controls
            _controls.addEventListener(MouseEvent.ROLL_OUT, onMouseOut);
            _controls.addEventListener(MouseEvent.ROLL_OVER, onMouseOver);
 
        }
 
        private function onMouseOver(e:MouseEvent):void
        {
            //When the mouse is over the controls, fade them up using the
            //custom Tween class we already imported
            TweenLite.to(_playButton, .6, {alpha:1});
            TweenLite.to(_pauseButton, .6, {alpha:1});
            TweenLite.to(_fullButton, .6, {alpha:1});
        }
 
        private function onMouseOut(e:MouseEvent):void
        {
            //And fade them down when the mouse leaves
            TweenLite.to(_playButton, .6, {alpha:0});
            TweenLite.to(_pauseButton, .6, {alpha:0});
            TweenLite.to(_fullButton, .6, {alpha:0});
        }
 
        private function onFullScreenClick(e:MouseEvent):void
        {
            //This function toggles the fullscreen on and off
            if (this.stage.displayState == StageDisplayState.FULL_SCREEN)
            {
                this.stage.displayState=StageDisplayState.NORMAL;
                //Actions for going to normal mode from full screen
            }
            else
            {
                this.stage.displayState=StageDisplayState.FULL_SCREEN;	
                //Actions for going to full screen mode, for example,
                //masks will need to be turned off in full screen mode.
            }
        }
 
        private function onPauseClick(e:MouseEvent):void
        {
            //When pause is clicked, we pause the video and swap
            //the pause button for the play button.
            _player.pauseVideo();
            _controls.removeChild(_pauseButton);
            _controls.addChild(_playButton);
        }
 
        private function onPlayClick(e:MouseEvent):void
        {
            //When play is clicked, we play the video and swap
            //the play button for the pause button.
            _player.playVideo();
            _controls.addChild(_pauseButton);
            _controls.removeChild(_playButton);
        }
 
        private function onPlayerStateChange(event:Event):void 
        {
            //Test if the video is finished, and turn the play button on if true
            if(_player.getPlayerState() == 0)
            {
                _controls.removeChild(_pauseButton);
                _controls.addChild(_playButton);
            }
        }
    }
}