In this tutorial we will learn how to work on Sprite3D object. If you have studied the tutorial on Sprite2D you already be familiar with some basic Spite concepts. The idea behind Sprite3D is that we don’t have only one face of the objet to render (as it was for Sprite2D), but now we can render at most 360 faces of that object, and it will be the rotation of the camera, or of the object, that will determine the right face that will be presented to the user.
In order to work with Sprite2D you only need a single image, in order to work with Sprite3D you need to have a swf file that it is a sequence of frames of pre-rendered images. This tutorial will concentrate mostly on how to prepare your Sprite3D object and how to basically use it. In a more advance tutorial you will see what you can really do with a Sprite3D object.

To work with Sprite3D we need to create two different swf file. The first one will be used to prepare the Sprite3D object, that has nothing to do with Sandy. The second one is our program that use Sandy library that will use the prepared swf file.
In the following archive you will find all you need to start from scratch this tutorial.

example0043.rar

So let’s start with the first of this two file (or project).

The new updated version can be found here:
example0043_v3.1.1.zip

The Sprite3D object is nothing other than a simple swf file, with 360 frames and on each frame. So what we need to do first is to choose an object and “slices” it with 360 images (at most), in order to have the primitives to create our swf file.
I am attaching an animated gift of the object chosen for this tutorial. In order to prepare the 360 images you can use some sophisticated graphics tools that will do the job for you. In my case I have borrowed the 360 images from Thomas

Now that in one manner on in another we have 360 images we just need to set up a fla file. Create one new fla file and name it pane.fla (for example). You need to do just 3 things:

• Import in the library the 360 images
• Create 360 key frames and in each one of them place an image of the library
• Export the created Movie Clip and you should have your .swf file ready to use (I have found out that we don't need to specify any Document class to prepare this swf).

The next image shows how your project should look.

Now we are ready for a the standard set up for our tutorial. The Document class must be changed to Example0043.as The name of the class in the .as file and the name of the constructor now is: Example0043.
In the “Stage” of our project I have placed a little background showing the sky and some clouds: a static image that will give a nice look to the tutorial.

In this section we report the AS code as a reference, and it will be explained in the next paragraph.

package
{
   import flash.display.*;
   import flash.net.URLRequest;
 
   import flash.events.*;
   import flash.ui.*;
   import sandy.core.Scene3D;
   import sandy.core.data.*;
   import sandy.core.scenegraph.*;
   import sandy.materials.*;
   import sandy.materials.attributes.*;
   import sandy.primitive.*;
   import sandy.util.*;
   import sandy.events.*;

   public class Example0043 extends Sprite 
   {
      private var scene:Scene3D;
	  private var camera:Camera3D;
	  private var queue:LoaderQueue;
	  private var s:Sprite3D;
	 
	 public function Example0043():void
     {
	   queue = new LoaderQueue();
       queue.add( "plane", new URLRequest("plane/plane.swf"), LoaderQueue.SWF );
	   queue.addEventListener(SandyEvent.QUEUE_COMPLETE, loadComplete );
       queue.start();
	 }
	 
	  public function loadComplete(event:QueueEvent ):void
      {  
		 // We create the camera
		 camera = new Camera3D( 500, 300 );
		 camera.y = 10;
		 camera.z = -300;
		 
		 // We create the "group" that is the tree of all the visible objects
         var root:Group = createScene();
		 
		 var canvas:Sprite = new Sprite();
		 this.addChild(canvas);
		 
		 // We create a Scene and we add the camera and the objects tree 
	     scene = new Scene3D( "scene", canvas, camera, root );
		 scene.rectClipping = true;
		 
		 // Listen to the heart beat and render the scene
         addEventListener( Event.ENTER_FRAME, enterFrameHandler );
		 stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressedHandler);
	  }
	 
      // Create the scene graph based on the root Group of the scene
      private function createScene():Group
      {
         // Create the root Group
         var g:Group = new Group();
		  
		  s = new Sprite3D("plane",queue.data["plane"]);
		 
		  s.rotateY = 90;
		  s.x = 0;
		  s.z = 0;
		  s.y = 0;
		  g.addChild(s);
		  
		  return g;
      }

      // The Event.ENTER_FRAME event handler tells the Scene3D to render
      private function enterFrameHandler( event : Event ) : void
      {
		 if (s.rotateY==0)
		   s.rotateY=0.1;
		 if(s.x > 220 && s.z < 0)
		   s.x=-220;
		 else if(s.x < -220 && s.z < 0)
		   s.x=220;
		 else if (s.z<-250) 
		   s.z=1000; 
		 
		s.moveForward(-7);
		scene.render();
      }
	  
	  // This function handles the move foreward or backward simultaion
	  private function keyPressedHandler(event:KeyboardEvent):void {
			if(event.keyCode == Keyboard.RIGHT)
			    s.rotateY -=5;
			if(event.keyCode ==	Keyboard.LEFT)
				s.rotateY +=5;
        }
   }
}

Let’s see what we did in the code…

• Basically we just need to load the exported file and to do so we will use the Sandy utility already used in other tutorials:

queue = new LoaderQueue();
queue.add( "plane", new URLRequest("plane/plane.swf") );
 queue.addEventListener(SandyEvent.QUEUE_COMPLETE, loadComplete );
 queue.start();

• Now to use the imported element you just need one line of code:

s = new Sprite3D("plane",queue.data["plane"],2);

The number “2” it is used to double the size of the swf file. I have resized the original images, discovering too late that my resizing was too small. So I have used a parameter of the constructor to resize my created sfw file.

The tutorial should be over, but let’s add some nice things to it, to see how the object moves aroung. We have a flying plane, so let’s have something to govern its direction. To do so the keyPressedHandler allow to use the RIGHT and LEFT key to change the direction of the plane.

private function keyPressedHandler(event:KeyboardEvent):void {
 	if(event.keyCode == Keyboard.RIGHT)
		s.rotateY -=5;
	if(event.keyCode == Keyboard.LEFT)
		s.rotateY +=5;
        }

• The we need some come to allow the plane to move around and not to lose the plane (if it goes too far to the right, it must appear on the left, and the other way around). So we place all this code in the enterFrameHandler.

private function enterFrameHandler( event : Event ) : void
      {
		 if (s.rotateY==0)
		   s.rotateY=0.1;
		 if(s.x > 220 && s.z < 0)
		   s.x=-220;
		 else if(s.x < -220 && s.z < 0)
		   s.x=220;
		 else if (s.z<-250) 
		   s.z=1000; 
 
		s.moveForward(-7);
		scene.render();
      }

Time to see our result!!

For this Flash you have the RIGHT, LEFT key to control your plane. If you “lose” the plane, just wait a little, it should come back !

If you want to learn more, jump to this tutorial now.