Share
Volg de eenvoudige stappen van deze Premium-zelfstudie om een leuk slotmachine te maken in Flash. Draai de wielen en kijk wat je kunt winnen!
Met behulp van de Flash-tekengereedschappen maken we een goed uitziende grafische interface die wordt aangedreven door verschillende ActionScript 3-klassen.
De gebruiker kan verschillende bedragen inzetten om de prijzen te winnen.
Open Flash en maak een 480 pixels breed, 320 pixels lang document. Stel de beeldsnelheid in op 30 fps.
Een donkere interface wordt getoond; dit omvat meerdere vormen, knoppen, bitmaps en meer.
Ga door naar de volgende stappen voor meer informatie over het maken van deze GUI.
Maak een rechthoek van 480x320 px en vul deze met dit radiale verloop: # 404040, # 080808.
Gebruik het uitlijnpaneel (Cmd + K) om het in het werkgebied te centreren.
Laten we een titel aan onze game toevoegen; afhankelijk van het thema van uw gokautomaat kunt u de grafische weergave aanpassen aan uw behoeften. Hier heb ik het Tuts + -logo gebruikt.
Gebruik het Primitieve gereedschap rechthoek (R) om een rechthoek van 320x160px te maken. Verander de hoekradius in 10 en vul het met deze lineaire gradiënt: # F5DA95, # 967226, # 91723B.
Dupliceer de vorm, verander de grootte in 316x156 px en verander de kleur in de zwarte lineaire gradiënt die we eerder hebben gebruikt.
Dit zijn de afbeeldingen die we gebruiken als gokautomaat-items - voel je vrij om elke gewenste grafische afbeelding in je eigen spel te gebruiken!
Als u de achtergrond voor de rollen wilt maken, gebruikt u het gereedschap Rechthoek (R) om een rechthoek van 98x146px te maken en deze met dit verloop te vullen: # 8F8459, # F8F4C7, # 8F8459.
Dupliceer de vormen en lijn ze uit in het gebied met slots.
Rangschik de afbeeldingen van de items in de door u gewenste volgorde en converteer ze naar filmclips. We gebruiken de achtergrondrol van de laatste stap om het schaduweffect te maken: verander de kleur in zwart en verander de alpha-waarden naar 65, 15, 0.
Dit kan een lastig onderdeel zijn dus zorg ervoor dat u de bronbestanden downloadt om u te helpen.
Zoals u ziet, heb ik twee Nettuts + logo's en twee Psdtuts + logo's gebruikt, maar slechts één elk van de Activetuts + en Vectortuts + logo's. Dit betekent dat er een grotere mogelijkheid is om drie Nettuts + logo's te matchen dan dat er drie Activetuts + -logo's bij elkaar passen.
Gebruik de schaduw als maskerlaag en de tijdlijn om de items naar beneden te animeren. Ik heb frame voor frame-animatie gebruikt om de items 20 px naar beneden te verplaatsen in elk frame. Je zou een tween kunnen gebruiken, als je dat zou willen.
Dupliceer deze MoveClip en plaats ze op de juiste slotachtergrond. Gebruik de volgende instantienamen: items1, items2, items3.
Tijdlijnlabels worden gebruikt om te controleren op een winnende combinatie. Maak een nieuwe laag en label elk frame waar ons item in het midden staat.
Gebruik het tekstgereedschap (T) om drie statische tekstvelden te maken: credits, Inzet en Winnaar betaald.
Terwijl het gereedschap Tekst nog steeds is geselecteerd, maakt u drie dynamische tekstvelden, plaatst u ze boven de statische en geeft u ze een naam, van links naar rechts: creditsT, betT en paidT.
Gebruik het Primitive Tool Rechthoek om drie 45x45px vierkanten te maken, verander de hoekradius in 4 en vul het met: # CD0202, # 910202. Voeg het bijbehorende tekstlabel toe aan elk label, converteer elk naar een knop en noem ze: payTabB, betMaxB en betOneB.
De knop Draai is iets groter dan de anderen en heeft ook een andere kleur.
Gebruik hetzelfde proces als de andere knoppen, maar verander de grootte naar 50x50px en de kleur naar: # 5DA012, 3C670C.
Geef de knop een naam spinB.
We gebruiken Geluidseffecten om het gevoel van het spel te verbeteren, je kunt de geluiden die in dit voorbeeld worden gebruikt in Soungle.com vinden met de sleutelwoorden gokmachine.
We zullen een andere tween-engine gebruiken van de standaard die is opgenomen in Flash, dit zal de prestaties verbeteren en het is gemakkelijker te gebruiken.
Je kunt TweenNano downloaden van de officiële website.
Maak een nieuwe ActionScript 3.0-klasse (Cmd + N) en sla deze op als Main.as in je klasmap.
Maak uw standaard klassenstructuur om te beginnen met het schrijven van uw code.
> pakket import flash.display.Sprite; public class Hoofd breidt uit openbare functie Main (): void // constructor code
Dit zijn de klassen die we moeten importeren voor onze klas om te werken; de importeren richtlijn maakt extern gedefinieerde klassen en pakketten beschikbaar voor uw code.
import flash.display.Sprite; import flash.events.MouseEvent; import com.greensock.TweenNano; import flash.utils.Timer; import flash.events.TimerEvent;
Dit zijn de variabelen die we zullen gebruiken, lees de opmerkingen in de code om meer over hen te weten.
var payTable: PayTable; // Een timer-var timer voor een Pay Table: Timer; // Timer-object dat de duur van de spins bepaalt / * Geluid * / var-knoppenS: KnoppenS = nieuwe Knoppen (); var spinS: SpinS = new SpinS (); var stopS: StopS = new StopS (); var winS: WinS = new WinS ();
De constructor is een functie die wordt uitgevoerd wanneer een object wordt gemaakt op basis van een klasse, deze code is de eerste die wordt uitgevoerd wanneer u een instantie van een object maakt of wordt uitgevoerd wanneer SWF voor het eerst wordt geladen als het deel uitmaakt van de documentklasse.
Het roept de nodige functies op om het spel te starten. Controleer die functies in de volgende stappen.
public final function Main (): void // Code
Voorkom dat de rollen MovieClips onmiddellijk worden afgespeeld.
items1.stop (); items2.stop (); items3.stop ();
Hier gebruiken we een aangepaste functie om de muisgebeurtenissen aan onze knoppen toe te voegen; deze functie wordt later in de klas gemaakt.
buttonListeners ( 'add');
Vervolgens gebruiken we een andere aangepaste functie die de Muisgebeurtenissen van de Draai-knop voorkomt.
Accentsconagua
knoppen ('uitschakelen', spinB); Met deze functie wordt een MouseUp-gebeurtenis toegevoegd of verwijderd aan de knoppen, afhankelijk van de opgegeven parameter.
private laatste functieknopListeners (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); else spinB.removeEventListener (MouseEvent.MOUSE_UP, spinBtn); betMaxB.removeEventListener (MouseEvent.MOUSE_UP, betMax); betOneB.removeEventListener (MouseEvent.MOUSE_UP, betOne); payTabB.removeEventListener (MouseEvent.MOUSE_UP, payTableHandler);
De volgende functie gebruikt de parameters om de alpha-waarde van de opgegeven knop te tweenen en om muisinteracties uit te schakelen / in te schakelen.
private laatste functieknoppen (actie: String ,? btns): void var btnsLen: int = btns.length; if (action == '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);
De knop Bet Max wordt afgehandeld door deze functie.
Het speelt het spingeluid af, verandert de tekstvelden voor credits en roept de draaifunctie aan.
private finale functie betMax (e: MouseEvent): void / * Sound * / spinS.play (); / * Draai als voldoende credits * / if (int (creditsT.text)> = 3) betT.text = '3'; knoppen ('uitschakelen', spinB, betOneB, betMaxB, payTabB); draai (); De knop Bet One wordt afgehandeld door deze functie.
Het verhoogt de inzet met één (indien mogelijk) en speelt het overeenkomstige knopgeluid af. Het maakt ook de Spin-knop mogelijk.
private finale functie betOne (e: MouseEvent): void / * Sound * / buttonS.play (); / * Bet One * / if (betT.text == '3') betT.text = '1'; else betT.text = String (int (betT.text) + 1); / * Spin-knop * / if inschakelen (spinB.enabled == false) buttons ('enable', spinB); De knop Betaaltabel wordt afgehandeld door deze functie.
Het controleert of de uitbetalingstabel al op het podium staat en, zoniet, het gebruikt een Tween om het weer te geven en te centreren. De andere knoppen zijn uitgeschakeld terwijl de tabel wordt weergegeven.
private finale functie payTableHandler (e: MouseEvent): void / * Sound * / buttonS.play (); / * Laat zien of niet in fase * / if (payTable == null) payTable = new PayTable (); payTable.x = stage.stageWidth * 0.5; payTable.y = stage.stageHeight * 0.5; addChild (PAYTABLE); TweenNano.from (payTable, 0.2, scaleX: 0.4, scaleY: 0.4); / * Schakel knoppen * / knoppen uit ('uitschakelen', spinB, betMaxB, betOneB); else TweenNano.to (payTable, 0.2, scaleX: 0.1, scaleY: 0.1, alpha: 0, onComplete: function destroyPT (): void removeChild (payTable); payTable = null); / * Knoppen inschakelen * / if (betT.text! = '0') buttons ('enable', spinB); knoppen ('enable', betMaxB, betOneB); De Spin-knop wordt afgehandeld door deze functie.
Het speelt het spingeluid en de spinfunctie af als de aftiteling correct is.
private finale functie spinBtn (e: MouseEvent): void / * Sound * / spinS.play (); / * Draai als voldoende credits * / if (int (creditsT.text)> = int (betT.text)) spin (); knoppen ('uitschakelen', spinB, betOneB, betMaxB, payTabB); Een van de kernfuncties van het spel is dat de draaifunctie het winnen en uitgeven van credits verwerkt, de items in de slots laat draaien en een timer gebruikt om ze te stoppen. Lees de volgende stappen voor een meer gedetailleerd overzicht van deze acties.
private finale functie spin (): void // Code
Hiermee wordt gecontroleerd of credits beschikbaar zijn om toe te voegen vanuit de paidT tekstveld en stelt de waarde opnieuw in op 0.
creditsT.text = String (int (creditsT.text) + int (paidT.text)); paidT.text = '0';
Hiermee worden de credits afgetrokken die bij de laatste inzet werden gebruikt.
creditsT.text = String (int (creditsT.text) - int (betT.text));
Deze functie animeert de rollen, zodat de items lijken te draaien.
items1.play (); items2.play (); items3.play ();
Deze timer bepaalt (willekeurig) de tijd om de rolitems te laten draaien, het is anders in elke draai.
timer = nieuwe Timer (Math.rand (Math.random () * 1000) + 500); timer.addEventListener (TimerEvent.TIMER, handleTimer); timer.start ();
Deze functie wordt elke keer uitgevoerd als de timer zijn telling beëindigt.
Het stopt het huidige slot van het draaien en speelt het stopgeluid. Wanneer alle items zijn gestopt, wist deze de timer en roept de checkWin () functie.
private function handleTimer (e: TimerEvent): void if (timer.currentCount == 1) stopItem (items1.currentFrame, items1); / * Geluid * / stopS.play (); if (timer.currentCount == 2) stopItem (items2.currentFrame, items2); / * Geluid * / stopS.play (); if (timer.currentCount == 3) stopItem (items3.currentFrame, items3); / * Geluid * / stopS.play (); / * Stop Timer * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, handleTimer); timer = null; / * Vrijgave knoppen * / knoppen ('enable', spinB, betOneB, betMaxB, payTabB); / * Controleer items voor een winnende combinatie * / checkwin (); Omdat de timer kan eindigen in een frame waar het huidige item niet in het midden staat, controleren we het huidige frame van de MovieClip en gebruiken gotoAndStop () om het dichtstbijzijnde item weer te geven.
private finale functie 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();
Mogelijk moet u deze code aanpassen aan de symbolen en draai-animatie die u hebt gekozen.
Deze functie controleert of de drie items gelijk zijn, of waar, het speelt het winnende geluid af en voegt het overeenkomstige bedrag toe aan de betaald tekstveld.
private final-functie checkWin (): void if (items1.currentLabel == items2.currentLabel && items2.currentLabel == items3.currentLabel) / * Sound * / winS.play (); / * Huidig label ophalen om de waarde van het item te bepalen * / var lbl: String = items1.currentLabel; if (lbl == 'a') paidT.text = String (100 * int (betT.text)); else if (lbl == 'v') paidT.text = String (50 * int (betT.text)); else if (lbl == 'p') paidT.text = String (25 * int (betT.text)); else if (lbl == 'n') paidT.text = String (10 * int (betT.text));
We maken in deze tutorial gebruik van de documentklasse, als je niet weet hoe je het moet gebruiken of een beetje in de war bent, lees dan deze QuickTip.
Stel de documentklasse van uw FLA in op Hoofd.
We zijn nu klaar om de film te testen en te kijken of alles werkt zoals verwacht, vergeet niet om alle knoppen te proberen!
Het eindresultaat is een aanpasbaar en vermakelijk spel; probeer je eigen afbeeldingen en prijzen toe te voegen! U kunt ook proberen de kans te veranderen om het gemakkelijker of moeilijker te maken om te winnen.
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
