3D Page Curl Effect - Updated
A few improvements have been made enhancing visual quality as well as overall framerate under load, plus a few presentation and interface-related tweaks.
The main class file for the effect has been updated as well.
Thanks to Carlos Ulloa and Alexander Zadorozhny for their thoughts on the Papervision3D mailing list.
August 29th, 2007 at 7:15 am
I great class you have there.
It took be a while though to figure out how to get it working like the demo so I thought I’d share what I did in case anybody gets stuck like I did.
First off it may not be obvious for those us us less familiar with Papervision3D but you have to first set up your 3D environment, something like:
var container = new Sprite();
var camera = new Camera3D();
addChild(container);
var scene = new Scene3D(container)
Then you can add a CurlingPlane instance with a reference to the BitmapData Object you want to use:
var page1_side1 = new CurlingPlane(myBitmapData);
scene.addChild(page1_side1);
scene.renderCamera(camera);
At this point you can set up mouse events for the flipping animation that set the rotation of the CurlingPlane (from 0 to 180 degrees) on the CurlingPLane does the rest. Just remember to re-render the camera after setting the rotation:
page1_side1.rotate(90);
scene.renderCamera(camera);
So now you’ll notice that only one side of the page is rendered. In order to complete the effect you have to sandwich two CurlingPlane instances together, one facing forward and one facing backwards. This stumped me for a while and I don’t know if I have the best solution but in order to flip the plane, I reversed the vertices array in the constructor of the CurlingPlane. But then the image was rotated 180 degrees so then I had to rotate the BitmapData object.
So i ended up adding another parameter to the Constructor of the CurlingPlane class so it now looks like:
public function CurlingPlane(bmp:BitmapData, numHorizontalStrips:int = 5, invert:Boolean = false)
And in the constructor I added a block of code just before the “super( new BitmapMaterial( bmp ), new Array(), new Array(), null, null );” to use a new, rotated BitmapData object instead of the one provided.
/////////////////////
var myBitmapData:BitmapData
if (invert) {
var myMatrix:Matrix = new Matrix();
myMatrix.rotate(Math.PI);
myMatrix.translate(bmp.width, bmp.height);
myBitmapData = new BitmapData(bmp.width, bmp.height);
myBitmapData.draw(bmp,myMatrix);
} else {
myBitmapData = bmp;
}
/////////////////////
super( new BitmapMaterial( myBitmapData ), new Array(), new Array(), null, null );
…
Then after the vertices array is created and before the faces array is created I added:
if(invert) {
vertices.reverse();
}
// Faces
var uvA :NumberUV;
…
If there is a better way of doing this I’d love to know.
Jamie
August 29th, 2007 at 8:07 am
Jamie,
Thanks very much for the writeup. Your explanation is great.
Lee
October 22nd, 2007 at 5:29 am
Very Good! Very Cool!
You also give us document class sample…hihihi
March 5th, 2008 at 3:25 pm
Would you be willing to share any of the code for the sample. I have tried to get this working (thanks to Jamie for help code) but am not getting anything to show up. I’m guessing that I’m just missing something simple, but any help would be greatly appreciated.
Thanks
April 26th, 2008 at 7:48 am
Does it have to be a bitmap or can you map a Sprite or a MovieClip as a page?
May 1st, 2008 at 4:52 pm
BigBadOwl,
The class is set up to only accept BitmapData’s but it’s perfectly possible to adjust it to take MovieClip’s.
Dan Rogers has a very cool update to the page flip above, which allows for user interactivity on the pages:
http://danro.net/2007/11/08/pv3d-pageflip-demo/
-Lee
May 23rd, 2008 at 3:53 pm
Can you share the .fla file?
May 27th, 2008 at 3:58 pm
Sorry Matias, just the AS file above.
Lee
May 31st, 2008 at 6:51 am
Jamie,
which version of PV did you use?
thanks a bunch
August 26th, 2008 at 3:58 am
thanks
August 26th, 2008 at 3:59 am
cool