publicreative lab » Papervision http://lab.publicreative.com Tue, 27 Jul 2010 15:59:54 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Inside the Classic http://lab.publicreative.com/2009/04/inside-the-classic/ http://lab.publicreative.com/2009/04/inside-the-classic/#comments Thu, 30 Apr 2009 16:19:52 +0000 Mark http://lab.publicreative.com/?p=105 It’s been a while between posts for me. Mainly because I have been heavily involved in creating the Remaster the Classic project for the last month or so.

The site was made for K-Swiss and MTV to promote the K-Swiss Classic Remastered trainer. Users have the opportunity to customise their Classic by expressing their creativity using paint, graphics and uploading images not to mention adding chains, diamonds and/or studs to their shoe.

Designs are applied to the shoe (a Collada model rendered with Papervision, created in Maya) in real time. Users can continue to edit the shoe until they are happy with it and then submit the shoe to the competition and gallery when both the texture and a thumbnail of the designed shoe are saved.

There were many challenges and many (very) late nights but well worth it as the end result has proven to be extremely popular. Below is a high level overview of the site in relation to the functionality of the Shoe.


Creating the model and applying materials.

The shoe model and the additions you can add to it (the chains and the studs) were created in Maya and exported as Collada files using the Collada plugin. The chains and studs are separate Collada files with individual textures that are mapped to each of them. These are added as children to the main shoe DAE.

Most people reading this will probably be aware that when you export a Collada file from Maya (or Max) that you want to use with Papervision you need a Collada (.dae) file and the texture/material image that has been mapped to that model.

The trick is getting this material image to map correctly to the model in Papervision. To do this you need to know where to look.

With a Collada file exported from Maya I found you need to search the Collada file for the triangles node.

Here it is in our Collada file.

triangles material="a_Backed_Shoe2SG" count="1958"

You need the name of the material, in our case “a_Backed_Shoe2SG”.

Then when you are creating the MaterialsList to use with the DAE in Papervision you pass it this name.

// create a BitmapMaterial instance using the BitmapData from the loaded texture image.
_shoeMaterial = new BitmapMaterial(_loader.getBitmapData(_shoeTexture));
// create a new materials list. Pass it the bitmap material and give it the name we found in the Collada file from the triangles node.		 
_materialsList = new MaterialsList(); _materialsList.addMaterial( _shoeMaterial , "a_Backed_Shoe2SG");
// the shoeDae is an instance of a DAE class and is passed the loaded DAE file in binary form and the materials list we created above.
_shoeDae.load(_loader.getBinary("shoe_model") ,_materialsList);
 
// the DAE is then added to the Papervision scene
scene.addChild(_shoeDae);

NB: _loader is an instance of the Bulk Loader class. You can check out this library here.

Swapping textures at runtime.

To swap the material at runtime which obviously happens often I made a setter function on the Shoe class.

public function set material( material:BitmapData):void {
        // if the shoe material exists, dispose of the bitmap
	if (_shoeMaterial) _shoeMaterial.bitmap.dispose();
	// make a new bitmap material
	_shoeMaterial = new BitmapMaterial( material );
	// replace the material using the name that we found in the Collada  file above
	_shoeDae.replaceMaterialByName( _shoeMaterial , "a_Backed_Shoe2SG);
}

One of the trickiest challenges was turning the area of the shoe the user was editing into the BitmapData to pass to this function and use as the new material for the shoe.

In brief the recipe for this was:
1. Grab a copy of the current shoe material with everything the user has already created on it. This is a 1600×1600 Bitmap.
2. Create a holder sprite to build the new image in. Add this current shoe material as the bottom layer.
3. Grab a copy of the original material, a clean canvas with nothing on it.
4. Mask the original material with the exact shape of the area the user is editing. This mask needs to be rotated, scaled and translated to the correct position on the original material. Layer this on top of the current shoe material.
5. So now the resulting image should show everything the user has added to the rest of the texture but the current area they are editing will be clear.
6. Grab the BitmapData from the area of the shoe the user is currently editing with all the graphics etc the user has added.
7. Again mask this so that graphics that go outside the editable area are not going to be included on the final image.
8. Layer this on top, rotating, scaling and translating as necessary with a Multiply blend mode so the stitching comes through from the original texture.
9. BitmapData.draw the resulting holder sprite with these layers on it and pass to the material function above to swap out the material.

Everything is easier to understand in pictures so here it is:

Here is the original shoe material:

And here it is an example of what it looks like once edited:

Preformance and Rendering

Other things to consider were balancing performance with quality. We tried to keep the polygons on the shoe model as low as possible before it really became noticeable and keep the quality of the material image high.

When both the chains and the studs are added, as these are additional models the polygon count goes up considerably so we really tried hard to keep this as low as possible. When flash is asked to render anything over 3000 triangles, it really starts to show.

Additional to that we had problems with Z-Sorting due to the many overlapping parts of the shoe, especially around the laces. To solve this we needed to employ the services of the QuadrantRenderEngine with the Z sorting filter. However, as there are more calculations with every render, this slowed things down even more.

To use this advanced render engine, and keep the polygon count high while not affecting performance we made it so instead of constantly rendering, the Papervision scene was only updated when needed, i.e. when rotated or the texture has been changed.

Saving the entries.

A major part of this campaign is the competition. Every shoe designed and submitted needs to be saved for the gallery and judging.

To do this there are two main things that are needed. The main texture of the shoe, the 1600×1600 jpg that holds the users design and the small thumbnail of the shoe with the design in place for use in the gallery.

The main texture of the shoe is always present in the current BitmapMaterial of the shoe. We just get it out using the BitmapMaterial.bitmap property.

Capturing the thumbnail is a little more involved. First we needed to rotate the shoe to the correct position so that all thumbnails are in the same position. Then we do a BitmapData.draw of the viewport after doing a bit of Matrix scaling and translating.

So we now have the two BitmapData objects for the two images, we just need to save them to the server along with the rest of the users entry details. To save the images we encode the images with Adobes JPGEncoder class (for the big texture) and the PNGEncoder (for the thumbnail). These are both available in the corelib.

Next we encode the resulting ByteArrays with the Base64 encoder. You can grab this from Dynamic Flash.

Code for saving the main image.

// the bitmap data for the current shoe material
var imageBd:BitmapData = Shoe2.getInstance().shoeMaterial.bitmap; imageBd = Shoe2.getInstance().shoeMaterial.bitmap;
// the jpg encoder and the resulting ByteArray
var j:JPGEncoder = new JPGEncoder(50); 
var bytes:ByteArray = j.encode( imageBd); bytes.position = 0; 
// Encoding to Base64 and saving as part of the entry data object.
entryData.texture_image = Base64.encodeByteArray(bytes);

The whole package containing the users entry data along with the Base64 encoded images are sent to our custom PHP backend in one tidy package via AMFPHP.

The obvious final step is PHP decoding the base64 images and saving them to disk storing the resultant URL with the rest of the entry data.

Summary.

As I warned at the start of this post, the above is only a very brief overview of how things were done. There was so much more to this than just the shoe but obviously this was the focus and main technical challenge of the site. Any feedback, questions or requests for further detail are obviously welcomed.

]]> http://lab.publicreative.com/2009/04/inside-the-classic/feed/ 2 3dsMax Texture Baking and Papervision http://lab.publicreative.com/2009/01/3dsmax-texture-baking-and-papervision/ http://lab.publicreative.com/2009/01/3dsmax-texture-baking-and-papervision/#comments Fri, 23 Jan 2009 19:01:32 +0000 Mark http://lab.publicreative.com/?p=64 3d is really exciting us at the moment. Papervision is great but so far we’ve only used primitive shapes within Papervision to do all our work. Chris, our newest arrival in the Public development pit has been amazing us with his 3dsMax skills and of course prompted us to get up with the play and [...]]]> 3d is really exciting us at the moment. Papervision is great but so far we’ve only used primitive shapes within Papervision to do all our work. Chris, our newest arrival in the Public development pit has been amazing us with his 3dsMax skills and of course prompted us to get up with the play and start exporting from Max into flash.

It’s also prompted me, having no 3dsMax experience but plenty of Papervision experience to start having a play. After many hours at work and home coming up to speed with the basics of modelling, lightning and materials and learning how to texture bake and deal with UV maps I think I’ve got a handle on what this is all about.

Here’s the first test. Nothing amazing but the speakers are fully UVW unwrapped in 3dsMax and the textures are baked on.

Next up will be testing animation exported from 3dsMax and some more detailed modeling.

Click image to open:

(Please open the article to see the flash file or player.)


Here is the source:

package
{
	import com.publicreative.graphics.BackgroundGradient;
	import com.publicreative.pv.interaction.MouseGrab;
	import org.papervision3d.objects.parsers.DAE;
 
	import flash.events.Event;
	import flash.utils.ByteArray;
 
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.view.BasicView;
 
	[SWF(width = "600", height = "450", backgroundColor = "#000000", frameRate = "60")]
 
	public class BakedStage extends BasicView
	{
		[Embed(source="speakers.DAE", mimeType = "application/octet-stream")]
		private var SpeakerDAE:Class; 
 
		private var _dae:DAE;
		private var _stage:Cube;
		private var _grab:MouseGrab;
 
		private const DISTANCE:int = 1200;
 
		public function BakedStage()
		{
			super(stage.stageWidth , stage.stageHeight);
			init();
		}
 
		private function init():void
		{
			addChildAt(new BackgroundGradient(),0);
 
			var byteArray:ByteArray = new SpeakerDAE() as ByteArray;
 
			 _dae = new DAE( false);
 
			var ml:MaterialsList = new MaterialsList();
			ml.addMaterial( new BitmapFileMaterial("SpeakerImageMap.png",true) , "SpeakerImageMap.png" );
 
			//Speakers are texture baked round dae file.
			_dae.load( byteArray , ml);
			_dae.scale = 3.5;
			_dae.useOwnContainer = true;
			_dae.rotationY = 180;
			scene.addChild( _dae ); 
 
			//Stage is done in traditional way using a skinned cube.
			var stageML:MaterialsList = new MaterialsList();
			stageML.addMaterial( new BitmapFileMaterial("floorFront.jpg") , "back");
			stageML.addMaterial( new BitmapFileMaterial("floorSide.jpg") , "left");
			stageML.addMaterial( new BitmapFileMaterial("floorSide.jpg") , "right");
			stageML.addMaterial( new BitmapFileMaterial("floorTop.jpg") , "top");
			stageML.addMaterial( new ColorMaterial(0x111111) , "bottom");
			stageML.addMaterial( new ColorMaterial(0x111111), "front");  
 
			stageML.getMaterialByName("top").smooth = true;
 
			_stage = new Cube( stageML , 484 , 484 , 16, 4 , 1 , 4);
			_stage.y = -8;
			scene.addChild( _stage );
 
			camera.zoom = 100;
			camera.z = -DISTANCE;
 
			_grab = new MouseGrab(  camera , stage );
			_grab.addSingleAxis( MouseGrab.VERTICAL , MouseGrab.Y , 1000 , 10 , 30 );
			_grab.addDoubleAxis( MouseGrab.HORIZONTAL , MouseGrab.XZ, DISTANCE, 1000, 10 );
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			_grab.processFrame();
			super.onRenderTick(event);
		}
	}
}

Here is the MouseGrab class as a few people have requested. It’s far from my best work and pretty much untested so use at your own risk. MouseGrab. Things have been very busy here of late so sorry for the slow replies.

]]> http://lab.publicreative.com/2009/01/3dsmax-texture-baking-and-papervision/feed/ 11 PV3D with AS3DMod and Shaders http://lab.publicreative.com/2009/01/pv3d-with-as3dmod-and-shaders/ http://lab.publicreative.com/2009/01/pv3d-with-as3dmod-and-shaders/#comments Tue, 13 Jan 2009 19:45:40 +0000 Mark http://lab.publicreative.com/?p=30 This was my first attempt at using the AS3DMod Library so you can see where the previously posted example came from.

I’ve also added gouraud shading to make it a little more interesting.

Click image to open:

(Please open the article to see the flash file or player.)


Here is the source:

package
{
	import com.as3dmod.ModifierStack;
	import com.as3dmod.modifiers.Perlin;
	import com.as3dmod.plugins.pv3d.LibraryPv3d;
 
	import flash.display.Bitmap;
	import flash.display.Loader;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.Event;
 
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.shaders.GouraudShader;
	import org.papervision3d.materials.shaders.ShadedMaterial;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="600", height="400", backgroundColor="#000000", frameRate="31")]
 
	public class PublicFlag extends BasicView
	{
		[Embed(source="assets/flagLogo.gif")]
		public var Flag:Class;
 
		private var _plane:Plane;
		private var _mod:ModifierStack;
 
		private var _perlin:Perlin;
 
		private var _xPhaseVal:Number = 0;
		private var _yPhaseVal:Number = 0;
		private var _targXPhaseVal:Number = 0;
		private var _targYPhaseVal:Number = 0;
 
		private var _light:PointLight3D;
 
		public function PublicFlag()
		{
			super(stage.stageWidth, stage.stageHeight);
			init();
		}
 
		private function init():void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			stage.stageFocusRect = false;
 
			_light = new PointLight3D();
			_light.z = -100;
			_light.y = -100;
 
			var logo:Bitmap = new Flag() as Bitmap;
 
			var shader:GouraudShader = new GouraudShader( _light , 0xffffff , 0x555555 , 10);
			var mat:ShadedMaterial = new ShadedMaterial( new BitmapMaterial( logo.bitmapData) , shader);
			mat.doubleSided = true;
			_plane = new Plane( mat , logo.width , logo.height , 12, 8);
			_plane.useOwnContainer = true;
 
			camera.fov=34;
			scene.addChild( _plane );
 
			modify();
 
			startRendering();
		}
 
		private function modify():void
		{
			 _mod = new ModifierStack( new LibraryPv3d() , _plane );
 
			_perlin = new Perlin(3);
			_perlin.setFalloff( 0 , 1 );
 
			_mod.addModifier( _perlin );
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
		 	_xPhaseVal = (stage.mouseX - stage.stageWidth/2)/stage.stageWidth;
		 	_plane.rotationY += ( (160*_xPhaseVal)-_plane.rotationY)/10;
 
		 	_yPhaseVal = (stage.mouseY - stage.stageHeight/2)/stage.stageHeight;
		 	_plane.rotationX += ( (100 * _yPhaseVal) - _plane.rotationX)/10;
 
			_mod.apply();
			super.onRenderTick(event);
		}
	}
}
]]> http://lab.publicreative.com/2009/01/pv3d-with-as3dmod-and-shaders/feed/ 1 PV3D Page Flip with AS3Dmod and Effects http://lab.publicreative.com/2009/01/pv3d-page-flip-with-as3dmod-and-effects/ http://lab.publicreative.com/2009/01/pv3d-page-flip-with-as3dmod-and-effects/#comments Tue, 13 Jan 2009 17:52:58 +0000 Mark http://lab.publicreative.com/?p=7 We’ve made sites using Papervision in the past, but I’ve had a bit of time to really get to know it a lot better. There has been so much functionality added lately it’s hard to keep up!

I’ve also really enjoyed playing with the AS3Dmod library by Bartek Drozdz and using BitmapEffectLayer’s

The following project started as a simple idea for a gallery to showcase work that we have done but eventually evolved into more of a personal indulgence. Click anywhere to flip the page over.

To get the two sided Plane effect I’ve simply used a Cube that is 1px deep. The thing that frustrated me the most was trying to get the MovieMaterial holding the content of the image Loader instance to render the correct size. Initially I was creating the MovieMaterial’s at the same time I was initialising the Loaders but as there was no content in the loaders yet, the MovieMaterial rendered at its default size.

To fix this I initially assign a place holder Sprite that is the correct size to the MovieMaterial objects. Then when the Loader finishes loading the asset I switch the MovieMaterial that contains the Sprite for a new MovieMaterial that contains the image data from the Loader. This also means that the MovieMaterial does not have to be animated (updated on each render loop) improving performance.

It took me a long time find the method to replace materials, but it should have been pretty obvious.

_cube.replaceMaterialByName( /* new material */ , /* material name */);

Click image to open: Click again to flip:

(Please open the article to see the flash file or player.)

Also thanks to Zack Jordan for sharing his SWFLibrary class.

Here is the source:

package 
{
	import com.as3dmod.ModifierStack;
	import com.as3dmod.modifiers.Bend;
	import com.as3dmod.modifiers.Perlin;
	import com.as3dmod.plugins.pv3d.LibraryPv3d;
	import com.as3dmod.util.ModConstant;
	import com.as3dmod.util.Phase;
	import com.pixelwelders.util.SWFLibrary;
	import com.publicreative.utils.MathUtils;
 
	import flash.display.BlendMode;
	import flash.display.Loader;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.BlurFilter;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
 
	import gs.TweenLite;
	import gs.easing.*;
 
	import org.papervision3d.core.effects.BitmapLayerEffect;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.MovieMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.view.BasicView;
	import org.papervision3d.view.layer.BitmapEffectLayer;
 
	[SWF(width="560", height="295", backgroundColor="#ffffff", frameRate="31")]	
 
	public class PVModBedHeader extends BasicView
	{
		private var _plane:Plane;
		private var _mod:ModifierStack;
		private var _bend:Bend;
		private var _planeMouseX:Number;
		private var _planeMouseY:Number;
		private var _tweenX:Number = 0;
		private var _tweenY:Number= 0;
		private var _perlin:Perlin;
		private var _phase:Phase;
 
		private var _tweenObj:Object;
		private var _tweenObj2:Object;
		private var _tweenObj3:Object;
 
		private var _flipping:Boolean = false;
		private var _modified:Boolean = false;
		private var _effects:Boolean = false;
		private var _firstFlip:Boolean = true;
 
		private var _imageLoader1:Loader;
		private var _imageLoader2:Loader;
		private var _cube:Cube;
 
		private var _data:XML;
 
		private var _lib:SWFLibrary;
		private var _dataIndex:int = 0;
 
		private var _header:MovieClip;
		private var _body:MovieClip;
		private var _link:MovieClip;
 
		private var _bendStrength:Number = 0.4;
		private var _side:int = 0;
 
		private var _bitmapEffectLayer:BitmapEffectLayer;
		private var _blur:BlurFilter;
 
		private const BASE_DIR:String = "http://lab.publicreative.com/uploads/modBendHeader/";
 
 
		public function PVModBedHeader()
		{
			super(stage.stageWidth, stage.stageHeight);
			init();
		}
 
		private function init():void
		{
			stage.quality = StageQuality.MEDIUM;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			var xmlLoader:URLLoader = new URLLoader();
			xmlLoader.addEventListener(Event.COMPLETE , onData , false , 0 , true);
			xmlLoader.load( new URLRequest( BASE_DIR+"xml/assets.xml" ));
		}
 
		/**
		 * Once the image data has loaded start rendering and add effects
		 */
		private function onData(ev:Event):void
		{
			_data = XML(URLLoader(ev.target).data);
 
			_lib = new SWFLibrary();
			_lib.addEventListener( Event.COMPLETE , onLibComplete , false , 0 , true);
			_lib.load( BASE_DIR+"assets.swf");
 
			renderInit();
		}
 
		/**
		 * Setup papervision and materials and start rendering
		 */
		private function renderInit():void
		{
			stage.addEventListener( MouseEvent.CLICK , onFlip , false , 0 , true);
 
			// LOADERS.. one for each side of the plane
			_imageLoader1 = new Loader();
			_imageLoader1.contentLoaderInfo.addEventListener(Event.COMPLETE , onLoad1Complete , false , 0 , true);
			_imageLoader1.load( new URLRequest( BASE_DIR+_data.image[_dataIndex] ));
 
			_imageLoader2 = new Loader();
			_imageLoader2.contentLoaderInfo.addEventListener( Event.COMPLETE , onLoad2Complete , false , 0 , true);
			_imageLoader2.load( new URLRequest(BASE_DIR+ _data.image[_dataIndex+1] ));
 
			// PUT IN A PLACEHOLDER SPRITE TO FORCE THE RIGHT SIZE FOR THE LOADED IMAGES!
			var sprite:Sprite = new Sprite();
			sprite.graphics.beginFill(0xffffff);
			sprite.graphics.drawRect(0,0,454,294);
			sprite.graphics.endFill();
 
			var mt1:MovieMaterial = new MovieMaterial( sprite, false , false );
			var mt2:MovieMaterial = new MovieMaterial( sprite, false , false );
 
			mt1.smooth = true;
			mt2.smooth = true;
 
			var emptyMat:ColorMaterial = new ColorMaterial( 0xffffff ,0);
 
			// MATERIALS.. materials with loaders on two sides all other materials transparent color material
			var mats:MaterialsList = new MaterialsList();
			mats.addMaterial( emptyMat, "bottom");
			mats.addMaterial( emptyMat , "top" );
			mats.addMaterial( emptyMat , "left");
			mats.addMaterial( emptyMat , "right");
			mats.addMaterial( mt2 , "front" );
			mats.addMaterial( mt1 , "back");
 
			// CUBE.. that appears as a plane with two sides
			_cube = new Cube( mats, 454, 1, 294, 20, 10, 1 );
			_cube.useOwnContainer = true;
 
			// CAMERA..
			camera.fov = 40;
			camera.zoom = 90;
			scene.addChild( _cube);
 
			// USING OBJECTS TO STORE TWEEN VALUES..
			_tweenObj = new Object();
			_tweenObj2 = new Object();
			_tweenObj2.flipValue = 0;
			_tweenObj3 = new Object();
			_tweenObj3.bendValue = -_bendStrength;
 
			modifyInit();
			effectsInit();
 
 
		}
 
		/**
		 * Add bitmap effects layer for blur when flipping
		 * The amount of blur is animated as the cube flips
		 */
		private function effectsInit():void
		{
			_effects = true;
			_bitmapEffectLayer = new BitmapEffectLayer( viewport , stage.stageWidth , stage.stageHeight);
			_bitmapEffectLayer.renderAbove = true;
 
			viewport.containerSprite.addLayer( _bitmapEffectLayer ); 
 
			_bitmapEffectLayer.addDisplayObject3D( _cube );
			_blur = new BlurFilter(0,0);
			_blur.quality = 2;
			_bitmapEffectLayer.addEffect( new BitmapLayerEffect( _blur ));
 
			_bitmapEffectLayer.clearBeforeRender = true;
			_bitmapEffectLayer.drawLayer.blendMode = BlendMode.ADD;
		}
 
		/**
		 * ADD the background from the assets.swf
		 */
		private function onLibComplete(ev:Event):void
		{
			var background:Sprite = _lib.getSprite( "Background" );
			addChildAt( background , 0 );
		}
 
		/**
		 *  APPLY BEND AND PERLIN MODIFICATIONS
		 */
		private function modifyInit():void
		{
			_modified = true;
 
			_mod = new ModifierStack( new LibraryPv3d() , _cube );
 
			_bend = new Bend( -_bendStrength);
			_bend.constraint = ModConstant.NONE;
 
			_tweenX = 0.5;
			_tweenY = 0;
 
			_perlin = new Perlin( 0.5 );
 
			_mod.addModifier( _perlin );  
			_mod.addModifier( _bend );
		}
 
		/**
		 * AS MATERIALS are only placeholder sprites
		 * we must swap them out for the correct moviematerial containing the image loaders
		 * we can also unload the image once the loader is written to the movie material
		 */
		private function onLoad1Complete(ev:Event):void
		{
			var mt1:MovieMaterial = new MovieMaterial( _imageLoader1 , false , false);
			mt1.smooth = true;
			_cube.replaceMaterialByName( mt1 , "back" );
			mt1 = null;
			_imageLoader1.unload();
 
			if(_firstFlip)
			{
				TweenLite.from( _cube,2, {z:8000 , ease:Expo.easeOut });
				startRendering();
			}
		}
 
		private function onLoad2Complete(ev:Event):void
		{
			var mt2:MovieMaterial = new MovieMaterial( _imageLoader2 , false , false);
			mt2.smooth = true;
			_cube.replaceMaterialByName( mt2 , "front" );
			mt2 = null;
			_imageLoader2.unload();
		}
 
		/** 
		 * If the cube isn't flipping already.. flip it!
		 */
		private function onFlip(ev:Event):void
		{
			if(!_flipping) flip();
		}
 
		/**
		 * Tween the tween values and make it flip!
		 */
		private function flip():void
		{
			_flipping = true;
			_firstFlip = false;
 
			_tweenObj.tweenValue = 0;
 
			var flipTo:int = _tweenObj2.flipValue + 1;
			var bendTo:Number = (_tweenObj3.bendValue > 0) ? 3 : -3;
 
			TweenLite.to( _tweenObj ,1.5 , { tween:Quad.easeIn , tweenValue:1, onComplete:flipOut });
			TweenLite.to( _tweenObj2 , 3 , { tween:Sine.easeInOut , flipValue:flipTo  });
			TweenLite.to( _tweenObj3 , 1.5 , { tween:Quad.easeIn , bendValue:bendTo });
 
			_side = _tweenObj2.flipValue%2;
		}
 
		/**
		 * Half way through the flip
		 */
		private function flipOut():void
		{
			var bendTo:Number = (_tweenObj3.bendValue > 0) ? -_bendStrength : _bendStrength;
 
			TweenLite.to( _tweenObj ,1.5 , { tween:Quad.easeOut, tweenValue:0 , onComplete:flipComplete });
			TweenLite.to( _tweenObj3 , 1.5 , { tween:Quad.easeIn , bendValue:bendTo });
 
			_dataIndex++;
			if(_dataIndex>_data.image.length()-1) _dataIndex =0;
		}
 
		/**
		 * Finish the flip and load the next image on the reverse side
		 */
		private function flipComplete():void
		{
			_flipping = false;
 
			var targetLoader:Loader = (_side) ? _imageLoader2 : _imageLoader1;
 
			var ind:int = _dataIndex+1;
			if(ind > _data.image.length()-1) ind = 0;
			targetLoader.load( new URLRequest( BASE_DIR+ _data.image[ind] ));
		}
 
		/**
		 * Render the 3D scene every frame
		 */
		override protected function onRenderTick(event:Event = null):void
		{
			super.onRenderTick(event);
 
			if(_modified )
			{
				_planeMouseX = (-stage.stageWidth/2 + stage.mouseX) / stage.stageWidth ;
				_planeMouseY = (-stage.stageHeight/2 + stage.mouseY) / stage.stageHeight;
 
				if(_planeMouseX > 1) _planeMouseX = 0.99;
				if(_planeMouseX < -1) _planeMouseX = -0.99;
 
				if(_flipping)
				{
					_cube.rotationY = 180*_tweenObj2.flipValue;
					_planeMouseX *= (1 - _tweenObj.tweenValue);
					_bend.force=  _tweenObj3.bendValue;
					camera.zoom = 90-(_tweenObj.tweenValue * 50);
					if(_effects) _blur.blurX = _blur.blurY = _tweenObj.tweenValue*10;
				}
 
				_tweenX += ( _planeMouseX - _tweenX ) /30;
				_tweenY += ( _planeMouseY - _tweenY )/10;
 
				_bend.offset = 0.5 + _tweenX;
 
				_bend.angle = MathUtils.toRadians( 90 * _tweenY );
 
				_mod.apply();
			}
		}
	}
}
]]> http://lab.publicreative.com/2009/01/pv3d-page-flip-with-as3dmod-and-effects/feed/ 10