Ahmed Nuaman

builder of internets ~ developer of dreams ~ tamer of Dachshunds

Posts Tagged “3d”

• Flash Player 10 Native 3D Tests: Le Cube

  Thursday, September 10th, 2009

  Ok, so after discovering the simple ability to have native 3D properties in Flash Player 10 without having to mess about with engines such as Papervision3D, I’ve started writing a few tests that will lead to classes that will “do the maths” for you.

  So, here’s a little attempt at a cube. It’s not perfect, you see in Papervision, it aligns everything nicely for you, but this is the code harsh reality of Actionscript 3 which means that the transformation point is the front top left corner. I’ll find a way around.

  So here’s the code:

  package {
      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 App3D1 extends Sprite
      {
          private var cube:Sprite;
         
          public function App3D1()
          {
              stage.align         = StageAlign.TOP_LEFT;
              stage.scaleMode     = StageScaleMode.NO_SCALE;
             
              init();
          }
         
          private function init():void
          {
              transform.perspectiveProjection.fieldOfView = 45;
             
              cube = new Sprite();
             
              addChild( cube );
             
              var front:Sprite    = createFace( 0x333333, 'front' );
              var back:Sprite     = createFace( 0x333333, 'back' );
              var right:Sprite    = createFace( 0x333333, 'right' );
              var left:Sprite     = createFace( 0x333333, 'left' );
              var top:Sprite      = createFace( 0x333333, 'top' );
              var bottom:Sprite   = createFace( 0x333333, 'bottom' );
             
              cube.addChild( back );
              cube.addChild( right );
              cube.addChild( left );
              cube.addChild( top );
              cube.addChild( bottom );
              cube.addChild( front );
             
              back.rotationY      = 180;
              back.x              = 300;
              back.z              = 300;
             
              right.rotationY     = 90;
              right.x             = 300;
              right.z             = 300;
             
              left.rotationY      = 270;
              left.x              = 0;
             
              top.rotationX       = 270;
              top.y               = 300;
              top.z               = 300;
             
              bottom.rotationX    = 90;
             
              addEventListener( Event.ENTER_FRAME, handleEnterFrame );
          }
         
          private function createFace(colour:uint, name:String=null):Sprite
          {
              var face:Sprite = new Sprite();
             
              face.graphics.beginFill( colour, .3 );
              face.graphics.lineStyle( 1, colour );
              face.graphics.drawRect( 0, 0, 300, 300 );
              face.graphics.endFill();
             
              face.name = name;
             
              return face;
          }
         
          private function handleEnterFrame(e:Event):void
          {
              cube.x      = ( stage.stageWidth / 2 ) - ( cube.width / 2 );
              cube.y      = ( stage.stageHeight / 2 ) - ( cube.height / 2 );
             
              cube.rotationX  += 1;
              cube.rotationY  += 1;
              cube.rotationZ  += 1;
             
              cube.x          += 1;
              cube.y          += 1;
              cube.z          += 1;
             
              transform.perspectiveProjection.projectionCenter = new Point( stage.stageWidth / 2, stage.stageHeight / 2 );
          }
      }
  }

  Don’t forget to set up your environment to target Flash Player 10 before you compile. And if you’re too lazy, here’s a preview:

  Tell me what you think…

  Tags: 10 ~ 3d ~ actionscript ~ Actionscript 3 ~ as3 ~ Flash ~ fp10 ~ native ~ player
  Posted in Actionscript 3 ~ 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

  ---

• Papervision3D And The YouTube Player: Just Hack It

  Friday, August 28th, 2009

  So after much attempts it seems the best way to get the YouTube player to play nicely with Papervision3D (and the other way too) is just to fake it!!

  I basically create a “fake player” and use that in the plane, and then when the user has clicked on the plane, I overlay the player on top. I can’t wait for native 3D on FP10 to become more wide spread!

  So here’s the code:

  package
  {
      import com.firestartermedia.lib.as3.display.component.video.YouTubePlayer;
      import com.firestartermedia.lib.as3.display.tools.ScaleObject;
      import com.firestartermedia.lib.as3.utils.DisplayObjectUtil;
     
      import flash.display.LoaderInfo;
      import flash.display.Sprite;
      import flash.events.Event;
      import flash.events.MouseEvent;
      import flash.geom.Rectangle;
      import flash.system.Security;
     
      import gs.TweenLite;
      import gs.easing.Strong;
     
      import org.papervision3d.cameras.CameraType;
      import org.papervision3d.materials.MovieMaterial;
      import org.papervision3d.objects.primitives.Plane;
      import org.papervision3d.view.BasicView;
     
      [SWF( width='580', height='400', frameRate='30', backgroundColor='#000000' )]
     
      public class App extends BasicView
      {
          [Embed( source='assets/img/yt_controls.jpg' )]
          private var ytControls:Class;
         
          private var videoId:String                              = 'i1Crvwldkcs';
         
          private var player:YouTubePlayer;
          private var plane:Plane;
         
          public function App()
          {
              super( 580, 400, true, true, CameraType.TARGET );
             
              Security.allowDomain( '*' );
              Security.allowDomain( 'www.youtube.com' );     
              Security.allowDomain( 'youtube.com' );     
              Security.allowDomain( 's.ytimg.com' );
              Security.allowDomain( 'i.ytimg.com' );
             
              Security.loadPolicyFile( 'http://img.youtube.com/crossdomain.xml' );
              Security.loadPolicyFile( 'http://gdata.youtube.com/crossdomain.xml' );
             
              init();
          }
         
          private function init():void
          {
              var mat:MovieMaterial;
              var controls:Sprite;
              var fakePlayer:Sprite;
             
              controls = new ScaleObject( new ytControls(), new Rectangle( 50, 10, 1, 1 ) );
             
              controls.width      = 400;
              controls.x          = 0;
              controls.y          = 300 - controls.height;
             
              fakePlayer = new Sprite();
             
              fakePlayer.addEventListener( MouseEvent.CLICK, handleFakePlayerClick );
             
              DisplayObjectUtil.loadMovie( 'http://i.ytimg.com/vi/' + videoId + '/hqdefault.jpg', fakePlayer, null, null, true );
             
              fakePlayer.addChild( controls );
             
              mat = new MovieMaterial( fakePlayer, true, true, true, new Rectangle( 0, 0, 400, 300 ) );
             
              mat.interactive     = true;
              mat.smooth          = true;
             
              plane = new Plane( mat, 400, 300, 3, 3 );
             
              plane.x     = 0;
              plane.y     = 0;
              plane.z     = -700;
             
              scene.addChild( plane );
             
              player = new YouTubePlayer();
             
              player.autoPlay         = true;
              player.playerHeight     = 345;
              player.playerWidth      = 460;
              player.wrapperURL       = ( LoaderInfo( loaderInfo ).parameters.url ||= 'assets/swf/YouTubePlayerWrapper.swf' );
              player.visible          = false;
              player.x                = ( stage.stageWidth / 2 ) - ( player.playerWidth / 2 );
              player.y                = ( stage.stageHeight / 2 ) - ( player.playerHeight / 2 );
             
              addChild( player );
             
              startRendering();
             
              addEventListener( Event.ENTER_FRAME, handleEnterFrame );  
          }
         
          private function handleFakePlayerClick(e:MouseEvent):void
          {
              removeEventListener( Event.ENTER_FRAME, handleEnterFrame );
             
              TweenLite.to( plane, 1, { rotationX: 0, rotationY: 0, ease: Strong.easeOut, onComplete: playVideo } );
          }
                 
          private function handleEnterFrame(e:Event):void
          {
              TweenLite.to( plane, 1, { rotationX: stage.mouseX * .1, rotationY: stage.mouseY * .1, ease: Strong.easeOut } );
          }
         
          private function playVideo():void
          {
              stopRendering();
             
              TweenLite.to( player, 1, { autoAlpha: 1, ease: Strong.easeOut, onComplete: startVideo } );
          }
         
          private function startVideo():void
          {
              player.play( videoId );
          }
      }
  }

  And this is what we get:

  Tell me what you think!

  Tags: 3d ~ api ~ papervision ~ papervision3d ~ player ~ pv3d ~ youtube
  Posted in Actionscript 3 ~ APIs ~ Development

  ---

• Messing With Papervision3D and Material/Plane Interactivity

  Wednesday, August 26th, 2009

  Update: I’ve hacked PV3D to get it to work with YouTube.

  Right, after much browsing through the Papervision3D code, I’ve found out something very interesting: Papervision3D renders hit test, on every frame, on objects that request the mouse, that means those with event listeners.

  So, going back to my original issue of getting the YouTube player to function with Papervision3D, I created some tests to see exactly what Papervision3D was doing, and how I could maybe adjust the code so it can work for me.

  The first test was to simply add a button (using my “ButtonSimple()” class) to a material and add the material to a plane and test for interactivity:

  package
  {
      import com.firestartermedia.lib.as3.display.component.interaction.ButtonSimple;
     
      import flash.display.Sprite;
      import flash.events.MouseEvent;
      import flash.geom.Rectangle;
      import flash.text.Font;
     
      import org.papervision3d.cameras.CameraType;
      import org.papervision3d.materials.MovieMaterial;
      import org.papervision3d.objects.primitives.Plane;
      import org.papervision3d.view.BasicView;
     
      [SWF( width='580', height='400', frameRate='30', backgroundColor='#000000' )]
     
      public class App extends BasicView
      {
          [Embed( systemFont='Arial', fontName='Arial', unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E', mimeType='application/x-font' )]
          private var _Arial:Class;
         
          private var plane:Plane;
         
          public function App()
          {
              super( 580, 400, true, true, CameraType.TARGET );
             
              Font.registerFont( _Arial );
             
              init();
          }
         
          private function init():void
          {
              var mat:MovieMaterial;
              var test:Sprite = new Sprite();
              var button:ButtonSimple = new ButtonSimple();
             
              button.buttonText   = 'asddaskadskadskasdkasdkasdkasdkaskaskadskasd';
              button.x            = 100;
              button.y            = 100;
             
              button.draw();
             
              test.addChild( button );
             
              mat = new MovieMaterial( test, true, true, true, new Rectangle( 0, 0, 400, 300 ) );
             
              mat.interactive     = true;
              mat.smooth          = true;
             
              plane = new Plane( mat, 400, 300, 3, 3 );
             
              plane.x     = 0;
              plane.y     = 0;
              plane.z     = -700;
             
              scene.addChild( plane );
             
              startRendering();
          }
      }
  }

  And this gave me:

  So, as you can see, you can’t click on the button, but then as soon as I add an event listener like so:

  package
  {
      import com.firestartermedia.lib.as3.display.component.interaction.ButtonSimple;
     
      import flash.display.Sprite;
      import flash.events.MouseEvent;
      import flash.geom.Rectangle;
      import flash.text.Font;
     
      import org.papervision3d.cameras.CameraType;
      import org.papervision3d.materials.MovieMaterial;
      import org.papervision3d.objects.primitives.Plane;
      import org.papervision3d.view.BasicView;
     
      [SWF( width='580', height='400', frameRate='30', backgroundColor='#000000' )]
     
      public class App extends BasicView
      {
          [Embed( systemFont='Arial', fontName='Arial', unicodeRange='U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E', mimeType='application/x-font' )]
          private var _Arial:Class;
         
          private var plane:Plane;
         
          public function App()
          {
              super( 580, 400, true, true, CameraType.TARGET );
             
              Font.registerFont( _Arial );
             
              init();
          }
         
          private function init():void
          {
              var mat:MovieMaterial;
              var test:Sprite = new Sprite();
              var button:ButtonSimple = new ButtonSimple();
             
              button.addEventListener( MouseEvent.CLICK, handleClick );
             
              button.buttonText   = 'asddaskadskadskasdkasdkasdkasdkaskaskadskasd';
              button.x            = 100;
              button.y            = 100;
             
              button.draw();
             
              test.addChild( button );
             
              mat = new MovieMaterial( test, true, true, true, new Rectangle( 0, 0, 400, 300 ) );
             
              mat.interactive     = true;
              mat.smooth          = true;
             
              plane = new Plane( mat, 400, 300, 3, 3 );
             
              plane.x     = 0;
              plane.y     = 0;
              plane.z     = -700;
             
              scene.addChild( plane );
             
              startRendering();
          }
         
          private function handleClick(e:MouseEvent):void
          {
              var button:ButtonSimple = e.target as ButtonSimple;
             
              button.buttonText = 'You clicked on me';
             
              button.draw();                     
          }
      }
  }

  Which gives me:

  So, they are on the right path, and that’s some good scripting there, but the main issue still remains: you can’t* convert the YouTube player into the bitmap style material needed by Papervision3D, so kind of back to square one.

  * The reason I say can’t is that if you run the script locally through say Flex Builder, it works fine, but as soon as you load it from a server, the security settings hook up and you’ll soon find out you don’t have permission to change the YouTube player, thus converting it to a bitmap.

  Tags: 3d ~ actionscript ~ Actionscript 3 ~ api ~ as3 ~ papervision ~ papervision3d ~ player ~ pv3d ~ youtube
  Posted in Actionscript 3 ~ APIs ~ Development

  ---

• Papervision3D MovieMaterial: To Hack Or Not To Hack?

  Friday, August 21st, 2009

  Another update: I’ve hacked PV3D to get it to work with YouTube.

  Update: I’ve had a play with PV3D and this is what I found out.

  Recently I’ve been helping an agency with the YouTube Player API and Papervision3D. They’re after placing a YouTube player on a plane and it being interactive.

  The main problem seems to be that:

  1. In order to add an object on to a plane it needs to be a material
  2. When an object is converted into a material, whether it’s a “MovieMaterial()” or not, it subclasses the “BitmapMaterial()” class, thus making it un-interactive (as essentially it’s a flattened bitmap)

  So what to do…

  Well I’ve taken it upon myself to some how hack my way around this. I mean there must be a way that some how I can pass the X and Y of the mouse relative to the plane when the user has made an interaction to a copy of the display object class and have it react in someway.

  Furthermore, since Papervision3D tries to flatten the YouTube player, it’s having none of it, therefore you’re unable to flatten it (as you need the YouTube player to allow the Papervision3D class to manipulate it).

  So maybe the way is to somehow create a material that doesn’t flatten the display object yet still giving us the ability to display the object with all the flexibility flattening it does (such as segmentation for example).

  If anyone’s done this before, care to lend a hand? Otherwise watch this space.

  Tags: 3d ~ api ~ papervision ~ papervision3d ~ pv3d ~ youtube
  Posted in Actionscript 3 ~ APIs ~ Development

  ---