As you probably know, Flash is a 2D program. However, there are a handful of open source 3D engines written in Action Script that allow real time 3D environments to be rendered within the flash player. Among these, is Papervision3D, which is probably the most powerful and widely adopted of the engines available.
In this tutorial, we will create a simple 3D gallery for a few photos. Before you get started, you will need to download Papervision3D, and make sure you have a class path within flash pointing to it's location on your computer.
1. Import Papervision
The first step is to include all of the necessary Papervision3D classes in our file.
| import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*; import org.papervision3d.objects.*; import org.papervision3d.materials.*; |
2. Create a container
In order to properly set up our scene, we need to first create a Sprite that will contain our 3D objects. And since we want our group of photos to be in the center of the stage, we set the x an y properties to half of the stage width and height.
| var container:Sprite = new Sprite();
container.x = stage.stageWidth * 0.5; container.y = stage.stageHeight * 0.5; addChild(container); |
3. Set up the scene
Here we will use two of Papervisions's classes, one to create the scene and the other to create a camera. The zoom property of the camera is self explanatory… the higher the number, the tighter the zoom.
| var scene:Scene3D = new Scene3D(container);
var camera:Camera3D = new Camera3D(); camera.zoom = 6; |
4. Create the material
Import three photos into the Flash library and make sure to enable "Export for ActionScript" on each. Then assign each one to a material.
| var mat1:BitmapAssetMaterial = new BitmapAssetMaterial("cake1");
mat1.smooth = true; mat1.oneSide = false; var mat2:BitmapAssetMaterial = new BitmapAssetMaterial("cake2"); mat2.smooth = true; mat2.oneSide = false; var mat3:BitmapAssetMaterial = new BitmapAssetMaterial("cake3"); mat3.smooth = true; mat3.oneSide = false; |
5. Make our photos
Papervision has several built in objects. For our photos we are going to use the plane. When creating a new instance of the Plane object, you need to pass in several parameters. The first is the material, which we created in the precious step. The second and third is the width and height. The final two parameters are the horizontal and vertical spans of the object. Use at least 3 for this. Anything less will cause your photo to slightly warp as it moves.
| var photo1:Plane = new Plane(mat1, 246, 370,3,3);
scene.addChild(photo1); photo1.x =-190; photo1.y =-10; photo1.z =-150; var photo2:Plane = new Plane(mat2, 370, 253,3,3); scene.addChild(photo2); photo2.x =190; photo2.y =-150; var photo3:Plane = new Plane(mat3, 370, 253,3,3); scene.addChild(photo3); photo3.x = 190; photo3.y = 150; photo3.z =-90; |
6. Render the scene
The final step is to render our scene. We could just call scene.renderCamera(camera); but that would only render the scene one time and nothing would be animated. So instead, we create an ENTER_FRAME event that changes the position of the camera based on the mouse position, and renders the scene.
| addEventListener(Event.ENTER_FRAME, render);
function render(e:Event):void { camera.x += (((stage.mouseX-(stage.stageWidth * .5))*2)-camera.x )*.05; camera.y += (((stage.mouseY-(stage.stageHeight*.5))*2)-camera.y )*.05; scene.renderCamera(camera); } |
More Flash & Swish: 
