Share
Urmați pașii direcți ai acestui Premium Tutorial pentru a crea un joc de Slot pentru divertisment în Flash. Rotiți roțile și vedeți ce ați putea câștiga!
Folosind instrumentele de desen Flash vom crea o interfață grafică foarte bună, care va fi alimentată de mai multe clase ActionScript 3.
Utilizatorul va putea să parieze sume diferite pentru a câștiga premiile.
Deschideți Flash și creați un document de 480 pixeli lățime și 320 pixeli înălțime. Setați rata cadrelor la 30fps.
Se va afișa o interfață închisă; acest lucru implică mai multe forme, butoane, bitmap-uri și multe altele.
Continuați cu pașii următori pentru a afla cum să creați această interfață grafică.
Creați un dreptunghi de 480x320 px și completați-l cu acest gradient radial: # 404040, # 080808.
Utilizați panoul Align (Cmd + K) pentru a centra în fază.
Să adăugăm un titlu la jocul nostru; în funcție de tema mașinii dvs. Slot, puteți schimba grafica pentru a se potrivi nevoilor dvs. Aici am folosit sigla Tuts +.
Utilizați Instrumentul primitiv dreptunghi (R) pentru a crea un dreptunghi de 320x160px. Schimbați raza de colț la 10 și completați-o cu acest gradient liniar: # F5DA95, # 967226, # 91723B.
Duplicați forma, schimbați dimensiunea acesteia la 316x156px și schimbați culoarea spre gradientul liniar negru utilizat anterior.
Acestea sunt grafica pe care o vom folosi ca elemente de slot machine - nu ezitați să utilizați orice grafică doriți în propriul joc!
Pentru a crea fundalul pentru role, utilizați instrumentul Rectangle (R) pentru a crea un dreptunghi de 98x146px și completați-l cu acest gradient: # 8F8459, # F8F4C7, # 8F8459.
Duplicați formele și aliniați-le în zona de sloturi.
Aranjați elementele grafice în ordinea dorită și convertiți-le în clipuri video. Vom folosi dreptunghiul fundal al tamburului ultimului pas pentru a crea efectul de umbră: schimbați culoarea neagră și modificați valorile alfa la 65, 15, 0.
Aceasta poate fi o parte complicată, deci asigurați-vă că descărcați fișierele sursă pentru a vă ajuta să ieșiți.
După cum puteți vedea, am folosit două logo-uri Nettuts + și două logo-uri Psdtuts +, dar numai câte unul dintre logo-urile Activetuts + și Vectortuts +. Acest lucru înseamnă că există o posibilitate mai mare de potrivire a trei logo-uri Nettuts + decât de potrivire a trei logo-uri Activetuts +.
Utilizați umbra ca strat de mască și linia de timp pentru a anima elementele în jos. Am folosit animația cadru cu cadru, mișcând elementele de 20 de pixeli în jos în fiecare cadru. Ai putea folosi un tween, dacă vrei.
Duplicați acest MoveClip și plasați-le în fundalul slotului corect. Utilizați următoarele nume de instanțe: items1, items2, items3.
Etichetele de timp vor fi folosite pentru a verifica o combinație câștigătoare. Creați un nou strat și etichetați fiecare cadru în care elementul nostru se află în centru.
Utilizați instrumentul Text (T) pentru a crea trei câmpuri text statice: credite, Pariu și Câștigătorul plătit.
Cu instrumentul Text selectat, creați trei câmpuri text dinamice, plasați-le deasupra celor statice și denumiți-le, de la stânga la dreapta: creditsT, betT și paidT.
Utilizați instrumentul Primitiv dreptunghi pentru a crea trei patrate 45x45px, modificați raza de colț la 4 și completați-l cu: # CD0202, # 910202. Adăugați fiecare etichetă de text corespunzătoare, convertiți fiecare la un buton și denumiți-le: payTabB, betMaxB și betOneB.
Butonul Spin este puțin mai mare decât celelalte și are și o altă culoare.
Utilizați același proces al celorlalte butoane, dar schimbați dimensiunea la 50x50 px și culoarea la: # 5DA012, 3C670C.
Denumiți butonul spinB.
Vom folosi Sound Effects pentru a îmbunătăți sentimentul jocului, puteți găsi sunetele folosite în acest exemplu în Soungle.com utilizând cuvintele cheie jocuri mecanice.
Vom folosi un motor tween diferit de cel implicit inclus în Flash, ceea ce va crește performanța și va fi mai ușor de utilizat.
Puteți descărca TweenNano de pe site-ul său oficial.
Creați o nouă clasă ActionScript 3.0 (Cmd + N) și salvați-o ca Main.as în dosarul dvs. de clasă.
Creați structura claselor de bază pentru a începe să scrieți codul.
> pachet import flash.display.Sprite; clasa publică principală extinde Sprite funcția publică Main (): void // code constructor
Acestea sunt clasele pe care trebuie să le importăm pentru ca clasa noastră să funcționeze; import directiva face ca clasele și pachetele definite extern să fie disponibile pentru codul dvs..
import flash.display.Sprite; importul flash.events.MouseEvent; import com.greensock.TweenNano; import flash.utils.Timer; import flash.events.TimerEvent;
Acestea sunt variabilele pe care le vom folosi, citiți comentariile din cod pentru a afla mai multe despre ele.
var payTable: PayTable; // O instanță a tabelului de plată var timer: Timer; // Obiect temporizator care controlează durata rotirilor / * Sunete * / buton varS: ButtonsS = Butoane noi (); var spinS: SpinS = SpinS nou (); var stopS: StopS = Stopuri noi (); var winS: WinS = WinS nou ();
Constructorul este o funcție care rulează atunci când un obiect este creat dintr-o clasă, acest cod este primul care se execută când faceți o instanță a unui obiect sau executați atunci când SWF se încarcă mai întâi dacă aparține clasei de documente.
Se numește funcțiile necesare pentru a începe jocul. Verificați aceste funcții în pașii următori.
funcția publică finală Main (): void // Code
Împiedicați filmările să cedeze imediat.
items1.stop (); items2.stop (); items3.stop ();
Aici folosim o functie personalizata pentru a adauga mouse-ul pe butoanele noastre; această funcție va fi creată mai târziu în clasă.
buttonListeners ( 'add');
Apoi vom folosi o altă funcție personalizată care va împiedica apariția evenimentelor mouse-ului de pe butonul Spin.
Accentsconagua
butoane ("dezactivare", spinB); Această funcție adaugă sau elimină un eveniment MouseUp la butoane în funcție de parametrul specificat.
butonul funcției finale private Listeners (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); altfel spinB.removeEventListener (MouseEvent.MOUSE_UP, spinBtn); betMaxB.removeEventListener (MouseEvent.MOUSE_UP, betMax); betOneB.removeEventListener (MouseEvent.MOUSE_UP, betOne); payTabB.removeEventListener (MouseEvent.MOUSE_UP, payTableHandler);
Următoarea funcție utilizează parametrii săi între valoarea alfa a butonului specificat și dezactiva / activa interacțiunile mouse-ului.
butoane funcționale finale private (acțiune: String,? btns): void var btnsLen: int = btns.length; dacă (action == 'enable') pentru (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);
Butonul Bet Max este gestionat de această funcție.
Redă sunetul de spin, schimba câmpurile de text pentru credite, și apelează funcția de rotire.
funcția finală privată betMax (e: MouseEvent): void / * Sound * / spinS.play (); / * Spin dacă suficiente credite * / dacă (int (creditsT.text)> = 3) betT.text = '3'; butoane ("dezactivare", spinB, betOneB, betMaxB, payTabB); a invarti(); Butonul Bet One este gestionat de această funcție.
Mărește pariul cu unul (dacă este posibil) și redă sunetul corespunzător butonului. Acesta permite, de asemenea, butonul Spin.
funcția finală privată betOne (e: MouseEvent): void / * Sound * / buttonS.play (); / * Bet One * / dacă (betT.text == '3') betT.text = '1'; altceva betT.text = String (int (betT.text) + 1); / * Activați butonul Spin * / dacă (spinB.enabled == false) butoane ('enable', spinB); Butonul Pay Table este gestionat de această funcție.
Verifică dacă masa de plată este deja pe scenă și, dacă nu, folosește un Tween pentru ao afișa și pentru ao centra. Celelalte butoane sunt dezactivate în timp ce se afișează tabelul.
funcția finală privată payTableHandler (e: MouseEvent): void / * Sound * / buttonS.play (); / * Afișează dacă nu în stadiu * / 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); / * Dezactivați butoanele * / butoanele ("dezactivare", spinB, betMaxB, betOneB); altceva TweenNano.to (payTable, 0.2, scaleX: 0.1, scaleY: 0.1, alpha: 0, onComplete: function destroyPT (): void removeChild (payTable); payTable = null); / * Activați butoanele * / dacă (betT.text! = '0') butoane ('enable', spinB); butoane ('enable', betMaxB, betOneB); Butonul Spin este manipulat de această funcție.
Redă sunetul de spin și funcția Spin dacă creditele sunt corecte.
funcția finală privată finală spinBtn (e: MouseEvent): void / * Sound * / spinS.play (); / * Spin dacă suficiente credite * / dacă (int (creditsT.text)> = int (betT.text)) spin (); butoane ("dezactivare", spinB, betOneB, betMaxB, payTabB); Una dintre funcțiile esențiale ale jocului, funcția de rotire se ocupă de câștigarea și cheltuirea creditelor, rotirea elementelor în sloturi și folosirea unui cronometru pentru a le opri. Citiți pașii următori pentru o vizualizare mai detaliată a acestor acțiuni.
funcția finală privată finală (): void // Code
Acest lucru verifică dacă creditele sunt disponibile pentru a adăuga din paidT textfield și își resetează valoarea la 0.
creditsT.text = String (int (crediteT.text) + int (paidT.text)); paidT.text = '0';
Aceasta scade creditele utilizate în ultimul pariu.
creditsT.text = String (int (creditsT.text) - int (betT.text));
Această funcție animă rolele, pentru a face ca elementele să pară să se rotească.
items1.play (); items2.play (); items3.play ();
Acest cronometru determină (la întâmplare) timpul pentru a permite rotirea obiectelor cu role, este diferit la fiecare rotire.
timer = timer nou (Math.floor (Math.random () * 1000) + 500); timer.addEventListener (TimerEvent.TIMER, handleTimer); timer.start ();
Această funcție este executată de fiecare dată când temporizatorul își termină numărul.
Aceasta oprește slotul curent de la rotire și redă sunetul de oprire. Când toate elementele sunt oprite, se șterge temporizatorul și se apelează checkWin () funcţie.
funcția privată handleTimer (e: TimerEvent): void if (timer.currentCount == 1) stopItem (items1.currentFrame, items1); / * Sunet * / stopS.play (); dacă (timer.currentCount == 2) stopItem (items2.currentFrame, items2); / * Sunet * / stopS.play (); dacă (timer.currentCount == 3) stopItem (items3.currentFrame, items3); / * Sunet * / stopS.play (); / * Oprire temporizator * / timer.stop (); timer.removeEventListener (TimerEvent.TIMER, handleTimer); timer = null; / * Activați butoanele * / butoane ('enable', spinB, betOneB, betMaxB, payTabB); / * Verificați elementele pentru o combinație câștigătoare * / checkWin (); Deoarece cronometrul se poate termina într-un cadru în care elementul curent nu se află în centru, verificăm cadrul curent al filmului și utilizați gotoAndStop () pentru a afișa elementul cel mai apropiat.
funcția finală privată finală 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();
Este posibil să fie necesar să modificați acest cod pentru a se potrivi cu simbolurile și animația de spin pe care ați ales-o.
Această funcție verifică dacă cele trei elemente sunt egale, dacă este adevărată, redă sunetul câștigător și adaugă suma corespunzătoare la plătit textfield.
funcția finală privată checkWin (): void if (items1.currentLabel == items2.currentLabel && items2.currentLabel == items3.currentLabel) / * Sound * / winS.play (); / * Obțineți eticheta curentă pentru a determina valoarea elementului * / var lbl: String = items1.currentLabel; dacă lbl == 'a') paidT.text = String (100 * int (betT.text)); altfel dacă (lbl == 'v') paidT.text = String (50 * int (betT.text)); altfel dacă (lbl == 'p') paidT.text = String (25 * int (betT.text)); altfel dacă (lbl == 'n') paidT.text = String (10 * int (betT.text));
Folosim clasa de documente în acest tutorial, dacă nu știți cum să o utilizați sau sunteți puțin confuz, vă rugăm să citiți acest QuickTip.
Setați clasa de documente FLA la Principal.
Suntem gata să testăm filmul și să vedem dacă totul funcționează așa cum era de așteptat, nu uitați să încercați toate butoanele!
Rezultatul final este un joc personalizabil și distractiv; încercați să adăugați grafice personalizate și premii! De asemenea, puteți schimba probabilitatea de a face mai ușor sau mai greu să câștigați.
Sper că ți-a plăcut acest tutorial, mulțumesc pentru lectură!
