Buttonology una serie di metodi per la creazione di pulsanti

Il modo in cui ti avvicini a un problema è in una certa misura la chiave per realizzare un buon lavoro solido. Questa procedura ti guiderà nei sei metodi più comunemente utilizzati per la creazione dei pulsanti e ti mostrerà in quali situazioni è meglio utilizzarli.

The Button Making Dilemma

Lascia che ti racconti una piccola storia su come è iniziato tutto questo conflitto di interazione tra pulsanti. Un giorno Adamo ed Eva erano nel giardino dell'Eden.

ADAMO: Eve, oggi sei diverso, cosa c'è che non va?
VIGILIA: Ho davvero sete e non abbiamo più acqua fresca.
ADAMO: Rimani qui.

Adam si avvicinò al distributore automatico, vide una scatola di succo di mela, ne memorizzò il numero, inserì una moneta e premuto il pulsante! Non è successo niente. C'era un bug.

Vedi, Adam ha iniziato un evento che avrebbe dovuto innescare un'azione. Fortunatamente, essendo un programmatore ActionScript esperto, ha inserito il suo compilatore USB ActionScript nello slot di programmazione USB ActionScript del distributore e ha iniziato a eseguire il debug del codice.

Aveva una forma sul palco che sembrava un pulsante e nient'altro. Qualcuno si era dimenticato di fare il codice. Ora stava a lui trovare il metodo più appropriato per affrontare questo problema e indirizzarsi verso la scatola dei succhi.

Metodo della vecchia scuola

Quando apri per la prima volta Flash 5, ti viene chiesto di visualizzare alcuni tutorial se lo desideri. Uno di questi tutorial ti insegna come realizzare un'interazione semplice con i pulsanti e per la maggior parte del tuo ActionScript 1 e all'inizio 2 segui quel percorso.

Funziona qualcosa come questo:

Crea un simbolo di pulsante.
All'interno del simbolo impostare gli stati che si desidera che il pulsante abbia.
Vai alla timeline in cui inserisci il pulsante, fai clic per selezionarlo, apri le azioni e scrivi:

 on (premere) trace ("hihi che solletica");

Anche se non è più una pratica standard, ci sono molti designer che so che usano ancora questo metodo. È ancora abbastanza utile se hai una scadenza ristretta, stai lavorando su un banner limitato a Flash Player 5 o versioni precedenti (sì, al giorno d'oggi esistono ancora restrizioni di questo tipo) e devi fare affidamento su un designer per creare e animare il banner. Alla fine tutto ciò di cui hai bisogno è un pulsante clickTag.

Nota: un clickTag è una variabile in cui un host annuncio si inserisce all'interno di un oggetto swf tramite html. Contiene l'url a cui il banner deve navigare. Consulta il tutorial clickTag di Victor Jackson per ulteriori informazioni.

Scarica l'esempio 1 per vedere questo metodo in azione.

Se potessi solo dire al bersaglio ...

Più avanti nella vita di ActionScript, quando è arrivato 2.0, c'era anche la possibilità di associare le funzioni agli eventi all'interno degli oggetti MovieClip. Utilizzando questo metodo è possibile creare il proprio pulsante basato su un Movie Clip e la cosa migliore è che tutto il codice può essere memorizzato in un solo posto. Questo è molto utile per i menu, peccato che sia stato reso disponibile solo in Flash Player 6.

Ecco come appare questo flusso di lavoro.

Crea un simbolo di Movie Clip.
Per gli stati puoi fare tutto quello che vuoi: puoi aggiungere fotogrammi chiave, puoi creare diversi Movie Clip, puoi colorarli trasformandoli, dipende da te dato che avrai il pieno controllo degli eventi.
Dare al MovieClip che hai creato un nome di istanza, ho chiamato il mio "myMovieClip".
Posiziona il Movie Clip sul palco e nello stesso fotogramma chiave (livello diverso) aggiungi le seguenti righe di codice:

 myMovieclip.onRollOver = function () trace ("hihi, that tickles");  myMovieclip.onPress = function () trace ("hihi, that tickles too");  myMovieclip.onRollOut = function () trace ("ahi, ora che fa male !!");

Se hai una limitazione del giocatore fino alla versione 8 o non sei abituato a AS3 e stai costruendo qualcosa con poca interazione, questa è la strada da percorrere.

Scarica l'esempio 2 per vedere questo metodo in azione.

Puoi effettivamente delegare

Per i modelli più complessi, in cui la struttura coinvolge, ad esempio, i filmati animati nidificati, è possibile delegare effettivamente le funzioni e impostare un nuovo ambito per l'azione della funzione. Questo può sembrare confuso quindi basta controllare la differenza di seguito.

 // Codice normale myMovieclip.stop_bt.onPress = function () this._parent.myAnimation.stop (); ; myMovieclip.play_bt.onPress = function () this._parent.myAnimation.play (); ; // Delega importazione mx.utils.Delegate; myMovieclip.onPlayClick = function () this.myAnimation.play (); ; myMovieclip.onStopClick = function () this.myAnimation.stop (); ; myMovieclip.play_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onPlayClick); myMovieclip.stop_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onStopClick);

Come puoi vedere, non c'è bisogno di chiamare il genitore, posso solo ri-mirare all'oggetto. Questo è un esempio abbastanza semplice, ma puoi vedere come questo potrebbe tornare utile in una situazione più complessa.

Scarica l'esempio 3 per vedere questo metodo in azione.

3.0

È tutto molto carino, ma se non si dispone di alcuna restrizione riguardante la versione del giocatore, è necessario ignorare tutti i passaggi precedenti e concentrarsi su ActionScript 3.0. Non sentirti a tuo agio con la lingua non è una scusa, non ti sentirai mai a tuo agio con qualcosa se non lo usi. Dopo alcune ore di comprensione della sintassi e di alcuni giorni con i cheat AS2 in AS3 accanto a te, ti sentirai come a casa. Non ha bisogno di essere completamente basato sulla classe OOP, se sei abituato alla programmazione della timeline puoi continuare a farlo. Flash IDE costruirà una classe MainTimeline non appena esporti il filmato.

Basta scrivere questo nel primo fotogramma del tuo FLA, considera di avere un simbolo di Movie Clip su quel fotogramma chiave (diverso livello però, solo per aiutare l'organizzazione) con un'istanza di myMovieClip.

 funzione myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler) onClickHandler (e) trace ("Ho detto che il solletico !! ORA FERMO!");

Ci sono alcuni svantaggi nell'usare questo metodo però:

Codice disperso, come quando abbiamo troppi simboli sul palco e perdiamo traccia di dove si trova il codice per un oggetto particolare
La riusabilità del codice è un no-no, l'unico modo per riutilizzare qualsiasi cosa è il copia-incolla, e questo è un po 'noioso, non è vero??

Ma devo ammettere che uso questo metodo troppo spesso. Principalmente per comodità, ma me ne pento la maggior parte delle volte. Il mio consiglio è di programmare nella timeline solo con banner pubblicitari e piccoli e semplici mini / micro siti. Anche in questi casi potresti voler importare una classe slider, una classe slideshow, una classe tween, una classe snow making, ecc. Che costruirai appositamente per quel progetto.

Scarica l'esempio 4 per vedere questo metodo in azione.

Programmazione completa orientata agli oggetti

Facciamo lo stesso con un approccio OOP completo. Supponiamo che il designer abbia creato il file Flash e lasciato la grafica sul palco, ecco cosa fare.

Nell'ID Flash, converti l'immagine in un simbolo e assegnagli un nome di istanza. In un nuovo file AS chiamato Main.as scrivi il seguente codice:

 pacchetto import flash.display.Sprite; import flash.display.MovieClip; import flash.events.MouseEvent; public class Main extends Sprite private var myMovieClip: MovieClip; funzione pubblica Main (): void myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler);  funzione privata onClickHandler (e: MouseEvent): void trace ("that's the spot ...");

Probabilmente il metodo che causa incubi ai neofiti del mondo AS3 e OOP, e probabilmente il miglior metodo per progetti Flash da complessi ad alto-moderato.

Guardala come una programmazione temporale con alcuni caratteri in più che ti aiuteranno a creare un codice robusto e riutilizzabile. Saprai sempre dove si trova, facilitando la lettura e la comprensione del tuo lavoro.

Scarica l'esempio 5 per vedere questo metodo in azione.

Nota: se il design del pulsante è abbastanza semplice, avremmo potuto crearlo all'interno della classe senza bisogno di Flash IDE e dei suoi fantasiosi strumenti di progettazione. Il più delle volte non è solo pratico.

Quindi "Dio" ha creato il componente pulsante

Tornando alla storia principale, Adam ha cancellato per errore la forma che qualcuno aveva creato come pulsante e poiché non sapeva come usare lo strumento rettangolo per disegnare un nuovo pulsante, ha preso il percorso del componente. Ecco come l'ha fatto.

Ha aggiunto il componente Button alla libreria.
Ha salvato il suo codice come MyButton.as nella stessa directory del suo file FLA.
Ha impostato la classe Document nel file FLA su MyButton.

 package import fl.controls.Button; import flash.display.Sprite; import flash.events.MouseEvent; public class MyButton estende Sprite private var b1: Button; funzione pubblica MyButton () setupButtons ();  private function setupButtons (): void b1 = new Button (); b1.width = 160; b1.move (10,10); b1.label = "Succo di mela"; b1.addEventListener (MouseEvent.CLICK, buttonClick); addChild (b1);  pulsante funzione privataClick (e: MouseEvent) pulsante var: Button = e.target as Button; trace (button.label + "tickles");

Quando usarlo? Se stai progettando di creare un'interfaccia utente per una ricca applicazione Internet e invece di usare Flex vuoi provare Flash, allora questo è il modo per farlo. (Il mio consiglio è di andare con Flash Builder) o se hai solo bisogno di un'interfaccia utente semplice per qualsiasi modulo tu stia costruendo, cosa che non richiede molto lavoro di progettazione. Ovviamente è possibile personalizzare un componente pulsante, ma ciò richiede troppo tempo rispetto alla creazione di un pulsante da zero.

Scarica l'esempio 6 per vedere questo metodo in azione.

Conclusione

In definitiva, la decisione è tua. Ho numerato i metodi che ho imparato a conoscere e utilizzare durante la mia carriera di sviluppo di Flash e le opinioni qui menzionate sono quelle che sono venuto a realizzare mentre lavoravo su diversi progetti.

Se ti senti a tuo agio con il tuo metodo di creazione dei pulsanti e senti che ti si addice, allora va bene, finché funziona, ma alla fine capirai perché l'ActionScript strutturato OOP è una best practice. Non perché è più geek, ma perché è in realtà più facile, da scrivere, da leggere e quindi da capire.

Grazie per la lettura, spero che ti sia piaciuto e che abbia un ottimo 2010!

Nota: Adam è riuscito a procurarsi la scatola del succo di mela, che ha dato ad Eva. Il resto del racconto, probabilmente lo sai ...

Codice