Papervision3D Gallery
From Frontal Wiki
An example of an image gallery utilizing Papervision 3D. In this demo, a variable is declared which sets the depth, width, height and image of each plane and then displays them in a scene. A minimal amount of mouse interaction has been added in order to navigate through each photo. Both Papervision and Green Sock's TweenMax libraries are added to the Frontal swf via the <include> tag. See Frontal's reference section for details on this.
Graphic styling has been kept to a minimum for ease of customization.
<style><![CDATA[ document { background-color: #E1E1E1; } #paperScene { @onFirstDocumentPreRender { var scene; var reflectScene; var camera; var renderer; var renderTimer; var camModX; var camModY; var planeCount=1; var planeX=0; var planeY=0; var planeZ=0; var planeWidth; var planeHeight; var camZMax=-300; var camZMin=-900; var camXMax=0; var currentPlane = "primitive1"; var photoOn=false; var lastPlane; var nextX; var caption; // The following variblabes are used to determine the properties // of the papervision scene being built: // samplePlaneVars = (Z-Depth, Width, Height, Image Path); // totalPlanes = the number of planes/photos var samplePlaneVars = new Array(0, 200, 100, "assets/images/"); var totalPlanes = 20; // Definitions of mandatory papervision elements // Viewport, Scene, Camera, Renderer var viewport = new org.papervision3d.view.Viewport3D(1, 1, true, true); viewport.buttonMode = true; movie.addChild(viewport); scene = new org.papervision3d.scenes.Scene3D(); camera = new org.papervision3d.cameras.Camera3D(); camera.z = -300; renderer = new org.papervision3d.render.BasicRenderEngine(); // Below is a Timer & Event, used to render the Papervision Scene // as often as the processor will allow renderTimer = new flash.utils.Timer(5); renderTimer.addEventListener(flash.events.TimerEvent.TIMER, onTimerEvent); function onTimerEvent(e) { // Below are a set of camera movements based on mouse position var nextCamLoc = camera.z + (movie.mouseY - containerHeight/2) * .1; if(nextCamLoc <= camZMin) { nextCamLoc = camZMin; } if(nextCamLoc >= camZMax) { nextCamLoc = camZMax; } var nextCamX = camera.x + (movie.mouseX - containerWidth/2) * .1; if(nextCamX <= 0) { nextCamX = 0; } if(nextCamX >= camXMax) { nextCamX = camXMax; } if(!photoOn) { camera.x = nextCamX; camera.z = nextCamLoc; } renderer.renderScene(scene, camera, viewport); } // The function below takes the samplePlaneVars, // builds and manipulates a plane, adds mouse events // and adds it to the scene. function addPlane(planeVars) { var materialPath = [ [planeVars[3]] + "image_" + planeCount + ".jpg"]; //dynamic["material" + planeCount] = new org.papervision3d.materials.MovieMaterial(mc_material, true, true); dynamic["material" + planeCount] = new org.papervision3d.materials.BitmapFileMaterial(materialPath); dynamic["material" + planeCount].smooth = true; dynamic["material" + planeCount].interactive = true; dynamic["material" + planeCount].doubleSided = true; dynamic["primitive" + planeCount] = new org.papervision3d.objects.primitives.Plane(dynamic["material" + planeCount], planeVars[1], planeVars[2], 6, 6); dynamic["primitive" + planeCount].x = planeX; if(planeCount != 0) { dynamic["primitive" + planeCount].rotationY = 45; dynamic["primitive" + planeCount].z = 50; camXMax += 125; //TweenMax.to(camera, .3, {x:camXMax, ease:Quad.easeOut}); } dynamic["primitive" + planeCount].addEventListener(org.papervision3d.events.InteractiveScene3DEvent.OBJECT_PRESS, onPlaneClick); dynamic["primitive" + planeCount].addEventListener(org.papervision3d.events.InteractiveScene3DEvent.OBJECT_OVER, onPlaneOver); dynamic["primitive" + planeCount].addEventListener(org.papervision3d.events.InteractiveScene3DEvent.OBJECT_OUT, onPlaneOut); scene.addChild(dynamic["primitive" + planeCount]); planeX += 125; planeCount += 1; } // The functions below are for the mouse events // on each plane (Over, Out & Click). function onPlaneOut(e) { if(!photoOn) { gs.TweenMax.to(e.target, .5, {z:50, ease:gs.easing.Quad.easeOut}); } } function onPlaneOver(e) { if(!photoOn) { gs.TweenMax.to(e.target, .5, {z:-50, ease:gs.easing.Quad.easeOut}); } } function onPlaneClick(e) { if(photoOn) { if(e.target == lastPlane) { nextX = e.target.x; gs.TweenMax.to(e.target, .4, {delay: 0.1, rotationY:60, z:-200, x:nextX + 50}); gs.TweenMax.to(e.target, .3, {delay: 0.4, rotationY:45, z:50, x:nextX}); photoOn = false; } if(e.target != lastPlane) { nextX = lastPlane.x; gs.TweenMax.to(lastPlane, .4, {delay: 0.1, rotationY:60, z:-200, x:nextX + 50}); gs.TweenMax.to(lastPlane, .3, {delay: 0.4, rotationY:45, z:50, x:nextX}); nextX = e.target.x; gs.TweenMax.to(e.target, .4, {delay: 0.1, rotationY:60, z:-200, x:nextX + 50}); gs.TweenMax.to(e.target, .3, {delay: 0.4, rotationY:0, z:-100, x:nextX}); gs.TweenMax.to(camera, .7, {x:nextX, z:-300, ease:gs.easing.Quad.easeOut}); lastPlane = e.target; photoOn = true; } } else if(!photoOn) { nextX = e.target.x; gs.TweenMax.to(e.target, .4, {delay: 0.1, rotationY:60, z:-200, x:nextX + 50}); gs.TweenMax.to(e.target, .3, {delay: 0.4, rotationY:0, z:-100, x:nextX}); gs.TweenMax.to(camera, .7, {x:nextX, z:-300, ease:gs.easing.Quad.easeOut}); lastPlane = e.target; photoOn = true; } } // Below is a loop that uses the totalPlanes variable // and runs a function to create the planes for the scene. for(var i=1; i<=totalPlanes; i++) { addPlane(samplePlaneVars); } renderTimer.start(); } } *:link:hover, *:visited:hover { underline: false; color: #ff5523; } ]]></style> <include blocking="true" rel="assets" type="application/x-shockwave-flash" src="assets/swfs/paper_assets.swf" id="movie" /> <div id="paperScene" style="width: 100%; height: 100%;" /> <!-- frontal credit --> <div id="linker" style="left: 30px; top: 90%; padding-bottom: 5px;"> <text class="frLink" href="http://frontalcode.com" target="_blank"><![CDATA[<font size="12">Created w/ Frontal</font>]]></text> </div>