In Animate sono disponibili i tipi di documento VR 360 e Panorama VR per creare facilmente contenuti coinvolgenti. Inoltre, potete usare il nuovo tipo di documento per realtà virtuale per importare modelli 3D (come file .glb) in un progetto Animate e creare animazioni sui contenuti 3D. 

Per visualizzare in anteprima i contenuti creati in documenti VR, potete usare il nuovo pannello Vista VR. Dal pannello Vista VR potete fare clic sulle istanze dei clip filmato e spostarle. Animate rileva automaticamente gli oggetti quando fate clic e li spostate. Nei documenti Panorama VR si sposteranno lungo un tracciato cilindrico; nei documenti VR 360 si sposteranno invece lungo un tracciato sferico. Potete inoltre contrassegnare i livelli come livelli texture nel pannello Linea temporale, e verranno avvolti rispettivamente su un cilindro o una sfera per questi due tipi di documento.

Con l’ausilio di un ricco set di API, Animate consente inoltre di gestire le animazioni in realtà virtuale in fase di esecuzione. Ad esempio, quando un utente fa clic su un pulsante potete introdurre alcuni oggetti in un ambiente di realtà virtuale.  

Nota:

Realtà virtuale (360) e Realtà virtuale (Panorama) in Animate sono versioni beta per la release di ottobre 2018. 

Tipi di documento per la realtà virtuale

Esistono due tipi di documento per la realtà virtuale (VR):

Panorama VR

  • Utilizzate questo tipo di documento per creare contenuti panoramici per applicazioni di realtà virtuale. 
  • In questo tipo di documento, il contenuto che viene disegnato direttamente sui livelli texture è disposto su un cilindro.
  • Potete scegliere se visualizzare l'immagine panoramica sul livello texture o disegnare uno sfondo. 
  • Animate consente di convertire le animazioni 2D da voi create in contenuti panoramici interattivi. 

VR 360

  • Utilizzate questo tipo di documento per creare contenuti a 360 gradi per applicazioni di realtà virtuale.  
  • In questo tipo di documento, il contenuto che viene disegnato direttamente sui livelli texture è disposto su una sfera.
  • Potete scegliere se usare un’immagine a 360 gradi o disegnare i contenuti. 
  • Animate consente di convertire le animazioni 2D da voi create in contenuti interattivi a 360 gradi.
  • Per lavorare con questo tipo di documento, usate immagini equirettangolari sui livelli texture.

VR 360 e Panorama VR nella schermata di avvio
VR 360 e Panorama VR nella schermata di avvio

Creazione e pubblicazione di contenuti in realtà virtuale

Per creare contenuti in realtà virtuale in Animate, seguite i passaggi riportati di seguito:

  1. Importate un'immagine panoramica o a 360° nello stage da usare come sfondo.

    Se le dimensioni dell’immagine sono molto grandi, potete regolare le dimensioni di visualizzazione dello stage.

    • Per impostare le dimensioni, selezionate Elabora > Documento.
    •  Fate clic su Adatta al contenuto.

    Scegliete l’icona Centra lo stage in alto a destra per impostare l’immagine al centro dello schermo.

  2. Per creare un livello come livello texture, fate clic sull'icona Crea involucro texture per tutti i livelli nel pannello della linea temporale, come mostrato nella schermata di seguito:

    Crea involucro texture per tutti i livelli
    Crea involucro texture per tutti i livelli

    Il livello texture si dispone su una sfera o un cilindro a seconda del tipo di documento selezionato.

  3. Aggiungete degli oggetti sullo stage; quindi aggiungete interpolazione classica o di movimento agli oggetti a seconda delle risorse, e create l’animazione. 

    Vista dell'ambiente stage per VR 360
    Vista dell'ambiente stage per VR 360

    Nell’animazione di esempio illustrata qui sopra, potete vedere l’immagine di sfondo su una sfera, un uccello con un tracciato di movimento guidato e un’interpolazione classica per i livelli. 

  4. Per l’anteprima del contenuto, utilizzate Finestre > Vista VR.

    Utilizzo della vista VR per visualizzare in anteprima il contenuto VR
    Utilizzo della vista VR per visualizzare in anteprima il contenuto VR

    Nella finestra di dialogo Vista VR, fate clic sul pulsante Avvia vista VR

    Finestra di dialogo vista VR
    Finestra di dialogo vista VR

    Nella modalità di anteprima Vista VR, reimpostate il contenuto sul suo stato iniziale utilizzando il pulsante Ripristina. Vista VR non riflette automaticamente le modifiche sullo stage di creazione. Per visualizzare le modifiche applicate alle risorse nell'ambiente stage, fate clic su Aggiorna

    Opzioni Aggiorna e Ripristina della vista VR
    Opzioni Aggiorna e Ripristina della vista VR

    Potete spostare le istanze dei clip filmato nella modalità di anteprima. Al passaggio del mouse sugli oggetti, Animate li rileva automaticamente modificando la forma del cursore in un'icona a barre incrociate, come mostrato nella schermata di seguito. Potete spostare gli oggetti lungo una sfera o un cilindro a seconda del tipo di documento selezionato.

    Per scorrere il contenuto nella finestra Vista VR, fate clic sulla schermata di anteprima e trascinate. 

    Icona a barre incrociate per spostare gli oggetti
    Icona a barre incrociate per spostare gli oggetti
  5. Scegliete File > Pubblica o premete Ctrl + Invio per pubblicare il contenuto. Con la pubblicazione, l’immagine si avvolge su una trama cilindrica o sferica in Animate. Su questi livelli potete aggiungere altri livelli e contenuti animati.

    L’output pubblicato VR 360 di esempio si presenta come illustrato di seguito nella GIF animata. 

    360-Degree-VR-2

    Quando pubblicate il contenuto di realtà virtuale, potete scegliere di utilizzare le librerie JavaScript come runtime. Per impostazione predefinita, Animate utilizza il runtime per i contenuti pubblicati dalle librerie in hosting. Se intendete inserire il runtime nel pacchetto dell’output pubblicato, deselezionate la relativa opzione in Impostazioni pubblicazione. 

    Impostazioni di pubblicazione
    Impostazioni di pubblicazione per le librerie

Utilizzo della realtà virtuale in fase di esecuzione

Con l'ausilio delle API, Animate consente inoltre di gestire le animazioni in realtà virtuale in fase di esecuzione. Ad esempio, potete inserire alcuni oggetti in un ambiente di realtà virtuale a 360° quando l'utente fa clic su un pulsante. 

Le API di esecuzione per la realtà virtuale sono le seguenti:

Pacchetto: anWebgl

Proprietà

Nome

Tipo/classe

Accesso

Descrizione

Esempio

Stage

Stage

RW

Consente di ottenere o impostare le proprietà dello stage

anWebgl.stage

virtualCamera

VirtualCamera

RW

Consente di accedere alla videocamera predefinita

 

Root

Clip filmato

RO

 

anWebgl.root

Metodi

Nome

Prototipo

Descrizione

Esempio

addGLBFile

addGLBFile(percorso file: string, successCallback : function, errorCallback : function):void

Carica il modello 3D dal file GLB specificato

 

playAll

playAll() : void

Riproduce l'animazione di tutti i clip filmato, root compreso

anWebgl.playAll;

stopAll

stopAll():void

Interrompe l'animazione di tutti i clip filmato, root compreso

anWebgl.stopAll;

Classe: clip filmato

Eredita: DisplayObjectContainer

Proprietà

Metodi

Nome

Prototipo

Descrizione

Esempio

Play

play(): void

Riproduce l'animazione del clip filmato.

anWebgl.root.getChildByName("name").play();

Stop

stop(): void

Interrompe l'animazione del clip filmato

anWebgl.root.getChildByName("name").stop();

 

Pause

Pause(): void

Mette in pausa al fotogramma corrente in un clip filmato.

anWebgl.root.getChildByName("name").pause();

 

playAll

playAll() : void

Riproduce l'animazione di tutti i clip filmato, root compreso.

anWebgl.root.getChildAt(0).playAll();

 

stopAll

stopAll():void

Interrompe l'animazione di tutti i clip filmato, root compreso.

anWebgl.root.getChildAt(0)).stopAll();

 

pauseAll

pauseAll():void

Mette in pausa l'animazione di un clip filmato al fotogramma corrente.

anWebgl.root.getChildAt(0).pauseAll();

 

Classe: DisplayObject

Eredita: IEventDispatcher

Nome

Prototipo

Descrizione

Esempio

hitTestPoint

hitTestPoint( ):Boolean

visibile.

Restituisce true se un punto specifico rientra in questo oggetto.

 

Nome

Tipo/classe

Accesso

Descrizione

Esempio

X

Numero

RW

Traslazione sull'asse x.

var name = anWebgl.getRoot().getChildByName("name");
name.x+=10;

 

Y

Numero

RW

Traslazione sull'asse y

var name = anWebgl.getRoot().getChildByName("name");
name.y+=10;

 

Z

Numero

RW

Traslazione sull'asse Z

var name = anWebgl.getRoot().getChildByName("name");
name.z+=10;

 

scaleX

Numero

RW

Scala lungo l'asse x

var root = anWebgl.getRoot();
var child = root.getChildAt(0);
child.scaleX=2;

 

scaleY

Numero

RW

Scala lungo l'asse y

var root = anWebgl.getRoot();
var child = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

Numero

RW

Scala lungo l'asse Z

var root = anWebgl.getRoot();
var child = root.getChildAt(0);
child.scaleZ=10;

 

rotationX

Numero

RW

Rotazione lungo l'asse x

anWebgl.getRoot().getChildByName("name").rotationX+=30;

 

rotationY

Numero

RW

Rotazione lungo l'asse y

anWebgl.getRoot().getChildByName("name").rotationY+=30;

 

rotationZ

Numero

RW

Rotazione lungo l'asse Z

anWebgl.getRoot().getChildByName("name").rotationZ+=30;

 

Parent

DisplayObjectContainer

RO

Contenitore padre

var root = anWebgl.getRoot();
var child = root.getChildAt(0);
console.log(child.parent)

 

Visible

Valore booleano

RW

 

var root = anWebgl.getRoot();
var child = root.getChildAt(0);
console.log(child.visible);

 

 

   
     

Classe: DisplayObjectContainer

Eredita: InteractiveObject

Nome

Prototipo

Descrizione

Esempio

numChildren

 

 

 

removeChild

removeChild(obj:DisplayObject):void

 

 

Contains

 

 

 

getChildAt

getChildAt(frame:Number): DisplayObject

 

 

getChildByName

getChildByName(name:String):DisplayObject

 

 

 

 

 

 

Classe: Stage

Proprietà

Nome

Accesso

Descrizione

Esempio

stageWidth

RO

Larghezza dello stage

 

stageHeight

RO

Altezza dello stage

 

Colore

RW

Colore di sfondo dello stage

 

Classe: VirtualCamera

Metodi

Nome

Prototipo

Descrizione

Esempio

getCamera

getCamera()

Ottiene l'oggetto della videocamera. Per ottenere o impostare le proprietà della videocamera in fase di esecuzione.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

getPosition

getPosition()

Restituisce l'oggetto con le proprietà x, y, z che specificano la posizione corrente della videocamera.

let cam = anWebgl.virtualCamera.getCamera();
let pos = cam.getPosition();
console.log("camera position x: " +pos.x + " y: "+ pos.y+" z: "+pos.z);

 

setPosition

setPosition()

Sposta la videocamera nella posizione assoluta specificata dai parametri di input. Valore predefinito = 0.

let cameraPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setPosition(cameraPos);

 

moveBy

moveBy()

Sposta la videocamera in relazione alla posizione corrente.

let moveByPos = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().moveBy(moveByPos);

 

resetPosition

resetPosition()

Ripristina la posizione originale della videocamera, ovvero (0,0,0).


anWebgl.virtualCamera.getCamera().resetPosition();

 

SetRotation

SetRotation()

Ruota la videocamera dell'angolo assoluto specificato dai parametri di input.

let __rotation__ = {x: 10, y:10, z:10};
anWebgl.virtualCamera.getCamera().setRotation(__rotation__);

 

resetRotation

resetRotation()

Ripristina l'angolo della videocamera su zero.

anWebgl.virtualCamera.getCamera().resetRotation();

 

Supporto per contenuti 3D

Potete usare il tipo di documento per realtà virtuale per importare modelli 3D (file .glb) in un progetto Animate e creare animazioni sui contenuti 3D.

  1. Create un documento di tipo anteprima VR (360) o VR (panorama).

  2. Scegliete File > Importa, quindi individuate il file .glb desiderato da importare nello stage o nella libreria.

    Importazione di contenuti 3D nello stage
    Importare contenuti 3D nello stage
  3. Aggiungete animazioni e interattività in modo analogo agli oggetti clip filmato e pubblicate.

    Potete anche visualizzare in anteprima il modello 3D in Vista VR.

    Visualizzazione in anteprima di contenuti 3D dalla vista VR
    Visualizzazione in anteprima di contenuti 3D dalla vista VR

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online