Papervision 3d Interactive Scene3DEvent template tutorial

Eccoci finalmente con il secondo tutorial della serie Papervision 3d Template. Dopo aver instanziato il nostro primo template Pv3d ed aver compreso le fondamenta di questo potente pacchetto, aggiungiamo un pò di interattività ai nostri oggetti nella scena, mettendoli in comunicazione tra di loro grazie agli “InteractiveScene3DEvent”. Alla fine del tutorial sarete in grado di iniziare ad aggiungere una serie di funzioni più o meno complesse quali caricare movie esterni, collegare url, tweeners e quant’altro. Siete pronti ad iniziare, andiamo!

Demo

1) Pv3d template 1

Prima di iniziare il tutorial assicuratevi di aver visionato e scaricato il primo post della serie. Se avete già domestichezza conla libreria Papervision 3d e siete in grado di instanziare un oggetto potete procedere senza problemi.

Papervision 3d start-up your first template tutorial

2) Import InteractiveScene3DEvent

Per prima cosa importiamo il pacchetto “InteractiveScene3DEvent” per abilitare le funzioni di interattività dei nostri movieclip 3d. Ricordo che potete trovare l’elenco intero dei pacchetti disponibili a questo link:

import org.papervision3d.events.InteractiveScene3DEvent;

3) Add secondary elements

Dichiaro gli oggetti alla scena. In questo caso tre, ma naturalmente questo è solo per realizzare l’animazione Demo, potete abilitare anche un solo piano per rendere la scena interattiva:

“plane0″ è il centro della scena (un mc fittizio da usare come camera target);

“plane1″ è il movieclip che appare in un secondo momento;

“plane2″ (a dispetto del nome) il primo visibile con la scritta “Click Me”.

private var plane0:Plane;
private var plane1:Plane;
private var plane2:Plane;

4) Add materials

Creo naturalmente i loro materiali. Come già detto i valori attribuiti alle dimensioni e posizioni (x, y, z) dei piani sono consequenziali solo all’animazione. Naturalmente in questo caso avrei potuto usare funzioni di posizione più corrette, magari in relazione allo stage.width, ma in questo semplice esempio va benissimo così.

var material_mc0:MovieAssetMaterial = new MovieAssetMaterial("mc_0");
material_mc0.smooth = false;
plane0 = new Plane(material_mc0, 1, 1, 1, 1);
scene.addChild (plane0);
plane0.x= 0;

var material_mc1:MovieAssetMaterial = new MovieAssetMaterial("mc_1");
material_mc1.smooth = true;
plane1 = new Plane(material_mc1, 899, 399, 6, 6);
scene.addChild (plane1);
plane1.x= 5600;
plane1.z= 0;

var material_mc2:MovieAssetMaterial = new MovieAssetMaterial("mc_2");
material_mc2.smooth = true;
plane2 = new Plane(material_mc2, 400, 150, 4, 4);
scene.addChild (plane2);
plane2.x= 0;

5) Interactive Movie Materials

Eccoci arrivati al dunque! Rendiamo i materiali interattivi. Ora sono pronti a recepire le nostre azioni del mouse!

material_mc1.interactive =true;
material_mc2.interactive =true;

6) AddEventListener and InteractiveScene3DEvent

Aggiungiamo ora gli “addEventListener” alla nostra scena 3d e descriviamo i comportamenti.

Infatti azionando lo script potete vedere come nella finestra dell’output vengano restituite le funzioni di Rollover, Rollout e Click. Bene, potete inserire qui le azioni che preferite ed animare la vostra scena come meglio credete!

plane1.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane1Clicked);
plane1.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane1Rollover);
plane1.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane1Rollout);

plane2.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane2Clicked);
plane2.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane2Rollover);
plane2.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane2Rollout);

function plane2Clicked (myEvent:InteractiveScene3DEvent):void{
trace ("The plane2 was clicked.");
}

function plane1Clicked (myEvent:InteractiveScene3DEvent):void{
trace ("The plane1 was clicked.");
}    

function plane1Rollover (myEvent:InteractiveScene3DEvent):void{
trace ("The plane1 was over.");
viewport.buttonMode = true;
}

function plane1Rollout (myEvent:InteractiveScene3DEvent):void{
trace ("The plane1 was out.");
viewport.buttonMode = false;
}

function plane2Rollover (myEvent:InteractiveScene3DEvent):void{
trace ("The plane2 was over.");
viewport.buttonMode = true;
}

function plane2Rollout (myEvent:InteractiveScene3DEvent):void{
trace ("The plane2 was out.");
viewport.buttonMode = false;

7) Full Class

// DavidSalvatori.com
// First Pv3d interactive Scene3DEvent template tutorial
// Papervision3D_rev859

package
{
import flash.display.Sprite;
import flash.events.Event;

import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.materials.*;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.events.InteractiveScene3DEvent;

public class Pv3d_Tut_2blog extends Sprite
{
private var scene:Scene3D;
private var renderer:BasicRenderEngine;
private var viewport:Viewport3D;
private var camera:Camera3D;

private var plane0:Plane;
private var plane1:Plane;
private var plane2:Plane;

public function Pv3d_Tut_2blog ()
{
init ();
}  

private function init ():void
{
viewport = new Viewport3D(stage.stageWidth, stage.stageHeight, false, true);
scene = new Scene3D();
renderer = new BasicRenderEngine();

camera = new Camera3D();
camera.zoom = 8;
camera.focus = 100;

addChild (viewport);

initObjects ();

addEventListener (Event.ENTER_FRAME, render, false, 0, true);

}

private function initObjects ():void
{
var material_mc0:MovieAssetMaterial = new MovieAssetMaterial("mc_0");
material_mc0.smooth = false;
plane0 = new Plane(material_mc0, 1, 1, 1, 1);
scene.addChild (plane0);
plane0.x= 0;

var material_mc1:MovieAssetMaterial = new MovieAssetMaterial("mc_1");
material_mc1.smooth = true;
material_mc1.interactive =true;
plane1 = new Plane(material_mc1, 899, 399, 6, 6);
scene.addChild (plane1);
plane1.x= 5600;
plane1.z= 0;

var material_mc2:MovieAssetMaterial = new MovieAssetMaterial("mc_2");
material_mc2.smooth = true;
material_mc2.interactive =true;
plane2 = new Plane(material_mc2, 400, 150, 4, 4);
scene.addChild (plane2);
plane2.x= 0;

plane1.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane1Clicked);
plane1.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane1Rollover);
plane1.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane1Rollout);

plane2.addEventListener (InteractiveScene3DEvent.OBJECT_CLICK, plane2Clicked);
plane2.addEventListener (InteractiveScene3DEvent.OBJECT_OVER, plane2Rollover);
plane2.addEventListener (InteractiveScene3DEvent.OBJECT_OUT, plane2Rollout);

function plane2Clicked (myEvent:InteractiveScene3DEvent):void{
trace ("The plane2 was clicked.");
plane2.x= 8000;
plane1.x= 0;}

function plane1Clicked (myEvent:InteractiveScene3DEvent):void{
trace ("The plane1 was clicked.");
plane1.x= 8000;
plane2.x= 0;}    

function plane1Rollover (myEvent:InteractiveScene3DEvent):void{
trace ("The plane1 was over.");}

function plane1Rollout (myEvent:InteractiveScene3DEvent):void{
trace ("The plane1 was out.");}

function plane2Rollover (myEvent:InteractiveScene3DEvent):void{
trace ("The plane2 was over.");}

function plane2Rollout (myEvent:InteractiveScene3DEvent):void{
trace ("The plane2 was out.");}

}  

private function render (event:Event):void {

camera.x += (((stage.mouseX-(stage.stageWidth * .5))*2)-camera.x )*.05;
camera.y += (((stage.mouseY-(stage.stageHeight*.5))*2)-camera.y )*.05;

camera.target = plane0;

renderer.renderScene (scene, camera, viewport);

}
}
}

Conclusion & Download

Ecco fatto! Come detto controllate il pannello dell’output per verificare i vari stadi di rollover, rollout e click events, aggingete le vostre azioni preferite e fatemi sapere se qualcosa non è chiaro! Alla prossima lezione…

Download Source