Come creare pulsanti con 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 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

Passaggi fondamentali per la creazione di pulsanti

  1. Identificate il tipo di pulsante che si adatta meglio alle vostre esigenze.

    Simbolo pulsante

    La maggior parte degli utenti sceglie i simboli di pulsanti per la flessibilità che offrono. I simboli di pulsanti contengono una linea temporale interna specializzata per gli stati del pulsante. Potete creare facilmente stati Su, Giù e Sopra graficamente diversi. Inoltre, i simboli di pulsante cambiano stato in risposta alle azioni dell'utente.

    Pulsante Clip filmato

    Potete utilizzare un simbolo di clip filmato per creare effetti sofisticati. I simboli di clip filmato possono contenere quasi ogni tipo di contenuto, comprese le animazioni. Nei simboli di clip filmato non sono tuttavia incorporati gli stati Su, Giù e Sopra. Potete creare voi stessi questi stati utilizzando ActionScript. I file di clip filmato presentano tuttavia lo svantaggio di avere dimensioni maggiori dei file di pulsanti. 

    Componente Button di ActionScript

    Utilizzate un componente Button se è necessario solo un pulsante standard o un pulsante di commutazione e non avete l'esigenza di personalizzarlo in modo particolare. I componenti Button di ActionScript 2.0 e 3.0 sono dotati di codice incorporato che rende possibili i cambiamenti di stato. Non è pertanto necessario definire l'aspetto e il comportamento degli stati del pulsante. Basta trascinare il componente nello stage.

    • I componenti Button di ActionScript 3.0 consentono alcune personalizzazioni. Potete associare il pulsante ad altri componenti e condividere e visualizzare i dati dell'applicazione. Includono funzionalità incorporate, come il supporto dell'accessibilità. Sono disponibili i componenti Button, RadioButton e CheckBox.

    • I componenti Button di ActionScript 2.0 non sono personalizzabili. I componenti rendono tuttavia possibili i cambiamenti di stato. 

  2. Definite gli stati del pulsante.

    Fotogramma Su

    Aspetto del pulsante quando non vi è alcuna interazione da parte dell'utente.

    Fotogramma Sopra

    Aspetto del pulsante quando sta per essere selezionato dall'utente.

    Fotogramma Giù

    Aspetto del pulsante quando viene selezionato dall'utente.

    Fotogramma Premuto

    Area in grado di rispondere ai clic dell'utente. La definizione del fotogramma Premuto è facoltativa. Se il pulsante è piccolo o se l'area grafica non è adiacente, può essere utile definire questo fotogramma.

    • Il contenuto del fotogramma Premuto non è visibile sullo stage durante la riproduzione.

    • L'immagine del fotogramma Premuto è un'area piena sufficientemente ampia da contenere tutti gli elementi grafici dei fotogrammi Su, Giù e Sopra.

    • Se non specificate un fotogramma Premuto, verrà utilizzata l'immagine dello stato Su.

      Potete creare un pulsante che risponde quando si fa clic o si passa il mouse su un'area differente dello stage (in questi casi si parla di "rollover disgiunto"). Collocate il fotogramma Premuto in una posizione differente rispetto alle immagini degli altri pulsanti.

  3. Associate un'azione al pulsante.

    Per fare in modo che si verifichi un'azione quando l'utente seleziona un pulsante, aggiungete il codice ActionScript alla linea temporale. Inserite il codice ActionScript negli stessi fotogrammi dei pulsanti. Il pannello Snippet di codice contiene codice ActionScript 3.0 già pronto per molti usi comuni relativi ai pulsanti. Vedete Aggiungere interattività con gli snippet di codice.

    Nota:

    ActionScript 2.0 non è compatibile con ActionScript 3.0. Se la vostra versione di Animate utilizza ActionScript 3.0, non potete incollare codice ActionScript 2.0 nel pulsante e viceversa. Prima di incollare codice ActionScript da un'altra origine nei vostri pulsanti, verificate che la versione sia compatibile.

Creare un pulsante con un simbolo di pulsante

Per rendere interattivo un pulsante, posizionate un'istanza del simbolo di pulsante sullo stage e assegnate azioni all'istanza. Assegnate le azioni alla linea temporale principale del file Flash. Non aggiungetele alla linea temporale del simbolo di pulsante. Per aggiungere azioni alla linea temporale del pulsante, utilizzate invece un pulsante di clip filmato.

  1. Scegliete Modifica > Deseleziona tutto, oppure fate clic in un'area vuota dello stage, per assicurarvi che sullo stage non sia selezionato nulla.

  2. Scegliete Inserisci > Nuovo simbolo.

  3. Nella finestra di dialogo Crea un nuovo simbolo, immettete un nome. Per il tipo di simbolo, selezionate Button.

    Animate passa alla modalità di modifica dei simboli. La linea temporale viene modificata e vengono visualizzati quattro fotogrammi consecutivi etichettati Su, Sopra, Giù e Premuto. Il primo fotogramma, Su, è un fotogramma chiave vuoto.

  4. Per creare l'immagine dello stato Su del pulsante, selezionate il fotogramma Su nella linea temporale, quindi utilizzate gli strumenti di disegno, importate un'immagine o posizionate un'istanza di un altro simbolo sullo stage.

    All'interno di un pulsante potete utilizzare simboli grafici o clip filmato, ma non un altro simbolo di pulsante.

  5. Nella linea temporale, fate clic sul fotogramma Sopra, quindi selezionate Inserisci > Linea temporale > Fotogramma chiave.

    Animate inserisce un fotogramma chiave che duplica il contenuto del fotogramma Su precedente.

  6. Con il fotogramma Sopra ancora selezionato, cambiate o modificate l'immagine del pulsante sullo stage in modo da ottenere l'aspetto che desiderate visualizzare per lo stato Sopra.

  7. Ripetete i punti 5 e 6 per il fotogramma Giù e per il fotogramma facoltativo Premuto.

  8. Per assegnare un suono a uno stato del pulsante, selezionate il fotogramma dello stato desiderato nella linea temporale e scegliete Finestra > Proprietà. Selezionate quindi un suono dal menu Audio nella finestra di ispezione Proprietà. Solo i suoni già importati sono disponibili nel menu Audio.

  9. Al termine, scegliete Modifica > Modifica documento. Ritornerete così alla linea temporale principale del file FLA. Per creare sullo stage un'istanza del pulsante che avete creato, trascinate il simbolo del pulsante dal pannello Libreria allo stage.

  10. Per testare la funzionalità di un pulsante, utilizzate il comando Controllo > Prova. Potete anche visualizzare l'anteprima degli stati di un simbolo di pulsante sullo stage scegliendo Controllo > Attiva pulsanti semplici. Questo comando vi permette di visualizzare gli stati Su, Sopra e Giù di un simbolo di pulsante senza ricorrere al comando Controllo > Prova.

Attivare, modificare e provare i simboli di pulsanti

Per impostazione predefinita, al momento della creazione i simboli di pulsanti sono disattivati da Animate. Selezionate e quindi abilitate un pulsante per verificare se risponde agli eventi del mouse. È buona norma disattivare i pulsanti mentre lavorate e attivarli per verificarne rapidamente il comportamento.

  • Per selezionare un pulsante, utilizzate lo strumento Selezione per tracciare un rettangolo di selezione intorno al pulsante.

  • Per attivare o disattivare i pulsanti sullo stage, scegliere Controllo > Attiva pulsanti semplici. Questo comando agisce come interruttore tra i due stati.

  • Per spostare un pulsante, utilizzate i tasti freccia.

  • Per modificare un pulsante, utilizzate la finestra di ispezione Proprietà. Se non è visibile, scegliete Finestra > Proprietà.

  • Per provare il pulsante nell'ambiente di creazione, scegliete Controllo > Attiva pulsanti semplici.

  • Per provare il pulsante in Flash Player, scegliete Controllo > Prova filmato [o Prova scena] > Prova. Questo metodo è il solo modo per provare i pulsanti di clip filmato.

  • Per provare il pulsante nel pannello di anteprima della libreriaselezionate il pulsante nella libreria e fate clic su Riproduci.

Risoluzione dei problemi relativi ai pulsanti

Per risolvere i problemi comuni relativi ai pulsanti, utilizzate queste risorse:

Altro materiale di riferimento sui pulsanti

Le seguenti note tecniche contengono istruzioni per alcuni scenari specifici di utilizzo dei pulsanti:

Logo Adobe

Accedi al tuo account