Jocurile Flash sunt foarte mult pâinea și untul culturii pop-nerd indie. Dacă luați în considerare felii de pâine meniul și jocul în sine, ce a mai rămas? Untul - substanța care face gustul pâinii este mult mai delicios. Și în termeni de joc Flash, ce se întâmplă între meniuri și jocuri sunt tranzițiile!
Rezultatul final al rezultatelor
Acesta este un model de exemplu al efectului de tranziție la care vom lucra:
Pasul 1: Configurarea
În mod obișnuit, trebuie să creați un nou fișier Flash (ActionScript 3.0). Setați lățimea sa la 400 de pixeli, înălțimea sa la 200 de pixeli și rata cadrelor la 30 de picături. Culoarea de fundal poate fi lăsată ca valoare implicită. Salvați fișierul; aceasta poate fi numită oricare doriți. Am numit-o pe a mea Transitions.fla.
Apoi trebuie să creați o clasă de documente. Accesați proprietățile fișierului dvs. Flash și setați clasa la tranziţii. Apoi creați clasa de documente:
pachet import flash.display. *; import flash.events. *; clasa publica Transitions extinde MovieClip static public var val: Number = new Number (); static public var transitionAttached: Boolean = boolean nou (); funcția publică Transitions () val = 0; transitionAttached = false;
Codul introduce doar două variabile. Primul va fi folosit pentru a selecta modelul efectului, iar cel de-al doilea va fi folosit pentru a verifica dacă nu există mai multe cazuri de efect asupra scenei.
Pasul 2: Crearea Spritei Square
Următorul pas este să creați sprite care va fi folosit ca fiecare pătrat pentru tranziție. Creați o nouă clasă și salvați-o ca Square.as:
pachet import flash.display. *; import flash.events. *; clasa publica publica extinde sprite public var squareShape: Shape = new Shape (); funcția publică Square ()
Noi folosim squareShape variabilă pentru a extrage forma noastră în interiorul Sprite. Desenați un dreptunghi 40 x 40 pixeli (care este dimensiunea completă) și setați scara la 0.1, o zecime din dimensiunile sale - acest lucru ne va ajuta în efect ulterior:
Creați o altă clasă nouă pentru efectul propriu-zis. Odată ce am terminat, adăugarea efectului pe scenă va fi foarte simplă:
pachet import flash.display. *; import flash.events. *; import flash.utils. *; clasa publică FadeEffect extinde Sprite public var currentFadeOut: int = 00; public var actualSquares: int = 01; public var pauseTime: int = 01; public var tempNum: int = 00; public var fading: String = "in"; public var fadeinTimer: Timer = nou Cronometru (100); public var fadeoutTimer: Timer = nou Cronometru (100); public var fadeArray: Array = [// top [[01,01,01,01,01,01,01,01,01,01], [02,02,02,02,02,02,02,02, 02,02], [03,03,03,03,03,03,03,03,03,03], [04,04,04,04,04,04,04,04,04,04], [ [05,05,05,05,05,05,05,05,05,05]], [ , 04,04,04,04,04,04,04,04,04], [03,03,03,03,03,03,03,03,03,03], [02,02,02,02 , 02,02,02,02,02,02], [01,01,01,01,01,01,01,01,01,01]]]; public var pătrateArray: Array = Array nou (); funcția publică FadeEffect ()
Probabil că te gândești "este o mulțime de variabile, de ce sunt folosite pentru asta?":
currentFadeOut - folosit ca un cec pentru tempNum pentru a vedea cât de multe pătrate trebuie să fie scalate
currentSquares - valoarea curentă indicând care pătrate ar trebui atașate și / sau scalate
pauseTime - un număr întreg simplu pentru a da o pauză ușoară între tranziții și eliminarea însăși
tempNum - folosit pentru a verifica ce numere din matrice trebuie scalate
decolorare - un șir pentru a verifica dacă tranziția scade sau scade
fadeinTimer - un cronometru care este chemat să înceapă diminuarea valorii curente a curenților
fadeoutTimer - un alt cronometru care este chemat să înceapă scăderea valorii curente a curenților
fadeArray - matricea 3D care conține toate modelele de tranziție
squaresArray - o matrice pentru spiritele Square
Efectul nostru va începe prin inițierea unui ascultător al evenimentului fadeInTimer și începerea acesteia. De asemenea, trebuie să adăugăm un ascultător de evenimente care să scadă continuu toate spritele la dimensiunile lor corecte. Utilizați următorul cod în interiorul constructorului:
Următorul pas este să creați cei doi ascultători de evenimente. Vom începe cu cele mai ușoare dintre cele două enterFrame funcţie:
funcția publică enterFrame (e: Event) pentru fiecare (var s1 în squaresArray) tempNum + = 1; dacă (fading == "in") if (s1.scaleX<=1) s1.scaleX+=0.05; s1.scaleY+=0.05; else if(fading=="out") if(tempNum<=currentFadeOut) if(s1.scaleX>= 0,1) s1.scaleX- = 0,05; s1.scaleY- = 0,05; altfel if (s1.visible == true) s1.visible = false; tempNum = 00;
S-ar putea să nu aibă sens chiar acum, dar acest lucru ar trebui să ajute la aruncarea unei lumini.
s1 este numele instanței care va fi dat Squares când le vom crea într-o funcție ulterioară.
Ele sunt adăugate la o matrice numită squaresArray pentru a urmări numărul de ele și efectuăm aceeași operație pentru fiecare obiect din matrice.
Apoi noi crestem tempNum (folosită în declarația if-fading) care este folosită pentru a scala saturațiile în ordinea în care au fost adăugate la matrice. Aceasta înseamnă că nu este dependent de model și va funcționa cu orice model.
Dupa aceea…
Verificăm dacă decolorare este adevărat sau nu.
Dacă este adevărat, aceasta scaldă toate pătratele până când ajung la dimensiunea lor completă (încep să scalare imediat după creșterea curenților).
Odată ce începe să se estompeze lucrurile devin puțin mai complicate; scalăm numai pătratele care sunt mai mici decât valoarea curentă de currentFadeOut (acestea sunt cele care ar trebui să fie de scalare, toate celelalte ar trebui să rămână la scară completă până la creșterea valorii).
După ce s-au diminuat la o zecime din mărime, facem acele pătrate invizibile (ele vor fi șterse cu efectul întreg).
Este timpul să adăugați ascultătorul evenimentului pentru cronometru:
funcția publică fadeSquaresInTimer (e: Eveniment) fadeSquaresIn (fadeArray [Transitions.val]); currentSquares + = 1;
La prima vedere pare mai puțin complicat, dar ar trebui să observați că sunăm o funcție cu fadeArray ca parametru. Ce model este selectat din matrice depinde de ceea ce ați setat Val egală cu cea din clasa Transitions; chiar acum ar trebui să folosească primul model pentru că Val este setat la 0.
Următorul pas este să creați fadeSquaresIn funcție care este apelată de la cronometrul anterior:
funcția publică fadeSquaresIn (s: Array) pentru (var rând = 0; rând
Primul lucru pe care îl realizăm este iterarea prin modelul selectat. Începem la rândul 1, coloana 1 și ciclu în fiecare colomn până la sfârșitul rândului a fost atins. Apoi trecem pe rândul următor și repetăm procesul.
Următorul lucru de făcut este să comparați elementul curent din matrice cu valoarea lui currentSquares:
dacă int (s [col] [rând]) == curenteSquares)
Dacă ele sunt echivalente, adăugăm un pătrat, poziționează-l corespunzător și împingeți-l pe squaresArray astfel încât să poată fi scalată:
Aproape am terminat cu această funcție, trebuie să efectuăm o verificare atunci când există același număr de pătrate ca și elementele din model. Facem acest lucru adăugând următoarea declarație if-out în afara celor două for-uri:
dacă (pătrateArray.length == (s [0] .length * s.length)) fadeinTimer.stop (); addEventListener (Event.ENTER_FRAME, pauză între);
Explicativ - am oprit temporizatorul și am sunat un ascultător al evenimentului pentru întreruperea între estomparea și estomparea. Această funcție este utilizată pentru inițierea decolorării și poate fi de asemenea folosită pentru a provoca schimbări în joc:
funcția publică pauză Între (e: Eveniment) pauseTime + = 1; dacă (pauzăTime == 60) currentSquares = 01; decolorare = "out"; fadeoutTimer.addEventListener ("timer", fadeSquaresOutTimer); fadeoutTimer.start (); removeEventListener (Event.ENTER_FRAME, pauză între);
Nu vom petrece mult timp pe această funcție datorită simplității sale. Aici crestem valoarea lui pauseTime, și odată ce aceasta este egală cu 60 (adică au trecut două secunde), setăm valoarea currentSquares înapoi la 1 set decolorare la "Out" astfel încât pătratele să poată fi scalate înapoi, scoateți ascultătorul pauseBetween () ea însăși și adăugați un ascultător al evenimentului pentru această nouă funcție:
funcția publică fadeSquaresOutTimer (e: Eveniment) fadeSquaresOut (fadeArray [Transitions.val]); currentSquares + = 1;
Aceasta funcționează mult fadeSquaresInTimer (), deși de data aceasta numim funcția fadeSquaresOut ():
funcția publică fadeSquaresOut (s: Array) pentru (var rând = 0; rând
Mergem prin ciclu, dar de data aceasta, când găsim un element echivalent, creștem valoarea currentFadeOut astfel încât următorul articol din squaresArray poate începe să dispară.
Aproape terminat acum; tot ce rămâne este să opriți temporizatorul și să eliminați efectul. Adăugați această declarație if-out în afara celor două for-for-bucle:
dacă (currentFadeOut == (s [0] .length * s.length)) fadeoutTimer.stop (); pauseTime = 01; addEventListener (Event.ENTER_FRAME, delayedRemove);
Acest lucru verifică dacă toate articolele au început să dispară. Dacă da, atunci oprește temporizatorul, setează pauseTime înapoi la 1 și adaugă un ascultător de eveniment pentru funcție delayedRemove ():
funcția publică întârziatăRemove (e: Eveniment) pauseTime + = 1; dacă (pauzăTime == 30) Transitions.transitionAttached = false; removeEventListener (Event.ENTER_FRAME, delayedRemove); stage.removeChild (aceasta);
Ca și înainte de a crește valoarea pauseTime, și odată ce este egal cu 30 (1 secundă) am setat booleanul înapoi fals astfel încât efectul să poată fi adăugat din nou. Eliminăm acest ascultător al evenimentului și eliminăm acest efect din scenă.
Pasul 4: Adăugarea efectului
Acum vine partea ușoară. Adăugați următorul cod în interiorul constructorului de clase de documente pentru a adăuga efectul:
dacă (transitionAttached == false) transitionAttached = true; var f1: Sprite = noul FadeEffect; stage.addChild (f1);
Pasul 5: Crearea mai multor modele
Simțiți-vă liber să vă creați propriile modele! Este extrem de simplu, trebuie doar să creați o nouă matrice 2D în interiorul matricei 3D. Aici este matricea pe care am creat-o (înlocuiți-vă chiar matricea 3D cu ea). Acesta include 8 tranziții diferite:
Puteți schimba valoarea Transitions.val pentru a alege un alt model - de exemplu, dacă Val este 3, tranziția va curge din dreapta.
Concluzie
Vă mulțumim că ați avut timp să citiți acest tutorial. Dacă aveți întrebări, lăsați un comentariu mai jos. Și dacă doriți o provocare, încercați să faceți efectul să se estompeze cu un singur model și să se estompeze cu unul opus.
Share
Accentsconagua
