PaperCube - Loading Videos and Bitmap at runtime with Papervision3D
Good morning,
instead of chilling in the sun, i decided to refactor the PaperCube. In that version, you could load videos and bitmaps at runtime, driven by a XML-File.
Note: In some cases (i didn’t had the time to inspect the code), there is a bitmap error( ArgumentError: Error #2015: Ungültiges BitmapData.) In that case just refresh with the f5-key and everything will works fine. Computer are sometimes like girls 
paperdata.xml
Check it out there
The Sources will be found there
The refactored PaperCube.as
package net.borishorn.pv3d
{
import caurina.transitions.Tweener;
import flash.events.*;
import mx.core.UIComponent;
import net.borishorn.pv3d.data.PaperData;
import net.borishorn.pv3d.events.PaperEvent;
import net.borishorn.pv3d.video.PaperVideo;
import org.papervision3d.cameras.*;
import org.papervision3d.events.*;
import org.papervision3d.lights.*;
import org.papervision3d.materials.*;
import org.papervision3d.materials.shaders.*;
import org.papervision3d.materials.special.*;
import org.papervision3d.materials.utils.*;
import org.papervision3d.objects.*;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.objects.special.*;
import org.papervision3d.render.*;
import org.papervision3d.scenes.*;
import org.papervision3d.view.*;
public class PaperCube extends UIComponent
{
public var isAnimated:Boolean = true;
private var viewport:Viewport3D;
private var renderer:BasicRenderEngine;
private var scene:Scene3D;
private var camera:Camera3D;
private var cube:Cube;
private var top:*;
private var bottom:*;
private var right:*;
private var left:*;
private var front:*;
private var back:*;
private var papervideo:PaperVideo;
private var paperdata:PaperData;
private var isReady:Boolean = false;
public function PaperCube()
{
super();
paperdata = new PaperData();
paperdata.addEventListener(PaperEvent.XML_DATA_LOADED, setup);
addToStageHandler();
}
private function setup(e:Event):void
{
createViewport();
createRenderer();
createScene3D();
createCamera3D();
createMaterials();
createCube();
isReady = true;
}
public function stopAnimation():void
{
stage.removeEventListener(Event.ENTER_FRAME, loop);
}
public function startLoop():void
{
stage.addEventListener(Event.ENTER_FRAME, loop);
}
private function addToStageHandler():void
{
addEventListener(Event.ADDED_TO_STAGE, setListeners);
}
private function createViewport():void
{
viewport = new Viewport3D(0, 0, true, true);
addChild(viewport);
viewport.buttonMode = true;
viewport.interactive = true;
viewport.name = "cubeVP";
viewport.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onObjectClick);
viewport.addEventListener(MouseEvent.MOUSE_OUT, setListeners);
}
private function createRenderer():void
{
renderer = new BasicRenderEngine();
}
private function createScene3D():void
{
scene = new Scene3D();
}
private function createCamera3D():void
{
camera = new Camera3D();
camera.zoom = 44;
camera.focus = 100;
}
private function createMaterials():void
{
top = getMaterial("top");
top.interactive = true;
top.name = "top";
top.smooth = true;
back = getMaterial("back");
back.interactive = true;
back.name = "back";
back.smooth = true;
front = getMaterial("front");
front.interactive = true;
front.name = "front";
front.smooth = true;
bottom = getMaterial("bottom");
bottom.interactive = true;
bottom.name = "bottom";
bottom.smooth = true;
left = getMaterial("left");
left.interactive = true;
left.name = "left";
left.smooth = true;
right = getMaterial("right");
right.interactive = true;
right.name = "right";
right.smooth = true;
}
private function getMaterial(side:String):*
{
var cm:BitmapFileMaterial;
var cmv:VideoStreamMaterial;
switch(side)
{
case 'top':
if(paperdata.sides.(@side=='top').@type == 'image')
{
cm = new BitmapFileMaterial(paperdata.sides.(@side == 'top').@url);
return cm;
}else if (paperdata.sides.(@side=='top').@type == 'video')
{
papervideo = new PaperVideo(paperdata.sides.(@side == 'top').@url);
cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
return cmv;
}else
{
cm = new BitmapFileMaterial("assets/images/boris.jpg");
return cm;
}
break;
case 'bottom':
if(paperdata.sides.(@side=='bottom').@type == 'image')
{
cm = new BitmapFileMaterial(paperdata.sides.(@side == 'bottom').@url);
return cm;
}else if (paperdata.sides.(@side=='bottom').@type == 'video')
{
papervideo = new PaperVideo(paperdata.sides.(@side == 'bottom').@url);
cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
return cmv;
}else
{
cm = new BitmapFileMaterial("assets/images/boris.jpg");
return cm;
}
break;
case 'front':
if(paperdata.sides.(@side=='front').@type == 'image')
{
cm = new BitmapFileMaterial(paperdata.sides.(@side == 'front').@url);
return cm;
}else if (paperdata.sides.(@side=='front').@type == 'video')
{
papervideo = new PaperVideo(paperdata.sides.(@side == 'front').@url);
cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
return cmv;
}else
{
cm = new BitmapFileMaterial("assets/images/boris.jpg");
return cm;
}
break;
case 'back':
if(paperdata.sides.(@side=='back').@type == 'image')
{
cm = new BitmapFileMaterial(paperdata.sides.(@side == 'back').@url);
return cm;
}else if (paperdata.sides.(@side=='back').@type == 'video')
{
papervideo = new PaperVideo(paperdata.sides.(@side == 'back').@url);
cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
return cmv;
}else
{
cm = new BitmapFileMaterial("assets/images/boris.jpg");
return cm;
}
break;
case 'left':
if(paperdata.sides.(@side=='left').@type == 'image')
{
cm = new BitmapFileMaterial(paperdata.sides.(@side == 'left').@url);
return cm;
}else if (paperdata.sides.(@side=='left').@type == 'video')
{
papervideo = new PaperVideo(paperdata.sides.(@side == 'left').@url);
cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
return cmv;
}else
{
cm = new BitmapFileMaterial("assets/images/boris.jpg");
return cm;
}
break;
case 'right':
if(paperdata.sides.(@side=='right').@type == 'image')
{
cm = new BitmapFileMaterial(paperdata.sides.(@side == 'right').@url);
return cm;
}else if (paperdata.sides.(@side=='right').@type == 'video')
{
papervideo = new PaperVideo(paperdata.sides.(@side == 'right').@url);
cmv = new VideoStreamMaterial(papervideo.videoDisplay, papervideo.videoStream);
return cmv;
}else
{
cm = new BitmapFileMaterial("assets/images/boris.jpg");
return cm;
}
break;
default:
cm = new BitmapFileMaterial("assets/images/boris.jpg");
return cm;
break;
}
}
private function onObjectClick(event:InteractiveScene3DEvent):void
{
Tweener.addTween(camera, {zoom:18, time:1, transition:"easeOutBack"});
}
private function createCube():void
{
cube = new Cube(new MaterialsList({top:top,
bottom:bottom,
left:left,
right:right,
front:front,
back:back }),
400, 400, 400, 10, 10, 10);
cube.name = "papercube";
scene.addChild(cube);
}
private function setListeners(e:Event):void
{
Tweener.addTween(camera, {zoom:8, time:1, transition:"easeOutBack"});
stage.addEventListener(Event.ENTER_FRAME, loop);
}
private function removeListeners():void
{
stage.removeEventListener(Event.ENTER_FRAME, loop);
}
private function loop(e:Event):void
{
var xDist:Number = mouseX - stage.stageWidth * 0.5;
var yDist:Number = mouseY - stage.stageHeight * 0.5;
if(isReady)
{
if(isAnimated)
{
cube.rotationY += xDist* 0.05;
cube.rotationX += yDist* 0.05;
renderer.renderScene(scene, camera, viewport);
}else
{
renderer.renderScene(scene, camera, viewport);
}
}
}
}
}
Have fun!
9 Comments so far
Leave a reply
[...] UPDATED VERSION WILL BE FOUND HERE [...]
Hi,
Cool app in flex!
Can this be also done in flash cs3, as3 and great white? the xml file version? If so how!
Thx!
Hi indyp,
to transform this sample you only have to rewrite the class PaperData and than just extend the PaperCube and the PaperVideo instead of UIComponent from MovieClip. So everything will work in CS3 with PaperCube as the Document-Class. If you got trouble in refactor that classes i have the whole package as a zip to inspect what i mean. Because i dont have CS3, its a FlashDevelop AS3-Project but i think that makes no difference.
Papercube CS3 Package
[...] of that comment were i was asked if the papercube will be run without Flex but also with XML-files, so i looked [...]
I’m working in CS3.
I followed the obove listed instructions to transform this sample:
I have rewritten the class PaperData and than just extended the PaperCube and the PaperVideo instead of UIComponent from MovieClip.
I workded with PaperCube as the Document-Class.
Amazing it works
thank u for sharing that with us
keep up your good work,
I will be a regular reader of ur Blog.
Hello
Nice demo. I have this error with Flex :
Es ist ein Fehler aufgetreten: Error #2148
The preloader is not in the zip.
May you help me.
Best regards
hi there
i tried to compile it agains gumbo sdk and the result are:
1152: A conflict exists with inherited definition mx.core:UIComponent.bottom in namespace public mx.core:ILayoutElement.
i’ll check this and update the version for gumbo sdk
@jaris: sorry ’bout that late: check this http://curtismorley.com/2007/08/31/flash-cs3-flex-2-as3-error-2148/
it seems that you have security issues