Grafica  »  Guide  »  Guida Atmosphere 

Ora non ci resta che creare il file Javascript. Il codice Javascript mi è stato concesso gentilmente da Rolu persona che per primo lo ha realizzato, lo riporto nella sua integrità.

Quello che dobbiamo fare è semplicemente copiare il testo, e incollarlo in un file generato con un editor di testo (Notepad funziona benissimo), salvare il file con nome "clock.js" e inserirlo nella cartella "Demo".

// Atmo clock script, v.1.0
//
// Rolu, CR 2001-May-14, LU 2001-May-14
//

// Uncomment any of these to rotate
// the clock around it's Y axis.
// If you need other rotations, you get the idea :-)
this.yrot=Rotation('Y', 0.000000001); // 0 degrees
//this.yrot=Rotation('Y', Math.PI/2); // 90 degrees
//this.yrot=Rotation('Y', Math.PI); // 180 degrees
//this.yrot=Rotation('Y', Math.PI*1.5); // 270 degrees

this.hours=SubWorld("hours.aer").add();
this.minutes=SubWorld("minutes.aer").add();
this.seconds=SubWorld("seconds.aer").add();


this.hours.position=this.position;
this.minutes.position=this.position;
this.seconds.position=this.position;

this.timestep=function(now, del)
{
var mydate=new Date(), h, m, s;

s=mydate.getSeconds();
m=mydate.getMinutes()+(s/60);
h=mydate.getHours()+(m/60);

this.hours.orientation=Rotation(this.yrot,
'Z', Math.PI*(h/-6));

this.minutes.orientation=Rotation(this.yrot,
'Z', Math.PI*(m/-30));

this.seconds.orientation=Rotation(this.yrot,
'Z', Math.PI*(s/-30));
}
addAnimator(this);

Spieghiamo il funzionamento del codice Javascript in modo da avere una panoramica su alcune funzioni principali. Se volete sapere come inserire l'orologio sulla parete e ritornare successivamente sul codice, passate oltre.

La prima parte del codice spiega con esempi come modificare la rotazione degli oggetti. La seconda parte si occupa di caricare le lancette (Sub Worlds) che sono contenute in file esterni, la sintassi è molto semplice:

• this: è riferito all'oggetto che si occupa di "agganciare" il Sub World, se vi ricordate bene era un anchor point a cui era linkato il file Javascript.
• hours: serve al programmatore per identificare con un nome preciso e riconoscibile l'oggetto che viene caricato
• SubWorld("hours.aer") indica il percorso e il nome dell'oggetto (SubWorld) che si richiama
• add(): è la funzione che si occupa di eseguire il comando, è quella che aggiunge il file esterno.

La terza parte indica la posizione che devono assumere gli oggetti una volta che sono stati caricati.

• this identifica sempre l'anchor point e position è la proprietà che esprime la posizione secondo gli assi X,Y,Z.

La quarta parte è la più interessante ed è quella che si occupa di muovere le lancette.

• this: indica sempre l'oggetto a cui è riferita la funzione
• timestep: è la proprietà che ricalcola per ogni frame (si può intendere come "tempo" la posizione degli oggetti sullo schermo, è indispensabile per azioni che implicano movimenti progressivi da un punto all'altro.
• function: indica che introduciamo una funzione sulla proprietà timestep
• now: il tempo (espresso in secondi) attuale
• del: il tempo che è trascorso da quando è stata invocata la funzione
• var myDate: dichiara la variabile che useremo per memorizzare le informazioni
• new Date(), h, m, s: indica l'oggetto da memorizzare nella variabile, in questo caso la data di sistema nello specifico di ora, minuti, secondi.
• s=mydate.getSeconds(): indica che la variabile s deve contenere il valore dei secondi
• m=mydate.getMinutes()+(s/60): indica che m deve contenere il valore dei minuti
• h=mydate.getHours()+(m/60): indica che h deve contenere le ore
• this.hours.orientation=Rotation(this.yrot, 'Z', Math.PI*(h/-6));
  this.minutes.orientation=Rotation(this.yrot, 'Z', Math.PI*(m/-30));
  this.seconds.orientation=Rotation(this.yrot, 'Z', Math.PI*(s/-30));
  converte il valore dei secondi, minuti, ore attraverso il valore di PI (pigreco) in una posizione precisa dell'asse Y che ruota intorno all'asse Z il cui vertice è nel punto di ancoraggio dell'oggetto importato. Piuttosto complicato ma molto efficace!
• addAnimator: posto dopo la funzione, si occupa di mandarla in esecuzione come se fosse un ciclo che si ripete all'infinito. La parola Animator esprime molto bene il concetto che sta sotto il verbo.

Esistono molte funzioni che possono essere integrate in un mondo 3D, il processo è comunque sempre lo stesso.

Occorre generare un file che contiene le istruzioni Javascript e collegarlo ad un oggetto presente nel progetto che si occupa di caricare il codice. Il link si inserisce nella casella JavascriptURL nella finestra Object Inspector dell'oggetto selezionato e il file Javascript deve essere contenuto nella stessa cartella in cui è salvato il progetto.

Provate ad inserire il codice seguente:

chat.print("Benvenuti al 1° tutorial di Adobe Atmosphere su html.it)

il risultato è scontato ma vale la pena di provare.

Altri articoli

Altre guide

Altre newsletter