Share
Opriți utilizarea meniurilor statice! Majoritatea jucătorilor își bazează imediat impresia inițială a jocului Flash pe meniul pe care îl văd când o încarcă. Ieșiți din mulțime cu un meniu activ!
Acest tutorial a fost publicat pentru prima dată în decembrie 2011, dar de atunci a fost actualizat cu pași suplimentari care explică modul de a face codul mai flexibil!
Cuvântul "static" înseamnă în esență lipsă de schimbare. Majoritatea meniurilor pe care le vedem pe parcursul jocurilor web sunt lipsite de schimbare, pur și simplu apăsați pe Play și începe jocul. Meniurile de acest gen sunt suprautilizate și prezintă puțină creativitate sau inovație.
Pentru a face un meniu "activ", trebuie să provocăm continuu schimbarea. Deci, în acest tutorial, exact ceea ce vom realiza: un meniu care se schimbă continuu.
Primul lucru pe care trebuie să-l creați este un nou fișier Flash (ActionScript 3.0). Setați lățimea la 650 de pixeli, înălțimea sa la 350 de pixeli, iar 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 menuSlides.fla.
În secțiunea următoare vom crea cele nouă filme MovieClips utilizate în meniu. Pentru referință, iată o listă a tuturor culorilor folosite în tutorial:
Pentru început, vom crea diapozitivele folosite în tranziții, dar înainte de a începe începeți să folosim câteva funcții Flash foarte utile.
Faceți clic dreapta pe scenă și selectați Grilă> Afișare grilă. Implicit, va crea o rețea 10px pe 10px în întreaga scenă. Apoi, faceți clic dreapta pe scenă din nou și selectați de această dată Snapping> Snap to Grid.
Acum putem începe desenul! Selectați instrumentul Rectangle și desenați un dreptunghi de lumină de aur, lățime 650px și înălțime de 350px (puteți face clic pe Alt pentru a face acest lucru mai ușor). Acum modificați culoarea în Aur și trageți grupuri de trei pătrate, fiecare 20x20px, pentru a forma forma unui L în fiecare colț:
Selectați întreaga etapă, faceți clic dreapta și alegeți Conversia la simbol. Scrieți numele filmului goldSlide și asigurați-vă că tipul este MovieClip iar înregistrarea este la stânga.
Pentru a economisi timp și pentru a face lucrurile mult mai ușor, faceți clic dreapta pe goldSlide MovieClip din Bibliotecă și selectați Simbol duplicat de trei ori pentru a face încă trei copii. Schimbați culorile din noule filme MovieClips în albastru, verde și roșu, apoi redenumiți filmele MovieClips blueSlide, greenSlide și redSlide.
Înainte de a continua, trebuie să adăugăm câte text în fiecare diapozitiv. Pe scrierea de aurSlide JOACA, pe scrierea blueSlide INSTRUCȚIUNI, pe GreenSlide scrie OPȚIUNI și pe redSlide scrie CREDITE.
Acum că avem textul în loc, îl putem despărți prin clic dreapta pe el și selectând Despărțire de două ori; acest lucru va sparge textul până la o umplutură care va trece mai ușor. Plus ca un bonus nu va fi nevoie să încorporați un font dacă îl utilizați doar pentru meniu!
Acum că am desenat cele 4 diapozitive, ne putem concentra pe sideButton MovieClip care este utilizat pentru a muta diapozitivele spre stânga sau spre dreapta.
Mai întâi, desenați un dreptunghi de 30x60 px cu un singur clic (fără umplere), apoi desenați linii diagonale la 45 de grade de la colțul din dreapta sus și din colțul din dreapta jos până când se fixează împreună în mijlocul părții opuse. Acum aplicați o umplutură Mată Gri la triunghiul:
Apoi, ștergeți liniile, apoi faceți clic dreapta pe triunghi și selectați Conversia la simbol. Numeste sideButton, setați tipul la Buton și asigurați-vă că înregistrarea se află în colțul din stânga sus.
Acum introduceți 3 cadre cheie în cronologie făcând clic dreapta pe cronologie și selectând Introduceți Cadrul cheie. În rama Up, selectați umplerea triunghiului, accesați fila Windows și selectați Color. Schimbați Alpha la 50%. Pe Over Frame repeta același proces, dar de data aceasta setați alfa la 75%.
Acum putem începe pe cele patru butoane de cerc numerotate, pentru a sări direct la un diapozitiv special.
Pentru a începe să desenați un cerc alb de 30 de pixeli fără lovitură. Convertiți-l la un simbol, numiți-l cercul unu, și setați tipul acesteia la Buton și punctul său de înregistrare către centru. Introduceți trei cadre cheie așa cum am făcut înainte și apoi mergeți la rama Up.
Desenați un cerc negru de 25 de pixeli fără lovitură și centrați-l spre mijloc prin coordonate sau utilizând meniul Align (Aliniere). Apoi deselectați cercul negru, apoi reselectați-l și ștergeți-l. Acum ar trebui să rămână un inel alb. Acum, apucați instrumentul de text și puneți un alb "1" în centrul inelului. Apoi rupeți acest număr în afară, până când este umplut.
Mergeți la cadrul anterior și desenați un negru "1". Centrați-l și descompuneți-l până devine umplut. Acum, deselectați și reselectați umplerea, apoi ștergeți-o. Selectați totul pe cadru și copiați-l, apoi mergeți la Cadrul în jos, selectați totul pe acesta și apăsați ștergeți. Lipiți în ceea ce am copiat.
Acum creați încă trei filme MovieClips, urmând același proces, pentru numerele 2, 3 și 4.
Bine, suntem aproape la jumătate! Mai întâi trageți toate diapozitivele pe scenă și poziționați-le cu următoarele coordonate:
Acum glisați și fixați două copii ale lui SideButton. Prima copie trebuie poziționată la (10,145); înainte de a putea așeza cel de-al doilea exemplar, trebuie să-l întoarcem mai întâi!
Selectați a doua copie și apăsați pe Ctrl-T. Schimbați stânga-dreapta la -100% și lăsați-o în jos 100%. Acum deplasați a doua copie la (640,145).
În cele din urmă, trageți și plasați cele patru cercuri MovieClips și poziționați-le astfel:
Etapa dvs. ar trebui să arate astfel:
Diapozitivele albastru, verde și roșu sunt ascunse chiar în dreapta scenei. Acum, selectați totul pe scenă și convertiți-l la un simbol. Numeste menuSlidesMC, setați tipul la MovieClip și înregistrarea în colțul din stânga sus și exportați-l pentru ActionScript ca MenuSlidesMC.
Înainte de a termina, trebuie să dăm în interiorul fiecăruia filmul MovieClips menuSlidesMC un nume de instanță. Selectați fiecare diapozitiv în ordinea în care apar din stânga și denumiți-le slide1, slide2, slide3 și slide4 respectiv. Denumiți butoanele cercului unu, Două, Trei și patru, și, în final, numiți butoanele laterale stânga și dreapta.
Acum, când toate filmările noastre au fost create, putem începe să pregătim cele două clase pe care le vom folosi.
Mai întâi mergeți la Proprietățile fișierului dvs. Flash și setați clasa la menuSlides; apoi, creați un nou fișier ActionScript 3.0 și salvați-l ca menuSlides.as.
Acum copiați următorul cod în el; Voi explica după:
pachet import flash.display.MovieClip; importul flash.events.Event; importul flash.events.MouseEvent; public class menuSlides extinde MovieClip public var menSlidesMC: MenuSlidesMC = new MenuSlidesMC (); funcția publică funcțiaSlide () addChild (menuSlidesMC);
Destul de bază - este o clasă de documente, în care am importat filmările și evenimentele pe care le vom folosi. Apoi am creat o instanță de MenuSlidesMC, și a adăugat-o pe scenă.
Acum creați un nou fișier ActionScript 3.0 pentru menuSlidesMC instanță. Salvați-o ca MenuSlidesMC.as și copiați următorul cod în el:
pachet import flash.display.MovieClip; importul flash.events.Event; importul flash.events.MouseEvent; clasa publica MenuSlidesMC extinde MovieClip public var speed: Number = new Number (); public var activeSlide: Număr = număr nou (); funcția publică MenuSlidesMC () speed = 10; activeSlide = 1; addEventListener (MouseEvent.CLICK, slidesClick); addEventListener (Event.ENTER_FRAME, slidesMove);
La fel ca și ultima oară, am importat ceea ce vom avea nevoie, dar am creat două variabile de număr. Prima variabilă, viteză, este de fapt câte pixeli sunt mutați de fiecare cadru. (Notă: acest număr trebuie împărțit în mod egal în lățimea etapei dvs. pentru a oferi o tranziție lină). A doua variabilă, activeSlide, ne spune ce slide este în prezent setat pe ecran.
De asemenea, am adăugat doi ascultători de evenimente pentru funcțiile pe care le vom crea; unul dintre ele este chemat printr-un clic de mouse, iar celălalt este apelat la începutul fiecărui cadru.
Pentru a începe vom obține funcția de clic al mouse-ului din drum. Începeți prin a crea o funcție publică numită slidesClick ():
funcția publică slidesClick (eveniment: MouseEvent): void
În continuare vom crea câteva declarații if-cu privire la event.target.name. Practic, această proprietate stochează numele obiectului care a fost vizat prin clicul mouse-ului. Putem folosi aceasta pentru a verifica care buton este apăsat:
dacă (event.target.name == "stânga") if (activeSlide> 1) activeSlide- = 1; altfel dacă (event.target.name == "dreapta") if (activeSlide<4) activeSlide+=1; if(event.target.name == "one") activeSlide=1; else if(event.target.name == "two") activeSlide=2; if(event.target.name == "three") activeSlide=3; else if(event.target.name == "four") activeSlide=4;
Codul de mai sus se înscrie în slidesClick () funcţie. Primul set de declarații if sunt pentru butoanele din stânga și din dreapta; ele cresc sau scad valoarea lui activeSlide, dar niciodată nu permiteți ca valoarea să devină mai mică de 1 sau mai mare de 4 (deoarece avem doar patru diapozitive). Al doilea set de declarații if sunt pentru butoanele cercului; în loc să crească sau să scadă valoarea activeSlide au setat-o la valoarea selectată.
Acum să începem cu ENTER_FRAME funcția de manipulare:
funcție publică slidesMove (eveniment: Eveniment): void
Adaugă slidesMove () funcția de mai jos slidesClick () și vom începe să adăugăm un cod la acesta. Mai întâi, vom folosi a intrerupator pentru a verifica care slide trebuie să fie pe ecran, pe baza valorii activeSlide:
switch (activeSlide) caz 1: pauză; cazul 2: spargere; cazul 3: spargere; cazul 4: spargere;
Acum, în fiecare caz, vom crea un bloc if / else care va verifica poziția curentă x a diapozitivului și va muta toate din diapozitive fie stânga, dreapta, fie deloc, în funcție de locul în care se află momentan diapozitivul dorit.
Primul caz arata astfel:
în cazul în care (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = viteza; slide2.x- = viteza; slide3.x- = viteza; slide4.x- = viteza;
Acum trebuie doar să repetăm același proces pentru celelalte cazuri! După ce ați terminat, swtich-ul dvs. ar trebui să arate astfel:
comutator (activeSlide) caz 1: if (slide1.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide1.x>0) slide1.x- = viteza; slide2.x- = viteza; slide3.x- = viteza; slide4.x- = viteza; pauză; cazul 2: dacă (slide2.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide2.x>0) slide1.x- = viteza; slide2.x- = viteza; slide3.x- = viteza; slide4.x- = viteza; pauză; cazul 3: dacă (slide3.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide3.x>0) slide1.x- = viteza; slide2.x- = viteza; slide3.x- = viteza; slide4.x- = viteza; pauză; cazul 4: dacă (slide4.x<0) slide1.x+=speed; slide2.x+=speed; slide3.x+=speed; slide4.x+=speed; else if(slide4.x>0) slide1.x- = viteza; slide2.x- = viteza; slide3.x- = viteza; slide4.x- = viteza; pauză;
Si asta e! Suntem cu toții terminați cu codul și meniul ar trebui să funcționeze bine acum.
... Dar așteptați, dacă vrem să adăugăm mai multe diapozitive sau să luăm ceva?
În momentul de față, codul nostru nu este foarte flexibil datorită tuturor celor codați greu dacă declarații. Deci, să facem ceva îndrăzneț: ștergeți tot codul în funcția slidesMove (), deoarece nu mai avem nevoie de el și ștergem, de asemenea, instrucțiunile if pentru butoanele cercului, pe măsură ce vom optimiza și ele cele.
Acum, declarați o nouă variabilă (dedesubt viteză și activeSlides):
public var slidesArray: Array = Array nou ();
Prima variabilă, slidesArray, va fi o matrice care conține toate diapozitivele noastre, ceea ce ne va permite să le accesăm prin referirea unui element în matrice (pentru a putea folosi slidesArray [2] in loc de slide3).
Un lucru de reținut este faptul că primul element dintr-o matrice are un index de 0, așa că va trebui să facem câteva schimbări în numele instanțelor noastre.
Selectați fiecare diapozitiv în ordinea în care apar din stânga și denumiți-le slide0, slide1, slide2 și slide3, respectiv. Și pentru a ne ajuta să reducem numărul de linii de cod pe care le folosim, selectați fiecare buton cerc în ordinea în care acestea apar din stânga și denumiți-le circle0, CIRCLE1, CIRCLE2 și circle3, respectiv.
Dacă doriți să adăugați mai multe diapozitive și butoane, acum este momentul să faceți acest lucru. Doar poziționați diapozitivele suplimentare la sfârșitul rândului de diapozitive, apoi dați-le numele de instanțe în urma aceleiași comenzi. Apoi faceți același lucru pentru butoanele cercului.
Acum, dacă avem corect numele de instanțe, trebuie să adăugăm diapozitivele în matrice. Faceți acest lucru adăugând următorul cod constructorului dvs.:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5];
Acum, diapozitivele sunt în matrice și pot fi accesate prin indexul lor în matrice. De exemplu, slidesArray [0] este echivalent cu slide0 pentru că acesta este primul element din listă.
În continuare, în cadrul instrucțiunii "right" else-if, schimbați condiția la:
în cazul în care (activeSlide < slidesArray.length-1)
Valoarea a slidesArray.length este egal cu numărul de elemente din matrice, astfel încât această nouă condiție ne va permite acum să apăsăm butonul și să deplasăm diapozitivele atâta timp cât diapozitivul activ nu este diapozitivul final.
Acum, când se face clic pe un buton din cerc, trebuie să ne dăm seama care este (și la care se referă diapozitivul).
Creați o matrice pentru a ține toate butoanele cercului. Mai întâi, definiți-o, sub matricea diapozitivelor:
public var slidesArray: Array = Array nou (); public var cercuriArray: Array = Array nou ();
Apoi, adăugați butoanele cercului la matricea din constructor:
cercuriArray = [cerc0, cerc1, cerc2, cerc3, cerc4, cerc5];
Acum, treceți la slidesClick () funcția, sub întregul bloc if-else. Vom verifica dacă butonul pe care faceți clic este în matricea butoanelor cercului:
dacă (cercuriArray.indexOf (event.target)! = -1)
Funcția indexOf () a matricei verifică dacă un obiect se află în matrice; dacă nu este, se întoarce -1. Deci, verificăm dacă e vorba nu egal cu -1, care va verifica dacă este cazul este în matrice.
Presupunând că este, atunci Index de() funcția va returna indexul butonului în matricea butoanelor cercului - deci, dacă circle3 a fost făcută clic pe, circlesArray.indexOf (event.target) va fi egal cu 3. Asta inseamna ca putem doar seta activeSlide la 3 și am terminat!
dacă (cercuriArray.indexOf (event.target)! = -1) activeSlide = cercuriArray.indexOf (event.target);
Singurul lucru de făcut este să mutați toate diapozitivele. Începeți prin adăugarea aceleiași buclă ca înainte, în slidesMove () funcţie:
pentru (var i: int = 0; i < slidesArray.length; i++)
O declarație if-else trebuie adăugată acum; aceasta va folosi variabila activeSlide pentru a selecta un slide din matrice și a verifica unde este poziția lui x, la fel ca înainte.
dacă ([activeSlide] .x slidesArray<0) else if(slidesArray[activeSlide].x>0)
De cand activeSlide este un număr, slidesArray [activeSlide] se referă la un diapozitiv specific, deci slidesArray [activeSlide] .x este egal cu poziția x a acestui diapozitiv.
În primul caz vom adăuga a pentru pentru a muta toate clipurile video spre dreapta, iar în al doilea caz vom adăuga o pentru pentru a muta toate clipurile video în stânga.
Dreapta:
pentru (var j: int = 0; j < slidesArray.length; j++) slidesArray[j].x+=speed;
Stânga:
pentru (var k: int = 0; k < slidesArray.length; k++) slidesArray[k].x-=speed;
Dacă încercați acest lucru acum, veți observa că codul optimizat a condus la o interfață mult mai zipieră!
Dacă ați fi dorit să luați acest lucru și mai mult, puteți folosi a pentru pentru a poziționa diapozitivele și cercurile, în loc să fie nevoie să le trageți în Flash IDE. De exemplu, pentru a poziționa diapozitivele, am plasa mai întâi poziția slide0 în constructor:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0]; y = 0;
Apoi, vom trece prin toate celelalte diapozitive, începând de la slide1:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0]; y = 0; pentru (var i: int = 1; i < slidesArray.length; i++)
Putem da tuturor slide-urilor o pozitie y de 0:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0]; y = 0; pentru (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].y = 0;
... și apoi putem seta poziția x a fiecărui diapozitiv să fie de 620px la dreapta diapozitivului înainte:
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0]; y = 0; pentru (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + 620; slidesArray[i].y = 0;
Dacă diapozițiile dvs. nu au lățimea de 620 pixeli, puteți chiar să le detectați în mod automat!
slidesArray = [slide0, slide1, slide2, slide3, slide4, slide5]; slidesArray [0] .x = 0; slidesArray [0]; y = 0; pentru (var i: int = 1; i < slidesArray.length; i++) slidesArray[i].x = slidesArray[i-1].x + slidesArray[i-1].width; slidesArray[i].y = 0;
Puteți face același lucru cu butoanele cercului, dar vă voi lăsa să experimentați.
Lucrul grozav despre acest lucru este că puteți adăuga cât mai multe diapozitive pe care le doriți meniului; tot ce trebuie să faceți este să le adăugați la matrice și vor fi tratate prin acest cod.
(Puteți să eliminați și diapozitivele din matrice, dar acestea nu vor fi afectate de niciunul din coduri, deci probabil că este necesar să le repoziționați în IDE-ul Flash.)
Vă mulțumim că ați avut timp să citiți tutorialul, sper că a fost de ajutor și că ați învățat ceva despre meniurile de joc active.
Accentsconagua