Buttonology: en gjennomgang av Button Making Methods

Buttonology: en gjennomgang av Button gjøre metoder
Del
Del
Del
Del
Dette Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Hvordan du nærmer deg et problem er til en viss grad nøkkelen til å nå god solid arbeid. Dette walkthrough vil veilede deg i de seks mest brukte metoder for knapp skapelse og vise deg i hvilke situasjoner de er best tatt i bruk.




The Button Making Dilemma Anmeldelser

La meg fortelle deg en liten historie om hvordan alt dette knappen samhandling konflikten startet. En dag Adam og Eva var ute i Edens hage

ADAM. Hey Eve, du ser annerledes i dag, hva er galt
EVE:? Jeg er veldig tørst, og vi har ikke frisk . vann lenger
ADAM. Hold til høyre her

Adam gikk til en i nærheten av salgsautomat, så et eple juice boksen, memorert nummeret, satt inn en mynt og trykket på knappen
! Ingenting skjedde. Det oppstod en feil.

Du skjønner, begynte Adam en hendelse som skal ha utløst en handling. Heldigvis, å være en godt bevandret Action programmerer, plugget han sin USB Action kompilatoren inn i automaten USB Actionscript programmering sporet 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 å gjøre koden. Det var nå opp til ham å finne den mest hensiktsmessige måten å nærme seg dette problemet og kode vei til juice boksen.



Old School Metode

Når du først åpner Flash fem deg ? re bedt om å se noen tutorials hvis du ønsker det. En av disse veiledningene lærer deg hvordan du kan lage enkel knapp samhandling og for det meste av Action 1 og begynner to du følger den veien

Det fungerer omtrent som dette:.


    Lag en knapp symbol.

    Inside symbolet angir tilstander du vil at knappen skal ha.

    Gå til tidslinjen hvor du setter knappen, klikk for å velge det, åpne opp handlingene og skrive:
    på (trykk) {trace ("hihi som kiler");}

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

    . Merk: En clickTag er en variabel som en annonse vert injiserer inne i en SWF-objekt gjennom html. Den inneholder url som banneret skal navigere. Sjekk ut Victor Jacksons clickTag tut for mer informasjon.

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



    Hvis jeg bare kunne fortelle Target ...

    Senere i Action liv, når 2.0 kom, var det også evnen til å knytte funksjoner til hendelser inne MovieClip Objects. Ved å bruke denne metoden kan du bygge din egen knapp basert på en MovieClip og det beste var at all koden kan lagres på bare ett sted. Dette er svært nyttig for menyer, synd det bare ble gjort tilgjengelig i Flash Player 6.

    Slik at arbeidsflyten ser ut.


      Lag en MovieClip symbol.
    1. For de statene du kan gjøre hva du vil, du kan legge til nøkkelbilder, kan du opprette forskjellige movieclips, kan du farge forvandle dem, det er opp til deg siden du kommer til å ha full kontroll over hendelsene

      . Gi MovieClip du opprettet en forekomst navn, jeg heter mine "myMovieClip"

      Sett MovieClip på scenen og i samme keyframe (annet lag) legge til følgende linjer med kode.
      myMovieclip .onRollOver = function () {trace ("hihi, kiler at");} myMovieclip.onPress = function () {trace ("hihi, som kiler too");} myMovieclip.onRollOut = function () {trace ("ouch Nå som gjør vondt !! ");}

      Hvis du har en spiller begrensning opp til versjon 8 eller du ikke er vant til AS3 og Selge du bygger noe med lite interaksjon, er dette bra jobbet.

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



      Du kan faktisk Delegat

      For mer komplekse modeller, der strukturen innebærer nøstede movieclips for eksempel, du faktisk kan delegere funksjoner og setter en ny mulighet for at funksjonen skal fungere. Dette kan høres forvirrende så bare sjekk forskjellen nedenfor
      //Regelmessig codemyMovieclip.stop_bt.onPress = function () {this._parent.myAnimation.stop ();};. MyMovieclip.play_bt.onPress = function () {dette ._parent.myAnimation.play ();}; //Delegateimport 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);

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

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



      3.0

      Det er alt veldig pen, men hvis du ikke har noen restriksjoner i det hele tatt om spilleren versjonen, bør du ignorere alle trinnene ovenfor og fokus på Actionscript 3.0. Ikke føler seg komfortabel med språket er ingen unnskyldning, vil du aldri føle deg komfortabel med noe med mindre du bruker den. Etter noen timer med å forstå syntaks og noen dager med AS2 til AS3 jukselapp ved siden av deg, vil du føle deg hjemme. Det trenger ikke å være helt OOP klassebaserte, hvis du er vant til tidslinje programmering kan du fortsette med det. Flash IDE vil bygge en MainTimeline klasse så snart du eksporterer filmen.

      Bare skriv dette i det første bildet av din FLA, anser du har en MovieClip symbol på at keyframe (annet lag da, bare for å hjelpe . organisasjon) med en forekomst av myMovieClip
      myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler) -funksjonen onClickHandler (e) {trace ("Jeg sa at kiler !! NÅ STOPP!");}

      Det er noen ulemper med å bruke denne metoden selv:

      Spredt kode, som når vi har for mange symboler på scenen og mister oversikten over hvor koden er satt for et bestemt objekt

      Kode gjenbruk er en nei-nei, den eneste måten du gjenbruke noe er av copy-paste, og det er litt kjedelig er ikke det?

      Men jeg må innrømme, jeg bruker denne metoden altfor ofte. Hovedsakelig for bekvemmelighet, men jeg beklager det meste av tiden. Mitt råd er å programmere i tidslinjen bare med bannerannonser og små enkle mini /mikrosider. Selv i de tilfeller det kan være lurt å importere en slider klasse, en lysbildeserie klasse, en tween klasse, en snøproduksjon klasse, etc. som du vil bygge spesielt for dette prosjektet.

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



      Full Strukturert Objektorientert programmering

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

      I Flash IDE konvertere grafikken til et symbol og gi den en forekomst navn. I et nytt AS fil kalt Main.as
      skrive inn følgende kode:
      pakke {import flash.display.Sprite; import flash.display.MovieClip; import flash.events.MouseEvent; public class Hoved strekker Sprite {private Var myMovieClip: MovieClip; offentlig funksjon main (): void {myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler); } Private funksjon onClickHandler (e: MouseEvent): void {trace ("det er spot ..."); }}}

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

      Se på det som tidslinje programmering med en noen ekstra tegn som vil hjelpe deg å lage en robust, gjenbrukbar kode. Du vil alltid vet hvor den er, slik at å lese og forstå arbeidet lettere

      Last ned eksempel 5 for å se denne metoden i aksjon

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



      Så "Gud" Laget Button Component

      Tilbake til hovedhistorien, Adam slettet formen tilfeldigvis at noen hadde gjort som knappen og siden han ikke vet hvordan du bruker rektangel verktøyet til å tegne en ny knapp han tok komponenten ruten. Her er hvordan han gjorde det.


        Han la Button komponent til biblioteket.
      1. Han reddet hans kode som MyButton.as
        i samme katalog som hans . FLA fil

        Han satt dokumentklassen i FLA filen til MyButton
        pakke {import fl.controls.Button.; import flash.display.Sprite; import flash.events.MouseEvent; public class MyButton strekker Sprite {private Var b1: Button; offentlig funksjon MyButton () {setupButtons (); } Private funksjon setupButtons (): void {b1 = new Button (); b1.width = 160; b1.move (10,10); b1.label = "Apple Juice"; b1.addEventListener (MouseEvent.CLICK, buttonClick); addChild (b1); } Private funksjon buttonClick (e: MouseEvent) {var knapp: Knapp = e.target som knapp; trace (button.label + "Tickles"); }}}

        Når skal bruke dette? Hvis du planlegger å bygge et brukergrensesnitt for en rik Internett-programmet og i stedet for å bruke Flex du ønsker å prøve ut Flash, så det er måten å gjøre det. (Mitt råd vil være å gå med Flash Builder i stedet), eller hvis du bare trenger en enkel UI for uansett hvilken form du er bygningen som ikke krever mye designarbeid. Selvfølgelig kan du tilpasse en knapp komponent, men det tar for lang tid i forhold til å bygge en knapp fra scratch.

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



        Konklusjon

        Til slutt avgjørelsen er ditt. Jeg har nummerert metodene jeg har lært å kjenne og bruke hele mitt Flash utvikle karriere og meningene her er nevnt er de jeg kom til å innse mens du arbeider med ulike prosjekter.

        Hvis du føler deg komfortabel med knapp gjør metoden og føler det passer deg, så det er greit, så lenge det fungerer, men til slutt vil du komme til å forstå hvorfor OOP strukturert Action er en beste praksis. Ikke fordi det er geekier, men fordi det er faktisk enklere å skrive, lese og derfor å forstå.

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

        Merk : Adam klarte å få tak i eplejuice boksen, som han ga til Eve. Resten av historien, har du sannsynligvis vet .. Anmeldelser