Guida utente Annulla

Creazione e pubblicazione di contenuti in realtà virtuale

Cerca
Animate

Animate

Apri app
  1. Guida utente di Adobe Animate
  2. Introduzione ad Animate
    1. Novità di Animate
    2. Glossario visivo
    3. Requisiti di sistema per Animate
    4. Scelte rapide da tastiera di Animate
    5. Utilizzare diversi tipi di file in Animate
  3. Animazione
    1. Concetti di base sulle animazioni in Animate
    2. Come utilizzare i fotogrammi e i fotogrammi chiave in Animate
    3. Animazione fotogramma per fotogramma in Animate
    4. Come lavorare con le animazioni interpolate classiche in Animate
    5. Strumento Pennello
    6. Guida di movimento
    7. Interpolazione di movimento e ActionScript 3.0
    8. Informazioni sull’animazione con interpolazione di movimento
    9. Animazioni con interpolazione di movimento
    10. Creazione di un’animazione con interpolazione di movimento
    11. Utilizzo dei fotogrammi chiave di proprietà
    12. Animare la posizione con un'interpolazione
    13. Come modificare le interpolazioni di movimento con l'Editor movimento
    14. Modifica del tracciato di movimento di un’animazione con interpolazione
    15. Manipolazione delle interpolazioni di movimento
    16. Aggiunta di andamenti personalizzati
    17. Creazione e applicazione di preimpostazioni di movimento
    18. Impostazione delle estensioni di interpolazione per l’animazione
    19. Operazioni con le interpolazioni di movimento salvate come file XML
    20. Interpolazioni di movimento e classiche a confronto
    21. Interpolazione di forme
    22. Utilizzare lo strumento di animazione Osso in Animate
    23. Utilizzare il rigging dei personaggi in Animate
    24. Come utilizzare i livelli maschera in Adobe Animate
    25. Come utilizzare le scene in Animate
  4. Interattività
    1. Come creare pulsanti con Animate
    2. Convertire progetti Animate in altri formati di tipi di documenti
    3. Creare e pubblicare documenti HTML5 Canvas in Animate
    4. Aggiungere interattività con gli snippet di codice in Animate
    5. Creazione di componenti HTML5 personalizzati
    6. Utilizzo dei componenti in HTML5 Canvas
    7. Creazione di componenti personalizzati: esempi
    8. Snippet di codice per componenti personalizzati
    9. Best practice - Pubblicità con Animate
    10. Creazione e pubblicazione di contenuti in realtà virtuale
  5. Area di lavoro e flusso di lavoro
    1. Creazione e gestione dei pennelli artistici
    2. Utilizzo di Google Fonts nei documenti HTML5 Canvas
    3. Utilizzo di Creative Cloud Libraries con Adobe Animate
    4. Utilizzare il pannello Strumenti e Stage per Animate
    5. Flusso di lavoro e area di lavoro di Animate
    6. Utilizzo di font Web nei documenti HTML5 Canvas
    7. Linee temporali e ActionScript
    8. Operazioni con più linee temporali
    9. Impostare le preferenze
    10. Uso dei pannelli di creazione di Animate
    11. Creare livelli della linea temporale con Animate
    12. Esportare animazioni per dispositivi mobili e motori grafici
    13. Spostamento e copia degli oggetti
    14. Modelli
    15. Trova e sostituisci in Animate
    16. Annulla, Ripeti e il pannello Cronologia
    17. Scelte rapide da tastiera
    18. Come utilizzare la linea temporale in Animate
    19. Creazione di estensioni HTML
    20. Opzioni di ottimizzazione per immagini e GIF animati
    21. Impostazioni per l’esportazione di immagini e file GIF
    22. Pannello Risorse in Animate
  6. File multimediali e video
    1. Trasformazione e combinazione di oggetti grafici in Animate
    2. Creazione e utilizzo di istanze di simboli in Animate
    3. Ricalco immagine
    4. Come utilizzare l’audio in Adobe Animate
    5. Esportazione di file SVG
    6. Creare file video da utilizzare in Animate
    7. Come aggiungere un video in Animate
    8. Disegnare e creare oggetti con Animate
    9. Rimodellare linee e forme
    10. Tratti, riempimenti e gradienti con Animate CC
    11. Utilizzo di Adobe Premiere Pro e After Effects
    12. Pannelli per il colore in Animate CC
    13. Apertura di file Flash CS6 con Animate
    14. Utilizzare il testo classico in Animate
    15. Inserimento di grafica in Animate
    16. Bitmap importate in Animate
    17. Grafica 3D
    18. Utilizzo dei simboli in Animate
    19. Disegnare linee e forme con Adobe Animate
    20. Utilizzare le librerie in Animate
    21. Esportazione di suoni
    22. Selezione degli oggetti in Animate CC
    23. Utilizzare i file AI di Illustrator in Animate
    24. Applicazione di metodi di fusione
    25. Disposizione degli oggetti
    26. Automazione delle operazioni con il menu Comandi
    27. Testo in più lingue
    28. Utilizzo della funzione Videocamera di Animate
    29. Filtri grafici
    30. Suono e ActionScript
    31. Preferenze di disegno
    32. Disegno con lo strumento Penna
  7. Piattaforme
    1. Convertire progetti Animate in altri formati di tipi di documenti
    2. Supporto piattaforme personalizzato
    3. Creare e pubblicare documenti HTML5 Canvas in Animate
    4. Creazione e pubblicazione di un documento WebGL
    5. Come creare pacchetti di applicazioni per AIR per iOS
    6. Pubblicazione di applicazioni AIR for Android
    7. Pubblicazione per Adobe AIR per desktop
    8. Impostazioni di pubblicazione ActionScript
    9. Procedure ottimali - Organizzazione del codice ActionScript in un’applicazione
    10. Come utilizzare ActionScript con Animate
    11. Accessibilità dell’area di lavoro di Animate
    12. Creazione e gestione di script
    13. Abilitazione del supporto per piattaforme personalizzate
    14. Panoramica di Supporto piattaforme personalizzate
    15. Operazioni con i plug-in di Supporto piattaforme personalizzate
    16. Debug di ActionScript 3.0
    17. Abilitazione del supporto per piattaforme personalizzate
  8. Esportazione e pubblicazione
    1. Come esportare i file da Animate CC
    2. Pubblicazione OAM
    3. Esportazione di file SVG
    4. Esportazione di elementi grafici e video con Animate
    5. Pubblicazione di documenti AS3
    6. Esportare animazioni per dispositivi mobili e motori grafici
    7. Esportazione di suoni
    8. Best practice - Suggerimenti per la creazione di contenuti per dispositivi mobili
    9. Best practice - Convenzioni per i contenuti video
    10. Best practice - Linee guida per la creazione di applicazioni SWF
    11. Best practice - Strutturazione dei file FLA
    12. Best practice per ottimizzare i file FLA per Animate
    13. Impostazioni di pubblicazione ActionScript
    14. Specificare le impostazioni di pubblicazione per Animate
    15. Esportazione di file proiettore
    16. Esportare immagini e GIF animati
    17. Modelli di pubblicazione HTML
    18. Utilizzo di Adobe Premiere Pro e After Effects
    19. Condividere e pubblicare rapidamente le animazioni
  9. Risoluzione dei problemi
    1. Problemi risolti
    2. Problemi noti

 

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

 

Altri argomenti correlati

 Adobe

Ottieni supporto in modo più facile e veloce

Nuovo utente?

Collegamenti rapidi

Visualizza tutti i tuoi piani Gestione dei piani
Visualizza collegamenti rapidi
Nascondi collegamenti rapidi
Adobe MAX 2024

Adobe MAX
La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Registrati

Adobe MAX

La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Registrati
Adobe MAX 2024

Adobe MAX
La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Registrati

Adobe MAX

La conferenza sulla creatività

14-16 ottobre Miami Beach e online

Registrati

Note legali    |    Informativa sulla privacy online