Tag Archive for 'Tutorial'

Adding XML to the Papervision Coverflow

Published

on December 26, 2009

in Actionscript 3 Papervision, Actionscript 3.0, Examples, Flash, Loading XML, Papervision 3D, Papervision Coverflow, Source Code and Tutorials

. 5 Comments

As a simple addition to yesterday's coverflow post, I wanted to show the same example but with loading images via XML. For simplicity sake the XML is loaded and parsed all in the main file.

The structure for our XML is very simple:

PLAIN TEXT

XML:

<?xml version="1.0" encoding="utf-8" ?>
<data>
<image><![CDATA[images/image1.jpg]]></image>
<image><![CDATA[images/image2.jpg]]></image>
<image><![CDATA[images/image3.jpg]]></image>
<image><![CDATA[images/image5.jpg]]></image>
<image><![CDATA[images/image4.jpg]]></image>
<image><![CDATA[images/image6.jpg]]></image>
<image><![CDATA[images/image7.jpg]]></image>
</data>

We simply load our XML file with BulkLoader

PLAIN TEXT

Actionscript:

protected function loadXML():void
{
bulkInstance = new BulkLoader("bulkInstance");
bulkInstance.add(xmlPath);
bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onXMLReady);
bulkInstance.start();
}

Parse the results, now adding the images to the BulkLoader:

PLAIN TEXT

Actionscript:

protected function onXMLReady(evt:BulkProgressEvent):void
{
bulkInstance.removeEventListener(BulkProgressEvent.COMPLETE, onXMLReady);
bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onImagesReady);
var xml:XML = bulkInstance.getXML(xmlPath);
var xmlList:XMLList = xml.image;
for (var i:int = 0; i <xmlList.length(); i++)
{
var imagePath:String = String(xmlList[i])
bulkInstance.add(imagePath);
//Add path to array for later access
images.push(imagePath);
}
//Set our number of items based on how many images we load
numItems = images.length;
}

When our images are ready we can continue the process of setting up our coverflow. But now using the images we just loaded for our materials.

PLAIN TEXT

Actionscript:

var mat:BitmapMaterial = new BitmapMaterial(bulkInstance.getBitmapData(images[i]));

It's that simple. Be sure to let us know if you find this useful and are able to use it in a project.

Here is the full code:

PLAIN TEXT

Actionscript:

package
{
import br.com.stimuli.loading.BulkLoader;
import br.com.stimuli.loading.BulkProgressEvent;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;
import gs.easing.Quint;
import gs.TweenLite;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
/**
* ...
* @author Charlie Schulze, charlie[at]woveninteractive[dot]com
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
*/
public class Main extends BasicView
{
protected var planes:Array = [];
protected var images:Array = [];
protected var numItems:Number;
protected var currentItem:Number = 3;
protected var angle:Number = 25;
protected var rightBtn:Sprite;
protected var leftBtn:Sprite;
protected var xmlPath:String = "xml/imageXML.xml";
protected var bulkInstance:BulkLoader;
public function Main():void
{
//Make sure that your scene is set to interactive
super(640, 480, true, true);
loadXML();
}
//First load our XML
protected function loadXML():void
{
bulkInstance = new BulkLoader("bulkInstance");
bulkInstance.add(xmlPath);
bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onXMLReady);
bulkInstance.start();
}
//When our xml is ready parse and load our images
protected function onXMLReady(evt:BulkProgressEvent):void
{
bulkInstance.removeEventListener(BulkProgressEvent.COMPLETE, onXMLReady);
bulkInstance.addEventListener(BulkProgressEvent.COMPLETE, onImagesReady);
var xml:XML = bulkInstance.getXML(xmlPath);
var xmlList:XMLList = xml.image;
for (var i:int = 0; i <xmlList.length(); i++)
{
var imagePath:String = String(xmlList[i])
bulkInstance.add(imagePath);
//Add path to array for later access
images.push(imagePath);
}
//Set our number of items based on how many images we load
numItems = images.length;
}
//Images are finished loading we can now create our papervision coverflow
protected function onImagesReady(evt:BulkProgressEvent):void
{
init();
}
protected function init():void
{
createChildren();
createNavigation();
animate();
startRendering();
}
protected function createChildren():void
{
for (var i:int = 0; i <numItems; i++)
{
//Grab our bitmapData from the bulkLoader using our array of image paths as our key
var mat:BitmapMaterial = new BitmapMaterial(bulkInstance.getBitmapData(images[i]));
mat.interactive = true;
mat.smooth = true;
var plane:Plane = new Plane(mat, 280, 351, 4, 4);
planes.push(plane);
//Click straight to any plane
plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, onPlaneClick);
//Set an id to target current item
plane.id = i;
//Add plane to the scene
scene.addChild(plane);
}
camera.zoom = 50;
}
protected function onPlaneClick(evt:InteractiveScene3DEvent):void
{
currentItem = evt.target.id;
animate();
}
//Animate the coverflow left / right based off of currentItems
protected function animate():void
{
for (var i:int = 0; i <planes.length; i++)
{
var plane:Plane = planes[i];
//Each if statement will adjust these numbers as needed
var planeX:Number = 0;
var planeZ:Number = -50;
var planeRotationY:Number = 0
//Place & Animate Center Item
if (i == currentItem)
{
planeZ = -300
TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
}
//Place & Animate Right Items
if(i> currentItem)
{
planeX = (i - currentItem + 1) * 120;
planeRotationY = angle + 10 * (i - currentItem);
TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
}
//Place & Animate Left Items
if (i <currentItem)
{
planeX = (currentItem - i + 1) * -120;
planeRotationY = -angle - 10 * (currentItem - i);
TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
}
}
}
/*
* Everything below this point is just for creating the buttons and
* setting button events for controlling the coverflow.
*/
protected function createNavigation():void
{
//Create / Add Buttons
rightBtn = createButton();
leftBtn = createButton();
addChild(leftBtn);
addChild(rightBtn);
//Add button listeners
rightBtn.buttonMode = true;
leftBtn.buttonMode = true;
rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
//Place buttons on stage
rightBtn.x = stage.stageWidth - 20;
leftBtn.x = 20;
rightBtn.y = stage.stageHeight / 2;
leftBtn.y = (stage.stageHeight / 2) + 20;
leftBtn.rotation = 180;
}
//Button actions
protected function buttonClick(evt:MouseEvent):void
{
switch (evt.target)
{
case rightBtn:
currentItem ++
break;
case leftBtn:
currentItem --;
break;
}
//Don't allow any number lower than 0 or past max so there
//is always a center item
if (currentItem <0)
{
currentItem = 0;
}
if (currentItem> (planes.length - 1))
{
currentItem = planes.length - 1;
}
//Call animation
animate();
}
//Creates a simple arrow shape / returns the sprite
protected function createButton():Sprite
{
var btn:Sprite = new Sprite();
btn.graphics.beginFill(0x333333);
btn.graphics.moveTo(0, 0);
btn.graphics.lineTo(0, 20);
btn.graphics.lineTo(10, 10);
btn.graphics.lineTo(0, 0);
btn.graphics.endFill();
btn.filters = [new GlowFilter(0xFFFFFF,1,10,10,3)]
return btn;
}
}
}

Delicious Digg This Post Facebook Stumble This Post

A Simple Papervision Coverflow

Published

Charlie

on December 24, 2009

in Actionscript 3 Papervision, Actionscript 3.0, Examples, Papervision 3D, Papervision Coverflow, Tutorials and TweenLite

. 1 Comment

There are several great AS3 / Papervision Coverflows out there but today I set out to create one in it's simplest form. There are no bells and whistles, just a stripped down coverflow with it's core functionality. It's up to you to add an XML feed, Flickr feed, or setup your images in an array and load them the way you want to. This is only meant to be a clean jumping off point.

In the download I have included 2 versions. One with left / right buttons and one without. Both versions you can select the items in the coverflow to navigate.

The heart of this coverflow app is a lot like some of the others. We need to calculate the x and rotation of the center item, left items, and right items are, then animate accordingly. This is the same way that John Dyer animates his coverflow.

PLAIN TEXT

Actionscript:

for (var i:int = 0; i <planes.length; i++)
{
var plane:Plane = planes[i];
//Each if statement will adjust these numbers as needed
var planeX:Number = 0;
var planeZ:Number = 20;
var planeRotationY:Number = 0
//Place & Animate Center Item
if (i == currentItem)
{
planeZ = -300
TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
}
//Place & Animate Right Items
if(i> currentItem)
{
planeX = (i - currentItem + 1) * 120;
planeRotationY = angle + 10 * (i - currentItem);
TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
}
//Place & Animate Left Items
if (i <currentItem)
{
planeX = (currentItem - i + 1) * -120;
planeRotationY = -angle - 10 * (currentItem - i);
TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
}
}

For this simple version of coverflow you have two ways of navigating to items.

Selecting a plane to jump right to that item

PLAIN TEXT

Actionscript:

plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, onPlaneClick);
protected function onPlaneClick(evt:InteractiveScene3DEvent):void
{
currentItem = evt.target.id;
animate();
}

Or using left / right buttons to navigate one item at a time:

PLAIN TEXT

Actionscript:

rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
protected function buttonClick(evt:MouseEvent):void
{
switch (evt.target)
{
case rightBtn:
currentItem ++
break;
case leftBtn:
currentItem --;
break;
}
//Don't allow any number lower than 0 or past max so there
//is always a center item
if (currentItem <0)
{
currentItem = 0;
}
if (currentItem> (planes.length - 1))
{
currentItem = planes.length - 1;
}
//Call animation
animate();
}

On to the full source code. This version includes the left / right buttons.

PLAIN TEXT

Actionscript:

package
{
import flash.display.DisplayObject;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.GlowFilter;
import gs.easing.Quint;
import gs.TweenLite;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
/**
* ...
* @author Charlie Schulze, charlie[at]woveninteractive[dot]com
* Licensed under the MIT license: http://www.opensource.org/licenses/mit-license.php
*/
public class Main extends BasicView
{
protected var planes:Array = [];
protected var numItems:Number = 7;
protected var currentItem:Number = 3;
protected var angle:Number = 25;
protected var mat:BitmapFileMaterial;
protected var rightBtn:Sprite;
protected var leftBtn:Sprite;
public function Main():void
{
//Make sure that your scene is set to interactive
super(640, 480, true, true);
init();
}
protected function init():void
{
createChildren();
createNavigation();
animate();
startRendering();
}
protected function createChildren():void
{
//Create Material
mat = new BitmapFileMaterial("images/iPhone-back2.png");
mat.smooth = true;
mat.interactive = true;
for (var i:int = 0; i <numItems; i++)
{
var plane:Plane = new Plane(mat, 177, 334, 4, 4);
planes.push(plane);
//Click straight to any plane
plane.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, onPlaneClick);
//Set an id to target current item
plane.id = i;
//Add plane to the scene
scene.addChild(plane);
}
camera.zoom = 60;
}
protected function onPlaneClick(evt:InteractiveScene3DEvent):void
{
currentItem = evt.target.id;
animate();
}
//Animate the coverflow left / right based off of currentItems
protected function animate():void
{
for (var i:int = 0; i <planes.length; i++)
{
var plane:Plane = planes[i];
//Each if statement will adjust these numbers as needed
var planeX:Number = 0;
var planeZ:Number = -50;
var planeRotationY:Number = 0
//Place & Animate Center Item
if (i == currentItem)
{
planeZ = -300
TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
}
//Place & Animate Right Items
if(i> currentItem)
{
planeX = (i - currentItem + 1) * 120;
planeRotationY = angle + 10 * (i - currentItem);
TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
}
//Place & Animate Left Items
if (i <currentItem)
{
planeX = (currentItem - i + 1) * -120;
planeRotationY = -angle - 10 * (currentItem - i);
TweenLite.to(plane, 1, { rotationY:planeRotationY,x:planeX,z:planeZ, ease:Quint.easeInOut } );
}
}
}
/*
* Everything below this point is just for creating the buttons and
* setting button events for controlling the coverflow.
*/
protected function createNavigation():void
{
//Create / Add Buttons
rightBtn = createButton();
leftBtn = createButton();
addChild(leftBtn);
addChild(rightBtn);
//Add button listeners
rightBtn.buttonMode = true;
leftBtn.buttonMode = true;
rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
//Place buttons on stage
rightBtn.x = stage.stageWidth - 20;
leftBtn.x = 20;
rightBtn.y = stage.stageHeight / 2;
leftBtn.y = (stage.stageHeight / 2) + 20;
leftBtn.rotation = 180;
}
//Button actions
protected function buttonClick(evt:MouseEvent):void
{
switch (evt.target)
{
case rightBtn:
currentItem ++
break;
case leftBtn:
currentItem --;
break;
}
//Don't allow any number lower than 0 or past max so there
//is always a center item
if (currentItem <0)
{
currentItem = 0;
}
if (currentItem> (planes.length - 1))
{
currentItem = planes.length - 1;
}
//Call animation
animate();
}
//Creates a simple arrow shape / returns the sprite
protected function createButton():Sprite
{
var btn:Sprite = new Sprite();
btn.graphics.beginFill(0x333333);
btn.graphics.moveTo(0, 0);
btn.graphics.lineTo(0, 20);
btn.graphics.lineTo(10, 10);
btn.graphics.lineTo(0, 0);
btn.graphics.endFill();
btn.filters = [new GlowFilter(0xFFFFFF,1,10,10,3)]
return btn;
}
}
}

That's it. This should provide a good base for you to build out your own unique coverflow.

Delicious Digg This Post Facebook Stumble This Post

Papervision Explode Image / Rebuild

Published

Charlie

on December 24, 2009

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

. 1 Comment

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

A Simple Papervision Carousel

Published

Charlie

on December 24, 2009

in 3D Carousel, AS3, Actionscript 3 Papervision, Actionscript 3.0, Papervision, Papervision 3D, Source Code and Tutorials

. 6 Comments

This week I set out to create a Papervision Carousel in it's simplest form. At the heart of this carousel is a simple "for" loop / math which places the items in a circle in 3D space

PLAIN TEXT

Actionscript:

for (var i:int = 0; i <planes.length; i++)
{
var angle:Number = Math.PI * 2 / numItems * i;
var plane:Plane = planes[i];
plane.x = Math.cos(angle) * radius;
plane.z = Math.sin(angle) * radius;
plane.rotationY = -360 / numItems * i - 90;
}

Then to rotate our carousel we apply some similar math

PLAIN TEXT

Actionscript:

var rotateTo:Number = (-360 / numItems) * currentItem + 90;
TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );

This code allows us to just increment currentItem and rotate our carousel. Another easy add-on would be to setup a navigation along the bottom where you could control and change the currentItem to a specific number to rotate right to that section of the carousel.

It's also very easy to customize the number of items and radius of the carousel by adjusting these numbers.

PLAIN TEXT

Actionscript:

protected var numItems:Number = 20;
protected var radius:Number = 500;

Here is the full code.

PLAIN TEXT

Actionscript:

package
{
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import gs.easing.Quint;
import gs.TweenLite;
import org.papervision3d.materials.BitmapFileMaterial;
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 planes:Array = [];
protected var numItems:Number = 20;
protected var radius:Number = 500;
protected var currentItem:Number = 0;
protected var mat:BitmapFileMaterial;
protected var planesHolder:DisplayObject3D;
protected var rightBtn:Sprite;
protected var leftBtn:Sprite;
public function Main():void
{
super();
init();
}
protected function init():void
{
createChildren();
createButtons();
commitProperties();
startRendering();
}
protected function createChildren():void
{
planesHolder = new DisplayObject3D();
//Create Material
mat = new BitmapFileMaterial("images/queen.gif");
mat.smooth = true;
mat.doubleSided = true;
for (var i:int = 0; i <numItems; i++)
{
var plane:Plane = new Plane(mat, 150, 234);
planes.push(plane);
//Add plane to the scene
planesHolder.addChild(plane);
}
scene.addChild(planesHolder);
}
protected function commitProperties():void
{
//Set properties of our planes
for (var i:int = 0; i <planes.length; i++)
{
var angle:Number = Math.PI * 2 / numItems * i;
var plane:Plane = planes[i];
plane.x = Math.cos(angle) * radius;
plane.z = Math.sin(angle) * radius;
plane.rotationY = -360 / numItems * i - 90;
}
//Adjust camera
camera.y = 200;
//Rotate once
rotate();
}
//Rotates the carousel
protected function rotate():void
{
var rotateTo:Number = (-360 / numItems) * currentItem + 90;
TweenLite.to(planesHolder, 1, { rotationY:rotateTo, ease:Quint.easeInOut } );
}
/*
* Everything below this point is just for creating the buttons and
* setting button events for controlling the carousel.
*/
protected function createButtons():void
{
//Create Buttons
rightBtn = createButton();
leftBtn = createButton();
addChild(leftBtn);
addChild(rightBtn);
//Add button listeners
rightBtn.buttonMode = true;
leftBtn.buttonMode = true;
rightBtn.addEventListener(MouseEvent.CLICK, buttonClick);
leftBtn.addEventListener(MouseEvent.CLICK, buttonClick);
//Place buttons on stage
rightBtn.x = stage.stageWidth - 120;
leftBtn.x = 100;
rightBtn.y = stage.stageHeight / 2;
leftBtn.y = (stage.stageHeight / 2) + 20;
leftBtn.rotation = 180;
}
//Button actions
protected function buttonClick(evt:MouseEvent):void
{
switch (evt.target)
{
case rightBtn:
currentItem --;
break;
case leftBtn:
currentItem ++;
break;
}
rotate();
}
//Creates a simple arrow shape / returns the sprite
protected function createButton():Sprite
{
var btn:Sprite = new Sprite();
btn.graphics.beginFill(0x333333);
btn.graphics.moveTo(0, 0);
btn.graphics.lineTo(0, 20);
btn.graphics.lineTo(10, 10);
btn.graphics.lineTo(0, 0);
btn.graphics.endFill();
return btn;
}
}
}

Feel free to post links to ways you expand upon this file.

Delicious Digg This Post Facebook Stumble This Post

Fix Z-Sorting issues with the QuadrantRenderEngine

Published

Charlie

on November 28, 2009

in AS3, Actionscript 3.0, Examples, QuadrantRenderEngine, Tutorials and Z-Sorting Issues

. 0 Comments

Another way to solve your z-sorting issues is the use of the Quadrant Render Engine. The QuadrantRenderEngine only takes one parameter (type).

The three "types" of filtering available to you are:
QuadrantRenderEngine.ALL_FILTERS
QuadrantRenderEngine.CORRECT_Z_FILTER
QuadrantRenderEngine.QUAD_SPLIT_FILTER

For a full explanation of each of the 3 types available to you with this renderer take a look at this article.

The QuadrantRenderEngine use a technique of subdividing the screen into smaller and smaller regions to resolve potential conflicts between triangles.
blog.papervision3d.org

As also noted by others, this is a great tool to have around it does come with its performance issues. You may want to test out using ViewportLayers and optimizing in other areas.

Here is the simple code you need to change your renderer when extending BasicView.as:

PLAIN TEXT

Actionscript:

renderer = new QuadrantRenderEngine(QuadrantRenderEngine.ALL_FILTERS);

Here is the full code for this example:

PLAIN TEXT

Actionscript:

package
{
import flash.events.Event;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.render.QuadrantRenderEngine;
import org.papervision3d.view.BasicView;
import org.papervision3d.materials.BitmapFileMaterial;
public class Main extends BasicView
{
protected var sphere:Sphere
protected var plane:Plane;
protected var bitmapMaterial:BitmapFileMaterial;
protected var colorMaterial:ColorMaterial;
public function Main()
{
super();
//Try commenting out this line to see the issues.
renderer = new QuadrantRenderEngine(QuadrantRenderEngine.ALL_FILTERS);
createChildren();
commitProperties();
startRendering();
}
protected function createChildren():void
{
//Create a new 3D object
colorMaterial = new ColorMaterial(0x000000);
bitmapMaterial = new BitmapFileMaterial("images/ourtex.jpg")
//Create 3D Objects
plane = new Plane(colorMaterial,1000,1000,5,5)
sphere = new Sphere(bitmapMaterial, 50, 10,10);
//Add to scene
scene.addChild(plane);
scene.addChild(sphere);
}
protected function commitProperties():void
{
//Set some properties
sphere.scale = 4;
sphere.pitch( -10);
plane.rotationX = 60;
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
//Rotate
sphere.yaw(1);
}
}
}

Delicious Digg This Post Facebook Stumble This Post

Advanced Interactivity (Without InteractiveScene3DEvent)

Published

Charlie

on November 26, 2009

in Actionscript 3 Papervision, Examples, Source Code, Tutorials and TweenLite

. 3 Comments

There are multiple ways of accomplishing any task. With papervision that statement holds true. When you want to interact with 3D objects one way we have found works very well is to apply the MouseEvent's to the textureFile and bypass the InteractiveScene3DEvent all together.

Here are a few things to remember when working with anything interactive in Papervision

1) Always set your ViewPort to interactive
2) Always set your Material to interactive
3) Set your Material animation to "true" if you want to see the material update
4) Be sure that your render is running so you can see your material update

Here is some sample code that shows the basic building blocks of an animated / interactive papervision object:

PLAIN TEXT

Actionscript:

//Viewport set to interactive
viewport.interactive = true;
//Create your symbol - can be a class or MovieClip exported in your library
var textureMC:TextureSymbol = new TextureSymbol();
textureMC.id = i;
textureMC.clickButton.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
//Create your movie Material - animated / interactive set to true
var movieMat:MovieMaterial = new MovieMaterial(textureMC, true, true);
movieMat.doubleSided = true;
movieMat.interactive = true;
movieMat.smooth = true;

This approach is nice because you can deal with native Flash events.

Here is the full class:

PLAIN TEXT

Actionscript:

package
{
import flash.events.Event;
import flash.events.MouseEvent;
import gs.easing.Quint;
import gs.TweenLite;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.view.BasicView;
import TextureSymbol;
/**
* ...
* @author Charlie Schulze, charlie[at]woveninteractive[dot]com
*/
public class Main extends BasicView
{
protected var cube:Cube;
protected var interactiveMats:Array;
protected var materialsList:MaterialsList;
public function Main():void
{
super();
init();
}
protected function init():void
{
createChildren();
commitProperties();
startRendering();
}
protected function createChildren():void
{
//Set the viewport to interactive
viewport.interactive = true;
//Create Materials:
materialsList = new MaterialsList();
interactiveMats = ["front", "back", "top", "bottom", "left", "right"];
for (var i:int = 0; i <interactiveMats.length; i++)
{
//Create the texture symbol from the library
var textureMC:TextureSymbol = new TextureSymbol();
textureMC.id = i;
textureMC.clickButton.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
//Create the MovieMat
var movieMat:MovieMaterial = new MovieMaterial(textureMC, true, true);
movieMat.doubleSided = true;
movieMat.interactive = true;
movieMat.smooth = true;
materialsList.addMaterial(movieMat, interactiveMats[i]);
}
//Create Cube
cube = new Cube(materialsList, 100, 100, 100);
//Add cube to the scene
scene.addChild(cube);
}
protected function onMovieMatClicked(evt:MouseEvent):void
{
var randomX:Number = Math.random() * 600 - 300;
var randomY:Number = Math.random() * 200 - 100;
TweenLite.to(cube, 1, { x:randomX, y:randomY, ease:Quint.easeInOut});
}
protected function commitProperties():void
{
//Set the properties of our camera
camera.zoom = 200;
camera.y = 1000;
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
cube.yaw(2);
}
}
}

Delicious Digg This Post Facebook Stumble This Post

2010 Flash And The City Speaker

RSS Feed

Tag Archive for 'Tutorial'

Adding XML to the Papervision Coverflow

A Simple Papervision Coverflow

Papervision Explode Image / Rebuild

A Simple Papervision Carousel

Fix Z-Sorting issues with the QuadrantRenderEngine

Advanced Interactivity (Without InteractiveScene3DEvent)

Blogroll

Recent Posts

Pages

Tag Archive for 'Tutorial'

Adding XML to the Papervision Coverflow

A Simple Papervision Coverflow

Papervision Explode Image / Rebuild

A Simple Papervision Carousel

Fix Z-Sorting issues with the QuadrantRenderEngine

Advanced Interactivity (Without InteractiveScene3DEvent)

Blogroll

Recent Posts

Tags

Pages