Share
Primele impresii sunt foarte importante pe un portal de jocuri flash; dacă jocul dvs. nu apucă jucătorul în primele câteva secunde, ei au multe alte jocuri de a alege. Deoarece meniul este primul punct al interfeței, tot ce vă puteți face pentru a vă face mai puțin plicticos va ajuta. În acest tutorial vom crea un meniu care încorporează adâncimea de schimbare, efecte de răsturnare netedă și două modele diferite de tranziție.
Acestea sunt cele două modele pe care le vom lucra:
Primul design va avea următoarele ecrane de tranziție din direcții diferite, în funcție de opțiunea pe care se face clic.
Cel de-al doilea design trece prin toate ecranele din partea de jos: o alegere mai flexibilă dacă aveți mai mult de patru opțiuni.
Există două lucruri principale care fac acest meniu "activ". Primul este efectul de rulare asupra butoanelor: indiferent de cât de mult s-au diminuat atunci când se rostogolesc, scade de la acea dimensiune (spre deosebire de un tween creat pe cronologie). Al doilea este că codul celui de-al doilea stil este proiectat să fie flexibil și ușor de prelungit pentru nevoile dvs..
Primul lucru pe care trebuie să-l creați este un nou fișier Flash (ActionScript 3.0). Setați lățimea la 600 de pixeli, înălțimea sa la 300 de pixeli și cadrele pe secundă la 30. Culoarea de fundal poate fi lăsată ca fiind albă.
Acum salvați fișierul; poți să-i numești orice vrei, dar am numit-o pe a mea menuBounce.fla.
În secțiunea următoare vom crea cele opt filme MovieClips utilizate în meniu. Pentru referință, iată o listă a tuturor culorilor folosite în tutorial:
Accentsconagua
0xffffff)0xe8a317)0xfbb917)0x1569c7)0x1389ff)0x347235)0x3e8f1b)0x990000)0xc10202)0x222222)În primul rând, vom crea "spatele" (clipurile video care vor rămâne în ecranele reale), dar înainte de a începe începeți să activați câteva funcții Flash foarte utile.
Faceți clic dreapta pe scenă și selectați Grid> Show Grid. Implicit, va crea o rețea 10px pe 10px în întreaga scenă. Apoi, dați clic dreapta pe scenă din nou și de această dată selectați Snapping> Snap to Grid.
Acum putem începe desenul! Selectați Instrumentul dreptunghi și desenați un dreptunghi de aur de 600x300px. Apoi selectați această umplere, faceți clic dreapta și alegeți Conversie în simbol. Scrieți numele filmului goldBack, setați tipul la MovieClip și înregistrarea în partea de sus-stânga.
Apoi faceți clic dreapta pe MovieClip și selectați Duplicate de trei ori pentru a face trei copii mai multe. Acum recolorează-le cu albastru deschis, verde deschis și roșu deschis. Apoi numiți-le blueback, Greenback și Redback, respectiv.
Pentru a termina spatele, trebuie să adăugăm un text în interiorul fiecărui clip: pe goldBack scrie "PLAY", pe blueBack scrie "INSTRUCTIONS", pe greenBack scrie "OPTIONS", iar pe redBack scrie "CREDITS". Odată ce ați scris textul, aș recomanda să-l rupeți în afară până devine umplut (acest lucru elimină necesitatea de a încorpora fonturile și face ca tranziția să pară mai ușoară). Spatele dvs. ar trebui să arate similar cu cel de mai jos:
Acum să începem pe patratele cu clickuri! Selectați instrumentul dreptunghi și desenați un pătrat de aur de 100x100 pixeli. Selectați umplerea, faceți clic dreapta și convertiți la simbol. Scrieți numele filmului goldSquare, setați tipul la MovieClip și înregistrarea în partea de sus-stânga. Acum este momentul să scrieți text pe pătrat, cu excepția acestui moment, în loc să rupeți textul în afară, lăsați-l deocamdată. Introduceți o cheie cheie și modificați culoarea de umplere în aur. Acum rupeți textul pe ambele cadre până când se umple.
Acum faceți clic dreapta pe MovieClip și alegeți Duplicate Symbol de trei ori. Apoi, repetați același proces de dinainte pentru celelalte trei culori, denumind MovieClips blueSquare, greenSquare și pătrat roșu, respectiv. Pătraturile dvs. ar trebui să pară asemănătoare celei de mai jos:
Începeți prin a șterge totul de pe scenă. Apoi mergeți la Insert> New Symbol. Numeste menuBounceMC, setați tipul la MovieClip, înregistrarea în partea stângă sus și exportați-o ca MenuBounceMC.
Acum trageți toate spatele din bibliotecă și poziționați-le în felul următor:
Dacă intenționați să folosiți designul cu o singură direcție, poziționați toate cele patru spate la una dintre pozițiile respective. Am folosit (0, 300).
Acum trageți toate patratele din bibliotecă în filmul MovieClip și poziționați-le în felul următor:
Ultimul lucru pe care trebuie să îl facem înainte de a începe codarea este atribuirea numelor instanțelor. Setați numele instanțelor pentru pătrate ca square0, square1, square2, square3, pornind de la stânga. Apoi setați numele instanțelor pentru spate în funcție de pătratul de aceeași culoare. Asa de goldBack ar obține numele instanței back0 deoarece goldSquare are numele instanței square0.
Acum că am terminat să creăm și să poziționăm filmul MovieClips, putem începe să stabilim cele două clase pe care le vom folosi.
Mergeți mai întâi la Proprietățile fișierului dvs. Flash și setați clasa la MenuBounce; apoi, creați un nou fișier ActionScript 3.0 și salvați-l ca MenuBounce.as.
Acum copiați următorul cod în el; Voi explica după:
pachet import flash.display.MovieClip; importul flash.events.Event; clasa publică MenuBounce extinde MovieClip public var menuBounceMC: MenuBounceMC = new MenuBounceMC (); funcția publică MenuBounce () addChild (menuBounceMC);
Aceasta este o clasă de documente de bază la care am adăugat un mic cod suplimentar care creează o instanță a MenuBounceMC și o adaugă la scenă.
Acum creați un nou fișier ActionScript 3.0 și salvați-l ca MenuBounceMC.as. Acum, copiați următorul cod în el pentru a putea să-l configurați.
pachet import flash.display.MovieClip; import flash.display.Sprite; importul flash.events.Event; importul flash.events.MouseEvent; clasa publică MenuBounceMC extinde MovieClip public var activeSquare: MovieClip; public var activBack: MovieClip; public var pătrateArray: Array = Array nou (); public var backsArray: Array = Array nou (); viteza publică var: Număr = 20; funcția publică MenuBounceMC ()
Fiecare variabilă are un scop specific:
activeSquare: Care pătrat este rulatactiveBack: Înapoi care a fost selectat pentru a vă deplasasquaresArray: Un matrice care conține toate filmările SquareClipsbacksArray: Un matrice care conține toate filmele MovieClips din spateviteză: Câți pixeli spatele este mutat de fiecare cadruToate aceste variabile au fost stabilite, cu excepția topSquare (care este setat în alte funcții) și matrice. Deci, trebuie să împingem toate filmările pe matrice. Adăugați următoarele linii în interiorul constructorului:
squaresArray = [pătrat0, pătrat1, pătrat2, pătrat3]; backsArray = [back0, back1, back2, back3];
Cu toate acestea, această metodă poate fi un pic obositoare dacă intenționați să utilizați un număr mare de MovieClips în meniu - spune 50. O alternativă ar fi să creați complet MovieClips prin cod și să le împingeți când le adăugați în meniu. Dar pentru scopul nostru de a folosi doar opt MovieClips funcționează bine.
Ultimul set de lucruri pe care trebuie să-l adăugăm pentru a finaliza configurarea este ascultătorii evenimentului nostru, care vor declanșa toate tranzițiile și efectele reduse. Adăugați aceste linii mai jos Apăsați() linii.
addEventListener (MouseEvent.MOUSE_OVER, bounceOver); addEventListener (MouseEvent.MOUSE_OUT, bounceOut); addEventListener (MouseEvent.CLICK, bounceClick); addEventListener (Event.ENTER_FRAME, bounceUpdate);
Să începem prin crearea celor trei funcții mai ușoare:
funcția publică bounceOver (eveniment: MouseEvent): void funcția publică bounceOut (eveniment: MouseEvent): void funcția publică bounceClick (eveniment: MouseEvent): void
În interiorul bounceOver () funcția începe prin adăugarea unei instrucțiuni if-pentru a vă asigura că nici o spate nu este în prezent "activă" - adică, trecerea în, tranziția sau ședința în partea de sus:
dacă (activeBack == null)
Restul din codul din bounceOver () funcția va fi scrisă în interiorul acelei instrucțiuni if-statement. Acum ne dăm seama dacă obiectul a fost rulat peste ( event.target) este un pătrat, verificând dacă este în squaresArray []:
dacă (squaresArray.indexOf (event.target)! = -1)
Presupunând că este, facem carne reală a funcției:
activeSquare = event.target ca MovieClip; activeSquare.gotoAndStop (2); setChildIndex (activeSquare, numChildren - 1);
Mai întâi setăm variabila activeSquare pentru a indica pătratul în cauză. După aceea, vom întrerupe animația acestui pătrat pe cel de-al doilea cadru, care afișează imaginea "rollover". În cele din urmă, mutăm sprite-ul pentru a fi deasupra tuturor celorlalte, folosind setChildIndex ().
Acum ne mutăm în bounceOut () funcţie. De data aceasta, începem să verificăm dacă obiectul din care se rulează mouse-ul este activul curent pătrat:
dacă (event.target ==activeSquare)
În interiorul grupului if-bloc adăugați următorul cod; acesta pauze din nou animația pătratului pe primul cadru și apoi activează înapoi la nul astfel încât să putem trece peste alta:
activeSquare.gotoAndStop (1); activeSquare = null;
Apoi du-te la bounceClick () funcţie. Această funcție va fi utilizată pentru inițierea tuturor tranzițiilor. Începeți prin a verifica dacă există deja un activ înapoi:
dacă (activeBack == null)
Acest lucru împiedică utilizatorul să facă clic pe un alt pătrat în timpul unei tranziții. Dacă există un back activ, atunci un clic trebuie să anuleze acest lucru, astfel încât să putem face clic pe un alt pătrat:
dacă (activeBack == null) altceva activeBack = null;
Presupunând că nu există înapoi în mod activ înapoi, adăugați din nou un bloc if-block pentru a verifica dacă obiectul pe care ați făcut clic a fost un pătrat:
dacă (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) altceva activeBack = null;
Dacă utilizatorul a făcut clic pe un pătrat, trebuie să setăm spatele corespunzător ca "activ" înapoi. Deoarece indicele fiecărui element în backsArray [] corespunde indexului fiecărui element din squaresArray, acest lucru este simplu:
dacă (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] ca MovieClip; altfel activeBack = null;
Acum trebuie doar să mutăm înapoi activ înapoi, astfel încât să fie pe deasupra tuturor celorlalte:
dacă (activeBack == null) if (squaresArray.indexOf (event.target)! = -1) activeBack = backsArray [squaresArray.indexOf (event.target)] ca MovieClip; setChildIndex (activBack, numChildren - 1); altfel activeBack = null;
Aceasta este ultima funcție pe care o vom crea. Să începem prin adăugarea efectului de scalare pentru momentul în care un pătrat este rulat peste sau în afară:
funcția publică bounceUpdate (eveniment: Eveniment): void pentru fiecare (var pătrat în squaresArray) 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;
Aici, am creat o buclă pentru fiecare ciclu prin fiecare pătrat din matrice și verificați dacă este pătratul activ în prezent. Dacă este, noi o diminuăm până când aceasta este mai mare sau egală cu 1,5 ori mai mare decât mărimea obișnuită; dacă nu este, diminuăm-o până când se întoarce la dimensiunea normală. (Din punct de vedere tehnic, acest cod ar putea să-i permită să fie foarte puțin mai mic decât dimensiunea sa obișnuită, însă acest lucru este practic imposibil de observat.)
Acum, în acest caz, unii dintre voi vor merge pe căile voastre separate; dacă creați Design 1 mergeți la Pasul 7a și dacă creați Design 2 mergeți la Pasul 7b.
Felicitări ați ales designul 1! Acest design este simplu și ușor de urmărit - presupunând că aveți exact patru pătrate și spate. Mai mult, și devine o mizerie de întreținut.
Vom folosi o lungă serie de declarații imbricate dacă altfel - foarte dezordonat, știu. Dar permiteți-mi să vă spun raționamentul din spatele acestei situații! Fiecare spate are o altă poziție de pornire și o direcție de tranziție diferită. Pe scurt, nu puteți folosi o singură buclă pentru a muta toate filmările cu excepția cazului în care aveți o instrucțiune if pentru a verifica care este spatele, o altă pentru a seta axa de mișcare (x sau y) și o treime pentru a seta viteza (pozitivă sau negativă). Bine, am putea stoca toate aceste informații în proprietățile patratelor sau ceva de genul acesta, dar cred că aceasta este o abordare în care se aplică "Keep it Simple, Stupid".
dacă (activeBack == back0) if (back0.x < 0) back0.x += speed; else if(back0.x > -600) back0.x - = viteza; dacă (activeBack == back1) if (back1.y < 0) back1.y += speed; else if(back1.y > -300) back1.y - = viteza; dacă (activeBack == back2) if (back2.y> 0) back2.y - = viteza; altceva if (back2.y < 300) back2.y += speed; if(activeBack == back3) if(back3.x > 0) back3.x - = viteza; altceva if (back3.x < 600) back3.x += speed;
Codul este ușor de înțeles; se uită la fiecare spate și o mută pe scenă sau pe scenă, în direcția corectă, în funcție de faptul dacă este sau nu activă.
Felicitări ați ales Design 2! Acest design este mult mai flexibil și face lucrurile mult mai ușor în ceea ce privește adăugarea mai multor spate și utilizarea unui cod mai puțin. Pentru acest design vom folosi o altă buclă pentru fiecare pentru a examina fiecare înapoi în backsArray:
pentru fiecare (var înapoi în backsArray) if (back == activeBack) if (back.y> 0) back.y - = viteza; altceva if (back.y < 300) back.y += speed;
Acum ar trebui să fie destul de ușor de înțeles. Ea cicluri prin spate și verifică fiecare pentru a vedea dacă este activ. În caz contrar, codul îl mută în sus pe scenă și se oprește din mișcare atunci când este complet pornit (de ex. y = 0 sau mai sus). Dacă partea din spate nu este activă, codul se mișcă înapoi până când ajunge la poziția inițială.
Iată o provocare: datează 16 pătrate (și 16 spate), puteți face ca Pătraturile 1, 5, 9 și 13 să facă trecerea corespunzătoare a spatelui din stânga, Pătraturile 2, 6, 10 și 14 le fac să treacă în sus, și așa mai departe? Va trebui să combinați cele două abordări, precum și să verificați poziția pătratului activ / spate în matrice.
Vă mulțumim că ați avut timp să citiți acest tutorial. Sper că v-ați bucurat de produsul finit și ați învățat ceva despre crearea unor meniuri active, flexibile!
