Guida utente Annulla

Utilizzo dei componenti in HTML5 Canvas

Cerca
Animate

Animate

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

 

Leggi questo articolo per ulteriori informazioni su come utilizzare i componenti personalizzabili.

Un componente fornisce una funzione o un gruppo di componenti correlate personalizzabili e riutilizzabili che migliorano la produttività per gli utenti che si occupano della creazione di annunci pubblicitari. In precedenza, Animate supportava i componenti Flash utilizzati con destinazioni basate su Flash. A partire da questa versione, Animate supporta HTML5 Canvas. 

  1. Selezionate File > Nuovo.

    Scegliete Avanzate tra le schede nella parte superiore della schermata nella finestra di dialogo Nuovo documento, quindi selezionate l’opzione HTML5 Canvas.

    Nuovo documento
    HTML5 Canvas

  2. Seleziona Finestra > Componenti.

    Componenti predefiniti

  3. Seleziona Componenti > Video. Trascina i componenti associati sull'area di lavoro. 

  4. Seleziona l’istanza del componente Video sullo stage, quindi visualizza e modifica i relativi parametri nella finestra di ispezione Proprietà. Il parametro Source (origine) consente di selezionare il file video da una posizione locale o di fornire un URL da cui riprodurre il video (formato mp4, ogg, ogv o webm). 

    Trascinare i componenti

  5. Seleziona Adatta a dimensioni originali per ridimensionare il lettore video in base alle dimensioni del video di input. Questa funzione è disponibile solo per i video mp4. Per altri tipi di video, ridimensiona manualmente l’istanza del video sullo stage avendo cura di rispettare le proporzioni originali.

  6. Premi Ctrl + Invio (Windows) o Comando + Invio (Mac) per visualizzare in anteprima il filmato. Il video viene riprodotto nel browser predefinito.  I controlli sono visibili per impostazione predefinita e vengono visualizzati quando passi il cursore sul video nel browser.

    Puoi usare questa stessa procedura per utilizzare altri componenti.

    Anteprima dell’output di un componente

 I componenti vengono aggiunti al documento HTML come elementi DOM, in modo da fare riferimento agli snippet di codice Componenti (Snippet di codice > HTML5 Canvas > Componenti) per aggiungere interattività ai componenti.

Aggiunta di interattività ai componenti mediante snippet di codice

  1. Seleziona Finestra > Componenti.

  2. Per aggiungere interattività ai componenti, seleziona Finestra > Snippet di codice. Puoi visualizzare la mappatura del comportamento dei vari componenti disponibili.

  3. Nella schermata Snippet di codice, seleziona HTML5 Canvas > Componenti.

    Snippet di codice predefiniti

  4. A seconda del componente selezionato, fai doppio clic sullo snippet di codice corrispondente per visualizzarlo nel pannello Azioni.  Per informazioni su come aggiungere interattività agli snippet di codice, consulta Aggiungere interattività con gli snippet di codice in Animate.

Esempio

Il seguente esempio illustra come usare gli snippet di codice per la riproduzione di un video controllata tramite codice.

  1. Seleziona l’istanza del video sullo stage e disattiva l’impostazione Esecuzione automatica nella finestra di ispezione Proprietà. 

  2. Fai doppio clic due volte sul componente Button (Pulsante) nel pannello Componenti per creare due istanze sullo stage e posizionate i pulsanti. Puoi anche trascinarli direttamente dal pannello Componenti allo stage.

    Posizionare i pulsanti

  3. Seleziona la prima istanza del pulsante e imposta l'etichetta su Riproduci nella finestra di ispezione Proprietà e il secondo pulsante su Pausa. 

  4. Fai clic su Finestra > Snippet di codice per aprire il pannello Snippet di codice. Passa a HTML5 Canvas > Componenti ed espandi la sezione Interfaccia utente. 

  5. Seleziona il pulsante Riproduci sullo stage, fai doppio clic su Evento clic su pulsante, nel pannello Snippet di codice, e fai clic su OK. Animate assegna un nome di istanza al pulsante selezionato. Puoi osservare il codice appena aggiunto nel pannello Azioni.

    Aggiunta di snippet di codice

  6. Seleziona il video sullo stage ed espandi la sezione Video nel pannello Snippet di codice. Fai doppio clic su Riproduci video. Il codice necessario per riprodurre il video viene aggiunto al pannello Azioni.

    Codice aggiunto al pannello Azioni

  7. Per riprodurre il video quando si fa clic sul pulsante, inserisci il codice nella sezione compresa fra <Inizio del codice personalizzato> e <Fine del codice personalizzato>. 

    Inserisci il codice all’interno dei tag

  8. Per aggiungere un codice per mettere in pausa il video, fai clic sul pulsante Pausa, assegna il nuovo gestore di pulsante, quindi aggiungi il codice per mettere in pausa il video.

  9. Visualizza un’anteprima del filmato. Fai clic sul pulsante Riproduci per riprodurre il video e sul pulsante Pausa per interromperlo. 

 Puoi visualizzare l’attributo className per ciascun componente nella finestra di ispezione proprietà. Usa questi nomi di classi per associare uno skin ai componenti tramite CSS. Utilizza il componente CSS per caricare il CSS personalizzato. Il componente CSS consente di selezionare un file CSS locale incluso nel filmato.

Componenti HTML5 interessanti

La possibilità di aggiungere interattività ai contenuti è una funzionalità particolarmente interessante e prevede l’utilizzo di numerose funzioni con componenti HTML5. Per scoprire come utilizzare questi componenti HTML5 in Animate, segui l’esercitazione riportata alla fine di questo esempio ed effettuate le seguenti operazioni.

  1. Fai clic su Windows e seleziona Componenti .

  2. Espandi la cartella Video, quindi fai clic e trascina l’icona del video sullo stage.

  3. Nella finestra di dialogo Proprietà espandi la scheda Posizioni e dimensioni e imposta i valori desiderati.

Come migliorare le composizioni Animate utilizzando componenti HTML5

Guarda il video per sapere come poter includere più componenti alla composizione.

Installare i componenti condivisi

I progettisti o gli sviluppatori che usano Animate possono installare il componente condiviso del file ZXP mediante l’utility Gestisci estensioni. Per ulteriori informazioni, consulta Installare le estensioni.

Prerequisito

Installazione dei componenti

Per installare i componenti condivisi puoi effettuare le operazioni seguenti: 

  1. Fai doppio clic sul file ManageExtensions.exe. Viene visualizzata la finestra di dialogo Gestisci estensioni.

  2. Fai clic su Installa un’estensione e seleziona l’estensione (file .zxp) desiderata. Per ulteriori informazioni, consulta Installare le estensioni.

  3. Per visualizzare il componente installato in Animate, fai clic su Finestra > Componente. Viene visualizzata la finestra a comparsa Componenti.

  4. Fai clic sull'icona ad hamburger nell'angolo in alto a destra e fai clic su Ricarica componenti.

Altri argomenti correlati

Ottieni supporto in modo più facile e veloce

Nuovo utente?

Collegamenti rapidi

Visualizza tutti i tuoi piani Gestione dei piani
Visualizza collegamenti rapidi
Nascondi collegamenti rapidi

Note legali    |    Informativa sulla privacy online