Creare e pubblicare documenti HTML5 Canvas in Animate

Canvas è un nuovo elemento HTML5 che fornisce le API necessarie per la generazione e il rendering dinamico di grafica, diagrammi, immagini e animazioni. La presenza delle API Canvas per HTML5 rafforza la piattaforma HTML5 fornendo capacità di disegno bidimensionali. Queste sono supportate dalla maggior parte dei sistemi operativi e browser più recenti.

In pratica, Canvas è un motore di rendering bitmap per la generazione di grafica in versione finale e non ridimensionabile. Inoltre, gli oggetti disegnati con Canvas non fanno parte del DOM della pagina Web.

In una pagina Web, puoi aggiungere elementi Canvas utilizzando il tag <Canvas>. È quindi possibile ottimizzare tali elementi con JavaScript aggiungendovi funzioni interattive. Per maggiori informazioni, visita questo collegamento.

Il nuovo tipo di documento HTML5 Canvas

Animate consente di creare un documento HTML5 Canvas con grafica complessa, animazioni e così via. In Animate è stato aggiunto un nuovo tipo di documento (HTML5 Canvas) che offre il supporto nativo necessario per creare contenuti HTML5 graficamente ricchi e interattivi. È quindi possibile utilizzare la linea temporale, l’area di lavoro e gli strumenti tradizionali di Animate per creare i contenuti da cui viene generato l’output HTML5. Con pochi semplici clic puoi creare un documento HTML5 Canvas e generare output completamente funzionante. In Animate, le opzioni per la creazione e pubblicazione del documento sono preimpostate per la generazione di output HTML5.

Animate è integrato con CreateJS, che consente di usare contenuti interattivi su tecnologie Web aperte tramite HTML5. Animate genera HTML e JavaScript per il contenuto (compresi bitmap, grafica vettoriale, forme, suoni, interpolazioni ecc.) creato sullo stage. L’output può essere eseguito su qualsiasi dispositivo o browser che supporti HTML5 Canvas.

Animate e l'API Canvas

Animate si appoggia all’API Canvas per pubblicare in formato HTML5. Animate converte direttamente gli oggetti creati sullo stage negli elementi Canvas corrispondenti. Grazie a una mappatura 1 a 1 delle funzioni Animate con le API in Canvas, Animate consente di pubblicare contenuti complessi in HTML5.

Creazione di un documento HTML5 Canvas

Per creare un documento HTML5 Canvas, effettua le seguenti operazioni:

1. Seleziona File > Nuovo per visualizzare la finestra di dialogo Nuovo documento. Seleziona la scheda Avanzate nella parte superiore dello schermo e fai clic sull'opzione HTML5 Canvas. Si apre un nuovo file FLA con Impostazioni pubblicazione predisposte per produrre un output HTML5.

Ora puoi iniziare a creare il contenuto HTML5 utilizzando gli strumenti di Animate. Mentre lavori sul documento HTML5 Canvas, puoi notare che alcune funzioni e alcuni strumenti non sono supportati e sono disattivati. Questo è dovuto al fatto che Animate supporta le funzioni che sono a loro volta supportate dall’elemento Canvas in HTML5. Ad esempio, le trasformazioni 3D, le linee punteggiate e gli effetti smussati non sono supportati.

Aggiunta di interattività a un documento HTML5 Canvas

Animate pubblica i contenuti HTML5 tramite librerie CreateJS. CreateJS è una suite di strumenti e librerie modulari che consentono di usare contenuti graficamente ricchi e interattivi su tecnologie Web aperte tramite HTML5. La suite CreateJS comprende EaselJS, TweenJS, SoundJS e PreloadJS. CreateJS converte i contenuti creati sullo stage in HTML5 con queste singole librerie per generare file di output HTML e JavaScript. Puoi anche modificare il file JavaScript per ottimizzare i contenuti.

Tuttavia, Animate consente di aggiungere direttamente interattività agli elementi sullo stage creati per HTML5 Canvas. Puoi quindi aggiungere del codice JavaScript ai singoli elementi sullo stage in Animate e visualizzarli in anteprima al momento della creazione. A sua volta, Animate fornisce supporto nativo per JavaScript con funzionalità utili all’interno dell’editor di codice per rendere più efficienti i flussi di lavoro di programmazione.

Per aggiungere interattività ai contenuti, puoi scegliere singoli fotogrammi e fotogrammi chiave sulla linea temporale. Per un documento HTML5 Canvas, puoi aggiungere interattività con JavaScript. Per ulteriori informazioni sulla scrittura di codice JavaScript, visita questo collegamento.

A questo punto puoi scrivere il codice JavaScript direttamente nel pannello Azioni. Per la scrittura del codice sono supportate le funzioni seguenti:

Consente di inserire e modificare rapidamente il codice JavaScript, senza errori. Quando digiti dei caratteri nel pannello Azioni, viene visualizzato un elenco di candidati per il completamento automatico.

Inoltre, Animate supporta alcune funzioni proprie del pannello Azioni quando viene usato con HTML5 Canvas. Tali funzioni migliorano l’efficienza del flusso di lavoro durante l’aggiunta di interattività agli oggetti sullo stage. Esse sono:

Il codice viene visualizzato con font e colori diversi in base alla sintassi. Questa funzione consente di scrivere il codice in modo strutturato e permette di distinguere visivamente il codice corretto ed eventuali errori di sintassi.

Il codice viene visualizzato con colori diversi in base alla sintassi. Questo consente di distinguere visivamente le varie parti di una sintassi.

Aggiunge automaticamente le parentesi di chiusura e apertura durante la scrittura del codice JavaScript.

Puoi aggiungere interattività a oggetti o forme sullo stage tramite JavaScript. Puoi aggiungere del codice JavaScript a singoli fotogrammi e fotogrammi chiave.

1. Seleziona il fotogramma al quale vuoi aggiungere del codice JavaScript.
2. Seleziona Finestra > Azioni per aprire il pannello Azioni.

Utilizzo di snippet di codice JavaScript

Per aggiungere interattività puoi usare gli snippet di codice JavaScript disponibili in Animate. Per accedere e usare gli snippet di codice, seleziona Finestra > Snippet di codice. Per ulteriori informazioni sull'aggiunta di snippet di codice JavaScript, consulta questo articolo.

Riferimenti alla documentazione di CreateJS

Codici per aggiungere interattività

JavaScript offre varie opzioni per rendere l’animazione interattiva. Per scoprire come aggiungere movimenti interattivi al personaggio creato, segui l’esercitazione riportata alla fine di questo esempio ed effettua le seguenti operazioni.

Come creare contenuti interattivi con HTML5

Pubblicazione di animazioni in HTML5

Per pubblicare il contenuto sullo stage in HTML5, effettua le seguenti operazioni:

1. Seleziona File > Impostazioni pubblicazione.
2. Nella finestra di dialogo Impostazioni pubblicazione, specifica le seguenti impostazioni:

Impostazioni di base

Directory in cui sarà pubblicato il file FLA. Per impostazione predefinita viene utilizzata la stessa directory del file FLA, ma è possibile cambiarla facendo clic sul pulsante Sfoglia "...".

Se questa opzione è attivata, la linea temporale viene riprodotta ciclicamente, altrimenti si ferma quando giunge alla fine.

Se questa opzione è deselezionata, i livelli nascosti non vengono inclusi nell’output.

Consente agli utenti di scegliere se centrare lo stage in orizzontale, in verticale o in entrambe le direzioni. Il canvas/stage HTML viene visualizzato al centro della finestra del browser per impostazione predefinita.

Consente agli utenti di selezionare se l'animazione deve essere responsiva secondo la larghezza, l'altezza o entrambe e ridimensiona l'output pubblicato in base vari fattori di forma. Il risultato è un output compatibile con i display ad alta definizione, dinamico, più definito e nitido.

L'output si espande inoltre fino a coprire l'intera area dello schermo senza bordi, mantenendo comunque le proporzioni originali, anche se una parte del canvas potrebbe non essere adattata alla visualizzazione.

• La larghezza, l'altezza o entrambe le opzioni assicurano che tutto il contenuto venga ridotto alla dimensione del canvas e sia visibile quando visualizzato su uno schermo di piccole dimensioni (come dispositivi mobili o tablet). Se la dimensione dello schermo è maggiore rispetto alla dimensione dello stage creato, il canvas viene visualizzato nelle dimensioni originali.

Consente agli utenti di selezionare se l'animazione deve adattarsi in modo da visualizzare l'output in modalità a schermo intero oppure se questa deve allargarsi per adattarsi alla pagina. Per impostazione predefinita, questa opzione è disabilitata.

Adatta alla visualizzazione: Visualizza l'output in modalità a schermo intero, in modo da occupare l'intero spazio a disposizione, mantenendo comunque le proporzioni.

Ridimensiona: Estende l'immagine in modo che non vi siano bordi nell'output.

Consente agli utenti di selezionare il Precaricatore predefinito o di selezionare un Precaricatore scelto dalla libreria dei documenti.

Il precaricatore è un indicatore visivo sotto forma di GIF animata, che viene visualizzato durante il caricamento degli script e delle risorse necessarie per eseguire il rendering dell'animazione. Una volta caricate le risorse, il precaricatore viene nascosto e viene visualizzata l'animazione effettiva.

Per impostazione predefinita, l'opzione precaricatore non è selezionata.

• Scegli l'opzione Predefinito per utilizzare il precaricatore predefinito.
• Scegli l’opzione Sfoglia per usare una GIF di tua scelta. La GIF del precaricatore viene copiata nella cartella delle immagini configurate nelle risorse Esporta risorse immagine.
• Utilizza l'opzione Anteprima per visualizzare in anteprima la GIF selezionata.

Usa queste opzioni per scegliere se la pubblicazione deve avvenire nella cartella principale o in una sottocartella. Per impostazione predefinita questo pulsante è impostato su ON. Portandolo su OFF si disabilita il campo cartella e le risorse vengono esportate nella stessa cartella del file di output.

Esporta documento come texture consente di esportare l’animazione vettoriale come texture, per migliorare le prestazioni delle animazioni. Per ulteriori informazioni, consulta Pubblicazione delle texture.

Questo è applicabile solo quando l’opzione Combina le immagini in foglio sprite è deselezionata.

 Puoi scegliere di esportare tutte le immagini importate (incluse quelle compresse) dal documento Canvas mantenendone le dimensioni. Deseleziona le opzioni Esporta documento come texture e Combina le immagini in foglio sprite nella scheda Standard. Le immagini vengono esportate senza alcuna modifica delle dimensioni.

La cartella in cui saranno inserite le risorse di immagini e che verrà utilizzata per fare riferimento a tali risorse.

Combina in fogli sprite: seleziona questa opzione per combinare tutte le risorse di immagini in un foglio sprite. Per ulteriori opzioni per fogli sprite, consulta Esportare i bitmap come fogli sprite.

La cartella in cui saranno inserite le risorse audio del documento e che verrà utilizzata per fare riferimento a tali risorse.

La cartella in cui saranno inserite le librerie CreateJS e che verrà utilizzata per fare riferimento a tali librerie.

 L’impostazione predefinita continua a pubblicare i file inseriti nelle sottocartelle logiche.

Impostazioni avanzate

Gli URL relativi in cui esportare immagini, suoni e librerie di supporto JavaScript per CreateJS. Se la casella di controllo non è selezionata, le risorse corrispondenti non vengono esportate dal file FLA ma il percorso specificato viene comunque utilizzato per assemblarne gli URL. Ciò può velocizzare la pubblicazione da un file FLA con molte risorse multimediali, o evitare di sovrascrivere librerie JavaScript modificate.

L'opzione Esporta tutti i bitmap come fogli sprite permette di comprimere tutte le bitmap presenti nel documento canvas in un unico foglio sprite, riducendo il numero di richieste al server e migliorando così le prestazioni. Puoi specificare la dimensione massima del foglio sprite inserendo i valori di altezza e larghezza.

Usa valore predefinito: l’output HTML5 verrà pubblicato utilizzando il modello predefinito.

Importa nuovo: consente di importare un nuovo modello per il documento HTML5.

Esporta: consente di esportare il documento HTML5 come modello.

se questa opzione è selezionata, verranno utilizzate delle copie delle librerie ospitate nel CDN CreateJS all’indirizzo code.createjs.com. Sarà così possibile memorizzare in cache le librerie e condividerle tra vari siti.

se questa opzione è deselezionata, i livelli nascosti non vengono inclusi nell’output.

se è questa opzione è deselezionata, le istruzioni vettoriali vengono generate in forma compatta. Deseleziona questa opzione per esportare istruzioni leggibili e dettagliate (utili a scopo di apprendimento).

se questa opzione è deselezionata, i simboli della linea temporale includono una proprietà frameBounds che contiene un array di oggetti Rectangle corrispondenti ai limiti di ciascun fotogramma della linea temporale. L’inclusione dei limiti multifotogramma può incrementare sensibilmente il tempo necessario per la pubblicazione.

se l'opzione includi JavaScript in HTML è selezionata, il file Sovrascrivi HTML nella casella di controllo Pubblica è spuntato e disabilitato. Se deselezioni il file Sovrascrivi HTML nella casella di controllo Pubblica, l'opzione Inserisci JavaScript in HTML è deselezionato e disattivato.

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

 La ripetizione ciclica non può essere applicata a un’animazione progettata con linee temporali nidificate con un singolo fotogramma.

Variabili di modello HTML

Quando importi un nuovo modello HTML personalizzato, durante la pubblicazioni le variabili predefinite vengono sostituite con snippet di codice basati sui componenti del tuo file FLA. 

La seguente tabella elenca le variabili di modello riconosciute e sostituite da Animate:

I seguenti token delle versioni precedenti sono stati rimossi dalla versione corrente:

 Questi token sono modularizzati e sostituiti da altri token.

Supporto JSAPI per importare ed esportare i modelli HTML per documenti Canvas

Dopo il supporto di JSAPI all'importazione e all'esportazione di modelli HTML per documenti del canvas:

• Esporta il modello di pubblicazione del quadro HTML5 per il dato documento, nella posizione specificata:

bool document::exportCanvasPublishTemplate(pathURI)

• Esempio:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace ("Il modello non può essere esportato");

• Importa e imposta il modello di pubblicazione HTML5 Canvas per il dato documento, dal percorso pathURI specificato:
  

bool document::importCanvasPublishTemplate(pathURI)

• Esempio: 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace ("il modello non può essere importato");

Codice JavaScript incorporato nell’HTML

Animate consente ora di includere il file JS all’interno del file HTML durante la pubblicazione Canvas.

1. Nel menu Impostazioni pubblicazione, passa alla scheda Avanzate e seleziona Includi JavaScript in HTML. 
2. Seleziona OK nella finestra di dialogo Includi JavaScript in HTML in Pubblica per pubblicare nuovamente il contenuto sovrascrivendo l'HTML.
3. Questa azione disabilita la casella di controlloSovrascrivi il file HTML in Pubblica e, durante un qualsiasi evento di pubblicazione, il file HTML generato viene poi sovrascritto.
4. Nella funzione Seleziona Arresta inclusione JavaScript in HTML, seleziona OK per escludere JavaScript e pubblicare nuovamente il file HTML.
5. Quando non è selezionata Sovrascrivi il file HTML in Publish, l'opzione Includi JavaScript in HTML è disabilitata automaticamente.

 Se non desideri che l’HTML venga sovrascritto, le opzioni Sovrascrivi file HTML in Publish e Integra JS nell’opzione HTML non possono coesistere.

Aggiunta di script globali e di terze parti

Gli esperti di animazioni utilizzano spesso codice JavaScript applicabile a tutta l’animazione. Questa funzione permette di aggiungere script globali e di terze parti non specifici per singoli fotogrammi, applicandoli all’intera animazione direttamente dall’interno di Animate. 

Per aggiungere e utilizzare gli script globali: 

Aggiunta di script di terze parti

Gli esperti di animazioni spesso incorporano delle librerie JavaScript di terze parti per modificare manualmente il codice generato da Animate. Questo offre maggiore flessibilità nell’utilizzo del codice o delle librerie JavaScript più recenti.

Per aggiungere script di terze parti: 

Unione dei dati JSON in JS

Sulla base dei commenti ricevuti dai clienti e del fatto che i file JSON sono di per sé poco sicuri, abbiamo unito i dati rilevanti al file JS e quindi non viene più creato un file JSON a parte.

Ottimizzazione dell’output HTML5 Canvas

Animate ottimizza le dimensioni di output e le prestazioni di HTML5 Canvas nei modi seguenti:

• Esportando le bitmap come foglio sprite mediante le opzioni della scheda Foglio sprite in Impostazioni pubblicazione.
• Escludendo i livelli nascosti (con la deselezione della casella di controllo Includi livelli nascosti) dall’output pubblicato.
• Escludendo tutte le risorse inutilizzate, quali suoni e bitmap, e tutte le risorse presenti nei fotogrammi inutilizzati (predefinito).
• Specificando di non esportare le risorse dal file FLA mediante la deselezione delle opzioni di esportazione risorse per le immagini, i suoni e le librerie JavaScript CreateJS di supporto, e utilizzando gli URL relativi per l'esportazione.
• Output HTML5 Canvas compatibile con HiDPI: Animate scala l’output sulla base del rapporto dei pixel del dispositivo su cui visualizzi il contenuto. Questa compatibilità genera un output più nitido in caso di zoom ed elimina l’effetto pixel quando l’output HTML Canvas viene visualizzato su un dispositivo con display ad alta risoluzione.
  

Impostazione dello sfondo trasparente per il canvas

Puoi personalizzare il canvas attribuendogli vari colori e modificando anche la trasparenza di visualizzazione. Un canvas trasparente permette di vedere i contenuti HTML sottostanti in fase di pubblicazione.

Nota: questa impostazione rende lo sfondo trasparente anche per la pubblicazione OAM.

1. Seleziona il canvas che desideri modificare.
2. Nel pannello Proprietà, seleziona Stage.
3. In Stage, imposta i valori percentuali per Alfa.

Supporto per il campione "Nessun colore"

Per rendere trasparente lo sfondo dell’area di lavoro, puoi anche usare l’opzione Nessun campione colore:

1. Scegli Modifica > Documento > Colore stage oppure seleziona Impostazioni avanzate nella finestra di ispezione Proprietà.
2. Nel campione Colore stage, seleziona Nessun colore.

Esportazione di bitmap come fogli sprite

Mediante l’esportazione in un singolo foglio sprite di una serie di bitmap utilizzate nel documento HTML5 Canvas, puoi ridurre il numero di richieste al server, limitare le dimensioni dell’output e migliorare le prestazioni. Puoi esportare un foglio sprite con PNG (impostazione predefinita), JPEG o entrambi.

1. Nella scheda Foglio sprite, seleziona la casella di controllo Combina risorse immagine in fogli sprite.
2. Per Formato seleziona PNG, JPEG o Entrambi.
   
3. Se selezioni PNG o Entrambi, specifica le seguenti Impostazioni PNG:
   • Qualità: imposta la qualità del foglio sprite su 8 bit (impostazione predefinita), 24 bit o 32 bit.
   • Dimensione massima: specifica i valori massimi di altezza e larghezza del foglio sprite, in pixel.
   • Sfondo: fai clic e imposta il colore di sfondo per il foglio sprite.
4. Se seleziona JPEG o Entrambi, specifica le seguenti Impostazioni JPEG:
   
   • Qualità: imposta la qualità del foglio sprite.
   • Dimensione massima: specifica i valori massimi di altezza e larghezza del foglio sprite, in pixel.
   • Sfondo: fai clic e imposta il colore di sfondo per il foglio sprite.

Utilizzo del testo in documenti HTML5 Canvas

HTML Canvas supporta il testo dinamico e statico.

Testo statico

Con il testo statico si possono ottenere risultati dall’aspetto complesso. Al momento della pubblicazione, tutte le risorse vengono convertite in contorni per offrire un’esperienza utente veramente WYSIWYG. Poiché il testo viene pubblicato come profili vettoriali, puoi modificarli in fase di esecuzione.

Nota: un utilizzo elevato di testo statico comporta un aumento delle dimensioni del file.

Testo dinamico

Il testo dinamico può essere modificato come testo in fase di esecuzione e non fa lievitare le dimensioni del file. Supporta meno opzioni del testo statico, ma supporta anche i font per web tramite Adobe Fonts.

Se usi del testo dinamico formattato con font che non sono disponibili sul sistema dell’utente finale, per la visualizzazione verrà usato il font predefinito, con conseguente perdita delle caratteristiche grafiche del testo originale. Per ovviare a problemi di questo tipo è possibile ricorrere ai font Web.

Aggiungere font per web al documento HTML5 Canvas

Animate consente di utilizzare i font Web per il tipo Testo dinamico nei documenti HTML5 Canvas. Adobe Fonts offre accesso diretto a migliaia di font di alta qualità di produttori rinomati. Tramite la tua iscrizione a Creative Cloud, puoi accedere e usare Adobe Fonts direttamente nell'output HTML5 per i browser e i dispositivi mobili più recenti.

Per ulteriori informazioni sull’utilizzo dei font Web di Adobe Fonts in Animate, consulta Utilizzo di font Web nei documenti HTML5 Canvas.

Animate 2015.2 migliora l'esperienza visiva per il testo dinamico in un documento Canvas e i documenti pubblicati mantengono lo stesso aspetto che hanno sullo stage.

Nota: Adobe Fonts non è disponibile per il testo statico.

Nozioni fondamentali sull’output HTML5 Canvas

L’output HTML5 pubblicato contiene i seguenti file:

Contiene le definizioni per tutti gli oggetti, le forme e le immagini presenti nell’elemento Canvas. Inoltre richiama lo spazio dei nomi CreateJS per convertire da Animate a HTML5 e il file corrispondente JavaScript che contiene gli elementi interattivi. 

Contiene le definizioni dedicate e il codice per tutti gli elementi interattivi dell’animazione. Inoltre, nel file JavaScript è definito il codice per tutti i tipi di interpolazione.

Per impostazione predefinita, questi file vengono copiati nello stesso percorso del file FLA. Se necessario, puoi specificare il percorso di output nella finestra di dialogo Impostazioni pubblicazione (File > Impostazioni pubblicazione).

Migrazione di contenuti esistenti a contenuto HTML5 Canvas

È possibile effettuare la migrazione di contenuti esistenti in Animate per generare un output HTML5. A tal fine, Animate consente di migrare i contenuti copiando manualmente o importando singoli livelli, simboli e altri elementi della libreria. In alternativa, è possibile eseguire il comando Converti AS3 in documento HTML5 Canvas per convertire automaticamente i contenuti ActionScript esistenti in un nuovo documento HTML5 Canvas. Per maggiori informazioni, visita questo collegamento.

Mentre lavori con documenti HTML5 in Animate, noterai che alcune funzioni Animate non sono supportate. Questo interessa le funzioni di Animate per le quali non esistono funzioni corrispondenti nell’API Canvas e che quindi non possono essere utilizzate nel tipo di documento HTML5 Canvas. Questo può verificarsi durante la migrazione di contenuti nelle seguenti situazioni:

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 HTML5. 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 importi un file PSD con un effetto smussatura con gradiente, Animate rimuove l'effetto.

di più tipi di documento (ad esempio, ActionScript 3.0 and HTML5 Canvas) 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 hai creato una linea punteggiata in un documento ActionScript 3.0 e passi a HTML5 Canvas con lo strumento Linea ancora selezionato, il puntatore e la finestra di ispezione Proprietà presentano delle icone per indicare che la linea punteggiata non è supportata in HTML5 Canvas.

I componenti ActionScript vengono rimossi e il codice viene contrassegnato come commenti. Inoltre, se nel blocco di commenti è presente del codice JavaScript (per il toolkit per CreateJS con Animate 13.0), accertati di rimuovere manualmente dal codice la notazione per commenti.

Ad esempio, se hai copiato dei livelli contenenti dei pulsanti, questi vengono rimossi.

Modifiche applicate al contenuto in seguito alla migrazione

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

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

• Le trasformazioni 3D vengono rimosse.
• Il codice ActionScript viene contrassegnato come commenti.
• I video vengono rimossi.

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

• La modalità di fusione Sovrapposizione non è supportata; viene modificata in Normale.
• La linea punteggiata non è supportata; viene modificata in linea uniforme.

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

Convertire altri tipi di documenti in documenti HTML5 Canvas

Il convertitore universale di tipi di documento consente di convertire i progetti FLA esistenti (di qualunque tipo) in qualsiasi altro tipo di documento, ad esempio HTML5, Canvas, ActionScript/AIR, WebGL oppure un tipo di documento personalizzato. Quando esegui la conversione in un altro formato, puoi sfruttare le funzioni di authoring che Animate offre per il tipo di documento di destinazione. 

Per ulteriori informazioni, consulta Converti in altri formati di documento

Conversione di un documento da ActionScript 3 a HTML5 Canvas tramite script JSFL

Animate dispone di uno script JSFL per convertire un documento AS3 in un documento HTML5 Canvas. Quando viene avviato, lo script JSFL esegue le seguenti operazioni:

• Crea un nuovo documento HTML5 Canvas.
• Copia tutti i livelli, i simboli e gli elementi libreria nel nuovo documento HTML5 Canvas.
• Applica le impostazioni predefinite per le funzioni, sottofunzioni e proprietà non supportate.
• Crea file FLA distinti per ogni scena, perché il documento HTML5 Canvas non supporta più scene.

1. Apri il documento ActionScript 3 in Animate.
2. Seleziona Comandi > Converti AS3 in documento HTML5 Canvas.

Questo è applicabile solo quando l’opzione Combina le immagini in foglio sprite è deselezionata.