Tag Archive for 'MovieMaterial'

Papervision Explode Image / Rebuild

Published

on December 24, 2009

in Actionscript 3 Papervision, Actionscript 3.0, Papervision 3D, Source Code, Tutorials and TweenLite

. 3 Comments

In early 2008 I wrote a blog article on how to explode an image and rebuild it again. Recently this effect has been used in some amazing ways. Site's like Audi have taken this concept much further with the rows of these tiny boxes swimming in formation.

Today I decided to re-create that simple effect using the latest papervision code and provide a much needed update.

Creating this effect is actually fairly simple. You take an image, use some code to break it into smaller bitmaps which then are used as the materials for your planes. Then you just place the planes in a grid to re-create your image.

Here is a sample of the code that get's our image blocks to be used for our materials:

PLAIN TEXT

Actionscript:

//Creates a 30 x 18 bitmapData block
var bitmap_data:BitmapData = new BitmapData(cellWidth, cellHeight, true, 0x00FFFF);
//Create a new Matrix - A matrix is a rectangular array / table
//of numbers with any number of rows / columns.
var matrix:Matrix = new Matrix();
//Get's our desired x / y location information where we will
//pull a block of our image
matrix.translate( -cellWidth * cellX, -cellHeight * cellY);
//Write the data to our bitmap data object with our source and
//matrix / block info
bitmap_data.draw(imageMC, matrix);

Once you've created your grid you just need to store the locations of all your x,y,z,rotation etc so that when you break apart the image you can easily piece it back together.

PLAIN TEXT

Actionscript:

planeVO.origX = pl.x;
planeVO.origY = pl.y;
planeVO.origZ = pl.z;
planeVO.origRotationY = pl.rotationY;
planeVO.origRotationX = pl.rotationX;
planeVO.origRotationZ = pl.rotationZ;
planeVO.planeRef = pl;

PlaneVO is nothing more than a simple value object. A value object gives us a nice strongly typed object to store the variables we want to access later.

PlaneVO.as

PLAIN TEXT

Actionscript:

package
{
import org.papervision3d.objects.primitives.Plane;
/**
* ...
* @author Charlie Schulze, Woven Interactive, LLC
*/
public class PlaneVO
{
public var origX:Number;
public var origY:Number
public var origZ:Number
public var origRotationY:Number
public var origRotationX:Number
public var origRotationZ:Number
public var planeRef:Plane;
}
}

Now on to the full code. I have left comments throughout to explain what is happening. Try changing some of the math or swapping the image with your own. Once you mess with it for a little while you'll find it's easy to create some amazing effects.

PLAIN TEXT

Actionscript:

package
{
import br.com.stimuli.loading.BulkLoader;
import br.com.stimuli.loading.BulkProgressEvent;
import com.foomonger.utils.Later;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.geom.Matrix;
import gs.easing.Quint;
import gs.TweenMax;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
/**
* ...
* @author Charlie Schulze, charlie[at]woveninteractive[dot]com
*/
public class Main extends BasicView
{
protected var bulkInstance:BulkLoader;
protected var imageMC:MovieClip;
protected var imageString:String
protected var planeVOs:Array = [];
protected var planesContainer:DisplayObject3D;
public function Main():void
{
super();
//Set the image we want to load
imageString = "images/king.gif";
//Load our image
loadImage();
}
protected function loadImage():void
{
//BulkLoader is complete overkill for this but thought it would be a
//nice extra for everyone to see in action. Extremely useful set of classes.
//Create our unique bulkInstance / available anywhere in our app by
//that name "bulkImageLoader"
bulkInstance = new BulkLoader("bulkImageLoader");
//Add our image
bulkInstance.add(imageString);
//Add our listeners
bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onImageLoaded);
//Start Loading
bulkInstance.start();
}
protected function onImageLoaded(evt:BulkProgressEvent):void
{
init();
}
protected function init():void
{
createChildren();
explode();
startRendering();
}
protected function createChildren():void
{
//Create the clip we will be getting our bitmap data from
imageMC = new MovieClip();
//add our bitmap
imageMC.addChild(bulkInstance.getBitmap(imageString));
//Optional - Create a container to hold our planes
planesContainer = new DisplayObject3D();
//Array to store our value objects
planeVOs = [];
for (var i:int = 0; i <65; i++)
{
/**
* Here is how we get our loop / colunm / cellWidth / cellHeight numbers
*
* 5 columns * 13 rows = 65 (number of loops)
* 5 columns divided by the width (150) of our image = 30 pixels
* 13 rows divided by the height (234) of our image = 18 pixels
*/
var columns:uint = 5;
var cellWidth:int = 30;
var cellHeight:int = 18;
var cellX:int = (i % columns)
var cellY:int = Math.floor(i / columns);
//Creates a 30 x 18 bitmapData block
var bitmap_data:BitmapData = new BitmapData(cellWidth, cellHeight, true, 0x00FFFF);
//Create a new Matrix - A matrix is a rectangular array / table
//of numbers with any number of rows / columns.
var matrix:Matrix = new Matrix();
//Get's our desired x / y location information where we will
//pull a block of our image
matrix.translate( -cellWidth * cellX, -cellHeight * cellY);
//Write the data to our bitmap data object with our source and
//matrix / block info
bitmap_data.draw(imageMC, matrix);
//Create a bitmap with our bitmapData and add it to a movieclip
var bitmap:Bitmap = new Bitmap(bitmap_data);
var myMovie:MovieClip = new MovieClip();
myMovie.addChild(bitmap);
//Use the movieclip with our bitmap inside as our movieMaterial
//needs to be cast as a DisplayObject to work
var movieMat:MovieMaterial = new MovieMaterial(myMovie as DisplayObject, true);
movieMat.smooth = true;
//Create a plane with our moviemat the size of our cellWidth/Height
var pl:Plane = new Plane(movieMat, cellWidth, cellHeight, 0, 0);
//Create a value object to store our origianl infomation
//for when we animate we can then rebuild easily
var planeVO:PlaneVO = new PlaneVO();
//We want to place the planes to re-create our original image
pl.x = ((cellX * cellWidth) + cellWidth) -(imageMC.width / 2);
pl.y = -((cellY * cellHeight) + cellHeight) +(imageMC.height / 2);
//Set the original properties of our value object
planeVO.origX = pl.x;
planeVO.origY = pl.y;
planeVO.origZ = pl.z;
planeVO.origRotationY = pl.rotationY;
planeVO.origRotationX = pl.rotationX;
planeVO.origRotationZ = pl.rotationZ;
planeVO.planeRef = pl;
//Add our planeVO to our array
planeVOs.push(planeVO)
//Add planes to our container
planesContainer.addChild(pl);
}
//Add our container to our scene
scene.addChild(planesContainer);
camera.zoom = 100;
//rotate our container for an skewed effect
planesContainer.rotationY = 30;
planesContainer.rotationX = 30;
}
protected function explode():void
{
//Create a for loop of our plane objects set random numbers to explode our image
for (var i:int = 0; i <planeVOs.length; i++)
{
var planeVO:PlaneVO = planeVOs[i];
var plane:Plane = planeVO.planeRef;
var ranNumber:Number = Math.round(Math.random() * 200 - 200);
var delayAmount:Number = i * .05;
var shortDelayAmount:Number = delayAmount * .6;
var randomX:Number = (Math.random() * 4000) - 6000;
var randomY:Number = (Math.random() * 8000) - 1000;
var randomZ:Number = (Math.random() * 1000) + 5000;
TweenMax.to(plane, 2, { x:planeVO.origX + randomX, delay:shortDelayAmount,
z:randomZ, y:150 + planeVO.origY + randomY,
rotationY:180,ease:Quint.easeInOut} );
}
//In 3 seconds rebuild
Later.call(this, rebuild, 3000, true);
}
protected function rebuild():void
{
//Rebuild our image with the locations we stored in our VO
for (var i:int = 0; i <planeVOs.length; i++)
{
var planeVO:PlaneVO = planeVOs[i];
var plane:Plane = planeVO.planeRef;
var delayAmount:Number = i * .005;
TweenMax.to(plane, 1.8, { x:planeVO.origX, delay:delayAmount,
z:planeVO.origZ, y:planeVO.origY,
rotationY:planeVO.origRotationY,ease:Quint.easeInOut} );
}
//In 5 seconds explode the image again
Later.call(this, explode, 5000, true);
}
}
}

Delicious Digg This Post Facebook Stumble This Post

11. Advanced Interactivity 2

Published

Charlie

on February 21, 2008

in Tutorials

. 57 Comments

**UPDATE
This tutorial has been updated

This tutorial will show you how to handle full interactivity on an objects surface, just as if it's a normal movieclip.

For my example, I've made this. The red spot in the centre is a button. You can click it to toggle it's glow on and off. The other button will reveal how it works!

There are other ways to do this, but I think this way is the easiest and most hassle-free, and it's pretty fast.

I've super-commented the source code, so from reading the comments in the code you should be able to figure out exactly what's going on.

The basic idea is, you add the movie clip which is being used as the texture to the scene, but make it invisible. You then move it so that your mouse is over the correct part of the movieclip, when your mouse touches the texture on the 3d model. I think the "Show Movieclip" button on the cube above will explain better than I can :)

PLAIN TEXT

Actionscript:

package {
import flash.display.Bitmap;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.events.InteractiveScene3DEvent;
public class Main extends PaperBase {
// This is the movieclip that we'll use as the texture.
private var movie:MovieClip = new MovieClip();
// This movieclip will be completley transparent and will hold the
// texture movieclip, then move it to the correct loaction under the mouse.
private var movieParent:MovieClip = new MovieClip();
// These are buttons that I'm going to add to the texture movieclip
private var button:MovieClip = new MovieClip();
private var showbutton:MovieClip = new MovieClip();
// A "MovieMaterial" will use a movieclip as a texture.
private var mat:MovieMaterial;
// The cube that we're going to texture..
private var cube:Cube;
// This will import the file "E:/Papervision/images/showtex.jpg" to the project, and
// store the data in "ButtonIm". (This is the "Show Movieclip" Button)..
[Embed(source = "E:/Papervision/images/showtex.jpg")] private var ButtonIm:Class;
public function Main() {
// Initiate, 400px wide, 400px tall..
init(400, 400);
}
override protected function init3d():void {
// - See the prepareMovieclip function. This just builds the movieclip called "movie".
// You can use ANY movie clip for this..
prepareMovieclip();
// Prepare out moviematerial. Make it animated and interactive.
mat = new MovieMaterial(movie, false, true);
mat.interactive = true;
// Zoom in a bit..
default_camera.zoom = 5;
// Prepare the cube.
cube = new Cube(new MaterialsList( { all: mat } ), 500, 500, 500, 4, 4, 4);
// Listen for when the mouse is moved over the cube.
// Trigger the mMove function when this happens.
cube.addEventListener( InteractiveScene3DEvent.OBJECT_MOVE, mMove);
// Add the cube to the scene.
default_scene.addChild(cube);
// The movieParent movieclip will hold the movieclip which is being used
// as the texture. It will then move depending on the mouse posirion.
movieParent.addChild(movie);
// Make it invisible.
movieParent.alpha = 0;
// Add the movieParent movieclip to the stage.
addChild(movieParent);
}
private function prepareMovieclip():void {
// - This code will set up our movieclip which is going to be used
// as the texture for the cube.
// Draw Outline:
movie.graphics.beginFill(0xFFFFFF);
movie.graphics.drawRect(0, 0, 500, 500);
movie.graphics.endFill();
movie.graphics.beginFill(0x000000);
movie.graphics.drawRect(0, 0, 10, 500);
movie.graphics.drawRect(490, 0, 10, 500);
movie.graphics.drawRect(0, 0, 500, 10);
movie.graphics.drawRect(0, 490, 500, 10);
movie.graphics.endFill();
// Draw Circular Button:
button.graphics.beginFill(0xBB0000);
button.graphics.drawCircle(0, 0, 50);
button.graphics.endFill();
button.x = 250;
button.y = 250;
button.buttonMode = true;
// Load bitmap button texture:
var Bim:Bitmap = new ButtonIm();
// Draw "Show Movieclip" Texture:
showbutton.graphics.beginBitmapFill(Bim.bitmapData);
showbutton.graphics.drawRect(0,0,100,30);
showbutton.graphics.endFill();
showbutton.buttonMode = true;
showbutton.x = 380;
showbutton.y = 450;
// Add the buttons to the movieclip
movie.addChild(showbutton);
movie.addChild(button);
// -- Listen for the buttons to be clicked --
button.addEventListener(MouseEvent.CLICK, mClickButton);
showbutton.addEventListener(MouseEvent.CLICK, showHide);
// --
}
private function showHide( e:MouseEvent ):void {
// The "Show Movieclip" button has been clicked
if (movieParent.alpha == 0) { // If it's invisible,
movieParent.alpha = 0.2; // Make it slightly visible.
}else {
movieParent.alpha = 0; // Or make it invisible again
}
}
private function mClickButton(e:MouseEvent):void {
// The cental round button has been clicked.
if(button.name == "on"){
button.filters = null;
button.name = "off"
}else {
button.filters = [new GlowFilter(0x000000, 1, 15, 15, 10, 1)];
button.name = "on";
}
}
private function mMove( e:InteractiveScene3DEvent ):void {
// This code is run when the mouse is moved on the cube.
// This will move the movieclip to the right place beneath
// the mouse.
movieParent.x = root.mouseX -e.x;
movieParent.y = root.mouseY -e.y;
}
override protected function processFrame():void {
// Spin our cube a bit.
cube.yaw(0.25);
cube.pitch(0.25);
}
}
}

The image that's embedded in the code can be found here: showtex.jpg

Have fun! More Examples coming soon.

Delicious Digg This Post Facebook Stumble This Post

10. Advanced Interactivity

Published

Charlie

on February 17, 2008

in Tutorials

. 72 Comments

**UPDATE
This tutorial has been updated:
Updates:
1) Removed InteractiveScene3DEvent and replaced it with standard MouseEvents
2) Updated to use papervision's BasicView.as class

Today we're going to learn how to handle more advanced interactivity. We'll be making something like this:

Click on a face of the cube to zoom into it. Click it again to make the cube spin again.

So, in this tutorial I'm going to show you exactly how to work out which material has been clicked on the cube and act accordingly.

If you haven't read it already, I strongly suggest that you read the Basic Interactivity tutorial first or you'll probably miss something.

Ok, so on to the code.

Firstly we'll want six materials to apply to each face of the cube. Here are mine, although you can create whatever materials you like:

PLAIN TEXT

Actionscript:

private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");

So, in this code I'm just loading six images from my server to use as each face.

Also, add the following declaration beneath the texture declarations to hold our Cube object:

PLAIN TEXT

Actionscript:

private var cube:Cube;

Now we need to set up the 3d initiation code. In this code we will firstly set all of our materials as interactive, and then give each of our materials a name. This is VERY important to be able to easily find out which material has been clicked. If we didn't give each material a name then we wouldn't be able to easily work out which face has been clicked.

So, add the following code to your init3d() function:

PLAIN TEXT

Actionscript:

override protected function init3d():void {
// We need to be able to identify each side. We'll do this
// by asssigning names to each material. During this process
// we'll also make the materials interactive.
frontMaterial.interactive = true;
frontMaterial.name = "front";
backMaterial.interactive = true;
backMaterial.name = "back";
leftMaterial.interactive = true;
leftMaterial.name = "left";
rightMaterial.interactive = true;
rightMaterial.name = "right";
topMaterial.interactive = true;
topMaterial.name = "top";
bottomMaterial.interactive = true;
bottomMaterial.name = "bottom";
// ---------------------------------------------
cube = new Cube(new MaterialsList( {
front: frontMaterial,
back: backMaterial,
left: leftMaterial,
right: rightMaterial,
top: topMaterial,
bottom: bottomMaterial
} ), 500, 500, 500, 3, 3, 3);
cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
default_scene.addChild(cube);
}

So, In this code, we've set each material as interactive, given each one a sensible name, and initialised our cube with the materials assigned to the correct faces.

We then add an event listener to trigger the "onPress" event when the cube is clicked, then finally we add the cube to the scene.

We've now got a cube with six materials on it listening for a click event.

Now, the code which will let us work out which face has been clicked:

PLAIN TEXT

Actionscript:

private function onPress( e:InteractiveScene3DEvent ):void {
switch(e.face3d.material.name) {
case "front":
// This code will be run when the front face is clicked
break;
case "back":
// This code will be run when the back face is clicked
break;
case "left":
// This code will be run when the left face is clicked
break;
case "right":
// This code will be run when the right face is clicked
break;
case "top":
// This code will be run when the top face is clicked
break;
case "bottom":
// This code will be run when the bottom face is clicked
break;
}
}

Pretty self explanitary. The "e" variable in this code holds lots of data about the click event, including which material has been clicked, so, because we know which material is on each face, we can tell by the materials name which face has been clicked!

With a little bit of code, you can make a nice spinning cube gallery like the example above:

Here is my final code, have fun!

PLAIN TEXT

Actionscript:

package {
import flash.display.DisplayObject;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.objects.primitives.Cube;
public class Main extends PaperBase {
private var frontMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/front.jpg");
private var backMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/back.jpg");
private var leftMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/left.jpg");
private var rightMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/right.jpg");
private var topMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/top.jpg");
private var bottomMaterial:BitmapFileMaterial = new BitmapFileMaterial("http://papervision2.com/wp-content/pvTex/bottom.jpg");
private var targetrotationX:Number = 0;
private var targetrotationY:Number = 0;
private var targetrotationZ:Number = 0;
private var tweening:Boolean = false;
private var cube:Cube;
public function Main() {
init(400, 400);
}
override protected function init3d():void {
// We need to be able to identify each side. We'll do this
// by asssigning names to each material. During this process
// we'll also make the materials interactive.
frontMaterial.interactive = true;
frontMaterial.name = "front";
backMaterial.interactive = true;
backMaterial.name = "back";
leftMaterial.interactive = true;
leftMaterial.name = "left";
rightMaterial.interactive = true;
rightMaterial.name = "right";
topMaterial.interactive = true;
topMaterial.name = "top";
bottomMaterial.interactive = true;
bottomMaterial.name = "bottom";
// ---------------------------------------------
cube = new Cube(new MaterialsList( {
front: frontMaterial,
back: backMaterial,
left: leftMaterial,
right: rightMaterial,
top: topMaterial,
bottom: bottomMaterial
} ), 500, 500, 500, 3, 3, 3);
// Listen for the click:
cube.addEventListener( InteractiveScene3DEvent.OBJECT_PRESS, onPress);
// Add to scene:
default_scene.addChild(cube);
}
private function onPress( e:InteractiveScene3DEvent ):void {
// If the cube has been moved to the front:
if (tweening) {
// Let it rotate again
tweening = false;
}else {
// Find which rotation we need to be able to see
// the face image:
switch(e.face3d.material.name) {
case "front":
targetrotationX = 0;
targetrotationY = 180;
targetrotationZ = 0;
tweening = true;
break;
case "back":
targetrotationX = 0;
targetrotationY = 0;
targetrotationZ = 0;
tweening = true;
break;
case "left":
targetrotationX = 0;
targetrotationY = -90;
targetrotationZ = 0;
tweening = true;
break;
case "right":
targetrotationX = 0;
targetrotationY = 90;
targetrotationZ = 0;
tweening = true;
break;
case "top":
targetrotationX = 90;
targetrotationY = 0;
targetrotationZ = 0;
tweening = true;
break;
case "bottom":
targetrotationX = -90;
targetrotationY = 0;
targetrotationZ = 180;
tweening = true;
break;
}
}
}
override protected function processFrame():void {
if (tweening) {
// If a face has been clicked
if (default_camera.zoom <6.8) {
// If the camera isn't zoomed enough then zoom in a bit more:
default_camera.zoom += Math.sqrt(6.8-default_camera.zoom)/5;
}
// Test each rotation and rotate it towards the target rotation:
// X axis:
if (cube.rotationX <targetrotationX) {
cube.rotationX += Math.sqrt(targetrotationX-cube.rotationX);
cube.rotationX = Math.round(cube.rotationX);
}else if (cube.rotationX> targetrotationX) {
cube.rotationX -= Math.sqrt(cube.rotationX-targetrotationX);
cube.rotationX = Math.round(cube.rotationX);
}
// Y axis:
if (cube.rotationY <targetrotationY) {
cube.rotationY += Math.sqrt(targetrotationY-cube.rotationY);
cube.rotationY = Math.round(cube.rotationY);
}else if (cube.rotationY> targetrotationY) {
cube.rotationY -= Math.sqrt(cube.rotationY-targetrotationY);
cube.rotationY = Math.round(cube.rotationY);
}
// Z axis:
if (cube.rotationZ <targetrotationZ) {
cube.rotationZ += Math.sqrt(targetrotationZ-cube.rotationZ);
cube.rotationZ = Math.round(cube.rotationZ);
}else if (cube.rotationZ> targetrotationZ) {
cube.rotationZ -= Math.sqrt(cube.rotationZ-targetrotationZ);
cube.rotationZ = Math.round(cube.rotationZ);
}
}else {
// If the camera is zoomed in, it shouldn't be now
if (default_camera.zoom> 2) {
// So zoom out a bit.
default_camera.zoom -= Math.sqrt(default_camera.zoom-2)/5;
}
// Rotate the cube a bit:
cube.rotationX += 2;
cube.rotationY += 2;
// Make sure that we dont "wind up" the rotation
if (cube.rotationX>= 360) cube.rotationX = 0;
if (cube.rotationY>= 360) cube.rotationY = 0;
}
}
}
}

Delicious Digg This Post Facebook Stumble This Post

2010 Flash And The City Speaker

RSS Feed

Tag Archive for 'MovieMaterial'

Papervision Explode Image / Rebuild

11. Advanced Interactivity 2

10. Advanced Interactivity

Blogroll

Recent Posts

Pages

Tag Archive for 'MovieMaterial'

Papervision Explode Image / Rebuild

11. Advanced Interactivity 2

10. Advanced Interactivity

Blogroll

Recent Posts

Tags

Pages