Ahmed Nuaman

builder of internets ~ developer of dreams ~ tamer of Dachshunds

Posts Tagged “tube”

• Did Someone Order Multiple YouTube Players?

  Thursday, September 17th, 2009

  So, here I am, playing with YouTube players, trying to get more than one to load in Actionscript 3. But it’s a pain, so I did a few tests and got it running fine in Actionscript 2.

  My aim is to port this to Actionscript 3, but the biggest problem is the handling of the AVMs. I’ve got some tests to do to figure out the best way to separate the content, but hopefully I should have it done soon, so do watch this space. But, for all you lot out there, here’s some old school Actionscript 2 code:

  import com.tangozebra.youtube.TZYouTubePlayer;
  
  class MultipleYouTubePlayers
  {
      private var parent:MovieClip;
     
      public function MultipleYouTubePlayers(parent:MovieClip)
      {
          System.security.allowDomain( '*' );
          System.security.allowDomain( 'www.youtube.com' );
          System.security.allowDomain( 'youtube.com' );
          System.security.allowDomain( 's.ytimg.com' );
          System.security.allowDomain( 'i.ytimg.com' );
         
          Stage.align         = 'tl';
          Stage.scaleMode     = 'noScale';
         
          this.parent         = parent;
         
          init();
      }
     
      private function init():Void
      {
          var mc1:MovieClip = parent.createEmptyMovieClip( 'mc1', parent.getNextHighestDepth() );
          var mc2:MovieClip = parent.createEmptyMovieClip( 'mc2', parent.getNextHighestDepth() );
          var mc3:MovieClip = parent.createEmptyMovieClip( 'mc3', parent.getNextHighestDepth() );
         
          var player1:TZYouTubePlayer = new TZYouTubePlayer( mc1 );
          var player2:TZYouTubePlayer = new TZYouTubePlayer( mc2 );
          var player3:TZYouTubePlayer = new TZYouTubePlayer( mc3 );
         
          player1.init( 'ghqjailPGOQ' );
          player2.init( 'C54wqJBxrWg' );
          player3.init( 'yU5W4CkZHHQ' );
         
          mc1._y  = 0;
          mc2._y  = player1.playerHeight + 10;
          mc3._y  = ( player1.playerHeight + 10 ) * 2;
      }
  }

  And this is what it gives you:

  But I need to port it to Actionscript 3, so not quite done there!!

  Tags: actionscript ~ Actionscript 2 ~ Actionscript 3 ~ as2 ~ as3 ~ multiple ~ player ~ players ~ tube ~ you ~ youtube
  Posted in Actionscript 2 ~ Actionscript 3 ~ APIs ~ Development

  ---

• Using The YouTube Player In 3D

  Tuesday, September 8th, 2009

  Yep, I’ve cracked it. Well, sort of.

  You see, I’ve written a few posts about trying to get the YouTube player and interactivity to behave with Papervision3D. The issue was that Papervision3D (and other 3D engines) render the planes/materials/objects as bitmaps and you can’t render the YouTube player as a bitmap.

  So, after a bit of playing, I’ve added the player into a “3D” native environment using the Flash Player 10 API.

  Here’s the code:

  package {
      import com.firestartermedia.lib.as3.display.component.video.YouTubePlayer;
     
      import flash.display.LoaderInfo;
      import flash.display.Sprite;
      import flash.display.StageAlign;
      import flash.display.StageScaleMode;
      import flash.events.Event;
      import flash.geom.Point;
      import flash.system.Security;
     
      [SWF( width='580', height='500', frameRate='30', backgroundColor='#FFFFFF' )]
  
      public class App extends Sprite
      {
          private var player:YouTubePlayer;
         
          public function App()
          {
              stage.align         = StageAlign.TOP_LEFT;
              stage.scaleMode     = StageScaleMode.NO_SCALE;
             
              Security.allowDomain( '*' );
              Security.allowDomain( 'www.youtube.com' );  
              Security.allowDomain( 'youtube.com' );  
              Security.allowDomain( 's.ytimg.com' );  
              Security.allowDomain( 'i.ytimg.com' );
             
              init();
          }
         
          private function init():void
          {
              transform.perspectiveProjection.projectionCenter    = new Point( 290, 250 );
              transform.perspectiveProjection.fieldOfView         = 45;
             
              player = new YouTubePlayer();
             
              player.autoPlay     = true;
              player.wrapperURL   = ( LoaderInfo( loaderInfo ).parameters.url ||= 'assets/swf/YouTubePlayerWrapper.swf' );
             
              player.play( 'AF4a-N4fAuI' );
             
              addChild( player );
             
              stage.addEventListener( Event.ENTER_FRAME, handleEnterFrame );
          }
         
          private function handleEnterFrame(e:Event):void
          {
              player.rotationX    = stage.mouseX;
              player.rotationY    = stage.mouseX;
              player.rotationZ    = stage.mouseX;
             
              player.x            = ( stage.stageWidth / 2 ) - ( player.playerWidth / 2 );
              player.y            = ( stage.stageHeight / 2 ) - ( player.playerHeight / 2 );
          }
      }
  }

  And here’s the result:

  You need to remember to target Flash Player 10 or it won’t work! And you can see that it’s a pretty (dirty) implementation of Flash Player 10′s native 3D. Now to create a native cube class…

  Tags: 3d ~ Flash ~ flashplayer10 ~ fp10 ~ papervision ~ papervision3d ~ player ~ pv3d ~ tube ~ you ~ youtube
  Posted in Actionscript 3 ~ APIs ~ Development

  ---

• My Latest Tutorial: Creating a YouTube Search and Play Gadget with PureMVC

  Friday, August 7th, 2009

  I’ve had another of my tutorials published on the Flashtuts+ network: Creating a YouTube Search and Play Gadget with PureMVC. It’s a simple step by step guide on how to build a little gadget and teaches you three main things:

  1. Using PureMVC
  2. Using the YouTube Player API in AS3
  3. Working with GData

  Check it out and tell me what you think!

  Tags: Actionscript 3 ~ as3 ~ gadget ~ mvc ~ puremvc ~ tube ~ tut ~ tutorial ~ widget ~ you ~ youtube
  Posted in Actionscript 3 ~ APIs ~ Design ~ Development ~ Flash ~ XML

  ---

• The YouTube Player API

  Monday, June 29th, 2009

  Update: keep up to date with my latest code on my Github.

  I’ve recently had an article on the YouTube Player API for Actionscript 3 published on the Flashtuts+ network. However, some people are having issues getting to grips with loading another video in-situ, so here’s a slight change to the code:

  Once you read the tutorial, you will finish with two important files:

  • YouTubePlayerWrapper.swf – The AS2 wrapper
  • App.as – The AS3 class files

  Now the first thing to do in this customisation is to change the name of “App.as” to “YouTubePlayer.as”, therefore our class is now called “YouTubePlayer”. I’ve also added two new public variables called “playerWidth” and “playerHeight”, so the class’s code is now like this:

  package
  {
      import com.gskinner.utils.SWFBridgeAS3;
     
      import flash.display.Loader;
      import flash.display.Sprite;
      import flash.events.Event;
      import flash.net.URLRequest;
  
      public class YouTubePlayer extends Sprite
      {
          public static const BRIDGE_NAME:String          = 'YouTubePlayerWrapperBridge';
         
          public var playerWidth:Number                   = 600;
          public var playerHeight:Number                  = 400;
         
          private var player:Loader;
          private var bridge:SWFBridgeAS3;
          private var videoId:String;
          private var loaded:Boolean;
                 
          public function init(videoId:String):void
          {
              this.videoId = videoId;
             
              if ( !loaded )
              {
                  var request:URLRequest = new URLRequest( 'assets/swf/YouTubePlayerWrapper.swf' );
                 
                  player = new Loader();
                 
                  addChild( player );
                 
                  player.contentLoaderInfo.addEventListener( Event.INIT, handlePlayerLoadedComplete );
                 
                  player.load( request );
              }
              else
              {
                  handlePlayerLoadedComplete();
              }
          }  
         
          public function play(videoId:String):void
          {
              bridge.send( 'playVideo', videoId, playerWidth, playerHeight, false, null, false );
          }
         
          public function stop():void
          {
              bridge.send( 'stopVideo' );
          }
         
          public function handlePlayerLoadedComplete(e:Event=null):void
          {                      
              if ( bridge )
              {
                  handleBridgeConnect();
              }
              else
              {
                  bridge = new SWFBridgeAS3( BRIDGE_NAME, this );
             
                  bridge.addEventListener( Event.CONNECT, handleBridgeConnect );             
              }
          }
         
          public function sendEvent(e:String):void
          {
              trace( e );
          }
         
          private function handleBridgeConnect(e:Event=null):void
          {
              loaded = true;
             
              play( videoId );
          }  
      }
  }

  Now we can control this class through another base class, so create a file called “App.as” and put this code in there:

  package
  {
      import flash.display.Sprite;
      import flash.events.Event;
      import flash.events.MouseEvent;
  
      public class App extends Sprite
      {
          private var player:YouTubePlayer                        = new YouTubePlayer();
         
          public function App()
          {
              var button:Sprite = new Sprite();
             
              addChild( player );
             
              button.graphics.beginFill( 0xFF0000 );
              button.graphics.drawCircle( 0, 0, 20 );
              button.graphics.endFill();
             
              button.addEventListener( MouseEvent.CLICK, handleClick );
             
              addChild( button );
             
              player.init( '76aG8wcb8V8' );
          }
         
          private function handleClick(e:MouseEvent):void
          {
              player.init( 'U5A7AjsZHmQ' );
          }
      }
  }

  All this class does is create a new “YouTubePlayer()”, it the draws a button, adds a listener that loads another video, thus allowing you to see how you can easily and simply load in a simple YouTube Player, like so:

  PS: I am going to publish my full YouTube Player API Library for AS3 on github very soon!

  Tags: Actionscript 2 ~ Actionscript 3 ~ api ~ APIs ~ as2 ~ as3 ~ code ~ flashtuts ~ player ~ tube ~ you ~ youtube
  Posted in Actionscript 2 ~ Actionscript 3 ~ APIs ~ Development

  ---

• More tutorials

  Tuesday, June 16th, 2009

  I’ve been meaning to write a quick tutorial on how to create a simple carousel style gadget. I’ve been putting this off for a while as I haven’t had time, but I thought that I may as well just get on with it and knock one out! Also, lots of people have been searching for code on my site regarding the creation of YouTube gadgets, especially the ‘coverflow’ style one.

  At the moment, I’ve got a deal going with the authors of Flashtuts+ whereby I write articles and tutorials for them. It’s good as it gets more coverage than just putting them here and it means that I get lots of exposure too.

  I’ve currently had two published, Understanding the PureMVC Open Source Framework and Using the YouTube Player API with ActionScript 3.0 and a third one should be published soon on creating a simple YouTube Search and Play gadget.

  When it comes to expanding on the tutorials, errata and updates, I’ll always publish them here. I’ll also be putting up snippets of code and just little tips here and there.

  And of course, any code that I do that’s useful but it’s big enough for a tutorial, I’ll stick it up on here!

  So bare with me, there’ll be lots of content coming up very very shortly!

  Tags: carousel ~ Flash ~ flv ~ framework ~ gadget ~ papervision ~ player ~ puremvc ~ pv3d ~ tube ~ tutorials ~ video ~ widget ~ you ~ youtube
  Posted in General

  ---