Tag Archive for 'Actionscript'

Full Source: Loading images via XML into a Papervision Coverflow

Papervision Coverflow

As a simple addition to the original coverflow post, showing the same example but with loading images via XML.

Click here to view the updated Papervision Coverflow Tutorial.

Simple Papervision Coverflow : Papervision2.com

Papervision Coverflow

There are plenty of AS3 Coverflow examples out there. Most of the examples and source I found had more options than I needed and all the extra code that comes with those features. Or you have to pay for them. I had a hard time finding a stripped down version to use as my coverflow base. Today I set out to create such a version.

Feel free to post any other coverflow examples that you have come across.

You can find the full sourceand some explanation on papervision2.com.

View the tutorial here.

Papervision Explode Image / Rebuild : Papervision2.com

I wanted to share another Papervision tutorial I wrote over at Papervision2.com. This is to replace my original post in 2008 about an exploding image. Full source included. Check it out.

Controlling a Papervision Cube

Papervision 3D Cube Example

View Example

The goal for this example was to create a simple way to display a cube, then rotate it one side at a time. The image is just from Google Images which will be all 6 sides of the cube. This again like the exploding image example illustrates some control over your elements. You can easily modify this example to include mouse events that you can use trigger a view each side of the cube.
[as]
package
{
import caurina.transitions.Tweener;

import com.foomonger.utils.Later;

import flash.display.*;

import flash.events.Event;

import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cone;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

public class PapervisionControlledCube extends Sprite
{
private var __camera:Camera3D;
private var __scene:Scene3D;
private var __viewport:Viewport3D;
private var __renderer:BasicRenderEngine;

private var __cube:Cube;
private var __matList:MaterialsList;

private var __width:Number;
private var __height:Number;

private var __background:Shape;

//Only needed if you are linking the image from FlexBuilder
//[Embed(source="assets/brick.png")]
//public var Brick:Class;

protected var __brick:DisplayObject;

protected var __brickClip:MovieClip;

protected var __rotation:Number;

public function PapervisionControlledCube():void
{

init();

}
protected function init():void
{
__rotation = 0;

setDefaultWidthHeight();

//Only needed for flexbuilder
//setupStage();
//————————–

createChildren();
initPapervision();
initMaterials();
initObjects();
initEvents();
}
protected function setDefaultWidthHeight():void
{
__width = 500;
__height = 250;
}

protected function initPapervision():void
{
__scene = new Scene3D();
__camera = new Camera3D();

__camera.zoom = 11;
__camera.z = -5000;
__camera.y = 200;

__viewport = new Viewport3D(__width,__height,false,true,true);
__renderer = new BasicRenderEngine();
addChild(__viewport);
}

protected function initMaterials():void
{
__matList = new MaterialsList();

var movieMat:MovieMaterial = new MovieMaterial(__brickClip);

__matList.addMaterial( movieMat, “front” );
__matList.addMaterial( movieMat, “back” );
__matList.addMaterial( movieMat, “left” );
__matList.addMaterial( movieMat, “right” );
__matList.addMaterial( movieMat, “top” );
__matList.addMaterial( movieMat, “bottom” );

}

protected function initObjects():void
{
__cube = new Cube(__matList,250,130,130);
__scene.addChild(__cube);

Later.call(this,zoomIn,1000,true);

}
protected function zoomIn(e:Event = null):void
{
Tweener.addTween(__camera,{z:-1000,transition:”easeInOutQuint”,time:1,onComplete:rotateCube})
}

//———————————————————————–
//Rotate Cube
//———————————————————————–

protected function rotateCube(e:Event = null):void
{

__rotation += 90;
Tweener.addTween(__cube,{rotationY:__rotation,delay:.6,transition:”easeInOutQuint”,time:1,onComplete:rotateCube})
}

protected function initEvents():void
{
this.addEventListener(Event.ENTER_FRAME,render);
}

protected function render(e:Event):void
{
__renderer.renderScene(__scene,__camera,__viewport,true);
}

protected function createChildren():void
{
__brick = new Brick();
__brickClip = new MovieClip();
__brickClip.addChild(__brick);

}
//Only used in flexbuilder
private function setupStage():void
{
stage.stageWidth = __width;
stage.stageHeight = __height;
stage.align = “cc”;
stage.scaleMode = “noScale”;
stage.stageFocusRect = true;

}
}
}
[/as]
Download Source

Other classes used:

1) Papervision 2.0

2) Foomonger’s Code (Call Later)

3) Tweener

Papervision 2.0 – Getting started from a simple starting example

At first when trying to create my first few Papervision projects it seemed a bit overwhelming. As you work with it more and more you notice that there are really only a few elements for creating a simple Papervision project. Then you can forget about the code and just think about what cool things you can do.

For any Papervision 2.0 project you need:
[as]
//As always your imports
import flash.display.*;
import flash.events.Event;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.render.BasicRenderEngine;

//1) A Scene
var scene:Scene3D = new Scene3D()

//2) A Camera
var camera = new Camera3D()
//Setting the camera zoom to 11 will make sure your objects are rendered at 100%
camera.zoom = 11;

//3) A view area “viewport” – think of this as your canvas or stage for your 3D objects
var viewport:Viewport3D = new Viewport3D(500,300,false,true,true)

//4) A render engine
var renderer:BasicRenderEngine = new BasicRenderEngine();

//5) add the viewport to the stage
addChild(viewport);

//6) Something in your scene such as a Plane, Cube, Sphere, etc – in this case a plane with a black color material
var plane:Plane = new Plane(new ColorMaterial(0×000000),100,100)
//add your object to your scene
scene.addChild(plane)

//7) Create a loop for rendering your animation
this.addEventListener(Event.ENTER_FRAME,render);
function render(e:Event):void
{
//Add some simple animation
plane.rotationY += 2; //Could also be plane.yaw(2);
//Render the scene
renderer.renderScene(scene,camera,viewport,true);
}[/as]

Don’t forget to download the latest Papervision code

The great thing is that if you build this once into a nice clean class, you can just keep re-using that class as your papervision starting place. Then you can do what you do best, create and have fun!

Start with this and add a cube or different materials and animations. Then toss in some Tweener code to get some cool movement effects. In a few days you’ll have some amazing things.

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]


Follow papervision2 on Twitter

RSS Feed