Buttonology En gjennomgang av Button Making Methods

Hvordan du nærmer deg et problem er til en viss grad nøkkelen til å oppnå god solid arbeid. Denne gjennomgangen vil lede deg i de seks mest brukte metodene for knappopprettelse og vise deg hvilke situasjoner de best bruker.

The Button Making Dilemma

La meg fortelle deg en liten historie om hvordan alle denne kretsens interaksjonskonflikt startet. En dag var Adam og Eva ute i Edens hage.

ADAM: Hei Eva, du ser annerledes ut i dag, hva er galt?
EVE: Jeg er veldig tørst, og vi har ikke ferskvann lenger.
ADAM: Hold deg her.

Adam gikk til en nær ved salgsautomat, så en eplejuiceboks, memoriserte nummeret sitt, satt inn en mynt og trykket på knappen! Ingenting skjedde. Det var en feil.

Du ser, Adam startet en begivenhet som burde ha utløst en handling. Heldigvis, da han var en velkjent ActionScript-programmerer, plugget han sin USB ActionScript-kompilator inn i salgsautomatens USB ActionScript programmeringsspor og begynte å feilsøke koden.

Han hadde en form som lå på scenen som så ut som en knapp, og ingenting annet. Noen hadde glemt å lage koden. Det var nå opp til ham å finne den mest hensiktsmessige metoden for å nærme seg dette problemet og kode seg til juiceboksen.

Old School Method

Når du først åpner Flash 5, blir du bedt om å se noen opplæringsprogrammer hvis du ønsker det. En av disse opplæringsprogrammene lærer deg hvordan du gjør enkel knappekaksjon og for det meste av ActionScript 1 og begynnelsen 2 følger du den banen.

Det virker noe som dette:

Opprett et knappesymbol.
Innsiden av symbolet angir tilstandene du vil at knappen skal ha.
Gå til tidslinjen hvor du legger knappen, klikk for å velge den, åpne handlingene og skriv:

 på (trykk) trace ("hihi som tickles");

Selv om det ikke er standard praksis lenger, er det mange designere som jeg vet som fortsatt bruker denne metoden. Det er fortsatt ganske nyttig hvis du er i en stram tidsfrist, du jobber på et banner som er begrenset til Flash Player 5 eller lavere (ja det er fortsatt restriksjoner av den typen i dag), og du må stole på en designer for å bygge og animere banneret. Til slutt er alt du trenger, en clickTag-knapp.

Merk: En clickTag er en variabel som en annonseverdi injiserer i et swf-objekt gjennom html. Den inneholder nettadressen som banneret skal navigere. Sjekk ut Victor Jacksons clickTag tut for mer informasjon.

Last ned eksempel 1 for å se denne metoden i bruk.

Hvis jeg bare kunne si målet ...

Senere i ActionScript-livet, da 2.0 kom sammen, var det også muligheten til å knytte funksjoner til hendelser inne i MovieClip Objects. Ved å bruke denne metoden kan du bygge din egen knapp basert på en filmklipp og det beste var at all din kode kunne lagres på bare ett sted. Dette er veldig nyttig for menyer, synd det ble bare gjort tilgjengelig i Flash Player 6.

Slik ser denne arbeidsflyten ut.

Lag et filmklippssymbol.
For statene kan du gjøre hva du vil: du kan legge til keyframes, du kan lage forskjellige filmklipp, du kan farge forvandle dem, det er opp til deg siden du skal ha full kontroll over hendelsene.
Gi movieclip du opprettet et forekomstnavn, jeg heter min "myMovieClip".
Legg filmklippet på scenen og i samme keyframe (annet lag) legg til følgende kodelinjer:

 myMovieclip.onRollOver = function () trace ("hihi, kittles");  myMovieclip.onPress = function () trace ("hihi, det kildes også");  myMovieclip.onRollOut = function () trace ("ouch, nå det gjør vondt!");

Hvis du har en spillerbegrensning opp til versjon 8, eller du er ikke vant til AS3 og du bygger noe med lite interaksjon, dette er veien å gå.

Last ned eksempel 2 for å se denne metoden i bruk.

Du kan faktisk delegere

For mer komplekse modeller, hvor strukturen innebærer nestede filmklipp, kan du faktisk delegere funksjoner og sette et nytt omfang for funksjonen å handle. Dette kan høres forvirrende, så bare sjekk forskjellen nedenfor.

 // Vanlig kode myMovieclip.stop_bt.onPress = funksjon () this._parent.myAnimation.stop (); ; myMovieclip.play_bt.onPress = funksjon () this._parent.myAnimation.play (); ; // Delegate import mx.utils.Delegate; myMovieclip.onPlayClick = funksjon () this.myAnimation.play (); ; myMovieclip.onStopClick = funksjon () this.myAnimation.stop (); ; myMovieclip.play_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onPlayClick); myMovieclip.stop_bt.onPress = Delegate.create (myMovieclip, myMovieclip.onStopClick);

Som du kan se er det ikke nødvendig å ringe forelder, jeg kan bare re-scope til objektet. Dette er et ganske enkelt eksempel, men du kan se hvordan dette kan komme til nytte i en mer komplisert situasjon.

Last ned eksempel 3 for å se denne metoden i bruk.

3.0

Det er alt veldig pent, men hvis du ikke har noen begrensninger om spillerversjonen, bør du ignorere alle trinnene ovenfor og fokusere på ActionScript 3.0. Ikke føler deg komfortabel med språket er ingen unnskyldning, du vil aldri føle deg komfortabel med noe med mindre du bruker den. Etter noen timer å forstå syntaxen og noen dager med AS2 til AS3 juksebladet ved siden av deg, vil du føle deg hjemme. Det trenger ikke å være helt OOP klassebasert, hvis du er vant til tidslinje programmering kan du fortsette å gjøre det. Flash IDE vil bygge en MainTimeline-klasse så snart du eksporterer filmen.

Bare skriv dette i FLAs første ramme, vurder at du har et filmklippssymbol på den keyframe (forskjellig lag skjønt, bare for å hjelpe organisasjonen) med en forekomst av myMovieClip.

 myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler) funksjon onClickHandler (e) trace ("Jeg sa at kittles! NÅ STOPP!");

Det er noen ulemper med å bruke denne metoden selv om:

Spredt kode, som når vi har for mange symboler på scenen og mister oversikt over hvor koden sitter for en bestemt gjenstand
Kodeegenbrukbarhet er en no-no, Den eneste måten du bruker på nytt, er ved kopi-lim, og det er litt lammet, ikke det?

Men jeg må innrømme at jeg bruker denne metoden altfor ofte. For det meste av bekvemmelighet, men jeg angrer det mesteparten av tiden. Mitt råd er å programmere i tidslinjen bare med bannerannonser og små enkle mini / mikrosider. Selv i de tilfellene kan det være lurt å importere en gliderklasse, en lysbildeserie, en mellomklasse, en snølagerklasse etc. som du vil bygge spesielt for det prosjektet.

Last ned eksempel 4 for å se denne metoden i bruk.

Full strukturert objektorientert programmering

La oss gjøre det samme med en full OOP-tilnærming. Si at designeren har bygget Flash-filen og forlatt grafikken på scenen, her er hva du skal gjøre.

I Flash IDE konverterer grafikken til et symbol og gir det et forekomstnavn. I en ny AS-fil kalt Main.as skriv følgende kode:

 pakke import flash.display.Sprite; importer flash.display.MovieClip; importer flash.events.MouseEvent; offentlig klasse Main utvider Sprite private var myMovieClip: MovieClip; offentlig funksjon Main (): void myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler);  privat funksjon onClickHandler (e: MouseEvent): void trace ("det er stedet ...");

Sannsynligvis metoden som forårsaker mareritt til nybegynnere i AS3 og OOP verdenen, og sannsynligvis den beste metoden for mild til svært komplekse Flash-prosjekter.

Se på det som tidslinjeprogrammering med noen ekstra tegn som vil hjelpe deg med å opprette en robust, gjenbrukbar kode. Du vil alltid vite hvor det er, å lese og forstå arbeidet ditt lettere.

Last ned eksempel 5 for å se denne metoden i aksjon.

Merk: Hvis knappens design er enkel nok, kunne vi ha bygget den inne i klassen uten behov for Flash IDE og dets fancy designverktøy. Mesteparten av tiden er det bare ikke praktisk.

Deretter skapte "Gud" Button-komponenten

Tilbake til hovedhistorien slettet Adam tilfeldigvis formen som noen hadde laget som knappen, og siden han ikke visste hvordan han brukte rektangulærverktøyet til å tegne en ny knapp tok han komponentruten. Slik gjorde han det.

Han la til Knapp-komponenten i biblioteket.
Han lagret sin kode som MyButton.as i samme katalog som sin FLA-fil.
Han satte Dokument-klassen i FLA-filen til MyButton.

 pakke import fl.controls.Button; importer flash.display.Sprite; importer flash.events.MouseEvent; offentlig klasse MyButton utvider Sprite private var b1: Button; offentlig funksjon MyButton () setupButtons ();  privatfunksjon setupButtons (): void b1 = new Button (); b1.width = 160; b1.move (10,10); b1.label = "Apple Juice"; b1.addEventListener (MouseEvent.CLICK, buttonClick); addChild (b1);  privatfunksjonsknappKlikk (e: MouseEvent) var-knapp: Knapp = e.target som Button; spor (button.label + "tickles");

Når skal du bruke dette? Hvis du planlegger å bygge et brukergrensesnitt for et rikt internettprogram, og i stedet for å bruke Flex, vil du prøve Flash, så er det veien å gjøre det. (Mitt råd vil være å gå med Flash Builder i stedet), eller hvis du bare trenger et enkelt brukergrensesnitt for hvilken form du bygger, som ikke krever mye designarbeid. Selvfølgelig kan du tilpasse en knappkomponent, men det tar for lang tid i forhold til å bygge en knapp fra bunnen av.

Last ned eksempel 6 for å se denne metoden i bruk.

Konklusjon

Til slutt er avgjørelsen din. Jeg har nummerert metodene jeg har kommet til å kjenne og bruke gjennom hele min utviklingskarriere i Flash, og de her nevnte meningene er de jeg kom til å innse mens jeg jobber med ulike prosjekter.

Hvis du føler deg komfortabel med knappfremstillingsmetoden din og føler at den passer deg, så er det bra, så lenge det virker, men til slutt kommer du til å forstå hvorfor OOP-strukturert ActionScript er en best practice. Ikke fordi det er geekier, men fordi det faktisk er lettere å skrive, lese og derfor forstå.

Takk for at du leser, jeg håper du likte det, og har en flott 2010!

Merk: Adam klarte å få tak i eplejuppen, som han ga til Eva. Resten av fortellingen, vet du sannsynligvis ...

Kode