Share
Ikke bruk statiske menyer! De fleste spillere baserer øyeblikkelig deres første inntrykk av et Flash-spill på menyen som de ser når de laster det. Stå 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!
Ordet "statisk" betyr i hovedsak manglende endring. Flertallet av menyer vi ser gjennom webspill mangler forandring, du trykker bare på Play og spillet starter. Menyer som det er overutnyttet og viser liten kreativitet eller innovasjon.
For å lage en meny "aktiv" må vi kontinuerlig forårsake forandring. Så i denne opplæringen er det akkurat det vi skal oppnå: en meny som kontinuerlig endres.
Det første vi skal opprette, er en ny Flash-fil (ActionScript 3.0). Still bredden til 650px, dens høyde til 350px, og rammene per sekund til 30. Bakgrunnsfargen kan stå som hvit.
Lagre filen nå; du kan nevne det du vil, men jeg heter min menuSlides.fla.
I neste avsnitt skal vi lage de ni MovieClips som brukes i menyen. For referanse er her en liste over alle fargene som brukes i opplæringen:
Til å begynne med vil vi lage lysbildene som brukes i overgangene, men før vi begynner la vi slå på noen svært nyttige Flash-funksjoner.
Høyreklikk scenen og velg Rutenett> Vis rutenett. Som standard vil det skape et 10px med 10px rutenett over scenen. Deretter høyreklikker du scenen igjen, og denne gangen velger du Snapping> Snap to Grid.
Nå kan vi begynne å tegne! Velg Rectangle Tool og tegne et Light Gold rektangel, 650px bredt og 350px høyt (du kan Alt-klikk på scenen for å gjøre dette lettere). Bytt farge til Gull og trekk grupper av tre firkanter, hver 20x20px, for å danne formen på en L i hvert hjørne:
Velg hele scenen, høyreklikk og velg Konverter til symbol. Gi navn til MovieClip goldSlide og sørg for at typen er Filmklipp og registreringen er øverst til venstre.
For å spare tid og gjøre ting mye enklere, høyreklikk på goldSlide MovieClip i biblioteket og velg Dupliser Symbol tre ganger for å lage tre flere eksemplarer. Endre fargene i den nye MovieClips til blå, grønn og rød, og endre navn på MovieClips til blueSlide, greenSlide og redSlide.
Før vi fortsetter bør vi legge til litt tekst på hvert lysbilde. På goldSlide skrive SPILLE, på blueSlide skrive BRUKSANVISNING, på greenSlide skrive ALTERNATIVER og på redSlide skrive CREDITS.
Nå som vi har teksten på plass, kan vi ødelegge den ved å høyreklikke på den og velge Bryte opp to ganger; Dette vil bryte teksten ned til en fylling som vil overgå mer jevnt. I tillegg som en bonus vil det ikke være behov for å legge inn en skrift hvis du bare bruker den til menyen!
Nå som vi har trukket de 4 lysbildene vi kan fokusere på sideButton MovieClip som brukes til å flytte lysbildene enten til venstre eller høyre.
Først trekker du et rektangel 30x60px med bare et slag (ingen fylling), og tegner diagonale linjer 45 grader fra høyre og høyre hjørne til de knytter sammen midt på motsatt side. Påfør nå en Matte Grey-fyll i trekanten:
Deretter slett du linjene, høyreklikk deretter trekanten og velg Konverter til symbol. Navngi det sideButton, sett typen til Knapp og kontroller at registreringen er øverst til venstre.
Sett inn 3 keyframes i tidslinjen ved å høyreklikke tidslinjen og velge Sett inn Keyframe. På opprammen, velg fyllingen av trekanten, gå til Windows-fanen og velg Farge. Endre alfa til 50%. På overrammen gjentar du samme prosess, men denne gangen setter du alfa til 75%.
Nå kan vi begynne på de fire nummererte sirkelknappene, for å hoppe direkte til et bestemt lysbilde.
For å starte tegne en hvit 30x sirkel uten strekk. Konverter det til et symbol, gi det navnet sirkel én, og sett sin type til Knapp og registreringen peker til sentrum. Sett inn tre nøkkelrammer som vi gjorde før og deretter gå til opprammen.
Tegn en svart 25x sirkel uten strekk og senter den til midten gjennom koordinatene eller ved hjelp av Juster-menyen. Deretter fjerner du den sorte sirkelen, velger du den og sletter den. Du bør nå ha en hvit ring igjen. Ta nå tekstverktøyet og legg en hvit "1" i midten av ringen. Ta deretter dette nummeret fra hverandre til det er en fylling.
Gå til rammen Over og trekk en svart "1". Sentrere det og bryte det fra hverandre til det blir en fylling. Avmarker og velg deretter fyllingen, og slett den deretter. Velg alt på rammen og kopier det, og gå til nedrammen, velg alt på det og trykk slett. Lim inn hva vi har kopiert.
Opprett nå tre sirkler MovieClips, etter samme prosess, for tallene 2, 3 og 4.
Ok, vi er nesten halvveis ferdig! Dra først alle lysbildene på scenen og plasser dem med følgende koordinater:
Dra og slipp nå to kopier av sideknappen. Første kopi skal plasseres på (10.145); før vi kan plassere den andre kopien må vi først flippe den!
Velg den andre kopien og trykk Ctrl-T. Endre venstre til høyre -100% og la opp ned på 100%. Flytt nå den andre kopien til (640.145).
Til slutt dra og slipp de fire sirkelene MovieClips og plasser dem som følger:
Din scene skal nå se slik ut:
De blå, grønne og røde lysbildene er skjult like til høyre for scenen. Velg nå alt på scenen og konverter til et symbol. Navngi det menuSlidesMC, sett typen til MovieClip og registreringen til øverste venstre hjørne, og eksporter den til ActionScript som MenuSlidesMC.
Før vi er ferdig må vi gi hver av MovieClips innsiden menuSlidesMC et forekomstnavn. Velg hvert lysbilde i den rekkefølgen de vises fra venstre, og navn dem slide1, Slide2, Slide3 og slide4 henholdsvis. Gi navn på sirkelknappene en, to, tre og fire, og til slutt navngi sideknappene venstre og Ikke sant.
Nå som alle våre MovieClips er opprettet, kan vi begynne å sette opp de to klassene vi skal bruke.
Gå først til Flash-filens egenskaper og sett klassen sin til menuSlides; Deretter oppretter du en ny ActionScript 3.0-fil og lagrer den som menuSlides.as.
Kopier nå følgende kode til den; Jeg vil forklare det etter:
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; offentlig klassemenySlides utvider MovieClip public var menuSlidesMC: MenuSlidesMC = new MenuSlidesMC (); offentlig funksjon menySlides () addChild (menuSlidesMC);
Ganske grunnleggende - det er en dokumentklasse, som vi importerte MovieClips og Events som vi skal bruke. Da skapte vi en forekomst av MenuSlidesMC, og la den til scenen.
Opprett nå en ny ActionScript 3.0-fil for menuSlidesMC forekomst. Lagre det som MenuSlidesMC.as og kopier følgende kode til den:
pakke import flash.display.MovieClip; importere flash.events.Event; importer flash.events.MouseEvent; offentlig klasse MenuSlidesMC strekker seg MovieClip offentlig var hastighet: Nummer = nytt nummer (); offentlig var aktivSkjul: Nummer = nytt nummer (); offentlig funksjon MenuSlidesMC () speed = 10; activeSlide = 1; addEventListener (MouseEvent.CLICK, slidesClick); addEventListener (Event.ENTER_FRAME, slidesMove);
På samme måte som forrige gang importerte vi det vi trenger, men vi opprettet to tallvariabler. Den første variabelen, hastighet, er faktisk hvor mange piksler lysbildene flyttes av hver ramme. (Merk: dette tallet må jevnt fordeles inn i scenens bredde for å gi en jevn overgang). Den andre variabelen, Actives, forteller oss hvilket lysbilde som for øyeblikket er satt på skjermen.
Vi har også lagt til to hendelselyttere for funksjoner vi skal skape; en av dem kalles på et museklikk, og den andre kalles i begynnelsen av hver ramme.
For å begynne vil vi få museklikkfunksjonen ut av veien. Start med å opprette en offentlig funksjon som heter slidesClick ():
offentlig funksjon lysbilderClick (event: MouseEvent): void
Deretter skal vi lage noen if-setninger angående event.target.name. I utgangspunktet lagrer denne egenskapen navnet på objektet som ble målrettet med museklikk. Vi kan bruke dette til å sjekke hvilken knapp som trykkes:
hvis (event.target.name == "left") if (activeSlide> 1) activeSlide- = 1; annet hvis (event.target.name == "right") if (activeSlide<4) activeSlide+=1; if(event.target.name == "one") activeSlide=1; else if(event.target.name == "two") activeSlide=2; if(event.target.name == "three") activeSlide=3; else if(event.target.name == "four") activeSlide=4;
Koden ovenfor går i slidesClick () funksjon. Det første settet av if-setninger er for venstre og høyre side knapper; de øker eller reduserer verdien av Actives, men la aldri verdien bli mindre enn 1 eller høyere enn 4 (siden vi bare har fire lysbilder). Det andre settet av if-setninger er for sirkelknappene; i stedet for bare å øke eller redusere verdien av Actives de setter den til den valgte verdien.
La oss begynne med ENTER_FRAME håndteringsfunksjon:
offentlig funksjon lysbilder (Event: Event): void
Legg til slidesMove () fungere under din slidesClick () funksjonen, og vi begynner å legge til noen koden til den. Først bruker vi en bytte om for å sjekke hvilken lysbilde som skal være på skjermen, basert på verdien av Actives:
bytte (activeSlide) case 1: break; tilfelle 2: pause tilfelle 3: pause tilfelle 4: pause
Nå vil vi i hvert tilfelle opprette en if / else blokk som vil sjekke at lysbildets nåværende x-posisjon, og flytte alle av lysbildene enten venstre, høyre eller ikke i det hele tatt, avhengig av hvor ønsket lysbilde sitter i øyeblikket.
Det første tilfellet ser slik ut:
if (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = speed; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet;
Nå er alt vi trenger å gjøre, gjenta samme prosess for de andre sakene! Når du er ferdig, bør din swtich se slik ut:
bytte (activeSlide) tilfelle 1: hvis (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = speed; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet; gå i stykker; tilfelle 2: hvis (slide2.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide2.x>0) slide1.x- = speed; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet; gå i stykker; tilfelle 3: hvis (slide3.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide3.x>0) slide1.x- = speed; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet; gå i stykker; tilfelle 4: hvis (slide4.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide4.x>0) slide1.x- = speed; slide2.x- = hastighet; slide3.x- = hastighet; slide4.x- = hastighet; gå i stykker;
Og det er det! Vi er alle ferdige med koden og menyen skal fungere bra akkurat nå.
... Men vent, hva om vi vil legge til flere lysbilder eller ta litt unna?
For øyeblikket er koden vår ikke veldig fleksibel på grunn av alle de hardkodede hvis uttalelser. Så la oss gjøre noe dristig: Slett all koden i funksjonen slidesMove () fordi vi ikke lenger trenger det, og slett også om-setningene for sirkelknappene, da vi også skal optimalisere dem.
Nå erklære en ny variabel (under hastighet og activeSlides):
offentlig var slidesArray: Array = new Array ();
Den første variabelen, slidesArray, vil være en matrise som inneholder alle våre lysbilder, som vil tillate oss å 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 på 0, så vi må gjøre noen endringer i forekomstnavnene våre.
Velg hvert lysbilde i den rekkefølgen de vises fra venstre, og navn dem slide0, slide1, Slide2 og Slide3, henholdsvis. Og for å hjelpe oss med å kutte ned antallet kodenes linjer vi bruker, velg hver sirkel-knapp i den rekkefølgen de vises fra venstre og navn dem circle0, CIRCLE1, CIRCLE2 og circle3, henholdsvis.
Hvis du skal legge til flere lysbilder og knapper, er det nå på tide å gjøre det. Bare plasser de ekstra lysbildene på slutten av raden med lysbilder, og gi dem forekomstnavn etter samme rekkefølge. Gjør det samme for sirkelknappene.
Nå som vi har forekomstnavnene riktig, må vi legge til lysbildene i matrisen. Gjør det ved å legge til følgende kode for konstruktøren din:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5];
Nå er lysbildene i arrayet og kan nås av deres indeks i matrisen. For eksempel, slidesArray [0] tilsvarer slide0 fordi det er det første elementet i listen.
Deretter endrer du tilstanden til "Rett" ellers-hvis-setningen:
if (Actives < slidesArray.length-1)
Verdien av slidesArray.length er lik antall elementer i arrayet, så denne nye tilstanden vil nå tillate oss å trykke på knappen og skifte lysbildene over så lenge det aktive lysbildet ikke er det endelige lysbildet.
Nå, når en sirkelknapp klikkes, må vi finne ut hvilken den er (og hvilken lysbilde den refererer til).
Opprett en matrise for å holde alle sirkelknappene. Definer først den under lysbildeserien:
offentlig var slidesArray: Array = new Array (); offentlige varcirklerArray: Array = new Array ();
Deretter legger du til sirkelknappene i arrayet i konstruktøren:
sirklerArray = [sirkel0, sirkel1, sirkel2, sirkel3, sirkel4, sirkel5];
Nå, flytt til slidesClick () funksjon, under hele if-else blokk. Vi skal sjekke om knappen klikket er i sirkelknappene:
hvis (sirklerArray.indexOf (event.target)! = -1)
Arrayens indexOf () -funksjon kontrollerer for å se om en gjenstand er i arrayet; Hvis det ikke er det, kommer det tilbake -1. Så, vi sjekker for å se om det er det ikke lik -1, som vil sjekke for å se om det er i matrisen.
Forutsatt at det er, da oversikt over() funksjonen returnerer indeksen for knappen i sirkelknappene - så hvis circle3 ble klikket, circlesArray.indexOf (event.target) vil være lik 3. Dette betyr at vi bare kan sette Actives til 3, og vi er ferdige!
hvis (sirklerArray.indexOf (event.target)! = -1) activeSlide = sirklerArray.indexOf (event.target);
Det eneste du må gjøre er å flytte alle lysbildene. Begynn med å legge til samme sløyfe som vi hadde før, i slidesMove () funksjon:
for (var jeg: int = 0; i < slidesArray.length; i++)
En if-else setning må legges til nå; dette vil bruke variabelen Actives å velge et lysbilde ut av matrisen og se hvor x-stillingen er, akkurat som før.
if (slidesArray [Actives] .x<0) else if(slidesArray[activeSlide].x>0)
Siden Actives er et tall, slidesArray [Actives] refererer til en bestemt lysbilde, så slidesArray [Actives] .x er lik den lysbildens x-posisjon.
I det første tilfellet vil vi legge til en til loop for å flytte alle filmklipp til høyre, og i andre tilfelle vil vi legge til en til sløyfe for å flytte alle filmklippene til venstre.
Ikke sant:
for (var j: int = 0; j < slidesArray.length; j++) slidesArray[j].x+=speed;
Venstre:
for (var k: int = 0; k < slidesArray.length; k++) slidesArray[k].x-=speed;
Hvis du tester dette nå, vil du legge merke til at vår optimaliserte kode har ført til et mye zippier-grensesnitt!
Hvis du vil ta dette enda lenger, kan du bruke en til sløyfe for å plassere lysbildene og sirklene, i stedet for å måtte dra og slippe dem i Flash IDE. For eksempel, for å plassere lysbildene, hadde vi først plassering slide0 i konstruktøren:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0;
Deretter slår vi gjennom alle de andre lysbildene, som begynner på slide1:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; for (var jeg: int = 1; i < slidesArray.length; i++)
Vi kan gi alle lysbildene en y-posisjon på 0:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; for (var jeg: int = 1; i < slidesArray.length; i++) slidesArray[i].y = 0;
... og så kan vi sette hvert lysbilde x-posisjon til 620px til høyre for lysbildet før det:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; for (var jeg: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + 620; slidesArray[i].y = 0;
Hvis lysbildene dine ikke er 620px brede, kan du til og med oppdage bredden deres automatisk!
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0] .y = 0; for (var jeg: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + slidesArray[i-1].width; slidesArray[i].y = 0;
Du kan gjøre det samme med sirkelknappene, men jeg lar det opp til deg å eksperimentere med.
Den gode tingen om dette er at du kan legge til så mange lysbilder som du vil på menyen; alt du trenger å gjøre er å legge dem til matrisen, og de vil bli behandlet av denne koden.
(Du kan også fjerne lysbilder fra arrayet, men de vil ikke bli påvirket av noen av kodene, så du må sannsynligvis flytte dem i Flash IDE.)
Takk for at du tok deg tid til å lese gjennom opplæringen, jeg håper det var nyttig, og at du lærte litt om aktive spillmenyer.
Accentsconagua