Articoli

Papervision3D - usare un movieclip come materiale

Essere in grado di usare una bitmap come materiale è già piuttosto comodo per un sacco di situazioni.
Questi materiali sono simili a quelli disponibili nei vari software di modellazione 3D. Ma non stiamo lavorando in un programma di modellazione 3D, stiamo lavorando in Flash. Il motivo principale perché il player di Flash è diventato così popolare è per via della sua capacità di produrre mozzafiato e leggere animazioni. Fin dall'inizio questa è stato qualcosa in cui Flash ha eccelso. Più recentemente, la piattaforma Flash si è dimostrata essere un buon strumento per la costruzione di Rich Internet Applications (RIA). Non sarebbe bello se potessimo utilizzare tali punti di forza per la creazione di scene Papervision3D, o se si potesse applicare animazioni come nostri materiali, o usare gli elementi RIA come materiali?

Tutto ciò che può essere fatto in un MovieClip può essere utilizzato come materiale utilizzando il tipo MovieMaterial. Essenzialmente questo funziona più o meno allo stesso modo del BitmapMaterial, anche se ci sono solo due tipi di materiali filmato:
• MovieMaterial
• MovieAssetMaterial
Anche se si potrebbe aspettare qualcosa di simile a BitmapFileMaterial, non esiste un MovieFileMaterial. Comunque noi useremo solo il primo tipo in questa guida.

Un materiale basato su movie-clip funziona con ogni tipo di oggetto ereditato da DisplayObject. Questo è di solito uno sprite o un filmato. il MovieMaterial funziona con qualsiasi oggetto di visualizzazione che sia accessibile da codice. Istanziare un MovieMaterial richiede alcuni parametri nuovi. Diamo un'occhiata a ciascuno di essi nella seguente tabella:

Parametro  Tipo di dato
Valore di default  Description 
1 movieAsset DisplayObject null Un riferimento all'oggetto che si desidera utilizzare come fonte di questo materiale.
2 transparent Boleano false Definisce o meno se creare un materiale in grado di supportare
trasparenza.
3 animated Boleano
false
Se impostata su true, tutti i fotogrammi del riferimento
movieAsset saranno disegnati e usati come nuova immagine per questo
materiale. Si tratta di una proprietà che consuma CPU
4 precise Boleano false Definisce la precisione del materiale.
5 rect Rettangolo null Un oggetto rettangolo opzionale utilizzato per definire il contorno di un materiale. Questo può essere utile quando è stato definito un filmato che cambia dimensioni durante l'animazione. Senza la definizione di confine, iverrà usata la dimensione corrente  del movieAsset stesso.

Al fine di spiegare come funziona questo materiale, creeremo un nuovo sprite, disegneremo un rettangolo e aggiungeremo un testo. Creeremo un materiale filmato dallo sprite e lo si applicherà ad un piano in rotazione. Siccome lo sprite è un oggetto di visualizzazione, possiamo aggiungerlo allo stage facilmente.
Per fare questo abbiamo bisogno di importare più classi.

import flash.display.Sprite;
import flash.text.TextField;import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.primitives.Plane;

Poichè vogliamo ruotare il piano, abbiamo bisogno di farne una proprietà di classe, quindi dovremo
avere accesso all'interno della onRenderTick ().

private var plane:Plane;

Nel metodo init (), inizieremo con la creazione di un nuovo sprite e a disegnare un rettangolo grigio
su di esso.

private function init():void
{
   var materialSprite:Sprite = new Sprite();
   materialSprite.graphics.beginFill(0xcccccc);
   materialSprite.graphics.drawRect(0,0,200,200);

La prossima cosa che dobbiamo fare è definire un campo di testo. Questo è semplicemente normale ActionScript  e richiede poche righe di codice.

  var textfield:TextField = new TextField();
  textfield.text = "Hello 3D world!";
  textfield.autoSize = TextFieldAutoSize.LEFT;
  textfield.setTextFormat(new TextFormat("Arial",25));

Per posizionare il testo esattamente nel mezzo, dobbiamo sottrarre la larghezza del campo di testo dalla larghezza dello sprite e dividere il valore restante per 2. Lo stesso può essere fatto per l'allineamento verticale con i valori di altezza.

textfield.x = (materialSprite.width - textfield.width) / 2;
textfield.y = (materialSprite.height - textfield.height) / 2;

Quindi, aggiungere il campo di testo per il materiale sprite e aggiungerlo sullo stage, così possiamo vedere quello che abbiamo creato.

materialSprite.addChild(textfield);
addChild(materialSprite);

Ora che abbiamo creato uno sprite, possiamo definire una nuova istanza MovieMaterial, impostarlo
a liscia e doppia faccia, e assegnarlo ad un piano che creiamo. questo funziona
più o meno allo stesso modo degli altri materiali che abbiamo creato finora. Per creare un'istanza valida, è richiesto solo
il primo parametro. Tutti gli altri parametri tengono i valori predefiniti che
per ora vanno bene.

  var material:MovieMaterial = new MovieMaterial(materialSprite);
  material.smooth = true;
  material.doubleSided = true;

  plane = new Plane(material);
  scene.addChild(plane);
}

Come ultimo passo, facciamo ruotare il piano nel metodo onRenderTick (), che è un bon modo di far vedere che è davvero in 3D.

plane.localRotationY++;

All'inizio di questa sezione abbiamo visto che la classe MovieMaterial ha qualche proprietà che non abbiamo mai visto prima. Queste proprietà richiedono animazioni e saranno mostrate nella prossima 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.