Ambienti fotografici interattivi in Flash con Pano2VR

In un precedente approfondimento abbiamo preso in considerazione alcune tecniche e i relativi strumenti per introdurre elementi tridimensionali all'interno di pagine web. Una delle strade indicate consisteva nella possibilità di riprodurre navigazioni fotografiche tridimensionali attraverso la realizzazione di fotografie panoramiche a 360° ed esportarle in formati specifici (per esempio i filmati panoramici QTVR) o con il supporto di Javascript interattivi.

L'alta resa in termini di user experience di questa tecnica fotografica si deve però confrontare con gli evidenti limiti dei formati di esportazione che, se pur consentono di introdurre degli elementi base interattivi come la possibilità di cliccare su hotspot per aprire una pagina web, non si possono comunque considerare come un punto di arrivo "definitivo" per chi vuole realizzare interazioni originali e di grande impatto.

Per sfruttare al meglio le potenzialità di questa tecnologia e, nello stesso tempo, poter superare i limiti dei formati di cui abbiamo già parlato si può intraprendere una strada parallela che porta a integrare le fotografie panoramiche a 360° (ma come vedremo anche panorami parziali o ultra-grandangolari composte dalla somma di più fotografie) - realizzate con software specifici o addirittura direttamente con Photoshop CS3 - all'interno di interfacce Flash completamente programmabili con il linguaggio Actionscript.

Dal panorama alla realtà virtuale

Come indicato nell'articolo precedente, per realizzare una realtà virtuale interattiva occorre scattare le fotografie con una tecnica abbastanza semplice e successivamente "incollarle" e rielaborarle con un software come Panorama Factory. Per chi non volesse utilizzare un programma specifico, la funzionalità automatica per la fusione di fotografie presente in Photoshop CS3 si rivela perfetta per predisporre la base fotografica su cui costruire la realtà virtuale interattiva con la tecnica che stiamo descrivendo.

Figura 1 - Trattamento delle foto in Photoshop (click per ingrandire)

Dopo aver aperto tutte le foto da unire in un unico panorama con Photoshop, è sufficiente aprire il menu File, scendere sino alla voce Automatizza e selezionare l'opzione Photomerge. Nel pannello che si apre, clicchiamo sul tasto Aggiungi file aperti e selezioniamo sulla sinistra la tipologia di composizione panoramica o grandangolare che intendiamo realizzare (nel caso non fossimo esperti di fotografie panoramiche, il formato Cilindrico dovrebbe rispondere in modo adeguato alle esigenze tipiche di fotocomposizione). Finita questa fase di elaborazione automatica, vedremo che le fotografie sono state fuse in maniera sorprendentemente accurata. Non resta quindi che ritagliare l'area utile e salvare l'immagine ottenuta in un formato standard come .jpg o .tif.

Pano2VR

Figura 2 - Una panoramica di Pano2VR (click per ingrandire)

A questo punto entra in gioco Pano2VR, un potente software appositamente pensato per trasformare fotografie panoramiche dei formati più diversi in realtà virtuali in formato Flash.

Utilizzando la versione dimostrativa si possono sperimentare le potenzialità di questo applicativo. Avviando il software, possiamo importare la fotografia generata con Photoshop CS3 cliccando sul tasto Select Input. Selezioniamo nel menu Type la voce Cylinder e indichiamo con approssimazione l'angolo di ripresa che abbiamo ottenuto fondendo le foto.

In questa fase occorre essere quanto più possibile precisi nell'identificare l'angolo di ripresa generato, perché in base al valore immesso verranno applicate le deformazioni progressive che permetteranno di simulare un punto di vista variabile quando navigheremo nella fotografia panoramica. Ovviamente se utilizziamo come base una panoramica a 360° realizzata con un software specifico saremmo sicuri di ottenere il miglior risultato finale possibile. Quando la fotografia è stata importata, scegliamo nel menu a tendina New output format la voce Flash e clicchiamo su Add. Si aprirà così un pannello di configurazione del file Flash generato. È da questo pannello che possiamo indicare, tra le altre cose, se esportare il file in Flash 8 oppure 9. L'esportazione come

Flash 9 è sicuramente consigliata perché, prevedendo l'utilizzo di del linguaggio Actionscript 3, offre una gamma di caratteristiche interattive molto più evolute rispetto a Flash 8. Seguendo la procedura guidata, in una manciata di secondi saremo così in grado di generare un filmato Flash interattivo di ottima qualità che, già così come è, può essere integrato in qualsiasi progetto Web.

Le API per Flash

Le funzionalità di personalizzazione dell'interfaccia Flash generata automaticamente dal programma sono davvero numerose e interessanti. Oltre a poter applicare un sistema di tasti personalizzabile sin nella grafica e a poter modificare l'aspetto del puntatore, Pano2VR consente di indicare all'interno della fotografia una serie di punti caldi cliccando sui quali si aprono nuove pagine Web. Per chi volesse realizzare un sistema di navigazione interattiva tra i contenuti quindi non è indispensabile effettuare ulteriori elaborazioni oltre a quelle rese possibili dal programma stesso.

Se invece le esigenze di interattività sono molto più spinte e, per esempio, si vogliono programmare una serie di comportamenti che si verificano al passaggio su un hot spot come la comparsa di un video filmato all'interno della panoramica, in questo caso è necessario importare il file Flash generato all'interno di un'ulteriore animazione Flash 9. Perché ciò sia possibili è consigliabile utilizzare le API realizzate appositamente dagli sviluppatori di Pano2VR per aggiungere interattività alla panoramiche realizzate.

Il codice necessario per importare in un file Flash con Actionscript 3 è riportato qui di seguito, che va inserito nel primo frame del filmato:

import flash.display.*;
import flash.net.URLRequest;
import flash.events.Event;

var loader:Loader;
loader = new Loader();

// nella riga successiva va indicato il nome del file da caricare
var url:String = "out.swf";
var urlReq:URLRequest = new URLRequest(url);
var vr:MovieClip;

function finished_loading (e:Event)
{
  vr.pano.onClickQtHotspot = function(id:Number,title:String,url:String,target:String)
  {
    // il codice che viene attivato quando si clicca su un hotspot
    trace(id + "," + title);
    MovieClip(parent).uno.visible=!MovieClip(parent).uno.visible;
  }
  
  // il codice che viene attivato quando si passa sopra un hotspot
  vr.pano.onRollOverQtHotspot = function(id:Number,title:String,url:String,target:String)
  {
    trace("QtRollOver " + id + "," + title);
    // qui inserire eventuali condizioni reative all'id dell'hotspot passando sul quale si attiva una certa funzione
    // if (id==1) {
    //   trace(id + "," + title);
    // }
  }
  
  vr.pano.onRollOutQtHotspot = function(id:Number,title:String,url:String,target:String)
  {
    // il codice che viene attivato quando si esce da un hotspot
    trace("QtRollOut " + id + "," + title);
  }
}

function initHandler(event:Event):void
{
  trace("initHandler: " + event);
  vr = MovieClip(loader.content); // cast 'DisplayObject' to 'MovieClip'
  vr.pano.setWindowSize(640,480);
}

// Dice al loader di chiamare 'finished_loading' alla fine del caricamento dell'swf
loader.contentLoaderInfo.addEventListener(flash.events.Event.COMPLETE, finished_loading);
loader.contentLoaderInfo.addEventListener(Event.INIT, initHandler);
loader.load(urlReq);
addChild(loader);

Tale codice, che non risulta affatto intuitivo per i non esperti di Actionscript 3, permette di caricare un file SFW generato con Pano2VR e di applicare una serie di funzioni davvero interessanti, molte delle quali sono documentate su questa pagina.

Nella panoramica interattiva d'esempio è stato collocato un hotspot andando cliccando sul quale vengono applicate delle azioni sull'ovale di controllo in primo piano. L'esempio è disponibile per il download.