Creazione e pubblicazione di un documento WebGL

  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 utilizzare le animazioni con interpolazione classica in Animate
    5. Strumento Pennello
    6. Guida di movimento
    7. Interpolazione di movimento e ActionScript 3.0
    8. L’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. Operazioni con i cue point video
    9. Disegnare e creare oggetti con Animate
    10. Rimodellare linee e forme
    11. Tratti, riempimenti e gradienti con Animate CC
    12. Utilizzo di Adobe Premiere Pro e After Effects
    13. Pannelli per il colore in Animate CC
    14. Apertura di file Flash CS6 con Animate
    15. Utilizzare il testo classico in Animate
    16. Inserimento di grafica in Animate
    17. Bitmap importate in Animate
    18. Grafica 3D
    19. Utilizzo dei simboli in Animate
    20. Disegnare linee e forme con Adobe Animate
    21. Utilizzare le librerie in Animate
    22. Esportazione di suoni
    23. Selezione degli oggetti in Animate CC
    24. Utilizzare i file AI di Illustrator in Animate
    25. Applicare pattern con lo strumento Pennello spray
    26. Applicazione di metodi di fusione
    27. Disposizione degli oggetti
    28. Automazione delle operazioni con il menu Comandi
    29. Testo in più lingue
    30. Utilizzo della funzione Videocamera di Animate
    31. Utilizzo di Animate con Adobe Scout
    32. Operazioni con file di Fireworks
    33. Filtri grafici
    34. Suono e ActionScript
    35. Preferenze di disegno
    36. Disegno con lo strumento Penna
  7. Piattaforme
    1. Convertire progetti Animate in altri formati di tipi di documenti
    2. Supporto piattaforme personalizzate
    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. Best practice - Linee guida per l’accessibilità
    12. Accessibilità dell’area di lavoro di Animate
    13. Creazione e gestione di script
    14. Abilitazione del supporto per piattaforme personalizzate
    15. Panoramica di Supporto piattaforme personalizzate
    16. Creazione di contenuto accessibile
    17. Operazioni con i plug-in di Supporto piattaforme personalizzate
    18. Debug di ActionScript 3.0
    19. 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. Esportare i file video QuickTime
    9. Controllo della riproduzione dei video esterni mediante ActionScript
    10. Best practice - Suggerimenti per la creazione di contenuti per dispositivi mobili
    11. Best practice - Convenzioni per i contenuti video
    12. Best practice - Linee guida per la creazione di applicazioni SWF
    13. Best practice - Strutturazione dei file FLA
    14. Best practice per ottimizzare i file FLA per Animate
    15. Impostazioni di pubblicazione ActionScript
    16. Specificare le impostazioni di pubblicazione per Animate
    17. Esportazione di file proiettore
    18. Esportare immagini e GIF animati
    19. Modelli di pubblicazione HTML
    20. Utilizzo di Adobe Premiere Pro e After Effects
    21. Condividere e pubblicare rapidamente le animazioni

Cos’è WebGL?

WebGL è uno standard Web aperto per il rendering di elementi grafici nei browser compatibili, senza l’esigenza di plug-in aggiuntivi. WebGL è completamente integrato in tutti gli standard Web del browser e consente di usare l’accelerazione GPU per l’elaborazione di immagini ed effetti nelle pagine Web. Gli elementi WebGL possono essere incorporati con altri elementi HTML e possono essere composti con altre parti della pagina.

La maggior parte degli attuali browser supportano WebGL; visitate questo collegamento per maggiori dettagli sulle versioni supportate.

In alcuni browser, WebGL non è attivato per impostazione predefinita. Per attivare WebGL nel browser in uso, consultate questo articolo.

Nota:

poiché in alcuni browser WebGL è disattivato per impostazione predefinita, accertatevi che WebGL sia attivato nel browser in uso.

Uso del tipo di documento WebGL-glTF (Beta)

Animate prevede ora di due tipi di documento WebGL-glTF. È possibile utilizzare il tipo di documento WebGL-glTF standard per consentire l'integrazione con qualsiasi pacchetto WebGL-glTF standard. È totalmente conforme agli standard.

  1. Per creare un documento basato su WebGL-glTF, selezionate WebGL-glTF Standard o WebGL-glTF esteso nell’intento Avanzate della schermata iniziale.

    Tipo di documento WebGL-glTF
    Tipo di documento WebGL-glTF

  2. Specificate la larghezza, l'altezza e le unità in base alle vostre esigenze e fate clic su Crea.

Pubblicazione di un file WebGL-glTF

  1. Fate clic su Impostazioni pubblicazione nella finestra di ispezione delle proprietà.

    Pubblicare il file WebGL-glTF
    Pubblicare il file WebGL-glTF

  2. Digitate un nome nella casella di testo Nome output.

    Finestra di dialogo Impostazioni pubblicazione del tipo di documento WebGL-glTF standard
    Finestra di dialogo Impostazioni pubblicazione del tipo di documento WebGL-glTF standard

  3. Selezionate GLB o GLTF nell'opzione Formato.

  4. Specificate un numero decimale in un intervallo 1-3 nella casella di testo Risoluzione immagine.

  5. Selezionate Rimuovi spazi vuoti nel file JSON per ridurre le dimensioni del file.

  6. Per impostazione predefinita, le opzioni standard Ripeti ciclicamente linea temporale e Includi livelli nascosti sono selezionate. Potete deselezionarle per trovare qualsiasi piccolo errore.

  7. Fate clic sul pulsante Pubblica per pubblicare il file.

Convertire le animazioni nei formati GLTF e GLB

WebGL-glTF e GLB permettono di ridurre la dimensione del file e l’elaborazione in fase di runtime. In Animate, potete utilizzare i documenti in entrambi questi formati. Per utilizzare i video in entrambi i formati, seguite l’esercitazione riportata alla fine di questo esempio ed effettuate le seguenti operazioni.

  1. In Proprietà, fate clic su Impostazioni pubblicazione.

  2. Digitate un nome nella casella di testo Nome output.

  3. Per Formato, selezionate GLB o GLTF.

  4. Specificate un numero decimale con intervallo 3 nella casella di testo Risoluzione immagine.

  5. Selezionate Rimuovi spazi vuoti nel file JSON per ridurre la dimensione del file.

Come creare animazioni avanzate utilizzando l’esportazione WebGL GLTF in Animate

Guardate questo video per capire come si presenta un’animazione nei formati WebGL GLTF e GLB.

Animate 18.0 e versioni precedenti

Consultate i contenuti seguenti se utilizzate Animate 18.0 o una versione precedente di Animate.

Tipo di documenti WebGL

Animate consente di creare e pubblicare contenuti interattivi graficamente ricchi in formato WebGL (Web Graphics Library). Poiché WebGL è completamente integrato nei browser, consente ad Animate di usare l’accelerazione GPU per l’elaborazione e il rendering della grafica nelle pagine Web.

Questo nuovo tipo di documento consente di creare contenuti e pubblicarli rapidamente come output WebGL. Potete sfruttare i potenti strumenti di Animate per creare contenuti graficamente ricchi, e quindi generare un output WebGL che possa essere eseguito su qualsiasi browser compatibile. È quindi possibile utilizzare la linea temporale, l’area di lavoro e gli strumenti di disegno tradizionali di Animate per creare il contenuto in modo nativo e generare un output WebGL. WebGL è supportato dai browser più diffusi e consente quindi a Animate di generare contenuti adatti a quasi tutte le piattaforme Web.

Nota:

Il supporto WebGL è disponibile solo come anteprima. Questo aggiornamento di Animate include il supporto per animazioni di base con audio e script, nonché una serie di funzioni per l’interattività. Nelle versioni future di Animate verranno introdotte nuove funzioni per il tipo di documenti WebGL. Per un elenco completo delle funzioni Animate supportate per WebGL, consultate questo articolo della knowledgebase.

Creazione di un documento WebGL

In Animate, il documento WebGL consente di creare e pubblicare rapidamente contenuti per il formato WebGL. Per creare un documento WebGL:

  1. Avviate Animate.
  2. Nella schermata di benvenuto, fate clic sull'opzione WebGL (anteprima). In alternativa, selezionate File > Nuovo per visualizzare la finestra di dialogo Nuovo documento. Fate clic sull'opzione WebGL (anteprima).

Anteprima dei contenuti di WebGL nei browser

Potete usare la funzione Prova filmato di Animate per visualizzare in anteprima o testare il contenuto. Per l’anteprima, effettuate le seguenti operazioni:

  1. In Animate, premete Ctrl+Invio (Windows) o Comando+Invio (Mac). Viene avviato il browser predefinito e viene eseguito il rendering del contenuto WebGL.
Animate richiede un server Web per eseguire i contenuti WebGL. Animate dispone di un server Web incorporato configurato per eseguire i contenuti WebGL sulla porta 8090. Se un server utilizza già questa porta, Animate rileva e risolve automaticamente il conflitto.

Pubblicazione di contenuti in formato WebGL

Animate consente di creare e pubblicare direttamente i contenuti WebGL in modalità nativa.

Per pubblicare un documento WebGL, effettuate le seguenti operazioni:

  1. Selezionate File > Impostazioni di pubblicazione per visualizzare la finestra di dialogo Impostazioni di pubblicazione. In alternativa, selezionate File > Pubblica se avete già specificato le impostazioni di pubblicazione per WebGL.
  2. Nella finestra di dialogo Impostazioni pubblicazione, specificate i valori desiderati per:

File di output

Immettete un nome significativo per l’output. Inoltre, individuate o inserite il percorso in cui pubblicare l’output WebGL.

Sovrascrivi HTML

Consente di specificare se sovrascrivere o meno il Wrapper HTML ogni volta che pubblicate il progetto WebGL. Potete deselezionare questa opzione se avete apportato modifiche esterne al file HTML pubblicato e desiderate conservarle quando aggiornate tutte le modifiche apportate all’animazione o alle risorse in Animate.

Includi livelli nascosti

Include tutti i livelli nascosti nell’output WebGL. Deselezionando Includi livelli nascosti si impedisce che tutti i livelli (compresi quelli nidificati nei clip filmato) contrassegnati come nascosti vengano esportati nel file WebGL di destinazione. In questo modo potete provare facilmente diverse versioni di un documento WebGL rendendo alcuni livelli invisibili.

Ripeti ciclicamente linea temporale

Ripete la riproduzione del contenuto quando viene raggiunto l’ultimo fotogramma. Deselezionate questa opzione per arrestare il contenuto all’ultimo fotogramma.

  1. Fate clic su Pubblica per pubblicare il contenuto WebGL nel percorso specificato.
Nota:

la frequenza fotogrammi massima che può essere specificata per contenuti WebGL da eseguire su browser è 60 fps.

Nozioni fondamentali sull'output WebGL

L’output WebGL pubblicato contiene i seguenti file:

File wrapper HTML

Include il runtime, richiama le risorse e inizializza il renderer WebGL. Per impostazione predefinita il nome del file è <nome_FLA>.html. Potete specificare un nome diverso per il file HTML nella finestra di dialogo Impostazioni pubblicazione (File > Impostazioni pubblicazione).

Per impostazione predefinita, il file HTML viene inserito nella stessa directory del file FLA. Potete specificare un percorso diverso nella finestra di dialogo Impostazioni pubblicazione.

File JavaScript (runtime WebGL)

Esegue il rendering del contenuto pubblicato con WebGL. Viene pubblicato nella cartella libs/ del documento WebGL. Il file è denominato flwebgl-<versione>.min.js

Il wrapper HTML utilizza questo file JS per il rendering del contenuto WebGL.

Atlas delle texture

Memorizza tutti i valori dei colori (per le forme) compresi quelli delle istanze bitmap sullo stage.

Aggiunta di audio a un documento WebGL

Potete importare e incorporare audio in un documento WebGL, controllare la riproduzione mediante le impostazioni di sincronizzazione (evento, avvio e arresto) e riprodurre l'audio della linea temporale in fase di runtime. WebGL attualmente supporta solo i formati .wav e .mp3.

Per ulteriori informazioni sull'utilizzo dell'audio, consultate Uso dei suoni in Animate.

Migrazione di contenuti esistenti i un documento WebGL

È possibile effettuare la migrazione di contenuti esistenti in Animate per generare un output WebGL. A tal fine, Animate consente di migrare i contenuti copiando o importando manualmente i contenuti. Inoltre, quando dovete lavorate su più documenti in Animate è utile copiare i contenuti tra documenti diversi come livelli o risorse nella libreria. Sebbene sia supportata la maggior parte delle funzioni di Animate, alcuni tipi di contenuto vengono modificati in base ai requisiti del formato WebGL.

Animate offre diverse funzioni potenti che consentono di produrre contenuti graficamente ricchi. Tuttavia, alcune funzioni native di Animate non sono supportate nei documenti WebGL. Tali contenuti vengono modificati da Animate in un formato supportato. Inoltre l’utilizzo di strumenti o funzioni non supportati viene segnalato visivamente.

Copia

di contenuto (livelli o simboli di libreria) da un tipo di documento Animate tradizionale (come ActionScript 3.0, AIR per Android, AIR per desktop ecc.) in un documento WebGL. In tal caso, il tipo di contenuto non supportato viene rimosso o convertito in un contenuto supportato predefinito.

Ad esempio, se si copia un’animazione 3D vengono rimosse tutte le trasformazioni 3D applicate agli oggetti sullo stage.

Importazione

di un file PSD o AI con contenuto non supportato. In tal caso, il contenuto viene rimosso o convertito in un contenuto supportato predefinito.

Ad esempio, se importate un file PSD con effetti di sfocatura Animate rimuove l'effetto.

Utilizzo

di più tipi di documento (ad esempio, ActionScript 3.0 e WebGL) contemporaneamente, e passaggio a un documento in cui sono selezionati uno strumento o un’opzione non supportati. In questo caso, Animate indica visivamente che la funzione non è supportata.

Per esempio, se avete creato una linea punteggiata in un documento ActionScript 3.0 e passate a WebGL con lo strumento Linea ancora selezionato, Il puntatore e la finestra di ispezione Proprietà indicano visivamente che la linea punteggiata non è supportata in WebGL.

Script

Nel pannello Azioni potete scrivere codice JavaScript che sarà eseguito quando il lettore accede al fotogramma. La variabile 'this' nel contesto degli script di fotogramma fa riferimento all'istanza MovieClip a cui appartiene. Inoltre, gli script di fotogramma possono accedere alle funzioni e alle variabili JavaScript dichiarate nel file contenitore HTML. Quando copiate un fotogramma o un livello da un documento ActionScript e lo incollate in un documento WebGL, gli eventuali script vengono contrassegnati come commenti.

Modifiche applicate al contenuto in seguito alla migrazione

Di seguito sono riportati i tipi di modifiche che vengono applicati quando eseguite la migrazione di contenuti esistenti in un documento WebGL.

Il contenuto viene rimosso

I tipi di contenuto che non sono supportati in HTML5 Canvas vengono rimossi. Ad esempio:

Filtri

non sono supportati. L’effetto verrà rimosso e alla forma verrà assegnato un riempimento uniforme.

L’effetto Filtro sfocatura viene rimosso e sostituito dal riempimento uniforme.

Il contenuto viene modificato in un valore predefinito supportato

Il tipo di contenuto o la funzione sono supportati, ma una loro proprietà non lo è. Ad esempio:

 

Gradiente radiale

viene modificato in riempimento uniforme con il colore principale.

Gradiente radiale viene modificato in riempimento uniforme con il colore principale.

Per un elenco completo delle funzioni non supportate e i relativi valori utilizzati durante la migrazione, consultate questo articolo.

Miglioramento dei risultati di rendering con la memorizzazione delle bitmap nella cache

La funzione di caching bitmap in fase di runtime consente di ottimizzare le prestazioni di rendering specificando che un simbolo di clip filmato statico (ad esempio un'immagine di sfondo) o un simbolo di pulsante vengano memorizzati nella memoria cache in fase di runtime. Per impostazione predefinita, gli elementi vettoriali vengono ridisegnati in ciascun fotogramma. Il caching (memorizzazione nella cache) di un clip filmato o di un simbolo di pulsante sotto forma di bitmap fa in modo che il browser non debba ridisegnare continuamente l'elemento, poiché l'immagine è una bitmap e la sua posizione non cambia. Ciò consente di migliorare significativamente le prestazioni di rendering del contenuto WebGL.

Ad esempio, quando realizzate un'animazione con uno sfondo complesso, create un clip filmato che contenga tutti gli elementi dello sfondo. Quindi, selezionate Memorizza in cache come bitmap per il clip filmato dello sfondo nella finestra di ispezione Proprietà. Durante la riproduzione, il rendering dello sfondo viene eseguito come bitmap archiviata alla profondità attuale dello schermo. Il browser disegna la bitmap sullo stage in modo rapido e una sola volta, consentendo una riproduzione più veloce e più fluida dell'animazione.

La memorizzazione delle bitmap nella cache consente di utilizzare un clip filmato e bloccarlo in posizione automaticamente. Se un'area viene modificata, i dati vettoriali aggiornano la cache bitmap. Con questo processo si riduce il numero di operazioni di ridisegno che il browser deve eseguire e si ottengono prestazioni di rendering migliori e più rapide.

Per abilitare la proprietà Memorizza in cache come bitmap per un simbolo di clip filmato, selezionate l'istanza di clip filmato, quindi selezionate Memorizza in cache come bitmap dal menu a discesa Rendering della finestra di ispezione Proprietà (Finestra > Proprietà).

Considerazioni durante l’uso della Memorizzazione in cache come bitmap

Quando utilizzate la proprietà Memorizza in cache come bitmap su un contenuto WebGL, considerate quanto segue:

  • La dimensione massima del simbolo di clip filmato è limitata a 2048x2048. Tenete presente che i limiti effettivi dell'istanza di clip filmato memorizzabili in cache sono inferiori a 2048x2048, poiché WebGL riserva alcuni pixel.
  • Se sono presenti più istanze dello stesso clip filmato, Animate genera la cache con le dimensioni della prima istanza rilevata. Tuttavia, la cache non viene rigenerata e la proprietà Memorizza in cache come bitmap non viene ignorata, anche se la trasformazione del clip filmato cambia in maniera considerevole. Pertanto, se il simbolo di clip filmato viene notevolmente ridimensionato nel corso dell'animazione, quest'ultima potrebbe apparire pixelata.
Logo Adobe

Accedi al tuo account