Share
Questo tutorial è nato dopo aver cercato aiuto online con lo stesso argomento. Un sacco di persone sembrano fare la stessa domanda, ma è stato difficile trovare una serie ben impacchettata di istruzioni da seguire.
Così, come ogni netizen decente, ho messo insieme questo articolo, prendendo ispirazione da un paio di altri blog e usando esperienza da alcuni tentativi ed errori per conto mio. E ora te lo offro, sperando che questo finisca la tua ricerca.
Questa esercitazione utilizza Flash CS4 in combinazione con ActionScript 3.0, ma puoi applicare questi principi in Flash CS3. Presume che tu abbia già una buona idea sulla creazione di animazioni nella timeline e una buona comprensione di come applicare ActionScript alla timeline.
L'obiettivo è quello di avere un pulsante di navigazione sotto forma di una linguetta, nascosto lateralmente, per fare un passo indietro attraverso una presentazione di immagine. Voglio che si apra, cambi colore e mostri la sua etichetta. Quando l'utente fa clic su di esso, tornerà indietro di una diapositiva. Se l'utente muta prima di fare clic su di esso, tornerà alla sua posizione originale e al colore.
Nota: ricorda di salvare spesso per evitare di iniziare da zero se qualcosa va storto.
Flash ti dà la possibilità di creare un simbolo di pulsante, ma è limitato a tre stati: Su, oltre e Giù. C'è anche Colpire che definisce l'area interattiva attorno al pulsante. Questo va bene per la maggior parte degli usi di un semplice pulsante. In realtà, questo simbolo di pulsante è in realtà un membro di SimpleButton classe. Ma cosa succede se si desidera modificare l'aspetto del pulsante o animarlo quando l'utente si riavvia e si allontana senza fare clic? In tal caso, sarà necessario un quarto stato chiamato Su.
Il simbolo del pulsante integrato purtroppo non ha uno stato esterno.
Ecco il takeaway: qualsiasi simbolo, come un simbolo grafico o un simbolo di un filmato, può diventare un pulsante. Hai solo bisogno di applicare il codice ActionScript corretto. In questo tutorial, un filmato verrà trasformato in un pulsante con quattro stati.
Renderà la tua vita molto più semplice se hai già un'idea chiara di come si comporterà il tuo pulsante in ciascuno dei quattro stati. Disegnala su carta o usa Illustrator o Photoshop per prototipare gli elementi visivi che possono a loro volta essere importati in Flash. Questo è un po 'di lavoro in anticipo, ma è molto meglio che lavorare alla cieca e dover tornare indietro e aggiustare qualcosa perché il concetto non è stato pensato logicamente.
Crea un nuovo documento e scegli File Flash (ActionScript 3.0). Imposta il livello con le dimensioni e il colore di sfondo appropriati.
Invece di creare un simbolo di pulsante, creeremo un nuovo simbolo di clip filmato. Premi Control-F8 (Comando-F8 su Mac) o scegli Inserisci> Nuovo simbolo dal menu. Lo chiameremo "pulsante a quattro stati".
Nel filmato "quattro stati pulsante", aggiungi un nuovo livello e chiamalo "azioni".
Crea un altro livello e chiamalo "etichette". Inserire quattro fotogrammi chiave vuoti a intervalli approssimativamente uguali quanto basta in modo da lasciare spazio sufficiente per leggere ciascuna etichetta. Qui li ho messi a intervalli di 20 fotogrammi. Dare i nomi delle etichette di su, su, giù e su nel pannello Proprietà. Questi saranno i tuoi stati pulsante.
Aggiungi i fotogrammi chiave nel livello azioni che corrisponde ai quattro stati nel livello etichette.
Per ogni fotogramma chiave vuoto nel livello azioni, aggiungi this.stop (); nell'editor di ActionScript. Ciò assicurerà che il filmato non riproduca gli altri stati dei pulsanti.
Crea un nuovo simbolo di clip filmato premendo Control-F8 (Comando-F8 su Mac) o scegli Inserisci> Nuovo simbolo dal menu e chiamalo "su animazione".
Per il pulsante, disegna una casella verde in un livello e aggiungi una freccia bianca in uno strato sopra. Assicurati che sia registrato nell'angolo in alto a sinistra. Dato che questo è statico, non c'è bisogno di una serie di fotogrammi per l'animazione, ma hai sempre la flessibilità nel caso decidessi di animarlo, ad esempio una finestra che si dissolve in vista.
Crea un nuovo livello e chiamalo "azioni". Assicurati che sia al top. Seleziona il keyframe vuoto e aggiungi this.stop (); all'Editor di ActionScript. In questo caso non è completamente necessario in quanto è solo un'immagine statica, ma è buona norma impedire che ogni stato venga ripetuto.
L'unica cosa che manca alla modalità di modifica dei simboli dei pulsanti che non hai con i clip filmato è una cornice speciale riservata all'area colpita. Questo definirà i limiti in cui si verificano gli eventi del mouse come i clic e gli hover. Crea un nuovo livello e chiamalo "hit area".
Disegna una forma sul livello e imposta il suo valore alfa su 0 nel pannello Proprietà, rendendolo invisibile. Questa area di successo sarà grande quanto il pulsante quando è completamente estesa. Nota: se hai una sequenza animata, assicurati che i fotogrammi delle aree colpite occupino l'intera lunghezza dell'animazione.
Crea un nuovo livello nel pulsante a quattro stati simbolo del filmato chiamato stati del pulsante. Trascina un'istanza di animazione simbolo dal pannello Libreria e nel pulsante a quattro stati area di modifica dei simboli del filmato in stati del pulsante strato. Assicurarsi che le sue coordinate X e Y siano impostate su 0. Inserire una cornice sul telaio 20.
Premi Control-F8 (Comando-F8 su Mac) o scegli Inserisci> Nuovo simbolo dal menu e scegli Filmato. Lo chiameremo "sopra l'animazione".
Ritornare al clip filmato "up animation", fare clic sul pulsante verde e copiarlo. Ritornare al clip filmato "sopra l'animazione" e aggiungere un nuovo livello chiamato "pulsante morph". Fare clic con il tasto destro del mouse per incollare il pulsante verde sul fotogramma chiave vuoto.
Crea un altro fotogramma chiave vuoto al fotogramma 20 e fai clic con il pulsante destro del mouse per incollarlo di nuovo. Con questa forma, aumenta la sua larghezza e cambia il suo colore in arancione. Dovrebbe essere della stessa dimensione dell'area di successo creata nel passaggio 10. Selezionare l'intera gamma di frame e fare clic con il tasto destro del mouse per creare un'interpolazione di forma.
Per aggiungere un'etichetta di pulsante, crea un nuovo livello chiamato "testo visualizzato" e utilizza lo strumento testo per creare un oggetto di testo statico, in questo caso, PRECEDENTE in un fotogramma chiave vuoto.
Fare clic con il pulsante destro del mouse per inserire un frame al frame 20. Selezionare un frame nel layer e fare clic con il pulsante destro del mouse per creare un'interpolazione di movimento. Voglio che l'etichetta si dissolva a partire dal centro dell'animazione, quindi andrò all'editor di movimento e creerò i fotogrammi chiave nel mezzo e alla fine, creando tre fotogrammi chiave. Il primo keyframe aggiungerà un effetto di colore con un alfa dello 0% e gli ultimi due avranno un alfa del 100%.
Aggiungi un nuovo livello chiamato "hit area". Puoi selezionare la forma arancione più lunga dalla fine dell'interpolazione di forma, copiarla e incollarla in un fotogramma chiave vuoto sul livello "area colpita". Selezionalo e assegnagli un valore alfa dello 0% nel pannello Proprietà. Inserisci una cornice al fotogramma 20 per fare in modo che l'area colpisca l'intera animazione.
Aggiungi un nuovo livello nella parte superiore e chiamalo "azioni". Aggiungi un fotogramma chiave vuoto al fotogramma 20 e aggiungi un this.stop (); azione nel pannello delle azioni. Ciò impedirà il looping dell'animazione.
Tornare al clip filmato "four state button". Inserire un fotogramma chiave vuoto nel frame 21 sul layer degli stati del pulsante e trascinare un'istanza di sopra l'animazione filmato dalla biblioteca. Assicurarsi che le sue coordinate siano impostate su 0. Inserire una cornice sul frame 40.
Crea un nuovo simbolo grafico premendo Control-F8 (Comando-F8 su Mac) o scegli Inserisci> Nuovo simbolo dal menu e chiamalo "giù grafico". Non è richiesta alcuna animazione esplicita poiché verrà visualizzata solo istantaneamente quando si fa clic sul pulsante del mouse.
Per questo stato, tutto ciò che è richiesto, facoltativamente, è quello di cambiare il colore del pulsante completamente esteso. È possibile copiare e incollare la casella arancione e l'etichetta PRECEDENTE dal clip filmato "sopra l'animazione" nei rispettivi livelli. Cambia la casella arancione in rosso. È richiesto solo un fotogramma, non c'è bisogno di un'area colpita poiché il pulsante copre l'intera area. E, poiché è un simbolo grafico, no Stop(); l'azione è necessaria.
Tornare al clip filmato "four state button". Inserisci un fotogramma chiave vuoto nel frame 41 sul layer "stati pulsante" e trascina un'istanza del simbolo "giù grafico" dalla Libreria. Assicurarsi che le sue coordinate siano impostate su 0. Inserire un frame sul frame 60.
Premi Control-F8 (Comando-F8 su Mac) o scegli Inserisci> Nuovo simbolo dal menu e scegli Filmato. Lo chiameremo "out animation".
Lo stato esterno sarà essenzialmente una versione invertita dello stato precedente. Ritornare al clip filmato "sopra l'animazione" e copiare i fotogrammi di forma dell'interpolazione, quindi tornare all'animazione "out", creare un livello denominato "pulsante morph" e incollare i fotogrammi nel fotogramma chiave vuoto. Quindi seleziona tutti i fotogrammi in quel livello e scegli Modifica> Linea temporale> Fotogrammi inversi dal menu.
Ritornare al clip filmato "sopra l'animazione" e copiare l'oggetto di testo PRECEDENTE, quindi tornare all'animazione "out", creare un nuovo livello denominato "testo scomparire" e incollare in posizione.
Inserisci un frame al frame 20 quindi seleziona l'intervallo di frame e crea un'interpolazione di movimento. Farai l'inverso dell'interpolazione di movimento creata nel passaggio 15 e creerai fotogrammi chiave nel mezzo e alla fine nell'Editor movimento, ma i fotogrammi chiave primo e medio avranno un alfa del 100% mentre l'ultimo fotogramma chiave avrà un alfa di 0%.
Per ripristinare l'aspetto del pulsante al suo stato originale, aggiungi un livello denominato "freccia" e posiziona un fotogramma chiave nel fotogramma 20, lasciando i primi 19 fotogrammi in bianco. Copia la freccia da "su animazione" e incolla di nuovo nella "animazione in uscita" in quell'ultimo fotogramma chiave.
Ancora una volta, dobbiamo creare un nuovo livello chiamato "hit area" e posizionare una casella abbastanza grande da coprire l'intera dimensione del pulsante esteso. Dagli un alfa di 0 per renderlo invisibile.
Di nuovo, per evitare che l'animazione "in uscita" si interrompa, dobbiamo aggiungere un livello chiamato "azioni", inserire un fotogramma chiave vuoto nel fotogramma 20 e aggiungere un this.stop (); azione nel pannello Azioni.
Tornare al clip filmato "four state button". Inserisci un fotogramma chiave vuoto nel frame 61 sul layer "stati pulsante" e trascina un'istanza del simbolo "out animation" dalla libreria. Assicurarsi che le sue coordinate siano impostate su 0. Inserire una cornice sul frame 80.
Ora arriva ActionScript per far funzionare tutto. Per rilevare eventi del mouse come clic e hover, è necessario aggiungere listener di eventi.
Fai clic sul primo fotogramma chiave del livello azioni nel clip filmato "quattro stati" in cui abbiamo prima aggiunto un'azione di arresto e aperto il pannello Azioni. Aggiungeremo listener di eventi come mostrato di seguito per rilevare un mouse ROLL_OVER, un MOUSE_UP (quando viene rilasciato il pulsante del mouse) e un MOUSE_DOWN (quando viene premuto il pulsante del mouse).
Usiamo l'evento ROLL_OVER anziché l'evento MOUSE_OVER a causa del modo in cui tratta gli elementi figli del clip filmato nel contesto con il clip filmato principale, che è più adatto per questa impostazione. Aggiungiamo false, 0, true ai parametri come buona pratica per contrassegnare questi listener per la garbage collection per quando non sono più necessari.
this.addEventListener (MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true); this.addEventListener (MouseEvent.MOUSE_UP, onMouseClick, false, 0, true); this.addEventListener (MouseEvent.MOUSE_DOWN, onMouseDownButton, false, 0, true);
Per ogni listener di eventi, verrà chiamata una funzione. Ogni funzione fa avanzare essenzialmente la timeline allo stato appropriato all'interno del clip filmato a quattro stati e riproduce quella sezione facendo riferimento al nome dell'etichetta.
Noterai che non esiste un listener di eventi creato per un evento MOUSE_OUT. Invece di creare un listener di eventi standalone, utilizzeremo semplicemente l'evento ROLL_OVER per richiamare una funzione che a sua volta rimuoverà il proprio listener di eventi e aggiungerà un nuovo listener di eventi per un evento ROLL_OUT. In questa configurazione, un evento ROLL_OUT funzionerà meglio di un evento MOUSE_OUT.
Lo stesso vale per il contrario, in cui un evento ROLL_OUT rimuove il proprio listener e ripristina il listener di eventi per un evento ROLL_OVER. Commutando questi rollover e rollout, manteniamo il codice pulito e libero da potenziali conflitti.
Accentsconagua
function onMouseRollover (e: MouseEvent): void e.target.gotoAndPlay ("over"); this.removeEventListener (MouseEvent.ROLL_OVER, onMouseRollover); this.addEventListener (MouseEvent.ROLL_OUT, onMouseRollout, false, 0, true); function onMouseRollout (e: MouseEvent): void e.target.gotoAndPlay ("out"); this.removeEventListener (MouseEvent.ROLL_OUT, onMouseRollout); this.addEventListener (MouseEvent.ROLL_OVER, onMouseRollover, false, 0, true); Per riprodurre lo stato precedente, crea una funzione corrispondente all'evento MOUSE_DOWN impostato dal listener di eventi.
function onMouseDownButton (e: MouseEvent): void e.target.gotoAndPlay ("down"); Infine, dobbiamo effettivamente dire al pulsante cosa fare quando viene cliccato. Aggiungi una funzione che corrisponde all'evento MOUSE_UP. Un evento MOUSE_UP è essenzialmente la stessa cosa dell'ultima parte di un evento CLICK (in basso, poi in alto).
A scopo di test, ho creato un collegamento Web in una variabile URL (in questo caso, nel sito Web di Adobe), quindi ho aggiunto il metodo navigateToURL () alla funzione in modo da poter verificare che funzioni. Tuttavia, è possibile sostituire questo metodo con una chiamata per spostarsi su un'altra etichetta, numero o scena usando gotoAndPlay o qualsiasi altro metodo che preferisci.
var linkToAdobe: URLRequest = new URLRequest ("http://www.adobe.com"); function onMouseClick (e: MouseEvent): void e.target.gotoAndPlay ("up"); navigateToURL (linkToAdobe); // puoi sostituirlo con qualsiasi altro metodo o funzione Il pulsante a quattro stati è ora pronto per essere utilizzato. Ritornare alla timeline principale e trascinare il simbolo del clip filmato a quattro stati sullo stage sul proprio livello. Uno sfondo sostitutivo viene aggiunto su un altro livello per vedere meglio l'effetto nel contesto con altri elementi sullo stage.
Assicurati che il file sia salvato e premi Control-Enter (Comando-Invio su un Mac) per testare il film.
Grazie mille ad Alex di Sanctified Studios per aver ispirato l'idea originale di usare un clip come pulsante e Dominic Gelineau di Zedia Flash Blog per aver mostrato il modo migliore per creare rollover e implementazioni in ActionScript 3.
