Tag Archive for 'InteractiveScene3DEvent'

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

. 11 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

. 4 Comments

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

Advanced Interactivity

Published

Charlie

on November 26, 2009

in Actionscript 3.0, Papervision 3D, Tutorials and TweenLite

. 8 Comments

This is just another example of how to do some advanced interactivity in Papervision 3D. This tutorial is just a slightly updated version of the #10 : Advanced Interactivity tutorial from a while back.

Here is what has been updated:
1) Removed InteractiveScene3DEvent and replaced it with standard MouseEvents
2) Updated to use papervision's BasicView.as class

For a full description of what is going on please refer back to this link: #10 : Advanced Interactivity

PLAIN TEXT

Actionscript:

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
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.view.BasicView;
/**
* ...
* @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;
protected var targetrotationX:Number;
protected var targetrotationY:Number;
protected var targetrotationZ:Number;
protected var tweening:Boolean;
public function Main():void
{
super();
init();
}
protected function init():void
{
createChildren();
startRendering();
}
protected function createChildren():void
{
//Set the viewport to interactive
viewport.interactive = true;
//Create Materials:
materialsList = new MaterialsList();
interactiveMats = ["front", "back", "left", "right", "bottom", "top"];
var colorsArray:Array = [0x76b6f8, 0x4291e1, 0x1f73c8, 0xe77111, 0xe8914c, 0xfad2b2];
for (var i:int = 0; i <interactiveMats.length; i++)
{
//Create a color box so we can use our MouseEvents
var colorBox:Sprite = new Sprite();
colorBox.graphics.beginFill(colorsArray[i]);
colorBox.graphics.drawRect(0, 0, 100, 100);
colorBox.graphics.endFill();
colorBox.name = interactiveMats[i];
//Add a textField for reference
var textField:TextField = new TextField()
colorBox.addChild(textField)
textField.text = interactiveMats[i];
//Add a MouseEvent to the Sprite
colorBox.mouseChildren = false;
colorBox.addEventListener(MouseEvent.CLICK, onMovieMatClicked);
//Create the MovieMat
var movieMat:MovieMaterial = new MovieMaterial(colorBox, true, 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
{
if (tweening)
{
// Let it rotate again
tweening = false;
}
else
{
switch(evt.target.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 onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
if (tweening) {
// If a face has been clicked
if (camera.zoom <230) {
// If the camera isn't zoomed enough then zoom in a bit more:
camera.zoom += Math.sqrt(230-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 (camera.zoom> 200)
{
// So zoom out a bit.
camera.zoom -= Math.sqrt(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

Basic Mouse Interaction (v2)

Published

Charlie

on November 23, 2009

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

. 10 Comments

In the previous tutorial we showed you how to load a 3D model into Papervision. Now we are just going to show you how to rotate that model based off of your mouse movements.

The process is very simple. Since our render function is like the engine of our animations that is where we will add the code for the rotation. Later we'll cover animating objects via TweenLite / TweenMax.

PLAIN TEXT

Actionscript:

override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
cow.rotationY = stage.mouseX / sceneWidth * 360
}

When you first start moving objects in Papervision you may notice that rotationY and rotationX do not act as you might think they would. In flash you would think of something on a Y axis as going up and down and X as left and right. With Papervision RotationY rotates and object on its Y axis (left /right) and RotationX rotates an object on it's X axis (top / bottom).

Here is the full code:

PLAIN TEXT

Actionscript:

package
{
import flash.events.Event;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.parsers.Collada;
import org.papervision3d.view.BasicView;
public class Main extends BasicView
{
protected var cow:DisplayObject3D;
protected var materialList:MaterialsList;
protected var bitmapFileMaterial:BitmapFileMaterial;
protected var sceneWidth:Number;
protected var sceneHeight:Number;
public function Main()
{
super();
init();
createChildren();
startRendering();
}
protected function init():void
{
sceneWidth = stage.stageWidth
}
public function createChildren():void
{
//Setup the materials manually (sometimes the dae handles this without issue)
materialList = new MaterialsList();
bitmapFileMaterial = new BitmapFileMaterial("daeModel/Cow.png");
materialList.addMaterial(bitmapFileMaterial,"all");
//Create the new Collada Object with materialList
cow = new Collada("daeModel/cow.dae",materialList);
///Set some properties
cow.moveDown(150);
cow.scale = 3;
cow.pitch( -10);
//Add to scene
scene.addChild(cow);
}
override protected function onRenderTick(event:Event = null):void
{
super.onRenderTick(event);
cow.rotationY = stage.mouseX / sceneWidth * 360
}
}
}

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 'InteractiveScene3DEvent'

Adding XML to the Papervision Coverflow

A Simple Papervision Coverflow

Advanced Interactivity

Basic Mouse Interaction (v2)

10. Advanced Interactivity

Blogroll

Recent Posts

Pages

Tag Archive for 'InteractiveScene3DEvent'

Adding XML to the Papervision Coverflow

A Simple Papervision Coverflow

Advanced Interactivity

Basic Mouse Interaction (v2)

10. Advanced Interactivity

Blogroll

Recent Posts

Tags

Pages