Share
Førsteinntrykk er svært viktig på en Flash-spillportal; hvis spillet ikke tar tak i spilleren i de første par sekunder, har de mange andre spill å velge mellom. Siden menyen er det første grensesnittet, kan alt du kan gjøre for å gjøre det mindre kjedelig. I denne opplæringen vil vi opprette en meny som inneholder swapping-dybde, glatte rulle over effekter og to forskjellige overgangsmodeller.
Dette er de to designene vi skal jobbe for:
Den første utformingen vil ha de neste skjermene som overføres fra forskjellige retninger, avhengig av hvilket alternativ som klikkes.
Det andre designet overfører alle skjermene inn fra bunnen: et mer fleksibelt valg hvis du har mer enn fire alternativer.
Det er to hovedtyper som gjør denne menyen "aktiv". Den første er roll-over-effektene på knappene: Uansett hvor mye de har skalert når du ruller ut, skaler de ned fra den aktuelle størrelsen (i motsetning til en tween opprettet på tidslinjen). Den andre er at koden til den andre stilen er designet for å være fleksibel og lett å utvide til dine egne behov.
Det første vi skal opprette, er en ny Flash-fil (ActionScript 3.0). Still bredden til 600px, dens høyde til 300px, og rammene per sekund til 30. Bakgrunnsfargen kan stå som hvit.
Lagre filen nå; du kan nevne det du vil, men jeg heter min menuBounce.fla.
I neste avsnitt skal vi lage de åtte MovieClips som brukes i menyen. For referanse er her en liste over alle fargene som brukes i opplæringen:
Accentsconagua
0xFFFFFF)0xe8a317)0xfbb917)0x1569c7)0x1389ff)0x347235)0x3e8f1b)0x990000)0xc10202)0x222222)Til å begynne med vil vi lage "ryggene" (filmklippene som vil stå for faktiske skjermer), 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 rektangulærverktøyet og tegne et gullrektangel på 600x300px. Velg deretter denne fyllingen, høyreklikk og velg Konverter til symbol. Gi navn til MovieClip goldBack, sett typen til MovieClip og registreringen til øverst til venstre.
Høyreklikk deretter MovieClip og velg Kopier tre ganger for å lage tre eksemplarer av det. Gjenta dem nå med lyseblå, lysegrønn og lysrød. Gi dem navnet Blueback, Greenback og Redback, henholdsvis.
For å avslutte ryggen bør vi legge til en slags tekst i hver MovieClip: på goldBack skriv "PLAY", på blueBack skriv "INSTRUKSJONER", på greenBack skriv "OPTIONS" og på redBack skriv "CREDITS". Når du har skrevet teksten, vil jeg anbefale å bryte den fra hverandre til den blir en fylling (dette fjerner behovet for å legge inn fonter og gjør overgangen ser jevnere ut). Ryggene dine bør se ut som den nedenfor:
La oss nå starte på de klikkbare rutene! Velg rektangulærverktøyet og tegne en gullfirkant på 100x100px. Velg fyll, høyreklikk og Konverter til symbol. Gi navn til MovieClip goldSquare, sett typen til MovieClip og registreringen til øverst til venstre. Nå er det på tide å skrive tekst på torget, bortsett fra denne gangen i stedet for å bryte teksten fra hverandre, la den gå for nå. Sett inn en keyframe og endre fyllfarge til gull. Nå knekke teksten i begge rammene til de blir fulle.
Høyreklikk på MovieClip og velg Dupliser symbol tre ganger. Gjenta deretter samme prosess fra før for de andre tre farger, navngi MovieClips Bluesquare, greenSquare og rød firkant, henholdsvis. Firkantene dine bør se ut som den nedenfor:
Begynn med å slette alt fra scenen. Deretter går du til Sett inn> Nytt symbol. Navngi det menuBounceMC, sett typen til MovieClip, registreringen til øverst til venstre og eksporter den som MenuBounceMC.
Dra nå alle ryggene fra biblioteket til det og plasser dem på følgende måte:
Hvis du skal bruke den ene retningsdesignen, plasserer du alle fire av ryggene på en av disse stillingene. Jeg brukte (0, 300).
Dra nå alle torgene fra biblioteket inn i MovieClip og sett dem på følgende måte:
Det siste vi må gjøre før vi begynner å kode, er å tilordne forekomstnavnene. Angi forekomstnavnene for rutene som square0, square1, square2, square3, starter fra venstre. Neste sett forekomstnavnene for ryggene i henhold til det tilsvarende med kvadratet i samme farge. Så goldBack ville få forekomstnavnet back0 fordi det goldSquare har forekomstnavnet square0.
Nå som vi er ferdige med å lage og plassere MovieClips, kan vi begynne å sette opp de to klassene som vi skal bruke.
Først gå til Flash-filens Egenskaper og sett klassen til MenuBounce; Deretter oppretter du en ny ActionScript 3.0-fil og lagrer den som MenuBounce.as.
Kopier nå følgende kode til den; Jeg vil forklare det etter:
pakke import flash.display.MovieClip; importere flash.events.Event; offentlig klasse MenuBounce utvider MovieClip public var menuBounceMC: MenuBounceMC = ny MenuBounceMC (); offentlig funksjon MenuBounce () addChild (menuBounceMC);
Dette er en grunnleggende dokumentklasse som vi har lagt til en liten ekstra kode som lager en forekomst av MenuBounceMC og legger den til scenen.
Opprett nå en ny ActionScript 3.0-fil og lagre den som MenuBounceMC.as. Kopier nå følgende kode inn i den så vi kan sette den opp.
pakke import flash.display.MovieClip; importer flash.display.Sprite; importere flash.events.Event; importer flash.events.MouseEvent; offentlig klasse MenuBounceMC strekker seg MovieClip public var activeSquare: MovieClip; offentlig var aktivBack: MovieClip; offentlige varplasseringerArray: Array = new Array (); offentlig var backsArray: Array = new Array (); offentlig varhastighet: tall = 20; offentlig funksjon MenuBounceMC ()
Hver variabel har et bestemt formål:
activeSquare: Hvilket torg blir rullet overactiveBack: Hvilken rygg er valgt for å flyttesquaresArray: En matrise som inneholder alle de firkantede MovieClipsbacksArray: En matrise som inneholder alle tilbake MovieClipshastighet: Hvor mange piksler bakene flyttes av hver rammeAlle disse variablene er satt, med unntak av topSquare (som er satt i andre funksjoner) og arrays. Så må vi skyve alle MovieClips på arrayet. Legg til følgende linjer inne i konstruktøren:
squaresArray = [square0, square1, square2, square3]; backsArray = [back0, back1, back2, back3];
Men denne metoden kan være litt kjedelig hvis du skal bruke et stort antall MovieClips i menyen - si 50. Et alternativ ville være å lage MovieClips helt gjennom kode og trykk dem når du legger dem til menyen. Men for vårt formål å bruke bare åtte MovieClips fungerer det bra.
Det siste settet av ting vi må legge til for å fullføre oppsettet, er våre hendelseslyttere, som vil utløse alle overgangene og rulle over effekter. Legg til disse linjene under trykk() linjer.
addEventListener (MouseEvent.MOUSE_OVER, bounceOver); addEventListener (MouseEvent.MOUSE_OUT, bounceOut); addEventListener (MouseEvent.CLICK, bounceClick); addEventListener (Event.ENTER_FRAME, bounceUpdate);
La oss starte med å opprette de tre enklere funksjonene:
offentlig funksjon bounceOver (event: MouseEvent): void offentlig funksjon bounceOut (event: MouseEvent): void offentlig funksjon bounceClick (event: MouseEvent): void
Inne i bounceOver () funksjon start ved å legge til en if-setning for å sørge for at ingen tilbake er for øyeblikket "aktiv" - det vil si overgang, overgang eller sitte på toppen:
hvis (activeBack == null)
Resten av all koden i bounceOver () funksjonen vil bli skrevet inn i den if-setningen. Nå finner vi ut om objektet rullet over (den event.target) er et torg ved å sjekke om det er i squaresArray []:
hvis (squaresArray.indexOf (event.target)! = -1)
Forutsatt at det er, gjør vi virkelig kjøtt av funksjonen:
activeSquare = event.target som MovieClip; activeSquare.gotoAndStop (2); setChildIndex (activeSquare, numChildren - 1);
Først settes variabelen activeSquare å peke på torget i spørsmålet. Deretter stopper vi denne kvadratens animasjon på den andre rammen, som viser sitt "rollover" -bilde. Til slutt flytter vi sprite for å være på toppen av alt annet, ved å bruke setChildIndex ().
Vi beveger oss nå inn i bounceOut () funksjon. Denne gangen begynner vi med å sjekke om objektet som musen rulles ut, er den aktive tiden torget:
hvis (event.target == activeSquare)
Inne i hvis-blokk legger du til følgende kode; det pause kvadratens animasjon på den første rammen igjen, og deretter setter ActiveSquare tilbake til null slik at vi kan rulle over en annen:
activeSquare.gotoAndStop (1); activeSquare = null;
Så gå til bounceClick () funksjon. Denne funksjonen vil bli brukt til å starte alle overgangene. Start med å sjekke om det allerede er en aktiv tilbake:
hvis (activeBack == null)
Dette forhindrer brukeren i å klikke på et annet firkant under en overgang. Hvis det er en aktiv tilbake, bør et klikk angre dette, slik at vi kan klikke på et annet felt:
hvis (activeBack == null) else activeBack = null;
Forutsatt at det ikke er noen aktiv tilbake, legg igjen en omblokk igjen for å sjekke om objektet klikket var en firkant:
hvis (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) else activeBack = null;
Hvis brukeren klikket på en firkant, må vi sette den tilsvarende tilbake som "aktiv" tilbake. Siden indeksen for hvert element i backsArray [] samsvarer med indeksen for hvert element i squaresArray, dette er enkelt:
hvis (activeBack == null) hvis (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] som MovieClip; else activeBack = null;
Nå trenger vi bare å flytte den aktive ryggen, slik at den er på toppen av alt annet:
hvis (activeBack == null) hvis (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] som MovieClip; setChildIndex (activeBack, numChildren - 1); else activeBack = null;
Dette er den siste funksjonen vi skal skape. La oss begynne med å legge til skaleringseffekten for når en firkant rulles over eller ut:
offentlig funksjon bounceUpdate (event: Event): void for hver (var firkant i firkanterArray) if (square == activeSquare) if (square.scaleX <= 1.5) square.scaleX +=0.05; square.scaleY +=0.05; else if(square.scaleX >= 1) square.scaleX - = 0.05; square.scaleY - = 0.05;
Her har vi opprettet en for-hver krets for å sykle gjennom hver firkant i arrayet og kontrollere om det er den aktive plassen. Hvis det er, skalerer vi det opp til det er større eller lik 1,5 ganger dets vanlige størrelse; Hvis det ikke er det, skaler vi det ned til det er tilbake med sin vanlige størrelse. (Teknisk kan denne koden tillate det å være svært litt mindre enn den vanlige størrelsen, men dette er ubrukelig i praksis.)
Nå er dette her hvor noen av dere vil gå dine egne veier; Hvis du lager Design 1, går du til trinn 7a, og hvis du lager Design 2, går du til trinn 7b.
Gratulerer med at du har valgt design 1! Denne designen er enkel og lett å følge - forutsatt at du har nøyaktig fire firkanter og rygg. Noe mer, og det blir et rot for å opprettholde.
Vi skal bruke en lang rekke nestede if-else uttalelser - veldig rotete, jeg vet. Men la meg fortelle deg begrunnelsen bak dette! Hver rygg har en annen startposisjon og overgangsretning. I et nøtteskall kan du ikke bruke en enkelt for-loop for å flytte alle MovieClips, med mindre du har en om setning for å sjekke hvilken rygg er i bevegelse, en annen for å angi bevegelsesaksen (x eller y) og en tredje for å sette hastigheten (positiv eller negativ). Ok, vi kan lagre all denne informasjonen i egenskapene til torgene eller noe sånt, men jeg tror dette er en tilnærming der "Keep It Simple, Dumb" gjelder.
hvis (activeBack == back0) hvis (back0.x < 0) back0.x += speed; else if(back0.x > -600) back0.x - = speed; hvis (activeBack == back1) hvis (back1.y < 0) back1.y += speed; else if(back1.y > -300) back1.y - = speed; hvis (activeBack == back2) if (back2.y> 0) back2.y - = speed; annet hvis (back2.y < 300) back2.y += speed; if(activeBack == back3) if(back3.x > 0) back3.x - = speed; annet hvis (back3.x < 600) back3.x += speed;
Koden er lett å forstå; det ser på hver rygg og beveger den på scenen eller utenfor scenen, i riktig retning, avhengig av om den er aktiv eller ikke.
Gratulerer med at du har valgt Design 2! Denne designen er langt mer fleksibel og gjør ting mye enklere når det gjelder å legge til flere rygg og bruke mindre kode. For dette designet vil vi bruke en annen for hver krets for å undersøke hver tilbake i backsArray:
for hver (var tilbake i backsArray) hvis (tilbake == activeBack) if (back.y> 0) back.y - = speed; annet hvis (back.y < 300) back.y += speed;
Nå skal dette være ganske enkelt å forstå. Den sykler gjennom ryggen og kontrollerer hver for å se om den er aktiv. Hvis det er, beveger koden den oppover på scenen, og stopper å flytte den når den er helt på (dvs. når den er på y = 0 eller høyere). Hvis ryggen ikke er aktiv, beveger koden den ned igjen til den når sin startposisjon.
Her er en utfordring: Gitt 16 firkanter (og 16 rygg), kan du gjøre det slik at firkantene 1, 5, 9 og 13 gjør tilsvarende overgangsovergang fra venstre, Firkanter 2, 6, 10 og 14 gjør dem overgang inn fra toppen, og så videre? Du må kombinere de to tilnærmingene, samt sjekke plasseringen av det aktive torget / ryggen i sitt utvalg.
Takk for at du tok deg tid til å lese gjennom denne opplæringen. Jeg håper du likte det ferdige produktet og lærte noe om å lage aktive, fleksible menyer!
