Buttonology O descriere a metodelor de realizare a butonului

Modul în care abordați o problemă este într-o oarecare măsură cheia pentru realizarea unei bune lucrări solide. Acest ghid vă va ghida în cele șase metode cele mai utilizate în mod curent pentru crearea butoanelor și vă va arăta în ce situații acestea sunt cel mai bine pusă la dispoziție.


Butonul de a face dilema

Permiteți-mi să vă spun o mică poveste despre cum a început tot acest conflict de interacțiune cu butoanele. Într-o zi, Adam și Eva au ieșit în grădina Edenului.

ADAM: Hei Eve, arăți astăzi diferit, ce sa întâmplat?
AJUN: Sunt foarte sete și nu mai avem apă proaspătă.
ADAM: Stai chiar aici.

Adam sa apropiat de mașina de vânzare, a văzut o cutie de suc de mere, și-a memorat numărul, a introdus o monedă și apăsați butonul! Nu s-a intamplat nimic. A fost un bug.

Vezi tu, Adam a început un eveniment care ar fi trebuit să declanșeze o acțiune. Din fericire, fiind un programator ActionScript bine familiar, el și-a conectat compilatorul USB ActionScript în slotul de programare USB ActionScript al mașinii automate și a început să depaneze codul.

Avea o formă pe scena, care părea un buton, și nimic altceva. Cineva a uitat să facă codul. Acum trebuia să găsească cea mai potrivită metodă pentru a aborda această problemă și a codifica drumul spre cutia de sucuri.


Vechea metodă școlară

Când deschideți pentru prima dată Flash 5 vi se solicită să vedeți câteva tutoriale dacă doriți. Unul dintre aceste tutoriale vă învață cum să faceți o simplă interacțiune cu butoanele și pentru cea mai mare parte a ActionScript 1 și începutul 2 urmați acea cale.

Funcționează astfel:

  1. Creați un simbol al butonului.
  2. În interiorul simbolului setați stările pe care doriți să le aibă butonul.
  3. Accesați cronologia în care ați pus butonul, faceți clic pentru ao selecta, deschideți acțiunile și scrieți:
 pe (apăsați) trace ("hihi care ghemuiește"); 

Chiar dacă nu mai există o practică standard, există o mulțime de designeri care știu cine folosesc încă această metodă. Este încă destul de util dacă sunteți într-un termen limită, lucrați la un banner limitat la Flash Player 5 sau mai mic (da, există încă restricții de acest gen din zilele noastre) și trebuie să vă bazați pe un designer pentru a construi și anima banner-ul. În final aveți nevoie doar de un buton clickTag.

Notă: un clicTag este o variabilă pe care o gazdă a anunțului o injectează într-un obiect swf prin html. Acesta conține adresa URL la care bannerul ar trebui să navigheze. Consultați clickTag tutorialul lui Victor Jackson pentru mai multe informații.

Descărcați exemplul 1 pentru a vedea această metodă în acțiune.


Dacă aș putea spune doar țintă ...

Mai târziu, în viața dvs. ActionScript, atunci când a apărut 2.0, a existat și posibilitatea de a asocia funcții cu evenimente din interiorul obiectelor MovieClip. Folosind această metodă ați putea construi propriul dvs. buton bazat pe un movieclip și cel mai bine a fost că tot codul dvs. ar putea fi stocat într-un singur loc. Acest lucru este foarte util pentru meniuri, prea rău că a fost disponibil doar în Flash Player 6.

Iată cum arată acest flux de lucru.

  1. Creați un simbol movieclip.
  2. Pentru state, poți să faci tot ce vrei: ai putea adăuga cadre cheie, ai putea crea diferite movieclips, ai putea să le transformi în culoare, depinde de tine de când vei avea control complet asupra evenimentelor.
  3. Dă-mi la movieclip-ul pe care l-ai creat un nume de instanță, i-am denumit a mea "myMovieClip".
  4. Plasați movieclip pe scena și în același cadru cheie (strat diferit) adăugați următoarele linii de cod:
 myMovieclip.onRollOver = funcția () trace ("hihi, că gâlceie");  myMovieclip.onPress = funcția () trace ("hihi, care gâlcește prea");  myMovieclip.onRollOut = function () trace ("ouch, acum ce doare!"); 

Dacă aveți o limitare a jucătorului până la versiunea 8 sau nu sunteți obișnuit cu AS3 și construiți ceva cu puțină interacțiune, acesta este calea de urmat.

Exemplu de descărcare 2 pentru a vedea această metodă în acțiune.


De fapt, puteți delega

Pentru modelele mai complexe, în cazul în care structura implică movieclips imbricate, de exemplu, puteți delega funcții și stabiliți un nou domeniu pentru funcția de a acționa. Acest lucru poate părea confuz, așa că verificați diferența de mai jos.

 // Codul regulat myMovieclip.stop_bt.onPress = function () this._parent.myAnimation.stop (); ; myMovieclip.play_bt.onPress = funcția () this._parent.myAnimation.play (); ; // Delegați importul mx.utils.Delegați; myMovieclip.onPlayClick = funcția () this.myAnimation.play (); ; myMovieclip.onStopClick = funcția () this.myAnimation.stop (); ; myMovieclip.play_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onPlayClick); myMovieclip.stop_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onStopClick);

După cum vedeți că nu este nevoie să-i apelați părintele, pot să-l reorientez spre obiect. Acesta este un exemplu destul de simplu, dar puteți vedea cum ar putea fi util acest lucru într-o situație mai complexă.

Descărcați exemplul 3 pentru a vedea această metodă în acțiune.


3.0

Este foarte frumos, dar dacă nu aveți nicio restricție în ceea ce privește versiunea playerului, trebuie să ignorați toți pașii de mai sus și să vă concentrați asupra ActionScript 3.0. Nu vă simțiți confortabil cu limbajul nu este nici o scuză, niciodată nu vă veți simți confortabil cu ceva decât dacă îl folosiți. După câteva ore de înțelegere a sintaxei și câteva zile, cu foaia de înșelătorie AS2 la AS3 lângă tine, te vei simți ca acasă. Nu trebuie să fie complet bazată pe clasa OOP, dacă sunteți obișnuit cu programarea temporală, puteți continua să faceți asta. Flash IDE va ​​construi o clasă MainTimeline imediat ce exportați filmul.

Doar scrieți acest lucru în primul cadru al FLA, considerați că aveți un simbol movieclip pe acel cadru cheie (alt strat, totuși, doar pentru a ajuta organizația) cu o instanță a lui myMovieClip.

 myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler) funcția onClickHandler (e) trace ("Am spus că gâturile! ACUM STOP!"); 

Există câteva neajunsuri în utilizarea acestei metode:

  • Codul dispersat, ca în cazul în care avem prea multe simboluri pe scenă și pierdem evidența locului în care codul este așezat pentru un anumit obiect
  • Codul de reutilizare este un nu-nu, Singurul mod în care reutilizați orice este prin copiere-lipire, și că este un pic lame nu-i așa?

Dar trebuie să recunosc că folosesc prea des această metodă. În mare parte pentru comoditate, dar regret că de cele mai multe ori. Sfatul meu este să programați în cronologie numai cu anunțuri bannere și mici mini / microsite-uri simple. Chiar și în acele cazuri, poate doriți să importați o clasă de slider, o clasă de slideshow, o clasă tween, o clasă de zăpadă, etc. pe care o veți construi special pentru acel proiect.

Descărcați exemplul 4 pentru a vedea această metodă în acțiune.


Programare orientată pe obiecte structurate

Să facem același lucru și cu o abordare completă a OOP. Spuneți că designerul a construit fișierul Flash și a lăsat grafica pe scenă, iată ce trebuie să faceți.

În IDE-ul Flash, convertiți graficul la un simbol și dați-i un nume de instanță. Într-un nou fișier AS numit Main.as scrieți următorul cod:

 pachet import flash.display.Sprite; import flash.display.MovieClip; importul flash.events.MouseEvent; clasa publică principală se extinde Sprite private var myMovieClip: MovieClip; funcția publică principală (): void myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler);  funcția privată onClickHandler (e: MouseEvent): void trace ("acesta este locul ..."); 

Probabil metoda care provoacă coșmaruri pentru noii veniți ai lumii AS3 și OOP și probabil cea mai bună metodă pentru proiectele Flash complexe ușoare și extrem de complexe.

Uitați-vă la aceasta ca programare cronologică cu câteva caractere suplimentare care vă vor ajuta să creați un cod robust, reutilizabil. Veți ști mereu unde este, făcând mai ușor citirea și înțelegerea muncii dvs..

Descărcați exemplul 5 pentru a vedea această metodă în acțiune.

Notă: Dacă designul butonului este suficient de simplu, am fi putut să îl construim în interiorul clasei fără a fi nevoie de Flash IDE și instrumentele sale de design fanteziste. De cele mai multe ori nu este practic.


Atunci "Dumnezeu" a creat componenta Buton

Înapoi la povestea principală, Adam șterse accidental forma pe care cineva o făcuse ca buton și din moment ce nu știa cum să folosească instrumentul dreptunghi pentru a desena un nou buton pe care la luat pe ruta componentă. Iată cum a făcut-o.

  1. El a adăugat componenta Buton la bibliotecă.
  2. Și-a salvat codul MyButton.as în același director ca fișierul FLA.
  3. A setat clasa Document în fișierul FLA la MyButton.
 pachet import fl.controls.Button; import flash.display.Sprite; importul flash.events.MouseEvent; clasa publica MyButton extinde Sprite private var b1: Button; funcția publică MyButton () setupButtons ();  funcția privată setupButtons (): void b1 = Buton nou (); b1.width = 160; b1.move (10,10); b1.label = "Suc de mere"; b1.addEventListener (MouseEvent.CLICK, butonClick); addChild (b1);  butonul funcției privateClick (e: MouseEvent) butonul var: butonul = e.target ca buton; urmări (button.label + "tickles"); 

Când să folosiți acest lucru? Dacă intenționați să construiți o interfață de utilizator pentru o aplicație bogată de internet și în loc să utilizați Flex doriți să încercați Flash, atunci acesta este modul în care faceți acest lucru. (Sfatul meu ar fi să mergeți în schimb cu Flash Builder) sau dacă aveți nevoie doar de un UI simplu, indiferent de forma pe care o construiți, care nu necesită multă lucrare de proiectare. Desigur, puteți personaliza o componentă de buton, dar acest lucru durează prea mult în comparație cu construirea unui buton de la zero.

Descărcați exemplul 6 pentru a vedea această metodă în acțiune.


Concluzie

În cele din urmă decizia este a ta. Am numerotat metodele pe care le-am cunoscut și le-am folosit în întreaga carieră în curs de dezvoltare Flash și opiniile menționate aici sunt cele pe care am realizat-o în timp ce lucrau la diferite proiecte.

Dacă vă simțiți confortabil cu metoda dvs. de realizare a butoanelor și vă simțiți bine, atunci este bine, atâta timp cât funcționează, dar în cele din urmă veți înțelege de ce acțiunea ActionScript structurată OOP este o bună practică. Nu pentru că e geekier, ci pentru că este de fapt mai ușor, să scrie, să citești și, prin urmare, să înțelegi.

Vă mulțumim pentru lectură, sper că ți-a plăcut și ai un 2010 minunat!

Notă: Adam a reușit să apuce caseta de suc de mere, pe care ia dat-o Evei. Restul povestii, probabil stii ...

Cod