May 12, 2008

Keynote-like cube transition by FIVe3D

I tried FIVe3D v2.1, very simple 3D library. For example, 'Graphics3D' class has method like lineTo() and drawCircle(). Looks like Graphics class!!

I created an example 'Keynote-like cube transition' using Bitmap3D class.

I refered to unic8 Studios - Flex Cube - 3D OSX look, which uses PV3D.

FIVe3D doesn't execute hidden surface removal, so I used setChildIndex() in the onUpdate callback of Tweener.

And since fl.motion.Color was not in Flex SDK, I commented out to compile :)

Here is the code:

  1. package {
  2.     import flash.display.*;
  3.     import flash.events.Event;
  4.     import flash.events.MouseEvent;
  5.     import flash.utils.setInterval;
  6.     import five3D.display.*;
  7.  
  8.     import caurina.transitions.Tweener;
  9.  
  10.     public class Five3dCubeEffect extends Sprite {
  11.         private const WIDTH:int = 400;
  12.         private const HEIGHT:int = 267;
  13.  
  14.         [Embed(source="1.jpg")]
  15.         private var Image1:Class;
  16.         [Embed(source="2.jpg")]
  17.         private var Image2:Class;
  18.         [Embed(source="3.jpg")]
  19.         private var Image3:Class;
  20.  
  21.         private var isCube:int = -1;
  22.  
  23.         public function Five3dCubeEffect() {
  24.             stage.scaleMode = "noScale";
  25.             stage.align = "TL";
  26.  
  27.             var images:Array = [];
  28.             images.push(new Image1());
  29.             images.push(new Image2());
  30.             images.push(new Image3());
  31.  
  32.             addChild(images[0]);
  33.             var index:int = 0;
  34.  
  35.             setInterval(function():void{
  36.                 isCube = (Math.random() < 0.5 ? 1 : -1);
  37.                 transition(images[index], images[(index + 1) % images.length]);
  38.                 index = (index + 1) % images.length;
  39.             }, 3500);
  40.         }
  41.  
  42.         private function transition(bmp1:Bitmap, bmp2:Bitmap):void {
  43.             var scene:Scene3D = new Scene3D();
  44.             scene.x = WIDTH / 2;
  45.             scene.y = HEIGHT / 2;
  46.             addChild(scene);
  47.  
  48.             var box:Sprite3D = new Sprite3D();
  49.             box.z = isCube * WIDTH / 2;
  50.             scene.addChild(box);
  51.  
  52.             var img2:Bitmap3D = new Bitmap3D(bmp2.bitmapData);
  53.             box.addChild(img2);
  54.             img2.x = WIDTH / 2;
  55.             img2.y = -HEIGHT / 2;
  56.             img2.z = -isCube * WIDTH / 2;
  57.             img2.rotationY = -isCube * 90;
  58.  
  59.             var img1:Bitmap3D = new Bitmap3D(bmp1.bitmapData);
  60.             box.addChild(img1);
  61.             img1.x = -WIDTH / 2;
  62.             img1.y = -HEIGHT / 2;
  63.             img1.z = -isCube * WIDTH / 2;
  64.  
  65.             Tweener.addTween(box, {
  66.                 time: 1.5,
  67.                 rotationY: isCube * 90,
  68.                 transition: "easeInOutCubic",
  69.                 onStart: function():void{
  70.                     removeChild(bmp1);
  71.                 },
  72.                 onUpdate: function():void{
  73.                     if(Math.abs(box.rotationY) > 45){
  74.                         box.setChildIndex(img1, 0);
  75.                     }
  76.                 },
  77.                 onComplete: function():void{
  78.                     box.parent.removeChild(box);
  79.                     addChild(bmp2);
  80.                 }
  81.             });
  82.         }
  83.     }
  84. }