Come creare pulsanti con Adobe Animate

I pulsanti in Animate (in precedenza Flash Professional) sono simboli che contengono quattro fotogrammi. Ogni fotogramma di un simbolo di pulsante rappresenta un diverso stato per il pulsante: Su, Sopra, Giù e Premuto. Questi stati determinano in che modo un pulsante si comporta visivamente quando il mouse gli viene passato sopra o quando l'utente fa clic sul pulsante. In questo documento viene illustrato come creare pulsanti avanzati e di base.

Creazione di un pulsante di base

  1. Scegliete Inserisci > Nuovo simbolo o premete Control+F8 (Windows) o Comando+F8 (Mac OS).
    Nota: in Flash 3 e versioni precedenti, deselezionate tutto ciò che si trova in questa fase e scegliete Inserisci > Crea simbolo.

  2. Nella finestra di dialogo Proprietà simbolo, immettete un nome per il nuovo simbolo del pulsante e scegliete Pulsante come opzione di comportamento. Fate clic su OK. 

    Flash passa alla modalità di modifica dei simboli. L'intestazione della linea temporale viene modificata per visualizzare quattro fotogrammi consecutivi etichettati come Su, Sopra, Giù e Premuto. Il primo fotogramma, Su, è un fotogramma chiave vuoto.
  3. Per creare l'immagine del pulsante stato Su, utilizzate gli strumenti di disegno, importate un elemento grafico o posizionate un'istanza di un altro simbolo sullo stage. È possibile utilizzare una clip filmato o un simbolo grafico in un pulsante. Tuttavia, non potete utilizzare un altro pulsante in un pulsante. Utilizzate i simboli della clip filmato per creare un pulsante animato.
  4. Selezionate il secondo fotogramma, con etichetta Sopra, quindi selezionate Inserisci > Fotogramma chiave. L'immagine del pulsante dal primo fotogramma viene visualizzata sullo Stage.
  5. Modificate l'immagine del pulsante per lo stato Sopra. Ripetete i passaggi 4 e 5 per i fotogrammi Giù e Premuto.

    Nota:
    il fotogramma Premuto non è visibile su Stage durante la riproduzione, ma definisce l'area del pulsante che risponde quando si fa clic. Assicuratevi che l'immagine del fotogramma Premuto sia un'area piena abbastanza ampia da contenere tutti gli elementi grafici dei fotogrammi Su, Giù e Sopra. Tale area può anche essere più grande del pulsante visibile. Se non specificate un fotogramma Premuto, gli oggetti dello stato Su vengono utilizzati come fotogramma Premuto.
  6. Dopo aver definito le immagini dei quattro stati del pulsante, scegliete Modifica > Modifica filmato per uscire dalla modalità Modifica simbolo.
  7. Aprite la finestra Libreria tramite Windows > Libreria. Individuate il pulsante nella finestra Libreria e trascinate il simbolo del pulsante dalla Libreria sullo Stage. Questo passaggio consente di creare un'istanza del pulsante nel filmato.

Per informazioni sull'assegnazione di azioni all'istanza di un pulsante, consultate la documentazione che applica la versione di Animate in uso. La documentazione è riportata di seguito:

Assegnate un'azione semplice a un pulsante (Flash 5)

  1. Nella modalità Modifica filmato, selezionate l'istanza del pulsante creata nel punto 7 qui sopra.
  2. Scegliete Finestra > Azioni per aprire il pannello Azioni.
  3. Nell'elenco degli strumenti sul lato sinistro del pannello, fate clic sulla categoria Azioni di base per visualizzare le azioni di base.
  4. Per assegnare un'azione, effettuate una delle seguenti operazioni:
    • Fate doppio clic su un'azione nella categoria delle azioni di base.
    • Trascinate un'azione dalla categoria Azioni di base a sinistra nell'elenco Azioni sul lato destro del pannello.
    • Fate clic sul pulsante Aggiungi (+) e selezionate un'azione dal menu a comparsa.
    • Utilizzate i tasti di scelta rapida da tastiera.
  5. Se l'azione selezionata ha dei parametri collegati, tali parametri vengono visualizzati nel riquadro relativo nella parte inferiore del pannello Azioni. (Se il riquadro Parametro non è visibile, fate clic sul triangolino nell'angolo inferiore destro del pannello.) Scegliete o inserite i parametri rilevanti per tale azione. Ad esempio, l'azione gotoAndPlay mostrata di seguito contiene tre parametri: Scena, TipoFotogramma e un'opzione per Vai e riproduci.

Assegnate un'azione semplice a un pulsante (Flash 4 e versioni precedenti)

  1. Nella modalità Modifica filmato, selezionate l'istanza del pulsante creata nel punto 7 qui sopra.
  2. Accertatevi che l'opzione di attivazione dei pulsanti nel menu di controllo sia deselezionata.
  3. Fate doppio clic sul pulsante per aprire la finestra di dialogo di proprietà dell'istanza.
    Nota: in Flash 2, questa finestra di dialogo corrispondeva alla finestra di dialogo Proprietà link: Pulsante.

  4. Assegnate l'azione selezionando la scheda Azione nella finestra di dialogo di proprietà dell'istanza. Quindi, fate clic sul pulsante più (+) e doppio clic sull'azione appropriata.

    Nota:
    in Flash 2 assegnate l'azione tramite il menu a comparsa Azione nella finestra di dialogo Proprietà link: Pulsante. Al pulsante può essere assegnata una sola azione.
  5. Accertatevi che l'opzione di attivazione dei pulsanti nel menu di controllo venga riattivata (accanto all'opzione viene visualizzato un segno di spunta).

  6. Se l'azione selezionata presenta parametri associati, tali parametri vengono visualizzati nel pannello relativo sul lato destro del pannello Azioni. Scegliete o inserite i parametri rilevanti per tale azione.

Creazione di pulsanti avanzati

Dopo aver imparato a utilizzare un pulsante semplice, provate pulsanti Animate più complessi. Potete creare pulsanti invisibili, con stati animati e con effetti rollover. 

Gli stati Premuto sono importanti da comprendere durante la progettazione di un pulsante complesso. La forma e l'area del pulsante rappresentano l'area attiva del pulsante. Per sperimentare lo stato Premuto, effettuate le seguenti operazioni:

  1. Inserite un pulsante dalle librerie comuni allo Stage. Modificate il pulsante.
  2. Evidenziate il fotogramma dello stato Premuto del pulsante e inserite un fotogramma chiave. Verificate il funzionamento in un filmato.

  3. Ridimensionate in modo incisivo l'oggetto nello stato Premuto ed effettuate una prova.
  4. Eliminate il fotogramma chiave nello stato Premuto e provate il pulsante.

  5. Notate l'effetto del cursore del pulsante e gli stati su, Sopra e Giù visualizzati quando il pulsante è attivato. 

Pulsanti invisibili

Gli stati Su, Sopra e Giù di un pulsante possono essere lasciati vuoti. Se questi stati sono vuoti, è necessario definire lo stato Premuto in modo che contenga il contenuto.

Quando lo stato Su del pulsante è vuoto o invisibile, il pulsante è rappresentato nello Stage da una forma di colore blu. La forma è l'equivalente del contenuto nel fotogramma chiave successivo all'interno del pulsante. Questa forma blu non è visibile nel vostro filmato finale.

Pulsanti con stati animati

Per realizzare pulsanti animati in Animate, posizionate una clip filmato nello stato del pulsante per cui si sta effettuando l'animazione.

  1. Create una clip filmato per ogni stato del pulsante che desiderate animare.
  2. Create il pulsante.
  3. Inserite le clip filmato negli stati del pulsante da animare.
  4. Posizionate il pulsante sullo stage. 
    Nota: le clip filmato non possono essere testate nell'editor di Animate. Selezionate Controllo > Prova filmato o esportatelo come file SWF per il test.

Un rollover in un’area del filmato influisce su un’altra area del filmato

Per creare questo effetto, spostate gli elementi dello stato Premuto in un'altra area dello Stage rispetto agli elementi nello stato Sopra del pulsante. Questo metodo funziona per gli effetti di rollover semplici. L'area attiva del pulsante si trova in un'altra area sullo stage rispetto all'effetto rollover.

Informazioni aggiuntive

Un buon metodo per apprendere ulteriori informazioni sui pulsanti e la relativa creazione è quello di studiare i pulsanti inclusi come esempi con Animate. Nella versione 5, questi pulsanti di esempio sono disponibili nel menu Windows > Common Libraries > Pulsanti. Se utilizzate la versione 4, potete accedere a questi pulsanti scegliendo Librerie > Pulsanti. Per la versione 2, le librerie dei pulsanti di esempio sono accessibili dal menu Xtra.

Istruzioni sulla creazione di un pulsante sono inoltre disponibili nelle lezioni fornite con la versione 5. Scegliete Aiuto > Lezioni > 06 Pulsanti direttamente da Flash per accedere a questa lezione.

Ottieni supporto in modo più facile e veloce

Nuovo utente?