If you have used custom classes in flash before, you will already be familiar with importing and utilizing those classes. One of the these classes is called Papervision and it allows you to code 3D features in Flash using ActionScript3. You can download the classes necessary to run Papervsion from their google code site. DOWNLOAD
Once you have downloaded the zip file, extract it. Then create a new folder anywhere outside that zip folder, to store your custom ActionScript classes. Inside of the zip folder copy the “org” folder (inside “src”) into the new folder you created for classes. Now open up Flash CS3. Before you begin the project go to “Edit” and then “Preferences”. Choose the category ActionScript and the ActionScript 3 Settings. Then click the crosshair (browse) and choose the folder that you created (it should be one level above the “org” folder.)



Now comes the fun part. Create a new ActionScript 3 document and open up your web browser or “My Pictures” folder. Bring about 10 or so images onto the stage of your project and make sure that you scale them down to fit on the stage.
Once you are satisfied with the images that you have chosen, arrange them however you like, then select them all. Convert to symbol(F8) and make sure that the registration is set to the top left and that Movie Clip is chosen. Name it anything that you want and click “OK”. Now click the instance of the symbol that you created and, for the purpose of this tutorial, name it “imageGallery”.



Now that “imageGallery” has been set up you should move it all the way off the stage. OK, lets code. Open up the actions panel by selecting any frame and pressing F9. In the actions panel we need to import our Papervision3D classes. which will give us the ability to access the objects, methods and properties within Papervision3D.




Next we initialize a viewport which is basically a 3D MovieClip, which we will add to our stage. We will also need a scene where we will add objects and a camera to focus on a specific part of our scene. Last we need a rendering engine to make the scene viewable.



Now that our scene is initialized we can add a plane which will hold our “imageGallery” MovieClip. To create a plane simply type.



This will create define a plane but what will the plane hold? To give that plane a visual we must create a material which will be our “imageGallery” so paste this code above the previous line.

We will also want the material to be visible on both sides so enter



Now all we have to do is add the plane to the scene and render the scene.



Run the movie (ctrl-enter) and you should see your pictures in the center of the stage. This is good but the real benefit of using Papervision is to allow the user to view content in 3D space, so we are going to let the end user rotate the plane. Replace the render scene with a function the runs every frame and evaluates the users mouse position in relation to the center of the stage in order to rotate the plane.



Test your movie and you should see something like this.



So thats it, but you don't have to be done yet. Try changing the frame rate or even try to display the “imageGallery” on a cylinder, sphere or cube. To get more help consult the documentation for Papervision3D at http://www.flashbookmarks.com/PV3D-GreatWhite-DOC/.
Feel free to contact me with any questions.

Hey !
Thank you for this tutorial, this is really helpful but I have a problem my the code.. when I make a render, I have a wireframe plan moving with the mouse (as expected) but my movieclip that contains my images doesn't move.. Can you help me please ?

I give you my code and I attach a printscreen of what I have.

Thanks you very very much for you help and your great tuts !!

my code:

import org.papervision3d.cameras.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;
import org.papervision3d.scenes.*;

var viewport:Viewport3D = new Viewport3D(0,0, true,true);
var render:BasicRenderEngine= new BasicRenderEngine();
var scene:Scene3D = new Scene3D();
var camera:Camera3D = new Camera3D();
addChild(viewport);
camera.zoom = 10;
camera.focus = 100;

var picPlane:Plane = new Plane(picPlaneMaterial, imageGallery.width, imageGallery.height,10,10);
var picPlaneMaterial:MovieMaterial = new MovieMaterial(imageGallery);

picPlaneMaterial.oneSide = false;

scene.addChild(picPlane);
render.renderScene(scene, camera, viewport);

stage.addEventListener(Event.ENTER_FRAME, positionAndRender)
function positionAndRender(evt:Event) {
var rateOfChange:uint = 100;
picPlane.rotationY += ((stage.stageWidth/2) - mouseX)/rateOfChange;
picPlane.rotationX += ((stage.stageHeight/2) - mouseY)/rateOfChange;
render.renderScene(scene, camera, viewport);
}



This post has been edited by Kenshiro: 29 Oct, 2009 - 02:32 AM

Your problem is due to the order of two lines. You create a new plane with with a material that hasn't been declared yet. So be sure that

is above


I apologize for putting them in the wrong order on the tutorial. Once you make this change the wireframe should disappear but another problem will remain, you'll have two copies of your plane one that moves and another that doesn't. The stationary plane is actually the instance of imageGallery that you have on your stage. You need to move this off the stage.

Thanks for the support.
Kerplope