Creazione e pubblicazione di un documento 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.

 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.

Pubblicazione di un file WebGL-glTF

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.

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.

Il 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.

 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 di contenuti 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:

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

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.

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.

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

3. Fate clic su Pubblica per pubblicare il contenuto WebGL nel percorso specificato.

 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:

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.

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.

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 a 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.

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.

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.

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.

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.

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

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

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

 

viene modificato in riempimento uniforme con il colore principale.

Miglioramento dei risultati di rendering con il caching bitmap

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 sull'uso dell'opzione Memorizza 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.