Build en allsidig Actionscript 3.0 Meny med Maske
Del
Del
Del
Del
Dette Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Navigasjon er en viktig del av nettstedet ditt, men ofte en boring for å bygge og vedlikeholde. I denne opplæringen vil jeg beskrive en rask og solid måte å bruke grunnleggende Actionscript ferdigheter, blandet med litt kreativitet, å konstruere intuitive & brukervennlige navigasjonssystemer. Ok, på tide å få våre hender skitne, vel ... svett kanskje ...
Innledning
Dette tut demonstrerer hvordan å hindre dobbeltklikke elementer i menyen, et mye oversett element som forbedrer din online opplevelse. Du vil også lære hvordan du kan lage og kombinere flere arrays med letthet. Først vil vi layout scenen, sted nøkkelbilder og etiketter, så på slutten vil vi legge til noen Action å gjøre det levende. Vi vil også lære å lage sideoverganger som legger en fin liten ekstra til ditt nettsted.
I ettertid, denne opplæringen er veldig enkelt, men det dekker mange skjulte perler. Vær kreativ, knytte data med xml, endre masken former, endre knappen overgangstilstander og nyte det
Trinn 1:. Forbereder knappene
Opprett en ny Actionscript 3 dokumentet: 600px X 400px, 30frames per sekund og bruke hvit som bakgrunn. Første ting først, lar opprette knappen. Tegn en tekstboks på scenen og gi den en forekomst navnet "txt". For å gjøre dette gå til din eiendommer panel (CTRL F3 /Vindu > eiendommer > egenskaper). Nå covert det til et symbol (F8 /Modify > Convert to Symbol), velge MovieClip og sørge for at registreringen poenget er øverst til venstre. Navn forekomsten "button_text_mc".
På et nytt lag, lage et rektangel som passer til boundings i teksten MovieClip. Dette vil fungere som en hit område for knappen. Konvertere den til et symbol.
Nå velger begge lag og konvertere dem til et symbol. Nevne dette tilfellet "hitarea_mc". Sørg for at du setter alpha verdien av "hitarea_mc" på null i egenskapsvinduet
Trinn 2:. Plassere Knapper
Nå la oss gjøre en holder for våre knapper. Selvfølgelig kan du gjøre dette mer avansert ved å gjøre dette en full dynamisk navigasjon med xml eller php, men på grunn av denne opplæringen vil vi bruke
noen Actionscript for å nevne våre menyelementer og fyll i funksjonalitet.
Drag én forekomst av MovieClip "button_movieclip" på scenen for hvert element du ønsker for navigasjon. Vi vil bruke 6 i dette tilfellet. Nå gir hvert tilfelle et unikt navn; Jeg valgte b1, b2, ... opp til b6. Neste vi kommer til å bryte dette opp i en ny MovieClip heter "menu_total".
Den gode ting om dette er, hvis vi ønsker å bruke det senere kan vi ved å dra «menu_total" klippe ut av biblioteket og bruke den direkte. Du skal nå ha en enkelt MovieClip på scenen holder seks knapper som vi vil forvandle seg til vår navigasjon
Trinn 3:. Roll /utrulling States på Tidslinje
Aah den morsomme delen. Noen animasjon og lureri. Som du ser i eksempelet, på menyen avslører bare seg selv når musepekeren beveger seg i nærheten av menyboksen og linje. For å oppnå dette, trenger vi en usynlig hitarea og noen keyframes for å flytte til en annen stat for visning.
Sørg for at du er inne på "menu_total" MovieClip og opprette 2 nye lag på toppen av dine lag: en som heter "koden", de andre navngitte "etiketter". Velg "merkelapper" laget og legge en blank keyframe på ramme 1, 2, 10, 24, 25, 37. Nå navngi andre framelabel "lukket", den 10. framelabel "OVER" og den 25. framelabel "UT".
Lag et nytt lag under knapper laget og gi den navnet "hit_area", deretter ta MovieClip "hitarea_mc" fra biblioteket og legg den til venstre for knappene. Til slutt, skalere det slik at brukeren har noen plass til å bevege musen. Sørg for at nøkkelbildene på "svever" bare komme til å ramme 10.
Lag enda et lag og gi den navnet "menu_out", så gå å ramme 10 og plassere en annen kopi av "hit_area_mc" på scenen. Gi den en forekomst navnet "HOVEROUT_MC" og sørge for at begge disse movieclips har en alfa verdi på 0. Også disse to hit området movieclips trenger å overlappe litt. Ellers vil Flash miste treffet test når du beveger musen mot knappene
OK, med alt som gjøres, dine rammer og etiketter skal nå se slik ut:.
Dette er hvordan hit områder for musen bør se:
Dette er hva den andre hitarea skal se slik ut: det begynner på keyframe av de over staten
Over span av animasjon for roll /utrulling landene, gjør en tom MovieClip og gi den en forekomst navnet "loaderclip" Denne biten er helt opp til du og din fantasi, men her er et grunnlag som bør komme i gang. Opprett en ny Actionscript 3.0-fil med samme dimensjoner som din viktigste filen. Bygg din side in /out animasjon. Pass på at du plasserer en stop (); kommando på slutten tilstanden til animasjon (stedet hvor det faktiske innholdet vil komme). Lagre filene dine som page1.swf, side2, ... opp til mengden av knapper du har opprettet, i dette tilfellet 6. I min helt enkelt eksempel jeg startet med en liten boks som tweens langs tidslinjen fra alpha fra 0 til 100, mens den vokser til sin endelige høyde Høyre, nå noen Action tid. Først av alt, du kan krydre opp hva som skjer med menyen slik du ønsker. For eksempel kan du bruke mer avanserte roll /utrulling animasjoner. Du må laste ned og importere opensource klasse bygget av Grant Skinner kalt "tweenmax". Sørg for at du laste ned AS3 versjon. Vi vil også bruke den innebygde klasser for overgangene Med din kode laget valgt på ramme en, skriver du inn koden i følgende trinn (jeg vil forklare hver linje i kommentarfeltet) Merk: fra dette punktet er det veldig enkelt. å lage en ny rekke med alle dine handlinger og koble den til onRelease handler, på samme måte som du knytte buttonnames til selve movieclips. Med minimal innsats kan du bygge en veldig sterk navigasjonssystem som kan gjenbrukes om og om igjen på et blunk. Du kan bygge en klasse for dette, men det er ikke hensikten med denne opplæringen Dette er den viktigste kjernen i prosjektet vårt! . Hver viktig skritt er kommentert i koden Nå flytter over til å ramme 24 av menu_total MovieClip På det siste bildet i animasjonen, bare sette inn følgende linje med kode. Grunnen er at vi hoppe ramme en slik at menyen ikke lastes på nytt og dermed miste aktiv /deaktivert tilstand. Så det er vi! Du lærte å aktivere /deaktivere klikket knappene i en matrise med kombinerte data, bruke maskeringsteknikker og hvordan du kan lage enkle, men effektive menysystemer som kan gjenbrukes med minimal innsats. Alt dette med en enkel, men effektiv siden overgangen. Jeg håper du likte dette og funnet en praktisk måte å få fart på arbeidsflyten i Flash.
Trinn 4:. Tilsett loaderimage MovieClip
Trinn 5:. Forberede ekstern SWF-filer
Trinn 6:.! Handling ... Men vent ...
For å få til denne opplæringen jeg har valgt en veldig enkel effekt.
Trinn 7:.! Handling ... Er du sikker? ! - Jepp
Trinn 8:.!. Handling ... Importen
import gs.TweenMax; import fl.motion.easing *; import fl.transitions *; import fl.transitions.easing *;
Trinn 9:..! Handling .. Variabler
//variabler for knapp rollover, ut, traff statevar hastighet: Number = 0,3; Var bevegelse: Funksjon = Sine.easeOut; Var colourOver: String = "0x9BE07C"; Var colourOut: String = "0x000000"; Var colourRelease: String = "0xff0000"; //lagre knappene som et objekt for senere bruk eller reference.var btn: objekt; Var disabledBtn: Object; //The currentPage, nextpage variabel holder movieclips vi vil load.var currentPage: MovieClip = null; Var nextpage: MovieClip = null; //den loadervar loader: Loader; //som MovieClip å loadvar urlRequest : URLRequest; //navnet på vår menumovieclip.MENUNAME.txt.text = "MENU >";
Trinn 10: Handling .. Sett opp Arrays Med vår data
//første vi vil referere til! alle knappene på de stagevar knapper: Array = new Array (B1, B2, B3, B4, B5, B6); //denne matrisen holder alle navnene vi ønsker å bruke for våre buttonsvar BUTTON_NAME: Array = new Array ("Home "," Om oss "," Selected Work "," referanser "," Jobs "," Kontakt "); //Denne rekken butikker som SWF vi ønsker å loadvar swf_array: Array = new Array (" swf1.swf "," swf2.swf "," swf3.swf "," swf4.swf "," swf5.swf "," swf6.swf ");
Trinn 11: Handling ... Loop Gjennom Button Array
for! (var i: String i knapper) {//tildele BUTTON_NAME matrisen til textclip av våre knapper knapper [i] .button_txt.txt.text = BUTTON_NAME [i]; //tildele som swf vil vi laster for hver av knappene knappene [i] .currentPage = swf_array [i]; //erklærer at vi vil bruke MovieClip som en knapp knapper [i] .buttonMode = true; //sørge for at button_txt klippet ikke reagerer på museknappene [i] .button_txt.mouseChildren = false; //legger lytterne for våre knapper knapper [i] .addEventListener (MouseEvent.CLICK, onclick); knappene [i] .addEventListener (MouseEvent.MOUSE_OVER, onOVER); knapper [i] .addEventListener (MouseEvent.MOUSE_OUT, onOUT);}
Trinn 12:! Handling ... EventListeners:
funksjon onclick (event: MouseEvent): void {//sørge variabelen av vår nåværende Målet er lagret, vil vi adress det senere til funksjonen for å deaktivere det er staten btn = event.currentTarget; disableBtn (BTN);}; funksjon onOVER (event: MouseEvent): void {btn = event.currentTarget; //her vi Tween til over fargen vi har tildelt tidligere på med variablene. TweenMax.to (BTN, hastighet, {tint: colourOver, letthet: bevegelse});}; funksjon onOUT (event: MouseEvent): void {btn = event.currentTarget; TweenMax.to (BTN, hastighet, {tint: colourOut, letthet: bevegelse});};
Trinn 13: Handling ... Bygg Machine
funksjon disableBtn. (BTN: Object): void {//hvis knappen er deaktivert vi skal sørge for hvert arrangement er tilbake på det stedet så vi kan bruke den igjen hvis (disabledBtn ) {disabledBtn.buttonMode = true; disabledBtn.mouseEnabled = true; TweenMax.to (disabledBtn, hastighet, {tint: colourOut, lette: bevegelse}); disabledBtn.addEventListener (MouseEvent.CLICK, onclick); disabledBtn.addEventListener (MouseEvent.MOUSE_OUT, onOUT); disabledBtn.addEventListener (MouseEvent.MOUSE_OVER, onOVER); } TweenMax.to (BTN, hastighet, {tint: colourRelease, lette: bevegelse}); //deaktivere midler som ikke er i stand til å bruke det lenger, så her fjerner vi all funksjonalitet btn.buttonMode = false; btn.mouseEnabled = false; btn.removeEventListener (MouseEvent.CLICK, onclick); btn.removeEventListener (MouseEvent.MOUSE_OUT, onOUT); btn.removeEventListener (MouseEvent.MOUSE_OVER, onOVER); //sørge for gjeldende valgte knappen er merket som disabledBtn. disabledBtn = btn; //Opprett en ny loader eksempel loader = new Loader (); //legger currentPage variabelen til url forespørsel urlRequest = new URLRequest (btn.currentPage); //laste url forespørsel loader.load (urlRequest); //Når filen er lastet vi vil utløse fileLoaded funksjon loader.contentLoaderInfo.addEventListener (Event.COMPLETE, isLoaded);} funksjon isLoaded (hendelse: Hendelse): void {//Lasteren inneholder nå siden vi skal å vise senere nextpage = event.target.content; //sjekke om det er en currentPage if (currentPage! = null) {//tween alfa til null //så vent ... hvorfor bruker vi 2 forskjellige tweenclasses? vel, bare for å vise deg de fordeler og ulemper ved begge. Bestem selv hvilken du synes er mest passende for dine prosjekter. Var tweenAlpha: Tween = new Tween (currentPage, "alpha", Regular.easeOut, 1, 0, 0,7, true); //i tillegg, kan du gjøre det currentPage utføre en ekstra utgående animasjon. Sørg for at du leke rundt med lengden på alpha slik at den ikke forsvinne før animasjonen er ferdig. currentPage.gotoAndPlay (31); //currentPageGone vil bli kalt når tween er ferdig tweenAlpha.addEventListener (TweenEvent.MOTION_FINISH, currentPageOut); } Else {//hvis det ikke er currentPage vi vil utløse showNextPage funksjonen. doNextPage (); }} funksjon doNextPage (): void {//posisjon loaderclip som nextpage nextPage.x = 238,0; nextPage.y = 0; //Tween alfa fra 0 til 1 Div tweenAlpha: Tween = new Tween (nextpage, "alpha", Regular.easeOut, 0, 1, 0,3, true); //Legg neste side på scenen addChild (nextpage); //Neste side er nå vår nåværende side - forvirrende? Det er ikke. Vi bytter neste side med vår nåværende. currentPage = nextpage;} //Når animasjonen er ferdig vil vi utløse dette functionfunction currentPageOut (hendelse: Hendelse): void {//Fjern gjeldende side helt fra scenen removeChild (currentPage); //La oss vise neste side doNextPage ();} //ikke plassere en stopp kommando fordi vi vil direkte lande på ramme 2.
Trinn 14: Handling ... hitTest For Meny Åpne
//legge en eventlistener for mousemoveHOVER.addEventListener (MouseEvent.MOUSE_MOVE, openmenu.); funksjon openmenu (e: Hendelses): void {//når muse x & y-verdier er inne i MovieClip klippet heter "svever", er den hitTest sant HOVER.hitTestPoint (parent.mouseX, parent.mouseY, true) {gotoAndPlay ("OVER"); //sørge for at vi fjerner lytteren slik at vi ikke kan utløse dette ved et uhell. HOVER.removeEventListener (MouseEvent.MOUSE_MOVE, openmenu); }} stop ();
Trinn 15: Handling ... hitTest For Meny Ut
//legge en eventlistener for mousemoveHOVER_OUT.. addEventListener (MouseEvent.MOUSE_MOVE, menuout); funksjon menuout (e: Hendelses): void {//når muse x & y-verdier er inne i MovieClip klippet heter "HOVER_OUT", er hitTest sant HOVER_OUT.hitTestPoint (parent.mouseX, parent.mouseY, true) {gotoAndPlay ("OUT"); //sørge for at vi fjerner lytteren slik at vi ikke kan utløse dette ved et uhell. HOVER_OUT.removeEventListener (MouseEvent.MOUSE_MOVE, menuout); }} stop ();
Trinn 16: Handling ... Gå til "Stengt" Frame:
GotoAndStop ("lukket")
Konklusjon