Share
Navigarea este o parte esențială a site-ului dvs., dar este adesea o pista de construcție și întreținere. În acest tutorial voi descrie un mod rapid și solid de utilizare a competențelor de bază ActionScript, îmbinate cu un pic de creativitate, pentru a construi sisteme de navigație intuitive și ușor de utilizat. Bine, timpul să ne murdărim mâinile, bine ... transpirat poate ...
Acest tutorial demonstrează modul în care puteți preveni dublu-clic pe elementele din meniu, un articol mult mai trecut cu vederea care vă îmbunătățește experiența online. Veți învăța, de asemenea, cum să creați și să combinați mai multe matrice cu ușurință. Mai întâi vom proiecta scena, vom plasa cadrele cheie și etichetele, apoi la sfârșit vom adăuga ceva ActionScript pentru a-l face să vină în viață. De asemenea, vom învăța cum să creați tranziții de pagină care adaugă un pic mai puțin extra site-ului dvs..
În retrospectivă, acest tutorial este foarte simplu, dar acoperă o mulțime de pietre ascunse. Fi creativ, legați datele cu xml, modificați formele de mască, schimbați butoanele de tip rollover și bucurați-vă de ele.
Creați un nou document ActionScript 3: 600px X 400px, 30 de cadre pe secundă și utilizați ca fundal alb. În primul rând, mai întâi, permiteți crearea butonului. Desenați o casetă de text pe scenă și dați-i un nume de instanță "txt". Pentru aceasta, mergeți la panoul proprietăților (CTRL F3 / Window> properties> properties). Acum ascundeți-l într-un simbol (F8 / Modificare> Conversie la simbol), alegeți movieclip și asigurați-vă că punctul de înregistrare este în partea stângă sus. Denumiți instanța "button_text_mc".
Pe un nou strat, faceți un dreptunghi care se potrivește cu limitele textului dvs. movieclip. Aceasta va funcționa ca o zonă de lovitură pentru butonul dvs. Transformați-l într-un simbol.
Acum, selectați ambele straturi și convertiți-le într-un simbol. Denumiți această instanță "hitarea_mc". Asigurați-vă că ați pus valoarea alpha a "hitarea_mc" la zero în fereastra de proprietăți.
Acum să facem un suport pentru butoanele noastre. Desigur, puteți face acest lucru mai avansat făcând acest lucru o navigare dinamică completă cu xml sau php, dar de dragul acestui tutorial vom folosi
unele ActionScript pentru a numi elementele de meniu și a completa funcționalitatea.
Glisați o scenă a butonului "button_movieclip" pe scenă pentru fiecare element pe care doriți să-l navigați. Vom folosi 6 în acest caz. Acum dați fiecărui exemplu un nume unic; Am ales b1, b2, ... până la b6. Înainte vom înfășura totul într-un nou videoclip cu numele "menu_total".
Lucrul bun este că, dacă vrem să îl folosim ulterior, putem să glisăm clipul "menu_total" din bibliotecă și să îl folosim direct. Ar trebui să aveți acum un singur film pe scenă cu șase butoane pe care le vom transforma în navigația noastră.
Aah partea distractivă. Unele animații și trucuri. După cum vedeți în exemplu, meniul se dezvăluie numai atunci când cursorul mouse-ului se mișcă lângă caseta de meniu și linie. Pentru a realiza acest lucru, vom avea nevoie de o lovare invizibilă și de câteva cadre cheie pentru a trece la o altă stare de vedere.
Asigurați-vă că vă aflați în interiorul "menu_total" movieclip și creați 2 straturi noi în partea superioară a straturilor dvs.: unul numit "cod", altul numit "etichete". Selectați stratul "etichete" și adăugați un cadru cheie necompletat pe cadrul 1, 2, 10, 24, 25, 37. Acum denumiți a doua etichetă de ramă "ÎNCHISĂ", a zecea etichetă cadru "OVER".
Creați un strat nou sub stratul de butoane și numiți-l "hit_area", apoi luați movieclip "hitarea_mc" din bibliotecă și plasați-l în stânga butoanelor. În cele din urmă, redimensionați-o astfel încât utilizatorul să aibă spațiu pentru a muta mouse-ul. Asigurați-vă că cadrele cheie pentru "HOVER" ajung doar la cadrul 10.
Creați încă un alt strat și denumiți-l "menu_out", apoi mergeți la cadrul 10 și plasați o altă copie a "hit_area_mc" pe scenă. Dați-i un nume de instanță pentru "HOVEROUT_MC" și asigurați-vă că ambele aceste movieclips au o valoare alfa de 0. De asemenea, aceste două movieclips zone de lovire trebuie să se suprapună puțin. În caz contrar, Flash va pierde testul de lovire atunci când mutați mouse-ul spre butoane.
Bine, cu toate acestea, cadrele și etichetele dvs. ar trebui să arate astfel:
Acesta este modul în care zonele lovite pentru mouse ar trebui să arate:
Aceasta ar trebui să pară cea de-a doua lovire: începe pe cadrele cheie ale statului suprasolicitat.
Acum, să aruncăm o privire asupra mascării.
În întreaga perioadă a animației dvs. pentru stările rollOver / rollOut, faceți un movieclip gol și dați-i un nume de instanță a "loaderclip".
Acest pic este în întregime în funcție de tine și de imaginația ta, dar aici eo bază care ar trebui să te facă să începi. Creați un nou fișier ActionScript 3.0 cu aceleași dimensiuni ca și fișierul principal. Creați animația în / în pagină. Asigurați-vă că plasați o oprire (); comanda la starea finală a animației dvs. (locul unde va apărea conținutul real). Salvați fișierele ca pagină1.swf, pagina2, ... până la numărul de butoane create, în acest caz 6.
În exemplul meu foarte simplu am început cu o cutie mică, care se învârte de-a lungul liniei de timp de la alfa 0 la 100 în timp ce crește până la înălțimea finală.
Corect, acum ceva timp ActionScript. Mai întâi, puteți să vă bucurați de ceea ce se întâmplă cu meniul, oricum doriți. De exemplu, puteți utiliza animații mai avansate rollOver / rollOut.
De dragul acestui tutorial am ales un efect foarte simplu.
Va trebui să descărcați și să importați clasa open source creată de Grant Skinner numită "tweenmax". Asigurați-vă că descărcați versiunea AS3. De asemenea, vom folosi clasele construite pentru tranziții.
Cu stratul de cod selectat pe primul cadru, introduceți codul în pașii următori (voi explica fiecare rând în comentarii).
Notă: din acest punct, este foarte ușor să creați o nouă matrice cu toate acțiunile dvs. și să le conectați la handlerul onRelease, la fel cum vă conectați numele de butoane la cele reale. Cu un efort minim, puteți construi un sistem de navigație foarte puternic, care poate fi reutilizat mereu și repede. Ai putea construi o clasă pentru asta, dar asta nu este scopul acestui tutorial.
import gs.TweenMax; import fl.motion.easing. *; importuri de tranziții. *; import fl.transitions.easing. *;
// variabile pentru rollover buton, ieșire, stare lovit var viteză: Number = 0,3; var: Funcție = Sine.easeOut; var colourOver: String = "0x9BE07C"; varcolorOut: String = "0x000000"; = "0xFF0000"; // păstrați butoanele ca obiect pentru utilizare ulterioară sau referință. var btn: Obiect; var disabledBtn: Obiect; // Proporția curentăPage, următorulPage păstrează movieclips-urile pe care le vom încărca. var currentPage: MovieClip = null; var următoareaPage: MovieClip = null; // loader loader var: încărcător; // care se mută pentru a încărca var urlRequest: URLRequest; // numele meniului nostru movieclip.MENUNAME.txt.text = "MENU>";
Accentsconagua
// Mai întâi vom face referire la toate butoanele de pe butoanele de var: array = Array nou (b1, b2, b3, b4, b5, b6); // această matrice deține toate numele pe care le dorim să le folosim pentru butoanele noastre var button_name: Array = Array nou ("Acasă", "Despre noi", "Lucrare selectată", "Referințe", "Locuri de muncă", "Contact"); // această matrice stochează swf pe care vrem să le încărcăm var swf_array: Array = array nou (swf1.swf, swf2.swf, swf3.swf, swf4.swf, swf5.swf, swf6.swf "); pentru (var i: String în butoane) // atribuiți matricei button_name la butonul de butoane al butoanelor noastre [i] .button_txt.txt.text = nume_button [i]; // atribuiți swf pe care îl vom încărca pentru fiecare dintre butoanele butoanelor [i] .currentPage = swf_array [i]; // declarați că vom folosi butonul movieclip ca butoane [i] .buttonMode = true; // asigurați-vă că clipul button_txt nu reacționează la butoanele mouse-ului [i] .button_txt.mouseChildren = false; // adăugați ascultătorii pentru butoanele butoanelor noastre [i] .addEventListener (MouseEvent.CLICK, onCLICK); butoanele [i] .addEventListener (MouseEvent.MOUSE_OVER, onOVER); butoanele [i] .addEventListener (MouseEvent.MOUSE_OUT, onOUT);
funcția onCLICK (eveniment: MouseEvent): void // asigurați-vă că variabila țintă curentă este stocată, o vom adresa ulterior funcției de a dezactiva starea acesteia btn = event.currentTarget; disableBtn (btn); funcția onOVER (eveniment: MouseEvent): void btn = event.currentTarget; // aici am adăugat la culoarea pe care am atribuit-o mai devreme cu variabilele. TweenMax.to (btn, viteză, tint: colourOver, ușurință: mișcare); funcția onOUT (eveniment: MouseEvent): void btn = event.currentTarget; TweenMax.to (btn, viteză, tint: colorOut, ușurință: mișcare);;
Acesta este nucleul principal al proiectului nostru. Fiecare pas important este comentat în cod.
funcția disableBtn (btn: Object): void // dacă butonul este dezactivat vom asigura că fiecare eveniment este din nou în locul său, astfel încât îl putem folosi din nou dacă (disabledBtn) disabledBtn.buttonMode = true; disabledBtn.mouseEnabled = true; TweenMax.to (dezactivată, viteză, tint: colorOut, ușurință: mișcare); disabledBtn.addEventListener (MouseEvent.CLICK, onCLICK); disabledBtn.addEventListener (MouseEvent.MOUSE_OUT, onOUT); disabledBtn.addEventListener (MouseEvent.MOUSE_OVER, onOVER); TweenMax.to (btn, viteză, tint: colorRelease, ușurință: mișcare); // dezactivarea înseamnă că nu mai putem folosi, deci aici eliminăm toate funcțiile btn.buttonMode = false; btn.mouseEnabled = false; btn.removeEventListener (MouseEvent.CLICK, onCLICK); btn.removeEventListener (MouseEvent.MOUSE_OUT, onOUT); btn.removeEventListener (MouseEvent.MOUSE_OVER, onOVER); // asigurați-vă că butonul selectat curent este etichetat ca dezactivatBtn. disabledBtn = btn; // Creați un nou încărcător de instanță loader = Loader nou (); // adăugați variabila curentă la url request urlRequest = new URLRequest (btn.currentPage); // încărcați cererea url loader.load (urlRequest); // odată ce fișierul a fost încărcat vom declanșa funcția fileLoaded loader.contentLoaderInfo.addEventListener (Event.COMPLETE, isLoaded); function isLoaded (eveniment: Eveniment): void // Încărcătorul conține acum pagina pe care o vom afișa ulterior nextPage = event.target.content; // verifica daca exista o currentPage daca (currentPage! = null) // intre alfa la zero // asteapta ... de ce folosim 2 tweenclasses diferite? bine, doar pentru a vă arăta beneficiile și dezavantajele ambelor. Decideți-vă pentru propria dvs. pe care o considerați cea mai potrivită pentru proiectele dvs. var tweenAlpha: Tween = Tween nou (currentPage, "alpha", Regular.easeOut, 1, 0, .7, true); // în plus, puteți face currentPage să efectueze o animație suplimentară de ieșire. Asigurați-vă că jucați în jurul cu lungimea alpha dvs., astfel încât să nu disapear înainte de animație este terminat. curentPage.gotoAndPlay (31); // currentPageGone va fi sunat când tween este terminat tweenAlpha.addEventListener (TweenEvent.MOTION_FINISH, currentPageOut); altfel // dacă nu există nici o pagină curentă, vom declanșa funcția showNextPage. doNextPage (); functie doNextPage (): void // pozitia loaderclip ca nextPage nextPage.x = 238.0; nextPage.y = 0; // Tween alfa de la 0 la 1 var tweenAlpha: Tween = Tween nou (nextPage, "alpha", Regular.easeOut, 0, 1, .3, true); // Adăugați următoarea pagină în etapa addChild (nextPage); // Pagina următoare este acum pagina noastră actuală - confuză? Nu este. Înlocuim următoarea pagină cu cea curentă. currentPage = nextPage; // Odată ce animația este finalizată, vom declanșa această funcție a funcției curentPageOut (eveniment: Eveniment): void // Eliminați complet pagina curentă din stadiul removeChild (currentPage); // Să arătăm următoarea pagină doNextPage (); // nu plasați o comandă de oprire pentru că vom ateriza direct pe cadrul 2.
În cele din urmă, ne mișcăm un singur cadru. Asigurați-vă că vă aflați la cadrul 2 al menu_total movieclip.
// adăugați un eventlistener pentru mousemove HOVER.addEventListener (MouseEvent.MOUSE_MOVE, openmenu); (): void // atunci când valorile mouse-ului x și y se află în interiorul videoclipului movieclip numit "HOVER", hittest-ul este adevărat HOVER.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay "PESTE"); // asigurați-vă că eliminăm ascultătorul, astfel încât să nu putem declanșa acest lucru accidental. HOVER.removeEventListener (MouseEvent.MOUSE_MOVE, openmenu); Stop();
Acum deplasați-vă la cadrul 24 din meniul motion_total movieclip.
// adăugați un eventlistener pentru mousemove HOVER_OUT.addEventListener (MouseEvent.MOUSE_MOVE, menuout); Funcția menuout (e: Eveniment): void // atunci când valorile mouse-ului x și y sunt în interiorul videoclipului movieclip numit "HOVER_OUT", hittest este adevărat HOVER_OUT.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay "OUT"); // asigurați-vă că eliminăm ascultătorul, astfel încât să nu putem declanșa acest lucru accidental. HOVER_OUT.removeEventListener (MouseEvent.MOUSE_MOVE, meniu); Stop();
În ultimul cadru al animației, setați pur și simplu următoarea linie de cod. Motivul este faptul că sărim scheletul 1 astfel încât meniul să nu se încarce din nou, pierzând astfel starea activă / dezactivată.
gotoAndStop ( "ÎNCHIS")
Deci suntem! Ați învățat cum să activați / dezactivați butoanele clic într-un tablou cu date combinate, să utilizați tehnici de mascare și cum să creați sisteme de meniu simple, dar eficiente, care pot fi reutilizate cu un efort minim. Toate acestea cu o tranziție simplă, dar eficientă a paginii. Sper că vă place acest lucru și ați găsit o modalitate practică de a vă accelera fluxul de lucru în Flash.
