Transition Plane with PaperVision
For those who dont have CS4 yet (like myself) and need to do are wanting to tinker with 3d, fear not, you can always use Papervision. I created a very simple class you can use to make a double sided plane. You can tell it which movieclips you want to use for the front and back and in this example I used TWEENER to animate it. Heres the class:
package
{
import flash.display.*;
import flash.events.*;
import org.papervision3d.scenes.*;
import org.papervision3d.cameras.*;
import org.papervision3d.objects.*; import org.papervision3d.objects.special.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*; import org.papervision3d.materials.special.*;
import org.papervision3d.materials.shaders.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.lights.*;
import org.papervision3d.render.*;
import org.papervision3d.view.*;
import org.papervision3d.events.*;
import org.papervision3d.core.utils.*;
import org.papervision3d.core.animation.*;
import org.papervision3d.core.math.Number3D; import org.papervision3d.core.utils.virtualmouse.VirtualMouse;// papervision
public class TransitionPlane extends MovieClip
{
private var renderer:BasicRenderEngine = new BasicRenderEngine();
private var scene:Scene3D = new Scene3D();
private var camera:Camera3D = new Camera3D();
private var viewport:Viewport3D = new Viewport3D(0,0,true,true);//
public var motherP:Plane; // plane all faces are on
public var p:Plane;// front face public var p2:Plane;// back face
public var planeWidth:Number; public var planeHieght:Number ;
public var mm:MovieMaterial; public var mm2:MovieMaterial; |
public function TransitionPlane(planeW:Number, planeH:Number)
{
trace("TransitionPlane!");
planeWidth = planeW;
planeHieght = planeH;
addEventListener(Event.ENTER_FRAME, processFrame);// contiusly renders scene addChild(viewport);//
container camera.focus = 25;// or camera.zoom.. you can modify this
// make main plane
motherP = new Plane(null, planeWidth, planeHieght, 5, 5);
///makes the mother Plane invisible. motherP.material.lineColor = 0x000000;
motherP.material.oneSide = true;
motherP.material.lineAlpha = 0;
/// add mother Plane to 3d scene scene.addChild(motherP);
}
protected function processFrame(e:Event):void
{
/// renders scene renderer.renderScene(scene,camera,viewport);
}
public function createSides(front:MovieClip, back:MovieClip) // creates 2 faces for mother Plane a front and back.
{
mm = new MovieMaterial(front,true);
mm.interactive = true; mm.animated = true;
mm.smooth=true; mm.oneSide = true; p = new Plane(mm, planeWidth,planeHieght, 5, 5);
motherP.addChild(p);
//scene.addChild(p)
mm2 = new MovieMaterial(back,true);
mm2.interactive = true;
mm2.animated = true;
mm2.smooth=true;
mm2.oneSide = true;
p2 = new Plane(mm2, planeWidth,planeHieght, 5, 5);
p2.rotationY = 180;// this makes it so the plane is backwards.
motherP.addChild(p2);
}
}//end Class
}//end Package
Now lets use the class in a project. 1. Create new AS3 Fla. 2. Create 2 MovieClips, 1 you want for the front, the other for the back of your double sided plane. Export them for actionscript, giving them a class name. In this example I used "front" and "back". Heres the code:
import TransitionPlane; // import TransitionPlane
import caurina.transitions.*;
var myPlane:TransitionPlane = new TransitionPlane(250,200); // new TP with Width and Height Params // create MovieClips ill use for front and back var b:back = new back();
var f:front = new front();
myPlane.createSides(f,b); // add sides to TP pass in FRONT AND BACK
addChild(myPlane);
// make a tweener loop to show this plane in action! // your actually gonna tween the mother Plane inside your 3d scene.
function rotateP ():void {
Tweener.addTween(myPlane.motherP, {rotationY:myPlane.motherP.rotationY+180, time:1, transition:"easeOutBack", onComplete:rotateP} );
}
rotateP();
Easy peasey. You can get some source files here Hope you enjoyed it! Happy Coding!
