Nota:

  Typekit è ora chiamato Adobe Fonts ed è incluso in Creative Cloud e altri abbonamenti. Ulteriori informazioni.

Cos’è HTML5 Canvas?

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 CC 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 CC è integrato con CreateJS, che consente di usare contenuti interattivi su tecnologie Web aperte tramite HTML5. Animate CC 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. Selezionate File > Nuovo per visualizzare la finestra di dialogo Nuovo documento. Selezionate la scheda Avanzate nella parte superiore dello schermo e fate clic sull'opzione HTML5 Canvas. Si apre un nuovo file FLA con Impostazioni pubblicazione predisposte per produrre un output HTML5.
Nuovo documento
Nuovo documento

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 CC 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 inoltre modificare il file JavaScript per ottimizzare i contenuti.

Tuttavia, Animate CC 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:

Suggerimenti sul codice

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:

Evidenziazione della sintassi

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.

Colorazione codice

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

Parentesi

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

Code_Aspects
(A) Evidenziazione della sintassi (B) Colorazione codice (C) Parentesi

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à potete usare gli snippet di codice JavaScript disponibili in Animate CC. Per accedere e usare gli snippet di codice, selezionate Finestra > Snippet di codice. Per ulteriori informazioni sull'aggiunta di snippet di codice JavaScript, consultate questo articolo.

Riferimenti alla documentazione di CreateJS

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

publish-settings-basics

Output

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

Ripeti ciclicamente linea temporale

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

Includi livelli nascosti

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

Centra lo stage

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.

Rendi reattivo

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.

Abilita scalatura per riempire l'area visibile

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.

Incorpora precaricatore:

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.

Publish settings
Impostazioni di pubblicazione

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.

Publish_settings_root
Pubblicazione di risorse Canvas nella cartella principale

Esporta risorse immagine

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, consultate Esportare i bitmap come fogli sprite

Esporta risorse audio

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

Esporta risorse CreateJS

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

Nota:

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

Impostazioni avanzate

publish_settings_output

Opzioni esportazione risorse

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.

JSEmbed23
Export-spritesheets
Publish_Settings_JavaScript_Namespaces

Modello per pubblicazione HTML:

 

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.

Librerie in hosting:

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.

Includi livelli nascosti:

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

Comprimi forme:

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

Limiti multifotogramma:

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.

Sovrascrivi il file HTML in fase di pubblicazione includi JavaScript in HTML:

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.

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

Nota:

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:

Parametro attributo Variabile di modello
Titolo del documento HTML   $TITLE
Segnaposto per l'inclusione di script CreateJS $CREATEJS_LIBRARY_SCRIPTS
Segnaposto per l'inclusione di script generati (inclusi gli script dei caratteri Web) $ANIMATE_CC_SCRIPTS
Tag HTML per avviare uno script lato client                                                                                                              $SCRIPT_START
Segnaposto del codice di creazione del caricatore (CreateJS LoadQueue) $CREATE_LOADER
Segnaposto per codice di caricamento delle risorse presenti nel manifesto $LOAD_MANIFEST
Segnaposto per il codice di definizione del metodo di caricamento dei file $HANDLE_FILE_LOAD_START
Segnaposto per il codice di gestione dell'evento di caricamento dei file $HANDLE_FILE_LOAD_BODY
Segnaposto per il codice di conclusione del metodo di caricamento dei file $HANDLE_FILE_LOAD_END
Segnaposto per il codice che definisce il metodo di gestione della funzione Completa, richiamata dopo il caricamento delle risorse $HANDLE_COMPLETE_START
Segnaposto per il codice di creazione dello stage $CREATE_STAGE
Segnaposto per il codice di registrazione per l'evento tick, dopo il quale ha inizio l'animazione. $START_ANIMATION
Segnaposto per il codice di supporto del ridimensionamento reattivo e dei display HiDPI $RESP_HIDPI
Segnaposto per il codice di conclusione del metodo di gestione Completa $HANDLE_COMPLETE_END
Segnaposto per una funzione di gestione del contenuto con
suoni                                                                            
$PLAYSOUND
Segnaposto per la definizione della sezione di supporto della centratura del canvas $CENTER_STYLE
Segnaposto per la proprietà stile di visualizzazione del canvas di supporto al precaricatore $CANVAS_DISP
Segnaposto per il codice di visualizzazione del precaricatore $PRELOADER_DIV
Tag HTML per la fine dello script lato client                                                                                                                $SCRIPT_END
ID elemento canvas $CANVAS_ID
Larghezza dell'elemento canvas o stage                                                                                                            $WT
Altezza dell'elemento canvas o stage                                                                                                                 $HT
Colore di sfondo dell'elemento canvas o stage                                                                                          $BG
Versione di Animate CC utilizzata per generare
il contenuto                                                                                     
$VERSION

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

Parametro attributo Variabile di modello
Segnaposto per l'inclusione degli script (CreateJS e JavaScript generato). $CREATEJS_SCRIPTS
Segnaposto per il codice di inizializzazione di librerie CreateJS, caricamento contenuti multimediali e stage crea e aggiorna $CJS_INIT*

Nota:

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:

documento bool::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:

documento bool::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.

Nota:

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

Mering Json
Fusione di Js con HTML

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: 

  1. Seleziona Finestra > Azioni.

    actions-add-script
  2. Nel pannello Azioni, seleziona Script nella sezione Globale.

    Nella sezione Globale : Script puoi scrivere script applicabili a documenti diversi in Animate o includere uno script esterno.

    Come script esterno: nella schermata Includi, seleziona lo script da includere come descritto nella sezione successiva.

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 CC. Questo offre maggiore flessibilità nell’utilizzo del codice o delle librerie JavaScript più recenti.

Per aggiungere script di terze parti: 

  1. Seleziona Finestra > Azioni.

  2. Nel pannello Azioni, seleziona Includi nella sezione Globale.

  3. Fai clic sul pulsante + per aggiungere uno script da un URL su host esterno o un file selezionato da una libreria locale.

    actions-include

    Puoi anche riordinare gli script in base alle loro interdipendenze, poiché alcuni oggetti dipendono da altre librerie esistenti.

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.

 

canvas tranperancy_final
Trasparenza del canvas

advanced_settings
Trasparenza del canvas: Impostazioni avanzate

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.
sprite-sheet
Export-spritesheets-1

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.

Static-text

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 CC consente di utilizzare i font per 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 per web di Adobe Fonts in Animate CC, consulta Utilizzo di font per 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:

File HTML

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. 

File JavaScript

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 CC, 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:

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

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

Utilizzo

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

Script

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 CC 13.0), accertati di rimuovere manualmente il codice non contrassegnato come 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.

Il contenuto viene rimosso

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

  • 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 CC 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.
Per convertire un documento AS3 in un documento HTML5 Canvas, effettua le seguenti operazioni:
  1. Apri il documento ActionScript 3 in Animate CC.
  2. Seleziona Comandi > Converti AS3 in documento HTML5 Canvas.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online