Share
Følg straight-forward trinnene i denne Premium Tutorial for å lage et underholdende spilleautomat i Flash. Spinn hjulene og se hva du kan vinne!
Ved hjelp av Flash-tegneverktøyene oppretter vi et flott grafisk grensesnitt som vil bli drevet av flere ActionScript 3-klasser.
Brukeren vil kunne satse på forskjellige beløp for å vinne premiene.
Åpne Flash og opprett et 480 piksler bredt, 320 piksler høyt dokument. Still inn bildefrekvensen til 30fps.
Et mørkt grensesnitt vil bli vist; Dette innebærer flere former, knapper, bitmaps og mer.
Fortsett til de neste trinnene for å lære hvordan du oppretter denne GUI.
Lag et 480x320 px rektangel og fyll det med denne radiale gradienten: # 404040, # 080808.
Bruk Justeringspanelet (Cmd + K) for å sentrere det i scenen.
La oss legge til en tittel på spillet vårt; Avhengig av ditt Slot Machine-tema kan du endre grafikken slik at den passer til dine behov. Her har jeg brukt Tuts + -logoen.
Bruk Rectangle Primitive Tool (R) for å lage et 320x160px rektangel. Endre hjørneradius til 10 og fyll den med denne lineære gradienten: # F5DA95, # 967226, # 91723B.
Dupliser formen, endre størrelsen til 316x156px og endre fargen til den svarte lineære gradienten vi brukte før.
Dette er grafikken vi skal bruke som spilleautomat - gjerne bruke hvilken som helst grafikk du vil ha i ditt eget spill!
For å lage bakgrunnen for hjulene, bruk Rectangle Tool (R) for å lage et 98x146px rektangel og fyll det med denne gradienten: # 8F8459, # F8F4C7, # 8F8459.
Dupliser figurene og juster dem i sporområdet.
Ordne elementgrafikkene i ønsket rekkefølge og konverter dem til filmklipp. Vi bruker reelbakgrunnsrektangel i det siste trinnet for å skape skyggeeffekten: endre fargen til svart og endre alfaverdiene til 65, 15, 0.
Dette kan være en vanskelig del, så vær sikker på å laste ned kildefilene for å hjelpe deg.
Som du kan se, har jeg brukt to Nettuts + -logoer og to Psdtuts + -logoer, men bare en av Activetuts + og Vectortuts + -logoer. Dette betyr at det er en større mulighet for å matche tre Nettuts + -logoer enn det er tilsvarende tre Activetuts + -logoer.
Bruk skyggen som et maskelag, og tidslinjen for å animere elementene nedover. Jeg brukte ramme for ramme animasjon flytte elementene 20 px ned i hver ramme. Du kan bruke en tween, hvis du ville.
Dupliser denne MoveClip og plasser dem i den riktige sporbakgrunnen. Bruk følgende forekomstnavn: items1, items2, items3.
Tidslinjemerker vil bli brukt til å sjekke om en vinnende kombinasjon. Lag et nytt lag og merk hver ramme der varen er i midten.
Bruk tekstverktøyet (T) til å lage tre statiske tekstfelt: studiepoeng, Vedde og Vinner Betalt.
Med tekstverktøyet fremdeles valgt, opprett tre dynamiske tekstfelt, plasser dem over de statiske og navn dem, fra venstre til høyre: kreditterT, betT og paidT.
Bruk rektangulære primitive verktøy til å lage tre 45x45px firkanter, endre hjørneradius til 4 og fyll det med: # CD0202, # 910202. Legg til den tilsvarende tekstetiketten for hver, konverter hver til en knapp, og navngi dem: payTabB, betMaxB og betOneB.
Spinnknappen er litt større som de andre og har også en annen farge.
Bruk samme prosess med de andre knappene, men endre størrelsen til 50x50px og fargen til: # 5DA012, 3C670C.
Navn på knappen spinB.
Vi bruker lydeffekter for å forbedre følelsen av spillet, du kan finne lydene som brukes i dette eksemplet i Soungle.com ved hjelp av søkeordene spilleautomat.
Vi bruker en annen tween-motor fra standard som er inkludert i Flash, dette vil øke ytelsen, og det er lettere å bruke.
Du kan laste ned TweenNano fra sitt offisielle nettsted.
Opprett en ny (Cmd + N) ActionScript 3.0-klasse og lagre den som Main.as i klassemappen din.
Lag din grunnklassestruktur for å begynne å skrive koden din.
> pakke import flash.display.Sprite; offentlig klasse Hoved utvider Sprite offentlig funksjon Main (): void // constructor code
Dette er klassene vi må importere for vår klasse for å jobbe; de importere Direktivet gir eksternt definerte klasser og pakker tilgjengelig for koden din.
importer flash.display.Sprite; importer flash.events.MouseEvent; importer com.greensock.TweenNano; importere flash.utils.Timer; importer flash.events.TimerEvent;
Dette er variablene vi skal bruke, les kommentarene i koden for å få vite mer om dem.
var payTable: PayTable; // En Pay Table forekomst var timer: Timer; // Timer objekt som styrer spinnens varighet / * Lyder * / var-knapper: ButtonS = new ButtonS (); var spinS: SpinS = new SpinS (); var stopS: StopS = new StopS (); var winS: WinS = new WinS ();
Konstruktøren er en funksjon som kjører når et objekt er opprettet fra en klasse, denne koden er den første som skal utføres når du lager en forekomst av et objekt, eller kjører når SWF først laster om det tilhører dokumentet klassen.
Det kaller de nødvendige funksjonene for å starte spillet. Kontroller disse funksjonene i de neste trinnene.
offentlig sluttfunksjon Main (): void // Code
Forhindre rullene MovieClips fra å spille umiddelbart.
items1.stop (); items2.stop (); items3.stop ();
Her bruker vi en egendefinert funksjon for å legge til Mus eventene til våre knapper; Denne funksjonen vil bli opprettet senere i klassen.
buttonListeners ( 'legg');
Deretter bruker vi en annen egendefinert funksjon som forhindrer musens hendelser på spinnknappen.
Accentsconagua
knapper ('deaktiver', spinB); Denne funksjonen legger til eller fjerner en MouseUp-hendelse på knappene avhengig av den angitte parameteren.
privat endelig funksjonsknappListerers (e: String): void if (e == 'add') spinB.addEventListener (MouseEvent.MOUSE_UP, spinBtn); betMaxB.addEventListener (MouseEvent.MOUSE_UP, betMax); betOneB.addEventListener (MouseEvent.MOUSE_UP, betOne); payTabB.addEventListener (MouseEvent.MOUSE_UP, payTableHandler); ellers spinB.removeEventListener (MouseEvent.MOUSE_UP, spinBtn); betMaxB.removeEventListener (MouseEvent.MOUSE_UP, betMax); betOneB.removeEventListener (MouseEvent.MOUSE_UP, betOne); payTabB.removeEventListener (MouseEvent.MOUSE_UP, payTableHandler);
Følgende funksjon bruker parametrene til å tween alfaverdien til den angitte knappen og deaktivere / aktivere musekoblinger.
private endelige funksjonsknapper (handling: String, btns): void var btnsLen: int = btns.length; hvis (handling == 'enable') for (var i: int = 0; i < btnsLen; i++) btns[i].enabled = true; btns[i].mouseEnabled = true; TweenNano.to(btns[i], 0.5, alpha:1); else for(var j:int = 0; j < btnsLen; j++) btns[j].enabled = false; btns[j].mouseEnabled = false; TweenNano.to(btns[j], 0.5, alpha:0.2);
Bet Max-knappen håndteres av denne funksjonen.
Den spiller spinn lyden, endrer tekstfeltene ", og kaller spinnfunksjonen.
privat endelig funksjon betMax (e: MouseEvent): void / * Sound * / spinS.play (); / * Spin hvis nok kreditter * / hvis (int (creditsT.text)> = 3) betT.text = '3'; knapper ('deaktiver', spinB, betOneB, betMaxB, payTabB); snurre rundt(); Bet One-knappen håndteres av denne funksjonen.
Det øker innsatsen ved en (hvis mulig) og spiller den tilhørende knappelyden. Det gjør også Spinn-knappen mulig.
privat endelig funksjon betOne (e: MouseEvent): void / * Sound * / buttonS.play (); / * Bet One * / if (betT.text == '3') betT.text = '1'; ellers betT.text = String (int (betT.text) + 1); / * Aktiver spinnknapp * / hvis (spinB.enabled == false) knapper ('aktiver', spinB); Betalbordstasten håndteres av denne funksjonen.
Det kontrollerer om lønttabellen allerede er på scenen, og hvis ikke, bruker den en Tween for å vise den og sentrere den. De andre knappene er deaktivert mens bordet vises.
privat endelig funksjon payTableHandler (e: MouseEvent): void / * Sound * / buttonSplay (); / * Vis om ikke i stadium * / hvis (payTable == null) payTable = new PayTable (); payTable.x = stage.stageWidth * 0,5; payTable.y = stage.stageHeight * 0,5; addChild (utbetalingstabellen); TweenNano.from (payTable, 0.2, scaleX: 0.4, scaleY: 0.4); / * Deaktiver knapper * / knapper ('deaktiver', spinB, betMaxB, betOneB); ellers TweenNano.to (payTable, 0.2, scaleX: 0.1, scaleY: 0.1, alpha: 0, onComplete: funksjon destroyPT (): void removeChild (payTable); payTable = null); / * Aktiver knapper * / hvis (betT.text! = '0') knapper ('aktiver', spinB); knapper ('aktiver', betMaxB, betOneB); Spinnknappen håndteres av denne funksjonen.
Den spiller spinnelyd og Spin-funksjonen hvis kreditten er riktig.
privat endelig funksjon spinBtn (e: MouseEvent): void / * Sound * / spinS.play (); / * Spin hvis nok kreditter * / hvis (int (creditsT.text)> = int (betT.text)) spin (); knapper ('deaktiver', spinB, betOneB, betMaxB, payTabB); En av kjernefunksjonene i spillet, håndterer spin-funksjonen vinnende og utgifter av kreditter, spinner elementene i sporene og bruker en timer for å stoppe dem. Les de neste trinnene for en mer detaljert visning av disse handlingene.
privat endelig funksjon spin (): void // Code
Dette kontrollerer om kreditter er tilgjengelige for å legge til fra paidT tekstfelt, og tilbakestiller verdien til 0.
creditsT.text = String (int (creditsT.text) + int (paidT.text)); paidT.text = '0';
Dette trekker ut kreditter som brukes i den siste innsatsen.
creditsT.text = String (int (creditsT.text) - int (betT.text));
Denne funksjonen animerer hjulene, slik at elementene ser ut til å snurre.
items1.play (); items2.play (); items3.play ();
Denne timeren bestemmer (tilfeldig) tiden for å la hjulspinnene snurre, det er forskjellig i hvert spinn.
Timer = Ny Timer (Math.floor (Math.random () * 1000) + 500); timer.addEventListener (TimerEvent.TIMER, handleTimer); timer.start ();
Denne funksjonen utføres hver gang timeren slutter å telle.
Den stopper nåværende spor fra spinn og spiller stopp lyden. Når alle elementene er stoppet, slettes timeren og kaller checkWin () funksjon.
privat funksjon handleTimer (e: TimerEvent): void if (timer.currentCount == 1) stopItem (items1.currentFrame, items1); / * Lyd * / stopS.play (); hvis (timer.currentCount == 2) stopItem (items2.currentFrame, items2); / * Lyd * / stopS.play (); hvis (timer.currentCount == 3) stopItem (items3.currentFrame, items3); / * Lyd * / stopS.play (); / * Stopp Timer * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, handleTimer); timer = null; / * Aktiver knapper * / knapper ('aktiver', spinB, betOneB, betMaxB, payTabB); / * Sjekk elementer for en vinnende kombinasjon * / checkWin (); Ettersom timeren kan ende i en ramme der det nåværende elementet ikke er i midten, kontrollerer vi den nåværende rammen av MovieClip og bruker gotoAndStop () for å vise nærmeste element.
privat endelig funksjon stopItem (cFrame: int, targetItem: MovieClip): void if (cFrame> = 2 && cFrame <= 5) targetItem.gotoAndStop(5); else if(cFrame >= 6 && cFrame <= 9) targetItem.gotoAndStop(9); else if(cFrame >= 10 && cFrame <= 13) targetItem.gotoAndStop(13); else if(cFrame >= 14 && cFrame <= 17) targetItem.gotoAndStop(17); else if(cFrame >= 18 && cFrame <= 21) targetItem.gotoAndStop(21); else if(cFrame >= 22 && cFrame <= 24) targetItem.gotoAndStop(1); else if(cFrame == 1) targetItem.stop();
Du må kanskje endre denne koden for å matche symbolene og spin animasjonen du valgte.
Denne funksjonen kontrollerer om de tre elementene er like, hvis de er ekte, spiller den vinnende lyden og legger til tilsvarende beløp til betalt tekstfelt.
privat endelig funksjon checkWin (): void if (items1.currentLabel == items2.currentLabel && items2.currentLabel == items3.currentLabel) / * Lyd * / winS.play (); / * Få nåværende etikett for å bestemme elementets verdi * / var lbl: String = items1.currentLabel; hvis (lbl == 'a') paidT.text = String (100 * int (betT.text)); ellers hvis (lbl == 'v') paidT.text = String (50 * int (betT.text)); ellers hvis (lbl == 'p') paidT.text = String (25 * int (betT.text)); ellers hvis (lbl == 'n') paidT.text = String (10 * int (betT.text));
Vi bruker dokumentklassen i denne opplæringen, hvis du ikke vet hvordan du bruker den eller er litt forvirret, vennligst les denne QuickTip.
Sett FLAs dokumentklasse til Hoved.
Vi er nå klar til å teste filmen og se om alt fungerer som forventet, ikke glem å prøve alle knappene!
Det endelige resultatet er et tilpassbart og underholdende spill; prøv å legge til din egendefinerte grafikk og priser! Du kan også gå på å endre sannsynligheten for å gjøre det lettere eller vanskeligere å vinne.
Jeg håper du likte denne opplæringen, takk for å lese!
