Papervision 2.0 – Exploding and Rebuilding an Image

[kml_flashembed movie="image-explode.swf" height="300" width="550" /]

I took some time last week to have some fun with Papervision. The goal was to just take an image (any image) and have it explode into pieces and then rebuild it. While searching around for code or tutorials I have only found a few where the items on the stage go back into a controlled state. So over the next few weeks I am going to try to create a few examples of things that could be used IN a website rather than having the Papervision BE the website. I am not sure that makes sense. While I love experiments I like to have things I can use on everyday websites. This example I probably be using when I launch my new site. It’s just something to break away from the ole fade in and out motion.

If you want to test this code on your own computer you will need to download a few things first. :)

1) Papervision 2.0

2) Foomonger’s Code (Call Later)

3) Tweener

4) The Source

[as]
package
{
import flash.display.*;
import flash.events.*;
import flash.geom.Matrix;
import flash.geom.Point;

import caurina.transitions.*

import com.foomonger.utils.Later;

import org.papervision3d.cameras.FreeCamera3D;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.MovieMaterial;
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;

public class PVImageExplode extends MovieClip
{
private var viewport :Viewport3D;
private var scene :Scene3D;
private var camera :FreeCamera3D;

private var block :BitmapFileMaterial;
private var movieBlock :MovieMaterial;

private var blocksArray :Array;
private var planeArray :Array;
private var clips_array :Array;

private var renderer :BasicRenderEngine;

private var __holder :D isplayObject3D;
private var __startCamZ :Number;

private var __homePage :MovieClip;
private var __grass :D isplayObject;
private var __grassHolder :MovieClip;

private var __col :Number;
private var __rows :Number;
private var __blockWidth :Number;
private var __blockHeight :Number;

private var __yawAmount :Number = 0;

public function PVImageExplode()
{
init()
}

private function init():void
{
createChildren();
size();

initPapervision();
initMaterials();
initObjects();
initEvents();
}

//———————————————————————–
//Adds image to the stage to be then broke apart
//———————————————————————–

protected function createChildren():void
{

__grassHolder = new MovieClip();
__grass = new GrassItem();
__grassHolder.visible = false;
__grassHolder.addChild(__grass)

addChild(__grassHolder);

}

protected function size():void
{
__col = 4;
__rows = 10;

}

//———————————————————————–
//Papervision init setup
//———————————————————————–

private function initPapervision():void
{
viewport = new Viewport3D(1000,600,false,true,false);
addChild(viewport);

scene = new Scene3D();
camera = new FreeCamera3D();
renderer = new BasicRenderEngine();

camera.zoom = 11;
__startCamZ = -6000

}

//———————————————————————–
//Papervision materials setup
//———————————————————————–

private function initMaterials():void
{
blocksArray = [];

clips_array = new Array();

var __w:int =Math.ceil(__grassHolder.width / __col);
var __h:int =Math.ceil(__grassHolder.height / __rows);

__blockWidth = __w;
__blockHeight = __h;

var matrix :Matrix;
var bitmap_data :BitmapData;
var point :P oint;
var clip :MovieClip;
var columns :Number = __col;
var cellWidth :Number = __blockWidth;
var cellHeight :Number = __blockHeight;
var cellX :Number
var cellY :Number
var bx :Number
var by :Number
var bitmap :Bitmap

for (var i:int=0; i < (__rows * __col); i++)
{

cellX = i % columns;
cellY = Math.floor(i / columns);

bitmap_data = new BitmapData(__w,__h,true,0x00FFFFFF);
matrix = __grassHolder.transform.matrix;

bx = (cellX * cellWidth);
by = cellY * cellHeight;

matrix.translate(-__w * cellX, -__h * cellY);

bitmap_data.draw(__grassHolder,matrix);
clip = new MovieClip();
clips_array.push(clip);
clip.id = i;
addChild(clip);

point = new Point(__grassHolder.x + __w * cellX, __grassHolder.y + __h * cellY);

bitmap =new Bitmap(bitmap_data);
clip.addChild(bitmap);

clip.visible = false;
clip.x = point.x;
clip.y = point.y;
}

for(var k:uint = 0;k<clips_array.length;k++)
{
movieBlock = new MovieMaterial(clips_array[k],true);
movieBlock.doubleSided = true;
blocksArray.push(movieBlock);
}

}

//———————————————————————–
//Papervision objects setup (planes etc)
//———————————————————————–

private function initObjects():void
{

planeArray = [];

__holder = new DisplayObject3D();
__holder.x = -420;
__holder.y = 280

scene.addChild(__holder);

for(var k:uint = 0;k< blocksArray.length;k++)
{
var plane:Plane = new Plane(blocksArray[k],__blockWidth,__blockHeight,3,3);

var columns:Number = __col;
var cellWidth:Number = __blockWidth;
var cellHeight:Number = -__blockHeight;
var cellX:Number = k % columns;
var cellY:Number = Math.floor(k / columns);

plane.x = (cellX * cellWidth);
plane.y = cellY * cellHeight;

planeArray.push({plane:plane,pX:plane.x,pY:plane.y,pZ:plane.z,pR:plane.rotationY})

__holder.addChild(plane);
}
Later.call(this, explode, 500, true);
}

//———————————————————————–
//Start enterframe render event
//———————————————————————–

public function initEvents():void
{
this.addEventListener(Event.ENTER_FRAME,renderEvent);
}

//———————————————————————–
//Killin it
//———————————————————————–

public function killEvents():void
{
this.removeEventListener(Event.ENTER_FRAME,renderEvent);
}

//———————————————————————–
//Render the stage
//———————————————————————–

protected function renderEvent(e:Event):void
{
for(var i:uint = 0; i<planeArray.length;i++)
{
var plane = planeArray[i].plane;

plane.yaw(__yawAmount);

}

renderer.renderScene(scene,camera,viewport);
}

protected function resumeYaw():void
{
__yawAmount = 10;
}

//———————————————————————–
//The explosive magic (could be on a button click instead of later calls)
//———————————————————————–

protected function explode(e:Event = null):void
{
for(var i:uint = 0; i<planeArray.length;i++)
{
var plane = planeArray[i].plane;
var __x:Number = Math.random() * 3000 – 1000;
var __y:Number = Math.random() * 1000 – 500;
var __z:Number = Math.random() * 1000 – 500;
var __rY:Number = Math.random()* 720;

Tweener.addTween(plane,{x:__x,y:__y,z:__z,rotationY:__rY,transition:”easeInOutQuint”,time:1})
}

Tweener.addTween(camera,{z:__startCamZ,x:1000,y:-400,transition:”easeInOutQuint”,time:1,onComplete:resumeYaw})

Later.call(this, putBackTogether, 5000, true);
}

//———————————————————————–
//The Humpty Dumpty
//———————————————————————–

protected function putBackTogether(e:Event = null):void
{
Tweener.addTween(camera,{z:-1000,x:0,y:0,transition:”easeOutQuint”,time:.3})
__yawAmount = 0;
for(var i:uint = 0; i<planeArray.length;i++)
{
var plane:Plane = planeArray[i].plane;
var __x:Number = planeArray[i].pX
var __y:Number = planeArray[i].pY
var __z:Number = planeArray[i].pZ
var __rY:Number = planeArray[i].pR

Tweener.addTween(plane,{x:__x,y:__y,z:__z,rotationY:__rY,delay:.3,transition:”easeInOutQuint”,time:1})
}
Later.call(this, explode, 5000, true);
}

}
}[/as]

12 Responses to “Papervision 2.0 – Exploding and Rebuilding an Image”


  • Great example! Can you tell me what class is GrassItem ? My flex builder is blocking on that undefined class.

    Regards,
    Phil

  • Hey Phil,

    If you want to use it in flexbuilder you just need to add this

    [Embed(source="assets/anyImage.jpg")]
    protected var GrassItem:Class;

    This will link an external image to the class called GrassItem.

    The rest is just making sure you have your papervision / other classes linked in your build path. :)

    Hope that helps,
    Charlie

  • Sure it helps. Thanks a lot.

  • why dont u transform this into a class? i´m trying to use this effect in a movieclip, to break into 25 pieces (5×5) but, i cant…..

    can u recomend some tutorials? or maybe transform this into a class, so that other people can enjoy this better.

    thanks
    andre from portugal

  • Hey Andre,

    All of the classes are available for download within this post. Just look for:

    The Source

    Download that and you should have all the classes and be good to go.

    Charlie

  • Hey Andre,

    If you want to break up the image into more pieces just adjust this part of the code:

    __col = 4;//any number

    __rows = 10;//any number

    Then you may have to tweak x & y inside the

    initObjects() function

    Hope this helps.

    Charlie

  • hey charles.
    thanks so much for the help. your doing a great job with this blog. i really like the experiments. any doubt i´ll surely cantact you ;)
    thanks

    best regards
    andre

  • its so confusing:S can u tell me what part actually sets the parts devides them and then joins them together?:s
    i´m havind trouble with understanding the code… sorry:(

  • i´ve done it! i´ll soon post my experiment.
    thanks for the inspirations
    andre

  • Awesome. Can’t wait to see!

  • how can we do a loading bar for a pv3d file?

    anyone knows?

  • What version/branch of papervision are you using, I get errors but I think its something to do with the Later extension

Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word


Follow papervision2 on Twitter

RSS Feed