Articoli

Papervision3D - Esempio di creazione di un carosello

logoPV3D

Abbiamo imparato a conoscere bene alcuni tipi di materiale in questa sezione. Per concludere questo studio creiamo un carosello interattivo di piani che utilizzano in modo casuale un materiale tintaunita, un materiale bitmap o un materiale clip filmato. Ogni volta che l'utente si posiziona su un piano con materiale basato sul colore, il materiale si trasformerà in un nuovo materiale di colore casuale. Sul materiale bitmap, in modo casuale, caricherà una delle immagini disponibili. E il materiale filmato contiene un pulsante, per invertire l'immagine al click.

Il codice per la creazione di un carosello si basa sulla sfera di sfere di esempio della sezione precedente. Anche se questa volta ci si basa su un cilindro, e gli oggetti 3D sono piani.
Questo esempio utilizza parecchie tipologie di oggetti diversi, il che significa che dobbiamo importare un elenco di 18 diverse classi in cima alla nostra classe:

import flash.display.DisplayObject;
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;

import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Cylinder;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;

Proprio come la sfera in esempio, il progetto creerà un perno do3D come proprietà di classe, che sarà utilizzata nel onRenderTick () per farci ruotare il carosello intorno.

private var pivotDO3D:DisplayObject3D;
private function init():void
{
  pivotDO3D = new DisplayObject3D();
  scene.addChild(pivotDO3D);

Il carosello si basa sui vertici di un cilindro. Il cilindro ha un raggio di 250 e un'altezza di 180, contiene 15 segmenti di larghezza e 2 segmenti d'altezza. Siccome due segmenti di altezza utilizzeranno tre vertici verticali, questo si tradurrà in un carosello composto da 3 righe.

var cylinder:Cylinder = new Cylinder(null,250,180,15,2);

Successivamente, un ciclo tra i vertici del cilindro per posizionare un piano su ogni vertice.

var numberOfVerts:uint = cylinder.geometry.vertices.length
for (var i:uint = 0; i < numberOfVerts; i++)
{

Per applicare un materiale casuale, per ogni piano, si aggiunge un metodo chiamato getRandomMaterial (), che restituisce un'istanza contenente MaterialObject3D, il tipo di materiale casuale. Questo metodo verrà spiegato tra un po'.

var plane:Plane = new Plane(getRandomMaterial(),75,75);

Poi dobbiamo posizionare il piano sulle coordinate del vertice.

plane.x = cylinder.geometry.vertices[i].x;
plane.y = cylinder.geometry.vertices[i].y;
plane.z = cylinder.geometry.vertices[i].z;

Tutti i piani nel carosello devono essere ruotati, come se fossero di fronte al centro del carosello. Senza la rotazione, tutti gli oggetti sarebbero rivolti nella stessa direzione, che non ci darebbe l'effetto che stiamo cercando. La seguente formula calcola l'angolo di rotazione in radianti, sulla base di plane.x e plane.z, e quindi converte tutto in gradi.

plane.localRotationY = -Math.atan2(plane.x,plane.z) * 180 / Math.PI;

Per rilevare un evento rollover, abbiamo bisogno di definire un listener di eventi. objectRollOver (), metodo che verrà spiegato tra un po'.

plane.addEventListener(InteractiveScene3DEvent.OBJECT_OVER,
objectRollOver);

Aggiungiamo il piano per l'oggetto pivot DO3D.

  pivotDO3D.addChild (plane);

Siccome vogliamo che l'interattività sia per oggetti e materiali, abbiamo bisogno di impostare l'interattività della viewport su true.

viewport.interactive = true;

Per avere una piacevole visione del carosello, abbiamo bisogno di cambiare la posizione della telecamera e lo zoom
di un po '.

  camera.z = 200;
  camera.zoom = 80;
}

Il metodo seguente restituisce uno dei tre materiali scelti, sulla base di numeri casuali. I nuovi metodi saranno utilizzati per generare il tipo di materiale casuale.

private function getRandomMaterial():MaterialObject3D
{
  var random:Number = Math.round(Math.random() * 2);
  if(random == 0)
  {
    return createMovieMaterial();
  }
  else if(random == 1)
  {
    return createBitmapMaterial();
  }
  else
  {
    return createColorMaterial();
  }
}

Uno dei materiali casuale, è del tipo MovieMaterial, che viene creato chiamando il metodo seguente. Esso contiene una sprite nidificata, che usiamo per capovolgere il materiale. L'utente può capovolgere il materiale facendo clic sulla freccia d'inversione che viene caricato all'interno di questa classe.

private function createMovieMaterial():MovieMaterial
{
  var materialSprite:Sprite = new Sprite();
  var flippedSprite:Sprite = new Sprite();
  flippedSprite.graphics.beginFill(0x3366FF);
  flippedSprite.graphics.drawRect(0,0,512,512);

L'immagine caricata funge da pulsante. Creare un loader, posizionarlo, e aggiungerlo al flippedSprite.

var imgLoader:Loader = new Loader();
imgLoader.load(new URLRequest("assets/flip.png"));
imgLoader.x = 300;
imgLoader.y = 350;
flippedSprite.addChild(imgLoader);

Al click ribaltiamo il materiale e il rollover viewport.buttonMode si imposta su true, in modo che il pulsante sullo sprite ci dà l'idea che sia cliccabile. Facciamo questo aggiungendo un normale listener di eventi.

imgLoader.addEventListener(MouseEvent.CLICK,flipClick);
imgLoader.addEventListener(MouseEvent.MOUSE_OVER,spriteRollOver);
imgLoader.addEventListener(MouseEvent.MOUSE_OUT,spriteRollOut);

Lo sprite capovolto deve far parte dello sprite materiale. Successivamente, un'istanza di MovieMaterial può essere creata e restituita. Si noti che la proprietà di animazione è impostata su true nel costruttore, ciò per mantenere semplice questa classe per ora. faremo visualizzare automaticamente un materiale aggiornato una volta che l'immagine è stata caricata. Ciò consente di risparmiarci dalla creazione di listner, in attesa che il caricatore abbia completato e aggiornato l'istanza di MovieMaterial.

  materialSprite.addChild(flippedSprite);
  var material:MovieMaterial = new MovieMaterial(materialSprite,false,true);
  material.interactive = true;

  return material;
}

Una bitmap casuale è il nostro secondo tipo di materiale casuale. Questo metodo carica una delle 10 immagini casuali a disposizione, numerate da image_0.jpg a image_9.jpg.

private function createBitmapMaterial():BitmapMaterial
{
  var random:Number = Math.round(Math.random() * 9);
  var material:BitmapFileMaterial = new BitmapFileMaterial("assets/
  image_" + random + ".jpg");
  return material;
}

L'ultimo materiale casuale è un colore a caso ed è un materiale interattivo, che viene restituito con questo metodo.

private function createColorMaterial():ColorMaterial
{
  return new ColorMaterial(0xFFFFFF * Math.random(),1,true);
}

Ogni volta che l'utente passa sopra uno dei piani del carosello, il seguente metodo verrà attivato. Per ora, vogliamo farlo reagire a ciò solo quando il piano è un materiale di tipo ColorMaterial. Se questo è il caso, un nuovo ColorMaterial casuale sostituirà il materiale attuale.

private function objectRollOver(e:InteractiveScene3DEvent):void
{
  if(e.displayObject3D.material is ColorMaterial)
  {
    e.displayObject3D.material = createColorMaterial();
  }
}

I prossimi due metodi sono per simulare il comportamento del pulsante, cambiando il puntatore del mouse con un cursore a forma di mano quando è finito di capovolgere il pulsante che fa parte del materiale del filmato.
Da non confondere con l'oggetto rollover: questi sono solo per il pulsante flip.

private function spriteRollOver(e:MouseEvent):void
{
  viewport.buttonMode = true;
}

private function spriteRollOut(e:MouseEvent):void
{
  viewport.buttonMode = false;
}

Quando l'utente fa clic sul pulsante flip, questo metodo viene attivato e cambia il valore della proprietà scaleX per capovolgere il materiale.

private function flipClick(e:MouseEvent):void
{
  var flippedSprite:DisplayObject = Loader(e.target).content.parent;
  if(flippedSprite.scaleX == -1)
  {
    flippedSprite.scaleX = 1;
  }
  else
  {
    flippedSprite.scaleX = -1;
  }
}

Ogni onRenderTick (), guarda alla posizione del mouse sul palco e tradurce tutto ad un valore localRotationY dandovi il controllo della rotazione del carosello spostando il mouse verso sinistra o verso destra.

override protected function onRenderTick(e:Event=null):void
{
  pivotDO3D.localRotationY +=(stage.mouseX -
  stage.stageWidth / 2) / 200;
  super.onRenderTick();
}

La pubblicazione di questo esempio si tradurrà in un carosello interattivo, contenente diverse tecniche che abbiamo discusso in questa sezione.

Filippo Porcari
Author: Filippo PorcariWebsite: http://filippo.porcari.oranjuice.org/Email: Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo.
designer freelance
Sono un graphic designer e mi occupo di pubblicità. Da più di 10 anni dedico le mie energie alla realizzazioni d'immagine aziendale e comunicazione visiva con un'attenzione alle nuove tecnologie del web. Da qualche anno ho scoperto il software open source e mi sono dedicato alla sua introduzione nel mio workflow produttivo ottenendo ottimi risultati.

© copyright 2011

Porcari Filippo studio grafico - p.iva 01985590023

Tutti i diritti riservati.