Papervision3D Carousel Tutorial

Ciao a tutti, è da un pò che mancavo sul blog… per motivi di intenso traffico tutta la Ram a disposizione è stata molto occupata! Eccoci quindi qui con un nuovo tutorial della serie Papervision3d, spero possa essere utile. Vi siete mai chieste come realizzare un carousel 3d in Pv3d per le vostre realizzazioni flash? Ecco come fare!

Generalmente esistono 2 tipi di carousel 3d, uno più semplice da realizzare con i piani che restano sempre rivolti verso l’esterno, l’altro leggeremente più complicato dove i nostri oggetti sono sempre rivolti verso la camera (in questo caso i maggiori problemi nascono nel momento in cui dovete ruotare il carousel).

Demo Pv3d Xml Carousel

A questo link potete visionare una demo della seconda tipologia con altre funzioni aggiunte:

Demo Pv3d Xml Carousel

In questa versione, pensata come un visualizzatore 3d di prodotti, ho caricato i dati da un XML esterno, ho aggiunto diverse funzioni per la rotazione (sia tramite click degli oggetti, che frecce di scorrimento), effetti sull’alpha ed il blur, un visualizzatore di fotografie instanziato quando si clicca l’oggetto centrale e il conto delle posizioni di avanzamento nel visualizzatore per ruotare il carousel al ritorno in questa visualizzazione.

Come completare la vostra applicazione è una questione di esigenze specifiche.

Iniziamo con l’instanziare il vostro primo Pv3d Carousel.

Ho preparato questa sorgente con un Array di sei elementi MovieClip, non era strettamente necessario perchè andavano bene anche dei semplici ColorMaterial, ma magari i meno esperti possono utilizzare la sorgente andando a sostituire i MovieClip con altri personalizzati in modo più semplice.

Main

Per prima cosa creiamo la nostra scena Pv3d che utilizzeremo per entrambi gli esempi instanziando una BasicView e creando un Array con i nosrti piani 3d che attaccheremo allo stage. Ho definito una variabile “myRadius” che sarà il nostro raggio appunto, vedremo dopo come utilizzarla. Ho anche ricavato una variabile angolo all’interno del ciclo che per ogni elemento mi restituisce un valore in gradi corrispondente . Il primo sarà 0, il secondo 60, il terzo 120, e così via…

import org.papervision3d.view.BasicView;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.MovieAssetMaterial;

public class Main extends BasicView {

private var images:Array=new Array ("mc_one","mc_two","mc_three","mc_four","mc_five","mc_six");
private static const myRadius:Number=750;
private var plane:Plane;

public function Main():void {

stage.frameRate=30;
camera.focus=8;
camera.y=120;

for (var i:int=0; i< images.length; i++) {

var mat:MovieAssetMaterial=new MovieAssetMaterial(images[i] , true, true, true);
mat.doubleSided=true;
mat.smooth=true;

plane=new Plane(mat,200,200,2);

var angles:Number=360*i/images.length;
// ... our code

scene.addChild(plane);
}

startRendering();
}
}
}

L’unica cosa che ci resta da fare a questo punto è andare a posizionare i nostri elementi.

Simple Pv3d carousel

Per instanziare il nostro primo carousel diciamo che la sua rotazione Y è uguale al numero dell’angolo corrispondente. Fatto questo per spostare il nostro elemento non basta fare altro che sfruttare la funzione (nativa di PV3d) moveForward() che sposta il nostro elemento del valore raggio in avanti.

Scalando i piani sulla loro X riporto i piani in posizione frontale.

plane.rotationY=angles;
plane.moveForward(myRadius);
plane.scaleX=-1;

Demo Carousel Simple

Advanced Pv3d carousel

In questo altro esempio non andiamo a lavorare sulla rotazione, vogliamo infatti mantenere i nostri piani frontali verso la camera (io preferisco questa modalità per la versatilità di effetti che si possono realizzare…). Non ci resta altro che ricavare la X e la Z. Per fare questo dobbiamo ricorrere a dei semplici calcoli di trigonometria. Vi invito a dare un’occhiata alla Math Class che contiene i metodi e le costanti che rappresentano le funzioni matematiche e i valori comunie alle proprietà sin che calcola e restituisce il seno dell’angolo specificato espresso in radianti e cos che calcola e restituisce il coseno dell’angolo specificato espresso in radianti.
La formula applicata è la stessa.

plane.x=myRadius*Math.sin(angles*Math.PI/180);
plane.z=myRadius*Math.cos(angles*Math.PI/180);

Demo Carousel Advanced

Conclusion

Per muovere gli elementi del carosello potete procedere in diversi modi.
Una soluzione potrebbe essere quella di riposizionare gli elementi al nostro evento onRenderTick ciclando all’interno dell’Array per recuperare gli elementi stessi applicando poi le formule descritte.
Altra soluzione come nell’esempio che vi ho mostrato all’inizio del tutorial dove invece vado a muovere per praticità un solo oggetto contenitore riportando alla rotazione i piani rivolti verso la camera in maniera complementare.

Download

Download Sources