Guida utente Annulla

Creazione e pubblicazione di contenuti in realtà virtuale

 

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. La vista VR consente di inserire gli oggetti nello spazio 3D. Le modifiche apportate nella posizione degli oggetti (clip filmato) nella vista VR si riflettono automaticamente nello stage 2D. 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.  

 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 avere un’immagine equirettangolare o disegnare i contenuti. 
  • Animate consente di convertire le animazioni 2D da voi create in contenuti interattivi a 360 gradi.
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. 

    Stage VR 360
    Stage VR 360

    La schermata mostrata sopra illustra la vista dello stage di Animate con l'immagine equirettangolare nel tipo di documento di VR 360, un uccello con un percorso di movimento animato, e l'interpolazione classica nella linea temporale. 

  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

    Nel pannello Vista VR, fate clic sul pulsante Avvia vista VR.

    Pannello della vista VR
    Pannello della 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 un percorso a sfera o a 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. 

    Esempio di output di VR 360
    Esempio di output di VR 360

    Esempio di output del panorama VR
    Esempio di output del panorama VR

    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

Rendere le animazioni più moderne con la realtà virtuale

La realtà virtuale è una tendenza predominante nel mercato. Per scoprire come introdurre la realtà virtuale nei vostri contenuti, seguite l’esercitazione riportata alla fine di questo esempio ed effettuate le seguenti operazioni.

  1. Nella scheda Home fate clic su Avanzate.

  2. Selezionate Panorama VR e fate clic su Crea.

Come creare contenuti panoramici con Animate

Guardate il video per scoprire come aggiungere altri effetti alla vista panoramica e fornire un’esperienza virtuale ancora più coinvolgente.

Esercitazione video sull'esportazione di WebGL-glTF (standard ed esteso)

Video che dimostra come utilizzare l'esportazione di WebGL-glTF (standard ed esteso)

Utilizzo di 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 e individuate il file .glb 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.

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, quando un utente fa clic su un pulsante potete introdurre alcuni oggetti in un ambiente di realtà virtuale a 360°. 

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

anWebgl.virtualCamera

Root

Clip filmato

RO

Oggetto visualizzato più in alto (linea temporale scena corrente).

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

anWebgl.addGLBFile("model.glb" , successCallbackFunction, errorCallbackFunction).

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();
(oppure)

this.play(); 

Stop

stop(): void

Interrompe l'animazione del clip filmato

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

 

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();

 

Classe: DisplayObject

Eredita: IEventDispatcher

Nome

Prototipo

Descrizione

Esempio

hitTestPoint

hitTestPoint(x, y, Boolean).

restituisce displayObject/displayObjectContainer/movieClip in base al tipo di risultato dell’oggetto.

x e y sono coordinate del punto sullo schermo.

anWebgl.root.hitTestPoint(300, 200, vero, falso);

Nome

Tipo/classe

Accesso

Descrizione

Esempio

X

Numero

RW

Traslazione sull'asse x.

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

 

Y

Numero

RW

Traslazione sull'asse y

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

 

Z

Numero

RW

Traslazione sull'asse Z

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

 

scaleX

Numero

RW

Scala lungo l'asse x

radice var = anWebgl.root;
elementi figlio var = root.getChildAt(0);
child.scaleX=2;

 

scaleY

Numero

RW

Scala lungo l'asse y

radice var = anWebgl.root;
elemento figlio var = root.getChildAt(0);
child.scaleY=10;

 

scaleZ

Numero

RW

Scala lungo l'asse Z

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

 

rotationX

Numero

RW

Rotazione lungo l'asse x

anWebgl.root.getChildByName("nome").rotationX+=30;

(oppure)

anWebgl.root.movieClip_name.rotationX+=30;

rotationY

Numero

RW

Rotazione lungo l'asse y

anWebgl.root.getChildByName("nome").rotationY+=30;

 

rotationZ

Numero

RW

Rotazione lungo l'asse Z

anWebgl.root.getChildByName("nome").rotationZ+=30;

 

Parent

DisplayObjectContainer

RO

Contenitore padre

radice var = anWebgl.root;
elemento figlio var = root.getChildAt(0);
console.log(child.parent)

 

Visible

Valore booleano

RW

Visibilità oggetto

radice var = anWebgl.root;
elemento figlio var = root.getChildAt(0);
console.log(child.visible);

Classe: DisplayObjectContainer

Eredita: DisplayObject

Nome

Prototipo

Descrizione

Esempio

numChildren

numChildren:num

restituisce il numero di elementi figli di un oggetto

anWebgl.root.movieClipInstanceName.numChildren;

removeChild

removeChild(obj:DisplayObject):void

rimuove l'oggetto dell'argomento se presente

anWebgl.root.movieClipInstanceName.removeChild(childObj);

Contains

contains(obj:DisplayObject):boolean

restituisce vero se l’oggetto dell’argomento è un elemento figlio, altrimenti falso

anWebgl.root.movieClipInstanceName.contains(childObj);

getChildAt

getChildAt(index:Number): DisplayObject

restituisce l'elemento figlio all'indice dell'argomento

anWebgl.root.movieClipInstanceName.getChildAt(2);

getChildByName

getChildByName(name:String):DisplayObject

restituisce l'elemento figlio con il nome dell'argomento se esiste

anWebgl.root.movieClipInstanceName.getChildByName(childName);

Classe: Stage

Proprietà

Nome

Accesso

Descrizione

Esempio

stageWidth

RO

Larghezza dello stage

anWebgl.stage.stageWidth

stageHeight

RO

Altezza dello stage

anWebgl.stage.stageHeight

Colore

RW

Colore di sfondo dello stage

anWebgl.stage.color

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();

 

Ottieni supporto in modo più facile e veloce

Nuovo utente?