Build en Dynamic Flash Game Meny: The Accordion
en
Del
en
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Når en bruker først åpner opp en Flash spill, deres første inntrykk er basert på menyen som de ser. Dessverre er mange spill 'menyene er kjedelig, vanlig og statisk. Dette er forferdelige nyheter! Mange spillere vil bare lukke spillet før selv å spille det, og gå videre til en annen. Ikke la dette skje med deg
Endelig resultat Forhåndsvisning
Ta en titt på menyen vi vil være bygning:
Selvfølgelig, i en full spill, de ulike menyskjermer vil inneholde ulike knapper, tekst og undermenyelementer
Innledning: Hva er en Dynamic Meny
Før vi lære hva en dynamisk meny er vi må først lære hva en statisk meny er.
En statisk meny kan beskrives ved definisjoner av de to ordene det består av: "statisk", som betyr mangler i endring, og "meny", som betyr en liste over tilgjengelige alternativer eller valg. Derfor en statisk meny har et grensesnitt alternativer eller valg som mangler i endring.
Motsatt ordet "dynamisk" betyr å kontinuerlig forårsake endring innenfor et system eller en prosess. Så i de enkleste form en dynamisk meny oppdateres kontinuerlig grensesnittet av gitte alternativer eller valg
Trinn 1:. Klar
Det første som vi kommer til å trenge for å lage er en ny Flash-fil (Actionscript 3.0), sette bredden til 650px og høyde på 350 piksler, og sette rammer per sekund til 60. I stedet for å endre bakgrunnsfargen la det som hvitt; senere i opplæringen vil vi skape en bakgrunn
Nå som vi har grunnleggende flash-fil satt opp vi kan lagre det.; du kan kalle deg hva du vil. Jeg heter min MenuAccordion.fla
I neste avsnitt vil vi skape de åtte movieclips kreves for menyen.; her er en liste over alle fargene og deres heksadesimale koder som skal brukes gjennom hele opplæringen:
White - #FFFFFF
Gold - # E8A317
Lys Gold - # FBB917
Blue - # 1569C7
Lyseblå - # 1389FF
Green - # 347235
Lysegrønn - # 3E8F1B
< li> Red - # 990000
Lys Red - # C10202
Matte Grey - # 222222
Trinn 2: Opprette movieclips
< p> Slik starter vi trenger for å lage en hovedbakgrunnsfarge, fire "bar" movieclips (disse er de som vil bli klikket på) og fire bakgrunns movieclips (disse vil gli ut etter en bar er klikket).
Først høyreklikker du på scenen og velger Grid, velg Vis rutenett - som standard vil det skape en 10px av 10px kvadratisk rutenett tvers over scenen. For å gjøre livet ditt enklere høyreklikk igjen og velg Festing > Fest til rutenett. Nå er vi klare til å begynne å tegne!
Velg rektangelverktøyet og tegne en matt grå bakgrunn over hele scenen. Lagnavnet Bakgrunn og låse den. Deretter oppretter du en ny layer og kall den på Meny. En tidslinje og scenen skal se noe som ligner på dette nå:
Neste vi vil opprette en bar MovieClip; å gjøre ting lettere vi vil bare kopiere den til å danne fire movieclips og endre farge på hver.
Velg rektangel verktøyet igjen, og tegne en 30px ved 350 piksler rektangel uten slag. Høyreklikk på fyll og velg Convert to Symbol .... Name it Goldbar, sørg for at den typen er MovieClip og registreringspunktet er i øverste venstre hjørne. Dobbeltklikk på MovieClip på scenen for å redigere den
Høyreklikk på første keyframe i tidslinjen og gå til handling, skriver i en enkel stopp (.); kommandoen for å hindre MovieClip fra sykling gjennom rammer. Deretter høyreklikker du på andre rammen og velg Sett inn Keyframe. Det er opp til deg hva du ønsker å skrive i hver fill; bare ting å huske er at hvis din skriver på en 90 graders vinkel teksten kan vises usynlig hvis du har teksten satt til dynamisk. Personlig har jeg bare brøt i stykker teksten før det ble en fyll, og jeg tegnet en pil som pekte motsatt retning på hver ramme:
Nå som vi har en bar avsluttet vi kan høyreklikke på den i biblioteket og velg Duplicate Symbol .... Lag tre eksemplarer av det og navngi dem blueBar, greenBar og Redbar hhv. Så bare redigere sine fyllfargene og endre teksten. Voila! Vi har fire bark movieclips.
Nå kan vi begynne på bakgrunns movieclips som vi vil skape og duplisere på samme måte. Velg rektangel verktøyet igjen og tegne et rektangel av 560x350px. Konvertere den til et symbol, name it goldBackground, og sørg for at den typen er en MovieClip og registreringen er i øverste venstre hjørne. Så bare kopiere det tre ganger og navngi de nye movieclips blueBackground, greenBackground og redBackground henholdsvis
Dine rektangler skal se veldig enkelt, slik:.
Det er bare én mer MovieClip å lage, jeg love! Gå til Sett inn-menyen og velg New Symbol; name it menuAccordionMC, angi typen til MovieClip og sette registreringspunkt i øverste venstre hjørne (fordi våre siste movieclips hadde dette også). Neste, sjekk boksen som sier Export for Actionscript. Klassen navnet bør være MenuAccordionMC med hovedstaden i begynnelsen
Trinn 3: Plassere movieclips
I forrige avsnitt vi skapt alle movieclips nødvendig, og nå trenger vi å plassere dem!
Slett eventuelle movieclips på scenen hvis de er på fremdeles. Åpne din menuAccordionMC fra biblioteket, og lage syv lag i sin tidslinje. Nå navngi dem i følgende rekkefølge fra topp til bottom:
goldBar
blueBar
greenBar
redBar
goldBackground
blueBackground
greenBackground
redBackground
Now Dra og slipp hvert MovieClip fra biblioteket til den tilsvarende lag. Den enkleste måten å plassere alle disse vil være å låse alle lagene i tillegg til den ene med MovieClip du posisjonerer.
Start med Goldbar og sette sin x og y-koordinatene til (0,0) . Neste på blueBar med koordinatene (30,0), deretter greenBar med (60,0), og til slutt Redbar med (90,0)
Tid for bakgrunnene. Den goldBackground koordinater er (- 530,0), den blueBackground koordinater blir (-500,0), den greenBackground koordinater er (-470,0) og redBackground koordinater er (-440,0).
Din MovieClip skal se slik ut nå, og (0,0) koordinere bør være i øverste venstre hjørne av Goldbar MovieClip der den hvite pluss er i bildet:
Trinn 4: Identifisere movieclips
< p> Før vi kan begynne koding det er en ting vi må gjøre. gi de åtte indre movieclips forekomstnavn
Åpne opp den menuAccordionMC for siste gang velg deretter hver MovieClip og gjøre sin forekomst navngi samme som sin MovieClip navn. Så Goldbar er forekomsten navn ville være Goldbar, ville greenBackground forekomstnavnet være greenBackground, og så videre. Når dette er gjort kan vi begynne koding, noe som er ganske lett å forstå
Trinn 5: Sette opp klassene
Gå til din Flash filens egenskaper og dokumentnavnet klasse MenuAccordion. Nå opprette en ny Actionscript 3.0 fil og sette inn følgende kode i det og lagre filen som MenuAccordion:
pakke {import flash.display.MovieClip; import flash.events.Event; public class MenuAccordion strekker MovieClip {public Var menuAccordionMC: MenuAccordionMC = new MenuAccordionMC (); offentlig funksjon MenuAccordion () {addChild (menuAccordionMC); }}}
Her har vi først importere det vi trenger (i dette tilfellet bare MovieClip og tilstelninger klasser). Neste vi legge til variabelen for vår menuAccordionMC, deretter i konstruktøren legger vi den MovieClip til scenen på (0,0)
Det er all koden vi trenger for dokumentet klassen.; Nå la oss lage en ny Actionscript 3.0-fil for MovieClip og lagre det som MenuAccordionMC.as
For å sette opp MenuAccordionMC klassen inn følgende kode - Jeg vil forklare variablene og event lyttere kort tid.
pakke {import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class MenuAccordionMC strekker MovieClip {public Var activeColor: String = new String (); Var hastighet offentlig: Number = new Number (); offentlig funksjon MenuAccordionMC () {activeColor = "ingen"; speed = 10; addEventListener (MouseEvent.CLICK, accordionClick); addEventListener (Event.ENTER_FRAME, accordionMove); }}}
Første ting å legge merke til er at vi har importert MouseEvent: Dette er svært viktig fordi uten det vår museklikk vil ha noen effekt. Som for de to nye variabler: activeColor er bare en enkel streng til å fortelle oss hvilken farge som er i bruk, og hastigheten er hvor mange piksler bakgrunnene skifte hver ramme
Den første hendelsen lytteren er for et MouseEvent.. KLIKK og vil kalle funksjonen accordionClick når vår meny klikkes overalt. Den andre hendelsen lytteren legger funksjonen accordionMove og vil bli kalt hver ramme.
Nå vil vi skape de to funksjonene for hendelsen lyttere. . Plasser følgende kode rett etter stengetid klammeparentes for konstruktøren
offentlig funksjon accordionClick (event: MouseEvent): void {} offentlig funksjon accordionMove (hendelse: Hendelse): void {}
De to klassene er nå satt opp, så det er på tide å begynne å sette kode i disse funksjonene
Trinn 6: The accordionClick Funksjon
Denne funksjonen er relativt enkelt og bare har en if, ellers uttalelse i den. Begynn med å skrive følgende i funksjonen:
if (event.target.currentFrame == 1) {} else {}
Mange er ukjent med event.target, så jeg vil kort forklare det. I et nøtteskall, det bare dirigerer koden til målet for arrangementet -. Så hvis blueBar klikkes, er lik blueBar event.target
Dette betyr at hvis setningen sjekker for å se om barens currentFrame er lik 1, og hvis så den utfører den koden; hvis ikke, vil det kjøre koden i andre klammeparenteser. Vi kan fortsette nå, og endre om, ellers uttalelse til følgende:
if (event.target.currentFrame == 1) {event.target.gotoAndStop (2); activeColor = event.target.name;} else {event.target.gotoAndStop (1); activeColor = "none";}
De nye linjene er svært enkel: målets currentFrame endres til den andre eller første rammen og activeColor variabelen er satt til målet navn eller den er satt til "ingen". Det er all koden som trengs for accordionClick funksjon
Trinn 7:. Den accordionMove Funksjon
Alright, dette er hvor all magien skjer! Dette er i sluttspillet, og det er en lang strekning til mål, men hvis du følger de siste instruksjoner riktig vil du ha en fungerende trekkspill meny!
Første vi må legge til funksjonen er en bryter sak, som vil etter hvert omfatte alle hvis uttalelser som kreves for at dette skal fungere smertefritt:
bryteren (activeColor) {case "ingen": break; case "Goldbar": break; case "blueBar": break; case "greenBar": break; case "Redbar": break;}
Denne bryteren tilfellet tilsvarer variabelen activeColor som er satt under accordionClick funksjonen. Nå la oss starte med den enkleste delen av denne saken uttalelsen, case: none:
if (this.goldBackground.x > = - 530) {this.goldBackground.x- = hastighet;} if (this.blueBackground.x > = -500) {this.blueBackground.x- = hastighet;} if (this.greenBackground.x > = - 470) {this.greenBackground.x- = hastighet;} if (this.redBackground.x > = - 440) {this.redBackground.x- = hastighet;} if (this.blueBar.x > 30) {this.blueBar.x- = hastighet;} if (this.greenBar.x > 60) {this.greenBar.x- = speed;} if (this.redBar.x > 90) {this.redBar.x- = hastighet;!}
Takk for at du tok deg tid til å lese denne artikkelen, jeg håpet du likte det Anmeldelser