Page 1 of 1

Papervision 2.0 Plane Create a rotating plane to hold images. Rate Topic: -----

#1 Kerplope  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 22-September 08

Posted 02 October 2008 - 06:28 PM

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.)

Posted Image

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”.

Posted Image

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.

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.*;



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.

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;


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

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


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.
var picPlaneMaterial:MovieMaterial = new MovieMaterial(imageGallery);

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

picPlaneMaterial.oneSide = false;


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

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


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.

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);
}


Test your movie and you should see something like this.

Posted Image

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.flashbook...GreatWhite-DOC/.
Feel free to contact me with any questions.

Is This A Good Question/Topic? 0
  • +

Replies To: Papervision 2.0 Plane

#2 Kenshiro  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 29-October 09

Posted 29 October 2009 - 03:31 AM

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);
}

Attached image(s)

  • Attached Image

This post has been edited by Kenshiro: 29 October 2009 - 03:32 AM

Was This Post Helpful? 0
  • +
  • -

#3 Kerplope  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 22-September 08

Posted 29 October 2009 - 12:43 PM

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
var picPlaneMaterial:MovieMaterial = new MovieMaterial(imageGallery);

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


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
Was This Post Helpful? 0
  • +
  • -

#4 Guest_Rick*


Reputation:

Posted 06 May 2010 - 12:45 PM

It all works perfect except how do I get it to not rotate in circles but rather just float a little to the left, right, up & down as I pass my mouse over it. Also, I was wondering if it is possible to have the photos be clickable e.g.

hittest.addEventListener(MouseEvent.CLICK, onclick);
function onclick(e:MouseEvent){
myTween.start();
}

Thanks,
Rick
Was This Post Helpful? 0

#5 Kerplope  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 22-September 08

Posted 24 June 2010 - 09:10 PM

Hey Rick,

I typed up a document class for a flash application that accomplishes what you were thinking of.

package {
	import caurina.transitions.Tweener;
	
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.events.FileLoadEvent;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.render.BasicRenderEngine;
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	
        Only Applicable for flash builder applications
	//[SWF(width='620', height='480', backgroundColor='#000000')]
	
	public class Main extends Sprite
	{
		
		private const ZOOM:uint = 9;
		private const SPACING:uint = 10;
		private const IMAGEHEIGHT:uint = 140;
		private const IMAGEWIDTH:uint = 190;
		private const ROWSCOLS:uint = 3;
		
		private var viewport:Viewport3D;
		private var render:BasicRenderEngine;
		private var scene:Scene3D;
		private var camera:Camera3D;
		
		public function Main() {
			viewport = new Viewport3D(0,0, true,true);
			render = new BasicRenderEngine();
			scene = new Scene3D();
			camera  = new Camera3D();
			stage.addChild(viewport);
			
			camera.zoom = ZOOM;
			camera.focus = 100;
			
			aquireXML();
		}
		
		private function aquireXML():void {
			var loader:URLLoader = new URLLoader();
			loader.addEventListener(Event.COMPLETE, xmlLoaded);
			loader.load(new URLRequest("link to your xml file"));
		}
		private function xmlLoaded(event:Event):void {
			var xml:XML = new XML(event.target.data);
			
			for each (var image:String in xml.image.attribute("src")) {
				var picture:BitmapFileMaterial = new BitmapFileMaterial(image);
				picture.addEventListener(FileLoadEvent.LOAD_COMPLETE, createPlane);
			}
			
			stage.addEventListener(Event.ENTER_FRAME, positionAndRender);
		}
		
		private var imageIndex:int = 0;
		private function createPlane(fileLoadedEvent:FileLoadEvent):void {
			var material:BitmapFileMaterial = fileLoadedEvent.target as BitmapFileMaterial;
			material.interactive = true;
			material.oneSide = true;
			var picPlane:Plane = new Plane(material, IMAGEWIDTH, IMAGEHEIGHT,3,3);
			picPlane.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, zoomIn);
			
			picPlane.x = (imageIndex % ROWSCOLS * (IMAGEWIDTH+SPACING))-(stage.stageWidth/2)+ (IMAGEWIDTH+SPACING)/2;
			picPlane.y = (Math.floor(imageIndex/ROWSCOLS) * (IMAGEHEIGHT+SPACING))-(stage.stageHeight/2)+((IMAGEHEIGHT+SPACING)/2);
			imageIndex++;
			
			scene.addChild(picPlane);
		}
		
		private var zoomEvent:InteractiveScene3DEvent = null;
		private function zoomIn(event:InteractiveScene3DEvent):void {
			if (zoomEvent == null) {
				zoomEvent = event;
				Tweener.addTween(camera,{x:zoomEvent.target.x, y:zoomEvent.target.y, zoom:12,time:1,transition:"easeInQuad",onComplete:done});
				Tweener.addTween(zoomEvent.target,{z:-550, rotationX:0 ,rotationY:0, time:1, transition:"linear"});
			}
		}
		
		private function done():void {
			for each(var picture:Plane in scene.objects) 
			if (picture != zoomEvent.target)
				picture.material.invisible = true;
			
			stage.addEventListener(MouseEvent.CLICK, zoomOut);
		}
		
		private function zoomOut(mouseEvent:MouseEvent):void {
			Tweener.addTween(camera,{x:0,y:0,zoom:ZOOM,time:1,transition:"easeOutQuad"});
			Tweener.addTween(zoomEvent.target,{z:1,time:.5,transition:"linear"});
			stage.removeEventListener(MouseEvent.CLICK, zoomOut);
			zoomEvent = null;
			for each(var picture:Plane in scene.objects) 
			picture.material.invisible = false;
		}	
		
		private function positionAndRender(event:Event):void {
			if (zoomEvent == null) {
				var images:Array = scene.objects;
				for each (var image:DisplayObject3D in images) {
					image.rotationY = ((stage.stageWidth/2)-mouseX)/10;
					image.rotationX = ((stage.stageHeight/2)-mouseY)/10;
				}
			}
			render.renderScene(scene, camera, viewport);
		}
		
		
	}
}




Don't forget to create an xml file with the simple schema:

<?xml version="1.0"?>
<images>
	<image src="huck1.png"></image>
	<image src="huck2.png"></image>
	<image src="sky3.png"></image>
	<image src="sky4.png"></image>
	<image src="sky1.png"></image>
	<image src="sky2.png"></image>
	<image src="score1.png"></image>
	<image src="huck3.png"></image>
	<image src="bid1.png"></image>
</images>



If you're using Flash Builder 4, which I recommend for a script intensive project such as this, be sure to include a crossdomain file, so you don't run into issues with accessing the xml file.

Image wise, I would suggest using 512px x 512px pngs.

I'm using the same version of Papervision as the tutorial but I'm also using a Tweener, which can be obtained from google code.

If I have time in the coming weeks I may create a new tutorial that explains this code and the advantages that Flash builder has over flash professional for dynamic projects like these.

Enjoy and let me know if there's anything else this tutorial could use.

-Kerplope
Was This Post Helpful? 0
  • +
  • -

#6 Kerplope  Icon User is offline

  • New D.I.C Head
  • member icon

Reputation: 2
  • View blog
  • Posts: 14
  • Joined: 22-September 08

Posted 03 September 2011 - 04:39 PM

I've never used the tweenlite library before. But I would imagine that you would run into problems with have to many tweens trying to run at once. If you're just looking for a little easing than consider changing = to += . Of course you'll have to fiddle with the equation a bit but you should be able to achieve a nice effect that way.

I'm sorry I couldn't be more help. I don't have flash or flex on this computer.

Keep me posted,
Kerplope
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1