di Rosa Buonamassa - Nicola Convertini

In questa prima parte del tutorial, vedremo come sia possibile realizzare complesse gallerie tridimensionali navigabili sul Web anche senza possedere conoscenze specifiche nel campo della modellazione.Nella successiva come personalizzare la galleria mediante semplici interventi sul codice.

STRUMENTI DI LAVORO

Utilizzeremo a tal fine sono:

• Adobe Photoshop Album release 1.0 o 2.0. In quest’ultimo caso si faccia attenzione a NON considerare equivalente la Starter Edition in quanto priva delle funzionalità su cui focalizzeremo la nostra attenzione. Un browser di recente generazione
• Il plug-in per la visualizzazione tramite browser di filmati generati con Atmosphere.
• Un editor html (va bene per i nostri scopi anche Wordpad) per alcuni successive personalizzazioni.

COSA E’ ADOBE ATMOSPHERE

Atmosfere è il software di Adobe che si propone di offrire uno strumento per la creazione di ambienti tridimensionali pubblicabili sul Web o in documenti PDF. Nel settore della modellazione tridimensionale la novità rappresentata dal software è data dalla capacità di creare complessi “mondi virtuali” utilizzando un set di file che in ridotte dimensioni realizzano un realistico complesso di effetti grafici comprensivi di luci, materiali, animazioni ed effetti tridimensionali.Ciò che otterremo sfrutta la tecnologia di questo software ma non avremo bisogno dell’ambiente di authoring proprio dello stesso.

COSA E’ ADOBE PHOTOSHOP ALBUM

Adobe Photoshop Album è la proposta di Adobe per la gestione del proprio archivio multimediale, con particolare rilievo alle immagini. Tra le numerose possibilità di catalogazione e visualizzazione offerte è presente una procedura in grado di creare palcoscenici tridimensionali utilizzando la tecnologia Atmosphere e visualizzabile tramite qualsiasi browser integrato dell’apposito plug-in ottenibile all’indirizzo http://www.adobe.it/products/atmosphere/main.html

COME CREARE LA GALLERIA

Gli step indicati di seguito si riferiscono alla versione con localizzazione in italiano. La procedura è comunque identica per le altre lingue.Procediamo con ordine.Dopo aver inserito le immagini che vogliamo inserire all’interno della nostra galleria virtuale (in formato di compressione compatibile per il web) selezioniamo il comando

File--> Get Photos--> From File

Fig.1: Selezione della cartella contenente le immagini da catalogare

Dalla finestra successiva selezionare le immagini contenute nella cartella ( tutte se necessario) e cliccare su Get Photos (Figura 2).

Fig.2: Selezione dei file

L’operazione porterà nella finestra di authoring le immagini selezionate (fig.3).

Fig.3: Anteprima delle immagini

Selezioniamo ora il comando

Creations--> Adobe Atmosphere 3D Gallery…

Fig.4: Selezione comando per la galleria 3D

Dall’operazione otterremo la finestra per la personalizzazione della nostra galleria.

Fig.5: Finestra per la personalizzazione della galleria

Nel frame di sinistra potremo verificare, ancora una volta le immagini che concorreranno nella galleria virtuale. Nel frame di destra potremo agire su:

• Gallery style: seleziona l’ambiente tridimensionale della galleria. Sono predefiniti ben 10 ambienti e per ognuno viene mostrata una anteprima statica e un testo descrittivo indicante lo stile architettonico dello stesso, le foto visualizzate all’interno dell’ambiente e la tipologia di musica di sottofondo. Qualora, come probabile, il numero delle foto della nostra galleria ecceda quello predefiinito dell’ambiente, il software provvederà a dividere in gruppi le foto e ad inserire un menù di selezione. L’opzione enable chat associa ad ogni visitatore della galleria un avatar e inserisce un frame per lo svolgimento di una sessione di chat. Chi scrive ha trovato il comportamento della funzione deficitario e quindi sconsigliabile.
• Destination: qui dovremo indicare la cartella che conterrà la nostra galleria. Si presenta in seguito un menù con tre etichette: Banner, Large Photos e Custom Colors.
• Banner permette di inserire titolo e altre informazioni che verranno visualizzate all’apertura della pagina.
• Large Photos permette di agire sulla dimensione delle immagini visualizzate nella galleria.
• Custom colors permette di scegliere la dominante di colore della galleria stessa. Ancora più in basso nella Caption possiamo decidere se e quali informazioni aggiuntive sulle foto visualizzate mostrare dopo la loro selezione. Dopo aver dato l’ok si avvia la procedura di calcolo della galleria

Fig.6: Calcolo della galleria

Dopo qualche secondo di attesa otterremo il risultato atteso.

COME NAVIGARE NELLA GALLERIA

Nel percorso indicato in fase di settaggio in “Destination” ci si presenterà una organizzazione delle cartelle come nell’immagine qui di seguito.

Fig.7: Struttura delle cartelle della galleria

Per visualizzare la galleria sul web non dovremo far altro che trasferire tramite ftp le cartelle ottenute sic et simpliciter e puntare al file index.html. Puntando alla pagina otterremo un risultato simile a quello in figura (chi scrive spera abbiate qualche soggetto più interessante da ritrarre di quelli presentati).

Fig.8: Screenshot della galleria

Fin da subito è possibile notare nella pagina divisa in frame:

• un menù a tendina che divide le foto selezionate per la galleria in gruppi. Vengono visualizzate quelle appartenenti al gruppo selezionato. Non è possibile visualizzare un numero di foto maggiore di quelle previste dall’ambiente selezionato.
• Un pulsante per l’avvio (start guided tour) e l’arresto (stop guided tour)del motore di navigazione interna. La navigazione è possibile anche attraverso i tasti direzionali dopo aver settato il focus nella finestra di visualizzazione della galleria. Una toolbar (in basso) in grado di applicare o meno l’effetto gravità, la telecamera di navigazione o una sessione di chat.

Alle stesse funzionalità, compresa la possibilità di deselezionare la visualizzazione della barra, si può accedere mediante il menù contestuale visualizzabile mediante la pressione del tasto destro sulla galleria.

Autore	Testo
claudio81	Scritto : 19/11/2006 10:09 ( Un mese ) Oggetto : Ottimo tutorial! Davvero un ottimo tutorial !