Build en Active Flash Game Meny: Slides
en
Del
en
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Slutt å bruke statiske menyer! De fleste spillere basere umiddelbart sine første inntrykk av en Flash spill på menyen som de ser når de legger det. Skill deg ut fra mengden med en aktiv meny!
Denne opplæringen ble først lagt ut i desember 2011, men har siden blitt oppdatert med ekstra trinn som forklarer hvordan du gjør koden mer fleksibel!
< hr>
Endelig resultat Forhåndsvisning
Innledning: Statisk vs Aktiv
Ordet "statisk" betyr i hovedsak mangler i endring. Flertallet av menyene vi ser gjennom web-spill mangler i endring, trykker du bare på Play og spillet starter. Menyer som det er for mye og vise litt kreativitet eller innovasjon.
For å gjøre en meny "aktiv" vi må kontinuerlig forårsake endring. Så i denne opplæringen det er akkurat hva vi skal oppnå: en meny som kontinuerlig endrer
Trinn 1:. Klar
Det første vi kommer til å trenge for å lage er en ny Flash-fil (Actionscript 3.0). Sette bredden til 650px, høyden til 350 piksler, og rammer per sekund til 30. Bakgrunnsfargen kan stå som hvit
Nå lagre filen.; du kan kalle det hva du vil, men jeg heter min menuSlides.fla.
I neste avsnitt vil vi skape de ni movieclips brukes i menyen. For referanse, her er en liste over alle fargene som brukes i hele opplæringen:
White - #FFFFFF
Gold - # E8A317
Light Gold - # FBB917
Blue - # 1569C7
Lyseblå - # 1389FF
Green - # 347235
Lysegrønn - # 3E8F1B
Red - # 990000
Lys Red - # C10202
Matte Grey - # 222222
Trinn 2: Opprette lysbilde movieclips
Å begynne med vil vi skape lysbildene som brukes i overgangene, men før vi begynner la oss slå på noen svært nyttige Flash funksjoner
Høyreklikk på scenen og velger Grid >.; Vis Grid Nå kan vi begynne å tegne! Velg rektangelverktøyet og tegne en Light Gold rektangel, 650px bred og 350 piksler høy (du kan Alt-klikk på scenen for å gjøre dette enklere). Nå endrer farge til gull og trekke grupper på tre ruter, hver 20x20px, for å danne formen på en L i hvert hjørne ,: Velg hele scenen, høyreklikk og velg Convert to Symbol For å spare tid og gjøre ting mye enklere, høyreklikker du på goldSlide MovieClip i Biblioteket og velg Duplicate Symbol Før vi fortsetter vi bør legge litt tekst til hvert bilde. På goldSlide skrive PLAY, på blueSlide skrive instruksjoner, om greenSlide skrive ALTERNATIVER og på redSlide skrive studiepoeng. Nå som vi har teksten i stedet vi kan bryte den fra hverandre ved å høyreklikke på den og velge Break Apart Nå som vi har trukket de 4 lysbilder vi kan fokusere på sideButton MovieClip som brukes til å flytte lysbildene enten venstre eller høyre. Først tegne et rektangel 30x60px med bare et slag (ingen fyll), deretter tegne diagonale linjer 45 grader fra øverst til høyre og nederst til høyre hjørnene til de smekker sammen i midten av den motsatte side. Nå gjelder en Matte Grey fyll til trekanten: Deretter slette linjene, deretter høyreklikker du på trekanten og velger Convert to Symbol Nå settes det 3 nøkkelbilder i tidslinjen ved å høyreklikke på tidslinjen og velge < em> Sett inn Keyframe Nå kan vi begynne på de fire nummererte sirkel knapper, for å hoppe direkte til et bestemt lysbilde. Slik starter du tegne en hvit 30px sirkel uten slag. Konvertere den til et symbol, name it circleOne, og satt sitt slag til Button Hotell og sin registreringspunktet til sentrum. Sett tre nøkkel som vi gjorde før, og deretter gå til Up rammen. Tegn en svart 25px sirkel uten slag og sentrer den til midten gjennom koordinatene eller ved å bruke Align menyen. Neste oppheve merkingen den svarte sirkelen, deretter reselect den og slette den. Du skal nå ha en hvit ring som gjenstår. Nå ta tak i tekst verktøyet og sette en hvit "1" i midten av ringen. Deretter brytes det antall fra hverandre inntil det er et fyll. Gå til over rammen og trekke en svart "1". Sentrere den og bryte den fra hverandre før det blir en fyll. Nå fjerne merkingen og reselect fyllet, deretter slette den. Velg alt på rammen og kopiere den, så gå til Down rammen velger alt på den og trykke delete. Lim inn det vi har kopiert Nå opprette tre sirkel movieclips, følger den samme prosessen, for tallene 2, 3 og 4. Ok, vi er nesten halvveis ferdig! Først dra alle lysbildene på scenen og plasser dem med følgende koordinater: Nå drar og slipper to kopier av sideButton. Den første kopien skal plasseres på (10145); før vi kan plassere den andre kopien må vi først snu den! Velg den andre kopien og trykk Ctrl-T. Endre venstre-høyre til -100% Til slutt dra og slippe de fire sirkel movieclips og plassere dem som så. Din stadiet bør nå se ut dette: De blå, grønne og røde lysbilder er skjult like til høyre for scenen. Nå velger alt på scenen og konvertere til et symbol. Name it menuSlidesMC, angi typen til MovieClip og registreringen i øverste venstre hjørne, og eksportere den for Actionscript som MenuSlidesMC. Før vi avslutter vi må gi hver av de movieclips inne menuSlidesMC en forekomst navn. Velg hvert lysbilde i den rekkefølgen de vises fra venstre og navngi dem slide1, Slide2, Slide3 og slide4 hhv. Navngi sirkel knapper ett, to, tre og fire, og til slutt nevne sideknappene til venstre og høyre Nå som alle våre movieclips . har blitt opprettet vi kan begynne å sette opp de to klassene vi skal bruke Først gå til din Flash filens egenskaper og sette sin klasse menuSlides; Deretter oppretter du en ny Actionscript 3.0-fil og lagre den som menuSlides.as Nå kopiere følgende kode inn i den.; Jeg vil forklare det etter: Ganske grunnleggende - det er et dokument klasse, der vi importert movieclips og arrangementer vi skal bruke. Så vi laget en forekomst av MenuSlidesMC, og lagt den til scenen. Nå opprette en ny Actionscript 3.0-fil for menuSlidesMC eksempel. Lagre den som MenuSlidesMC.as og kopiere følgende kode inn i den: Akkurat som forrige gang, importerte vi hva vi kommer til å trenge, men vi skapte to nummer variabler. Den første variabelen, hastighet, er faktisk hvor mange piksler lysbildene er flyttet av hver ramme. (Merk: Dette nummeret må jevnt dele inn scenen bredde for å gi en myk overgang). Den andre variable, Actives, forteller oss hvilken slide er foreløpig satt til å være på skjermen Vi har også lagt til to hendelsen lyttere for funksjoner vi skal lage.; en av dem heter på et museklikk, og den andre kalles ved begynnelsen av hver ramme For å begynne vi vil få museklikk funksjon ut av veien. Start med å lage en offentlig funksjon som heter slidesClick (): Neste vi vil skape noen hvis-uttalelser om event.target.name. I utgangspunktet lagrer denne egenskapen navnet på objektet som ble angrepet av museklikk. Vi kan bruke dette til å sjekke hvilken knapp trykkes: Koden ovenfor går i slidesClick () -funksjonen. Det første settet med if-uttalelser er for sideknappene venstre og høyre; de øke eller redusere verdien av Actives, men aldri tillate verdien til å bli mindre enn 1 eller større enn 4 (siden vi bare har fire lysbilder). Det andre settet med if-uttalelser er for sirkelen knapper; i stedet for bare øker eller reduserer verdien av Actives de sette den til den valgte verdien Nå la oss begynne med den ENTER_FRAME handler funksjon. Legg til slidesMove () -funksjonen under din slidesClick () -funksjonen, og vi vil begynne å legge noen kode til den. Først vil vi bruke en bryter for å sjekke hvilke lysbildet skal være på skjermen, basert på verdien av Actives: Nå i hvert enkelt tilfelle vil vi lage en if /else blokk som vil sjekke at lysbildet nåværende x-posisjon, og flytt alle Det første tilfellet ser slik ut: Nå er alt vi trenger å gjøre er å gjenta den samme prosessen for de andre tilfellene! Når du er ferdig din swtich skal se slik ut: Og det er det! Vi er alle ferdige med koden og menyen skal jobbe godt akkurat nå. ... Men vent, hva hvis vi ønsker å legge til flere lysbilder eller ta noe bort? I øyeblikket koden vår er ikke veldig fleksibel på grunn av alle de hardkodet hvis uttalelser. Så la oss gjøre noe dristig: slette all koden i slidesMove () -funksjonen fordi vi vil ikke lenger være behov for det, og også slette if-setninger for sirkelen knapper som vi kommer til å optimalisere dem også Nå erklære en ny variabel (under fart og activeSlides): Den første variabelen, slidesArray, vil være en matrise som inneholder alle våre lysbilder, som vil gi oss mulighet til å få tilgang til dem ved å referere til et element i matrisen (slik at vi kan bruke slidesArray [2] i stedet for Slide3). En ting å merke seg er at det første elementet i en matrise er gitt en indeks over 0, så vi er nødt til å gjøre noen endringer i våre forekomstnavn. Velg hvert lysbilde i den rekkefølgen de vises fra venstre og navngi dem slide0, slide1, Slide2 og Slide3 hhv. Og for å hjelpe oss å kutte ned på antall linjer med kode vi bruker, velger hver knapp sirkel i den rekkefølgen de vises fra venstre og navngi dem circle0, circle1, circle2 og circle3 hhv. Hvis du er kommer til å legge til flere lysbilder og knapper, nå er det på tide å gjøre det. Bare plassere ekstra lysbilder på slutten av raden av lysbilder, så gi dem forekomstnavn følge samme rekkefølge. Deretter gjøre det samme for sirkelen knapper. Nå som vi har forekomsten navn korrigere vi må legge lysbildene til array. Gjøre det ved å legge til følgende kode i konstruktøren: Nå lysbildene er i rekken og kan nås ved sin indeks i rekken . For eksempel slidesArray [0] tilsvarer slide0 fordi det er det første elementet i listen Neste inne i "riktig" else-if statement, endre tilstanden til:. Verdien av slidesArray.length er lik antall elementer i tabellen, så denne nye tilstanden vil nå tillate oss å trykke på knappen og skifte lysbilder over så lenge aktive lysbildet er ikke den endelige lysbildet Nå, når en knapp sirkel klikkes, må vi finne ut hvilken det er (og som skyver det refererer til). Lag en matrise for å holde alle sirkel knapper. Først definerer det, under raset matrise: Deretter legger sirkelen knappene til array i konstruktøren: Nå , flytte til slidesClick () -funksjonen, under hele if-else-blokk. Vi kommer til å sjekke om knappen klikket er i sirkel knapper matrise: tabellens indexOf () -funksjonen sjekker for å se om en gjenstand er i matrisen; hvis det ikke, returnerer den -1. Så vi sjekke for å se om det er ikke anbefale lik -1, som vil sjekke for å se om det er Antar det er, deretter indexOf () -funksjonen returnerer indeksen for knappen innenfor sirkelen knapper array - så hvis circle3 ble klikket, vil circlesArray.indexOf (event.target) være lik 3. Dette betyr at vi kan bare sette Actives til 3, og vi er ferdige Det eneste igjen å gjøre er å flytte alle lysbildene. Begynn med å legge den samme sløyfe som vi hadde før, i slidesMove () -funksjonen: En if-else statement behov skal legges nå; Dette vil bruke variabelen Actives å velge et lysbilde ut av rekken og sjekke hvor sin x-posisjon er, akkurat som før Siden Actives er et tall, slidesArray [Actives] henviser til ett bestemt lysbilde, så slidesArray [Actives] .x er lik at lysbildet x-posisjon I første tilfellet vil vi legge til en for loop å flytte alle filmklippene til høyre, og i det andre tilfellet vil vi legge til en for loop å flytte alle filmklipp til venstre Høyre:. Venstre: Hvis du tester dette nå, vil du legge merke til at vår optimalisert kode har ført til en mye zippier grensesnitt Hvis du ønsket å ta dette enda lenger, kan du bruke en for loop å plassere lysbilder og sirkler, snarere enn å måtte dra og slippe dem i Flash IDE. For eksempel, for å posisjonere lysbildene, hadde vi første posisjon slide0 i konstruktøren: Deretter hadde vi sløyfe gjennom alle de andre lysbilder, som starter på slide1: Vi kan gi alle lysbildene en y-posisjon fra 0: ... og så kan vi sette hvert lysbilde x-posisjon til å være 620px til høyre for raset før det: Hvis lysbildene ikke er 620px bredt, kan du selv oppdage sin bredde automatisk Du kan gjøre det samme med sirkel knapper, men jeg skal la det opp til deg å eksperimentere med. Det er bra om dette, kan du legge til så mange lysbilder som du vil til menyen; alt du trenger å gjøre er å legge dem til array, og de vil bli behandlet av denne koden. (Du kan fjerne lysbilder fra tabellen også, men de vil ikke bli berørt av noen av koden, så vil du sannsynligvis trenger å omplassere dem i Flash IDE.) Takk for at du tar deg tid til å lese gjennom opplæringen, jeg håper det var nyttig og at du lært noe om aktive spillet menyer. Anmeldelser
. Som standard vil det skape en 10px av 10px rutenett over scenen. Deretter høyreklikker du på scenen igjen og denne gangen velger Festing > Fest til rutenett
.
. Navngi MovieClip goldSlide og sørg for at den typen er MovieClip Hotell og registreringen er øverst til venstre.
tre ganger for å gjøre tre eksemplarer. Endre fargene i de nye movieclips til blått, grønt og rødt, endre navn på movieclips til blueSlide, greenSlide og redSlide.
to ganger; Dette vil bryte ned tekst til en fylle som vil overgangen jevnere. Plus som en bonus vil det ikke være behov for å bygge inn en skrift hvis du bare bruker det for menyen!
De Knapper
. Name it sideButton, angi typen til Button Hotell og sørge for at registreringen er i øverste venstre hjørne.
. På Up rammen velger fyllingen av trekanten, gå til kategorien Windows, og velg Color. Endre Alpha til 50%. På Over Frame gjenta den samme prosessen, men denne gangen satt alfa til 75%.
Trinn 3:. Plassere movieclips
goldSlide: (0, 0)
blueSlide: (650, 0)
< li> greenSlide: (1300, 0)
redSlide: (1950, 0)
og la opp-ned på 100%
. Nå flytter den andre kopien til (640145)
< li> circleTwo: (70, 320)
circleThree: (110, 320)
circleFour: (150, 320)
Trinn 4:. Sette opp klassene
pakke {import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class menuSlides strekker MovieClip {public Var menuSlidesMC: MenuSlidesMC = new MenuSlidesMC (); offentlig funksjon menuSlides () {addChild (menuSlidesMC); }}}
pakke {import flash.display.MovieClip; import flash.events.Event; import flash.events.MouseEvent; public class MenuSlidesMC strekker MovieClip {var hastighet offentlig: Number = new Number (); offentlig Var Actives: Number = new Number (); offentlig funksjon MenuSlidesMC () {speed = 10; Actives = 1; addEventListener (MouseEvent.CLICK, slidesClick); addEventListener (Event.ENTER_FRAME, slidesMove); }}}
Trinn 5:. Opprette hendelsesbehandling funksjoner
offentlig funksjon slidesClick (event: MouseEvent): void {}
if (event.target.name == "venstre") {if (Actives > 1) {activeSlide- = 1; }} else if (event.target.name == "riktig") {if (Actives < 4) {Actives + = 1; }} if (event.target.name == "en") {Actives = 1;} else if (event.target.name == "to") {Actives = 2;} if (event.target.name == "tre") {Actives = 3;} else if (event.target.name == "fire") {Actives = 4;}
offentlig funksjon slidesMove (hendelse: Hendelse): void {}
bryteren (Actives) {case 1: break; case 2: break; case 3: break; case 4 : break;}
lysbildene enten venstre, høyre, eller ikke i det hele tatt ., avhengig av hvor ønsket side sitter for tiden
if (slide1.x < 0) {slide1.x + = hastighet; slide2.x + = hastighet; slide3.x + = hastighet; slide4.x + = hastighet;} else if (slide1.x > 0) {slide1.x- = hastighet; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet;}
bryteren (Actives) {case 1: if (slide1.x < 0) {slide1.x + = hastighet; slide2.x + = hastighet; slide3.x + = hastighet; slide4.x + = hastighet; } else if (slide1.x > 0) {slide1.x- = hastighet; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet; }\tgå i stykker; case 2: if (slide2.x < 0) {slide1.x + = hastighet; slide2.x + = hastighet; slide3.x + = hastighet; slide4.x + = hastighet; } else if (slide2.x > 0) {slide1.x- = hastighet; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet; }\tgå i stykker; case 3: if (slide3.x < 0) {slide1.x + = hastighet; slide2.x + = hastighet; slide3.x + = hastighet; slide4.x + = hastighet; } else if (slide3.x > 0) {slide1.x- = hastighet; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet; }\tgå i stykker; case 4: if (slide4.x < 0) {slide1.x + = hastighet; slide2.x + = hastighet; slide3.x + = hastighet; slide4.x + = hastighet; } else if (slide4.x > 0) {slide1.x- = hastighet; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet; } Break;}
Trinn 6: Legge til lysbilder til en Array
.
offentlig Var slidesArray: Array = new Array ();
slidesArray = [slide0, slide1, Slide2, Slide3, slide4, slide5];
If (Actives < slidesArray.length-1) {
Trinn 7:. Håndtering Circle knappetrykk
offentlig Var slidesArray: Array = new Array (); offentlig Var circlesArray: Array = new Array ();
circlesArray = [circle0, circle1, circle2, circle3, circle4, circle5];
if (circlesArray.indexOf (event.target) = -1) {}
i rekken.
if (circlesArray.indexOf (event.target) = -1) {Actives = circlesArray.indexOf (event.target!); }
Trinn 8: Flytte Slides
for (var i: int = 0; i < slidesArray.length; i ++) {}
if (slidesArray [Actives] .x < 0). {} else if (slidesArray [Actives] .x >. 0) {}
for (var j: int = 0; j < slidesArray.length; j ++) {slidesArray [j] .x + = hastighet;}
for (var k: int = 0; k < slidesArray.length; k ++) {slidesArray [k] .x- = hastighet;}
Trinn 9: Tar Det Ytterligere
slidesArray = [slide0, slide1, Slide2, Slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .Y = 0;
slidesArray = [slide0, slide1, Slide2, Slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .Y = 0; for (var i: int = 1; i < slidesArray.length; i ++) {}
slidesArray = [slide0, slide1, Slide2, Slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .Y = 0; for (var i: int = 1; i < slidesArray.length; i ++) {slidesArray [i] .Y = 0; }
slidesArray = [slide0, slide1, Slide2, Slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .Y = 0; for (var i: int = 1; i < slidesArray.length, jeg ++) {slidesArray [i] .x = slidesArray [i-1] .x + 620; slidesArray [i] .Y = 0; }
slidesArray = [slide0, slide1, Slide2, Slide3, slide4, slide5]!; slidesArray [0] .x = 0; slidesArray [0] .Y = 0; for (var i: int = 1; i < slidesArray.length, jeg ++) {slidesArray [i] .x = slidesArray [i-1] .x + slidesArray [i-1] .width; slidesArray [i] .Y = 0; }
Konklusjon