Guida utente Annulla

Esportare animazioni per dispositivi mobili e motori grafici

  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

Crea un foglio sprite o atlas delle texture ed esporta le animazioni per app per dispositivi mobili e motori grafici. Importa un atlas delle texture in Unity o in qualsiasi altro motore grafico utilizzando il plug-in.

Panoramica

Animate consente di creare animazioni con un foglio sprite o un atlas delle texture e di esportarle per app per dispositivi mobili e motori per giochi. 

Foglio sprite

Un foglio sprite è un file di immagine bitmap che contiene diversi elementi grafici più piccoli disposti a griglia. Grazie al fatto che più elementi grafici sono compilati in un unico file, Animate e altre applicazioni possono utilizzare le immagini caricando soltanto un file singolo. Questa efficienza di caricamento può risultare utile in quelle situazioni (ad esempio lo sviluppo di videogiochi) nelle quali le prestazioni rivestono un'importanza fondamentale.

Foglio sprite
Un foglio sprite contenente gli sprite di un'animazione fotogramma per fotogramma.

Potete creare un foglio sprite da una selezione di più clip di filmati, simboli di pulsanti, simboli grafici o immagini bitmap. Gli elementi possono essere selezionati nel pannello Libreria oppure sullo stage, ma non in entrambe le aree. Ogni immagine bitmap e ogni fotogramma dei simboli selezionati apparirà come un elemento grafico separato nel foglio sprite. Se eseguite l'esportazione dallo stage, eventuali trasformazioni (ad esempio, modifica in scala o inclinazione) applicate all’istanza del simbolo vengono mantenute anche nell’immagine di output.

Atlas delle texture

L’atlas delle texture è una raccolta di texture rappresentata come un’unica grande immagine o più immagini delle dimensioni desiderate. È possibile ottimizzare il gioco creando un atlas delle texture da utilizzare nell’app del gioco. 

In Animate, potete creare un atlas delle texture da simboli quali clip di filmato, elementi grafici o pulsanti. Gli elementi possono essere selezionati nel pannello Libreria oppure sullo stage, ma non in entrambe le aree. Ogni vettore e ogni fotogramma chiave dei simboli selezionati vengono visualizzati sotto forma di immagine bitmap separata nell’atlas delle texture. Se esportate dallo stage, le trasformazioni (ridimensionamento, inclinazione ecc.) applicate all’istanza del simbolo vengono salvate nell’immagine di output.

Differenza tra un foglio sprite e un atlas delle texture

Potete utilizzare sia il foglio sprite sia l’atlas delle texture nelle app per dispositivi mobili, in base alle vostre esigenze. La tabella seguente riassume alcune differenze fondamentali tra il foglio sprite e l'atlas delle texture. 

Funzionalità

Foglio sprite

Atlas delle texture

Prestazioni nelle app per dispositivi mobili

Basse

Alte

Efficienza nel caricamento dell’app

Alta, grazie all’assenza di calcoli

Bassa, a causa dei calcoli necessari per il file JSON 

Dimensione

Occupa più spazio

Occupa meno spazio

Qualità dell’animazione

Media

Alta

Numero di file generati

Due file: un file bitmap e un file json

Variabile: in base alle dimensioni dell’immagine.

Numero di bitmap generate

Sulla base del numero di fotogrammi utilizzato nel foglio sprite, il numero dei file bitmap può anche aumentare incrementando la dimensione del foglio sprite.

Solo le bitmap univoche vengono generate nello Sprite, riducendo le dimensioni totali del file.

Creare un foglio sprite

Per creare un foglio sprite, procedete nel modo seguente:

  1. Selezionate uno o più simboli nella Libreria oppure una o più istanze di simboli sullo stage. La selezione può anche includere delle immagini bitmap.

  2. Fate clic sulla selezione con il pulsante destro del mouse e scegliete Genera foglio Sprite.

  3. Nella finestra di dialogo Genera foglio Sprite, selezionate le opzioni desiderate, quindi fate clic su Esporta.

    Opzione di esportazione

    Descrizione

    Dimensione immagine

    Le dimensioni totali in pixel del foglio sprite. L’impostazione predefinita è Dimensione automatica, in base alla quale il foglio viene dimensionato in modo da includere tutti gli sprite che aggiungete.

    Formato immagine

    Il formato di file del foglio sprite esportato. I formati PNG 8 bit e PNG 32 bit supportano entrambi l’uso di uno sfondo trasparente (canale alfa). I formati PNG 24 bit e JPG invece non supportano gli sfondi trasparenti. In generale, la differenza visiva tra PNG 8 bit e PNG 32 bit è lieve. I file PNG a 32 bit risultano quattro volte più grandi dei file PNG a 8 bit.

    Distanza bordo

    Spazio intorno ai margini del foglio sprite, in pixel.

    Distanza forma

    Spazio tra le immagini nel foglio sprite, in pixel

    Algoritmo

    La tecnica utilizzata per comprimere le immagini nel foglio sprite. Sono disponibili due opzioni:

    • Basic (predefinito)
    • MaxRects

    Formato dati

    Il formato interno utilizzato per i dati di immagine. Scegliete il formato più adatto al flusso di lavoro che prevedete di adottare per il foglio sprite dopo l’esportazione.

    Ruota

    Ruota gli sprite di 90 gradi°. Questa opzione è disponibile solo per alcuni formati di dati.

    Taglia

    Questa opzione permette di risparmiare spazio sul foglio sprite ritagliando i pixel inutilizzati da ciascun fotogramma di simbolo aggiunto al foglio.

    Impila fotogrammi

    Selezionate questa opzione se volete evitare che i fotogrammi duplicati presenti tra i simboli selezionati vengano duplicati anche nel foglio sprite risultante.

Esportare le animazioni per dispositivi mobili e motori di gioco

Animate consente di esportare le animazioni per piattaforme di gioco e applicazioni per dispositivi mobili. Per poter visualizzare le animazioni su smartphone e motori di gioco, seguite l’esercitazione riportata alla fine di questo esempio ed effettuate le seguenti operazioni.

  1. Nella Libreria, fate clic con il pulsante destro del mouse sul clip filmato.

  2. Selezionate Genera foglio sprite.

  3. Nella finestra di dialogo Foglio sprite, selezionate le opzioni necessarie.

  4. Fate clic su Esporta.

Come esportare le animazioni per app per dispositivi mobili o motori di gioco

Guardate questo video per vedere le opzioni disponibili per l’esportazione di animazioni.

Creazione di un atlas delle texture

Gli sviluppatori di giochi possono utilizzare Animate per orchestrare le animazioni ed esportarle come atlas delle texture per il motore grafico Unity o qualsiasi altra piattaforma di gioco. 

Il processo di generazione di atlas delle texture in Animate e di importazione in Unity è descritto nello schema seguente: 

Illustrazione del flusso di lavoro per generare un atlas delle texture e importarlo in Unity.

Per generare l'atlas delle texture della propria animazione, effettuate le seguenti operazioni:

  1. In Animate, potete generare un atlas delle texture per un simbolo selezionato nella Libreria o l’istanza del simbolo sullo stage. 

  2. Fate clic con il pulsante destro del mouse sul simbolo, quindi selezionate Genera atlas delle texture dal menu. La finestra Genera atlas delle texture compare.

    Genera atlas delle texture

  3. Scegliete le opzioni di esportazione appropriate per l’atlas delle texture. 

    Opzione di esportazione Descrizione
    Dimensione immagine Le dimensioni totali in pixel dell’atlas delle texture. L’impostazione predefinita è Dimensione automatica, in base alla quale il foglio viene dimensionato in modo da includere tutte le immagini che aggiungete.
    Ottimizza le dimensioni
    • Se l’opzione Ottimizza le dimensioni è selezionata, i pixel vuoti vengono rimossi dalle bitmap e le dimensioni non sono espresse in potenza di due (impostazione predefinita). Questo è applicabile per tutte le bitmap generate.
    • Se l’opzione Ottimizza le dimensioni è deselezionata, le bitmap vengono generate in base alle dimensioni selezionate.
    Formato immagine Il formato di file del foglio sprite esportato. I formati PNG 8 bit e PNG 32 bit supportano entrambi l’uso di uno sfondo trasparente (canale alfa). In generale, la differenza visiva tra PNG 8 bit e PNG 32 bit è lieve. I file PNG a 32 bit risultano quattro volte più grandi dei file PNG a 8 bit.
    Risoluzione Scegliete un valore compreso tra 0,3 e 3,0
    Distanza bordo Spazio intorno ai margini dell’atlas delle texture, in pixel.
    Distanza forma Spazio tra le immagini nell’atlas delle texture, in pixel.
    Algoritmo

    Tecnica utilizzata per comprimere le immagini nell’atlas delle texture. Sono disponibili due opzioni:

    • Standard 
    • MaxRects (impostazione predefinita)
    Formato dati Il formato interno utilizzato per i dati di immagine. Il formato predefinito è JSON.
    Ruota Ruota le immagini di 90 gradi. Questa opzione è disponibile solo per alcuni formati di dati.
    Appiattisci e converti in bitmap gli oggetti inclinati Selezionate questa opzione se avete applicato gli oggetti trasformazioni di tipo inclinazione. Animate converte questi oggetti in immagini bitmap poiché alcuni dei motori grafici non sono in grado di interpretare correttamente le inclinazioni. 
    Ottimizza file Animation.json
    • Quando l’opzione Ottimizza file Animation.json è selezionata, vengono rimossi i rientri e le matrici decomposte e i nomi utilizzati vengono abbreviati (opzione predefinita).
    • Quando l’opzione Ottimizza file Animation.json è deselezionata, l’esportazione avviene mantenendo i rientri e i nomi significativi.
  4. È possibile esportare il simbolo in più bitmap, in base alle sue dimensioni.

    Generare l’atlas delle texture per più bitmap

     Per le risorse che superano le dimensioni immagine selezionate, viene visualizzata un’avvertenza.

  5. Per visualizzare in anteprima l’output dell’atlas delle texture, fate clic sulla scheda Anteprima.

    Anteprima dell'atlas delle texture in seguito alla creazione

  6. Fate clic su Sfoglia e scegliete il percorso nel computer in uso per il file di output oppure immettete il percorso nell’area di testo e fate clic su Esporta.

La cartella di output generata per l'atlas delle texture contiene i seguenti file:

Animation.json

Questo file contiene informazioni sull’animazione. Per impostazione predefinita, i fotogrammi identici vengono ottimizzati e consolidati nel file Animation.json.

spritemap.json

Questo file contiene informazioni sul file spritesheet.png.

spritemap.png

Per il simbolo esportato, questo file contiene la rappresentazione bitmap di tutte le texture univoche minime richieste per ricostruire l'animazione.

È possibile utilizzare l'atlas della texture generato in qualsiasi motore grafico come Unity con il plug-in di importazione adatto.

Importazione dell’atlas delle texture in Unity

Potete importare nei vostri motori di gioco preferiti i file dell'atlas delle texture generate da Animate. Per esportare i file dell'atlas delle texture, potete creare plug-in specifici delle vostre piattaforme di gioco. È disponibile un plug-in di importazione di esempio per lo strumento Unity. 

Per importare l’atlas delle texture nella piattaforma Unity eseguite le operazioni indicate di seguito: 

  1. In Unity, create un progetto in un percorso specifico. In questa posizione, viene creata una cartella contenente la sottocartella Assets.

  2. Create due cartelle secondarie in Assets, denominate Resources ed Editor

  3. Fate clic qui per scaricare il plug-in di importazione di esempio per Unity. Selezionate Unity Plugin nella scheda Downloads e selezionate la versione corrispondente da scaricare. 

    Il file unity-plugin.zip include i file Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs e Effect.shader.

    Il download dell'esempio implica l'accettazione dei Termini di utilizzo e dell'Informativa sulla privacy online. 

  4. Spostate i file dell'atlas delle texture, come Animation.json, spritemap.json, spritemap.png, e i file del plug-in Unity, come Plugin.cs ed Effect.shader, in Assets > Resources.

  5. Spostate i file AnimateEditor.cs e WrapperPlugin.cs nella cartella Assets

  6. In Unity, fate clic sul file AnimateEditor.cs e trascinatelo in Main Camera.

  7. Avviate la riproduzione. Durante la riproduzione del progetto, la mappa sprite viene suddivisa in più sprite.

  8. Spostate AnimateEditor.cs in Editor.

  9. In Unity, fate clic sul file WrapperPlugin.cs e trascinatelo in Main Camera. Inoltre, deselezionate o rimuovete AnimateEditor.cs in Main Camera.

  10. Riproducete o pubblicate l'output in base alle vostre esigenze. 

Potete anche personalizzare il plug-in modificando il file WrapperPlugin.cs in base alle vostre esigenze. 

Il plug-in di Unity supporta gli effetti colore dei file atlas delle texture generati in Animate. Inoltre, il plug-in supporta le maschere su più livelli. La funzione delle maschere è applicabile solo alla versione Unity 2017 e a quelle successive. 

Pubblicazione delle texture

Gli animatori possono continuare a creare contenuti in formato vettoriale e ad esportarli in formato vettoriale o raster per le piattaforme HTML 5. Alle impostazioni di pubblicazione è stata aggiunta un’opzione per esportare le animazioni come atlas di texture, per migliorare le prestazioni delle animazioni.

1. Create un documento Canvas. Selezionate File > Nuovo per visualizzare la finestra Nuovo documento. 

2. Selezionate la scheda Avanzate e fate clic su HTML5 Canvas. Viene aperto un nuovo documento FLA.

3. Fate clic su File > Impostazioni di pubblicazione. Se Esporta documento come texture è attivata nella scheda Base, la scheda Impostazioni immagine mostra le opzioni di Pubblicazione texture. Per impostazione predefinita, tutti i simboli sono inclusi nella pubblicazione delle texture. Per scegliere specifici simboli per le texture, fate clic sull’icona delle impostazioni accanto a questa opzione.

Tenete presente che l’attivazione di questa opzione può comportare un aumento delle dimensioni delle risorse, ma migliora le prestazioni. Potete inoltre aumentare la risoluzione delle immagini in termini di 2x e 3x rispetto alla risoluzione originale, utile per i display HiDPI. Per cambiare le impostazioni di risoluzione, fate clic sull’icona della chiave inglese accanto all’opzione Esporta documento come texture, come illustrato nella schermata di seguito. Trascinate i numeri accanto a Risoluzione per ottenere multipli 2x o 3x.

Per impostazione predefinita, la pubblicazione delle texture è impostata su una risoluzione 2x. Inoltre, l’intervallo di risoluzione può essere modificato da 0,3 a 3x.

 La pubblicazione delle texture è applicabile solo per il tipo di documento HTML5 Canvas.

Opzione Esporta documento come texture abilitata
Opzione Esporta documento come texture abilitata

Opzione Esporta documento come texture abilitata

Scegliere un file vettoriale o raster è come scegliere tra le dimensioni e le prestazioni del file. Le piattaforme HTML5 sono ottimizzate per il contenuto raster. Di conseguenza, per alcune forme complesse, è meglio convertire prima le immagini vettoriali in raster. Per parte del contenuto di base, potete comunque utilizzare il contenuto vettoriale. Animate fornisce questa opzione mediante una finestra di selezione del simbolo parziale. La selezione del simbolo parziale consente di scegliere i simboli che devono essere convertiti in raster mantenendo tutti gli altri come vettori.

Per aprire la selezione parziale del simbolo, fate clic su Modifica nella finestra di dialogo Impostazioni pubblicazione e selezionate un simbolo dall'elenco. Per impostazione predefinita, tutti i simboli sono selezionati.

Modificare la selezione parziale del simbolo
Modificare la selezione parziale del simbolo

Selezionate i simboli scelti nell'elenco. 

Selezione parziale del simbolo
Selezione parziale del simbolo

Migliorare le prestazioni grafiche con le texture bitmap

In Animate, le texture bitmap consentono di migliorare le prestazioni delle animazioni su piattaforme diverse. Per ridurre la complessità della grafica vettoriale mediante l’uso di texture bitmap, seguite l’esercitazione riportata alla fine di questo esempio ed effettuate le seguenti operazioni.

  1. Nella finestra di ispezione Proprietà, fate clic su Impostazioni pubblicazione.

  2. Nella scheda Base, selezionate l’icona della chiave inglese accanto a Esporta documento come texture.

  3. Nella scheda Impostazioni immagini, fate clic su Cambia e selezionate i simboli desiderati.

  4. Fate clic su OK.

Come pubblicare le risorse come texture bitmap per migliorarne le prestazioni

Guardate questo video per saperne di più sulle prestazioni delle animazioni con texture bitmap.
Logo Adobe

Accedi al tuo account