Come creare pulsanti con Animate CC

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.

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.

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.

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.

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

Scegliete Inserisci > Nuovo simbolo.

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.

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.

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.

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.

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

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.

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.

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.

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.