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 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. 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:. 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. 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. 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. 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 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. 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 Det er noen ulemper med å bruke denne metoden selv: 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. 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 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. 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. 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. 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
! Ingenting skjedde. Det oppstod en feil.
Old School Metode
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");}
Hvis jeg bare kunne fortelle Target ...
Lag en MovieClip symbol.
. 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 !! ");}
Du kan faktisk Delegat
//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);
3.0
myMovieClip.addEventListener (MouseEvent.CLICK, onClickHandler) -funksjonen onClickHandler (e) {trace ("Jeg sa at kiler !! NÅ STOPP!");}
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?
Full Strukturert Objektorientert programmering
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 ..."); }}}
Så "Gud" Laget Button Component
Han la Button komponent til biblioteket.
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"); }}}
Konklusjon