Guida utente Annulla

Aggiungere interattività con gli snippet di codice in Animate

  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

 

Il pannello Snippet di codice è studiato per permettere agli utenti non esperti di programmazione di iniziare rapidamente a utilizzare semplici sequenze di codice JavaScript e ActionScript 3.0. Questo pannello consente di aggiungere codice a un file FLA al fine di abilitare le funzionalità più comuni. L'uso del pannello Snippet di codice non richiede una precedente conoscenza del linguaggio JavaScript o ActionScript 3.0.

Con il pannello Snippet di codice, potete:

  • Aggiungere codice che regola il comportamento di un oggetto sullo stage

  • Aggiungere codice che controlla lo spostamento dell'indicatore di riproduzione sulla linea temporale

  • (Solo per CS5.5) - Aggiungere codice che abilita l'interazione dell'utente con i touch screen

  • Aggiungere al pannello snippet di codice che avete creato

Utilizzare gli snippet di codice forniti con Animate è anche un buon modo per iniziare a imparare il linguaggio JavaScript o ActionScript 3.0. Osservando il codice incluso negli snippet e seguendo le istruzioni relative agli snippet, potete cominciare a capire la struttura del codice e apprendere la terminologia di base.

Opzione Snippet di codice in Animate
Opzione Snippet di codice in Animate

Prima di iniziare

Quando si lavora con il pannello Snippet di codice, è importante capire alcuni concetti fondamentali di Animate:

  • Per utilizzare molti degli snippet di codice, dovete personalizzare alcuni elementi nel codice. In Animate, queste modifiche possono essere effettuate nel pannello Azioni. Ogni snippet contiene istruzioni specifiche per questa operazione.

  • Tutti gli snippet di codice inclusi sono JavaScript o ActionScript 3.0.

  • Alcuni snippet influiscono sul comportamento di un oggetto, ad esempio rendendolo cliccabile o determinandone lo spostamento o la sparizione. Gli snippet di questo tipo vengono applicati all'oggetto sullo stage.

  • Alcuni snippet determinano l'esecuzione di un'azione non appena l'indicatore di riproduzione entra nel fotogramma che contiene lo snippet. Gli snippet di questo tipo vengono applicati a un fotogramma della linea temporale.

  • Quando applicate uno snippet, il codice viene aggiunto al fotogramma corrente del livello Azioni sulla linea temporale. Se non avete creato un livello Azioni voi stessi, Animate ne aggiunge uno sopra tutti gli altri livelli della linea temporale.

  • Affinché ActionScript possa controllare un oggetto sullo stage, all'oggetto deve essere stato assegnato un nome istanza nella finestra di ispezione Proprietà.

  • potete fare clic sui pulsanti Mostra descrizione e Mostra codice che appaiono quando selezionate uno snippet nel pannello.

Aggiungere uno snippet di codice a un oggetto o a un fotogramma della linea temporale

Per aggiungere un'azione da applicare a un oggetto o all'indicatore di riproduzione:

  1. Selezionate un oggetto sullo stage o un fotogramma nella linea temporale.

    Se selezionate un oggetto che non è un'istanza di simbolo, Animate lo converte in un simbolo di clip filmato quando applicate lo snippet.

    Se selezionate un oggetto che non ha già un nome istanza, Animate ne aggiunge uno quando applicate lo snippet.

  2. Nel pannello Snippet di codice (Finestra > Snippet di codice), fate doppio clic sullo snippet che volete applicare.

    Se avete selezionato un oggetto sullo stage, Animate aggiunge lo snippet al pannello Azioni nei fotogrammi che contengono l'oggetto selezionato.

    Se avete selezionato un fotogramma della linea temporale, Animate aggiunge lo snippet soltanto a quel fotogramma.

  3. Nel pannello Azioni, visualizzate il codice appena aggiunto e sostituite gli elementi necessari in base alle istruzioni riportate all'inizio dello snippet.

Snippet di codice nel pannello Azioni

Aggiungere snippet al pannello Snippet di codice

Potete aggiungere nuovi snippet al pannello Snippet di codice in due modi:

  • Inserendo uno snippet nella finestra di dialogo Crea nuovo snippet di codice.

  • Importando un file di snippet in formato XML.

Per utilizzare la finestra di dialogo Crea nuovo snippet di codice:

  1. Nel pannello Snippet di codice, scegliete Crea nuovo snippet di codice dal menu del pannello.

  2. Nella finestra di dialogo, immettete il titolo, il testo del suggerimento e il codice JavaScript o ActionScript 3.0 per lo snippet.

    Potete aggiungere qualunque codice che avete selezionato nel pannello Azioni, facendo clic sul pulsante Riempimento automatico.

  3. Selezionate la casella di controllo "Sostituisci automaticamente instance_name_here durante l'applicazione dell'esempio di codice" se il codice include la stringa "instance_name__here" e volete che Animate la sostituisca con il nome istanza corretto quando lo snippet viene applicato.

    Animate aggiunge il nuovo snippet al pannello Snippet di codice in una cartella denominata Personalizza.

Per importare uno snippet di codice in formato in XML:

  1. Nel pannello Snippet di codice, scegliete Importa XML snippet di codice dal menu del pannello.

  2. Selezionate il file XML da importare e fate clic su Apri.

Per vedere il formato XML corretto per gli snippet di codice, scegliete Modifica XML snippet di codice dal menu del pannello.

Per eliminare uno snippet di codice, fate clic su di esso con il pulsante destro nel pannello e scegliete Elimina snippet di codice dal menu di scelta rapida.

Animazioni interattive con HTML5

Alcune animazioni richiedono snippet di codice per supportare diverse piattaforme di pubblicazione. Volete scoprire come usare gli snippet di codice per rendere l'animazione interattiva? seguite l’esercitazione riportata alla fine di questo esempio ed effettuate le seguenti operazioni.

  1. In Libreria , fate clic su Impostazioni pubblicazione.

  2. Selezionate JavScript/HTML .

  3. Nella scheda HTML/JS, fate clic su Esporta e selezionate le seguenti opzioni:

    • Nome file: digitate il nome del file.
    • Salva come:  selezionate HTML.
  4. Fate clic su OK.

Come migliorare le animazioni HTML5 interattive

Guardate il video per scoprire come modificare i codici.

 Adobe

Ottieni supporto in modo più facile e veloce

Nuovo utente?