Bygg en allsidig ActionScript 3.0-meny med Masking

Navigasjon er en avgjørende del av nettstedet ditt, men ofte en kjede for å bygge og vedlikeholde. I denne opplæringen beskriver jeg en rask og solid måte å bruke grunnleggende ActionScript-ferdigheter på, blandet med litt kreativitet, for å konstruere intuitive og brukervennlige navigasjonssystemer. Ok, tid for å få hendene skitne, vel ... svett kanskje ...




Introduksjon

Denne tut viser hvordan du kan forhindre dobbeltklikk på elementer i menyen, et mye oversett element som forbedrer din online opplevelse. Du vil også lære å lage og kombinere flere arrays med letthet. Først skal vi sette opp scenen, plassere keyframes og etiketter, så på slutten vil vi legge til noen ActionScript for å få det til å komme i live. Vi lærer også hvordan du oppretter sidetransisjoner som legger til en fin liten ekstra på nettstedet ditt.

I ettertid er denne opplæringen veldig enkel, men den dekker mange skjulte perler. Vær kreativ, lenke dataene med xml, endre maskeformene, endre knappens rollOver-tilstand og nyt den.

Trinn 1: Klargjøre knappene

Opprett et nytt ActionScript 3-dokument: 600px X 400px, 30rammer per sekund og bruk hvitt som bakgrunn. Første ting først, la oss lage knappen. Tegn en tekstboks på scenen og gi den et forekomstnavn på "txt". For å gjøre dette, gå til ditt egenskaper panel (CTRL F3 / Window> egenskaper> egenskaper). Nå skjult det inn i et symbol (F8 / Modify> Convert to Symbol), velg filmklipp og kontroller at registreringspunktet er øverst til venstre. Navn forekomsten "button_text_mc".

På et nytt lag, lag et rektangel som passer til grensene til tekstfilmklippet. Dette vil fungere som et treffområde for knappen din. Konverter det til et symbol.

Velg nå begge lagene og konverter dem til et symbol. Navn denne forekomsten "hitarea_mc". Pass på at du legger alfaverdien av "hitarea_mc" til null i egenskapsvinduet.

Trinn 2: Plasser knappene

La oss nå lage en holder til knappene våre. Selvfølgelig kan du gjøre dette mer avansert ved å gjøre dette til en full dynamisk navigasjon med xml eller php, men for denne tutorials skyld vil vi bruke
noen ActionScript å navngi menyelementene våre og fyll inn funksjonaliteten.

Dra en forekomst av movieclip "button_movieclip" på scenen for hvert element du vil ha for navigasjonen. Vi bruker 6 i dette tilfellet. Gi nå hvert tilfelle et unikt navn; Jeg valgte b1, b2, ... opp til b6. Deretter skal vi pakke dette opp i en ny filmklip med navnet "menu_total".

Det gode ved dette er at hvis vi vil bruke det senere, kan vi bare dra "menu_total" -klippet ut av biblioteket og bruke det direkte. Du bør nå ha en enkelt filmklip på scenen som inneholder seks knapper som vi forvandler til vår navigasjon.

Trinn 3: rollOver / rollOut-stater på tidslinjen

Aah den morsomme delen. Noen animasjoner og trickery. Som du ser i eksemplet, viser menyen seg selv når musemarkøren beveger seg nær menyboksen og linjen. For å oppnå dette, trenger vi en usynlig hitarea og noen keyframes for å flytte til en annen synspunkt.

Pass på at du er inne i "menu_total" movieclip og opprett 2 nye lag øverst i lagene dine: en kalt "kode", den andre som heter "etiketter". Velg "etikett" -laget og legg til et tomt nøkkelramme på rammen 1, 2, 10, 24, 25, 37. Gi nå navnet på den andre rammebeskrivelsen "LUKKET", den 10. rammemerket "OVER" og den 25. rammemerket "OUT".

Opprett et nytt lag under knappelaget og merk det "hit_area", og ta deretter movieclip "hitarea_mc" fra biblioteket ditt og legg det til venstre for knappene. Til slutt, rescale det slik at brukeren har plass til å flytte musen. Pass på at keyframes for "HOVER" bare kommer til ramme 10.
Lag enda et lag og kaller det "menu_out", og gå deretter til ramme 10 og legg en annen kopi av "hit_area_mc" på scenen. Gi det et forekomstnavn på "HOVEROUT_MC" og sørg for at begge disse filmklippene har en alfa-verdi på 0. Også disse to trefffilmklipene må overlappe litt. Ellers vil Flash tapt hit testen når du beveger musen mot knappene.

OK, med alt det som gjøres, bør rammene og etikettene nå se slik ut:

Dette er hvordan slagområdene for musen skal se ut:

Dette er hva den andre hitarea skal se ut: den starter på keyframe i overstaten.

La oss ta en titt på maskeringen.

Trinn 4: Legg til loaderimage Movieclip

Over hele spenningen av animasjonen for rollOver / rollOut-statene, lag en tom filmklipp og gi den et forekomstnavn for "loaderclip".

Trinn 5: Klargjør dine eksterne SWF-filer

Denne biten er helt opp til deg og din fantasi, men her er et grunnlag som burde komme i gang. Opprett en ny ActionScript 3.0-fil med de samme dimensjonene som hovedfilen din. Bygg siden din inn / ut animasjon. Pass på at du stopper (); kommandoen på slutten av animasjonen din (stedet der det faktiske innholdet kommer). Lagre filene dine som page1.swf, page2, ... opp til antall knapper du opprettet, i dette tilfellet 6.

I mitt helt enkle eksempel begynte jeg med en liten boks som tweens langs tidslinjen fra alfa 0 til 100 mens den vokser til sin endelige høyde.

Trinn 6: Handling! ... Men vent ...

Akkurat nå en ActionScript-tid. Først av alt kan du krydre det som skjer med menyen, men du ønsker det. For eksempel kan du bruke mer avanserte rollOver / rollOut animasjoner.
For denne tutorials skyld har jeg valgt en veldig enkel effekt.

Du må laste ned og importere opensource-klassen, bygget av Grant Skinner, kalt "tweenmax". Pass på at du laster ned AS3-versjonen. Vi vil også bruke de innebygde klassene for overgangene.

Trinn 7: Tiltak! ... Er du sikker? - Ja!

Med kodelaget ditt valgt i ramme en, skriv inn koden i følgende trinn (jeg vil forklare hver linje i kommentarene).

Merk: fra dette punktet er det veldig enkelt å lage en ny serie med alle dine handlinger og koble den til onRelease-håndteringen, på samme måte som du knytter knappene til de faktiske filmklippene. Med minimal innsats kan du bygge et veldig sterkt navigasjonssystem som kan gjenbrukes om og om igjen på kort tid. Du kan bygge en klasse for dette, men det er ikke hensikten med denne opplæringen.

Trinn 8: Tiltak! ... Import

importer gs.TweenMax; import fl.motion.easing. *; import fl.transitions. *; import fl.transitions.easing. *;

Trinn 9: Tiltak! ... Variabler

 // variabler for overføring av knappen, ut, hit state var hastighet: Nummer = 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 referanse. var btn: Object; var disabledBtn: Object; // Den aktuelle siden, NextPage-variabelen holder filmklippene vi vil laste. var currentPage: MovieClip = null; var nextPage: MovieClip = null; // Loader var Loader: Loader; // hvilken movieclip å laste var urlRequest: URLRequest; // navnet på menyen movieclip.MENUNAME.txt.text = "MENU>";

Trinn 10: Handling! ... Sette opp arrayer med våre data

 // Først vil vi referere til alle knappene på scenen var-knappene: Array = new Array (b1, b2, b3, b4, b5, b6); // dette arrayet inneholder alle navnene vi vil bruke til knappene våre var button_name: Array = new Array ("Hjem", "Om oss", "Utvalgt arbeid", "Referanser", "Jobber", "Kontakt"); // denne arrayen lagrer hvilken swf vi vil laste var swf_array: Array = new Array ("swf1.swf", "swf2.swf", "swf3.swf", "swf4.swf", "swf5.swf", " swf6.swf ");

Trinn 11: Handling! ... Gå gjennom knappen Array

 for (var jeg: String i knapper) // tilordne knappens navn array til tekstklippet på knappene våre knapper [i] .button_txt.txt.text = button_name [i]; // tilordne hvilken swf vi vil laste for hver knapp knappene [i] .currentPage = swf_array [i]; // erklære at vi vil bruke movieclip som en knapp knapp [i] .buttonMode = true; // sørg for at button_txt klippet ikke reagerer på museknappene [i] .button_txt.mouseChildren = false; // legg til lytterne for knappene våre knapper [i] .addEventListener (MouseEvent.CLICK, onCLICK); knapper [i] .addEventListener (MouseEvent.MOUSE_OVER, overOVER); knapper [i] .addEventListener (MouseEvent.MOUSE_OUT, onOUT); 

Trinn 12: Handling! ... EventListeners:

 funksjon onCLICK (event: MouseEvent): void // sørg for at variabelen i vårt nåværende mål er lagret, vi adresserer det senere til funksjonen for å deaktivere det er state btn = event.currentTarget; disableBtn (btn);; funksjon overOVER (event: MouseEvent): void btn = event.currentTarget; // her vi tween til overfargen vi har tilordnet tidligere med variablene. TweenMax.to (btn, hastighet, tint: colourOver, lette: bevegelse);; funksjon onOUT (event: MouseEvent): void btn = event.currentTarget; TweenMax.to (btn, speed, tint: colourOut, lette: bevegelse);;

Trinn 13: Tiltak! ... Bygg maskinen!

Dette er hovedkjernen i prosjektet vårt. Hvert viktig trinn er kommentert i koden.

 funksjon disableBtn (btn: Object): void // Hvis knappen er deaktivert, vil vi sørge for at alle hendelser er tilbake i det stedet, så vi kan bruke det igjen hvis (disabledBtn) disabledBtn.buttonMode = true; deaktivertBtn.mouseEnabled = true; TweenMax.to (disabledBtn, speed, tint: colourOut, lette: bevegelse); disabledBtn.addEventListener (MouseEvent.CLICK, onCLICK); disabledBtn.addEventListener (MouseEvent.MOUSE_OUT, ut); disabledBtn.addEventListener (MouseEvent.MOUSE_OVER, overOVER);  TweenMax.to (btn, speed, tint: colorRelease, lette: bevegelse); // deaktivering betyr ikke å kunne bruke den lenger, så her fjerner vi all funksjonalitet btn.buttonMode = false; btn.mouseEnabled = false; btn.removeEventListener (MouseEvent.CLICK, onCLICK); btn.removeEventListener (MouseEvent.MOUSE_OUT, ut); btn.removeEventListener (MouseEvent.MOUSE_OVER, overOVER); // sørg for at gjeldende valgt knapp er merket som deaktivertBtn. deaktivertBtn = btn; // Opprett en ny loader instance loader = ny Loader (); // legg til variabelen CurrentPage til urlforespørselen urlRequest = ny URLRequest (btn.currentPage); // Last inn forespørselen loader.load (urlRequest) for url; // når filen er lastet, utløser vi filen Loaded-funksjonen loader.contentLoaderInfo.addEventListener (Event.COMPLETE, isLoaded);  funksjon isLoaded (event: Event): void // Loader inneholder nå siden vi skal vise senere nextPage = event.target.content; // Sjekk om det er en currentPage hvis (currentPage! = null) // tween alfa til null // så vent ... hvorfor bruker vi 2 forskjellige tweenclasses? vel, bare for å vise deg fordelene og ulempene for begge. Bestem deg selv hvilken som du finner mest egnet for dine prosjekter. var tweenAlpha: Tween = ny Tween (currentPage, "alpha", Regular.easeOut, 1, 0, .7, true); // i tillegg kan du gjøre det aktuelle siden utføre en ekstra utgående animasjon. Pass på at du leker med lengden på alfaen din, slik at den ikke forsvinner før animasjonen er ferdig. currentPage.gotoAndPlay (31); // currentPageGone vil bli kalt når tween er ferdig tweenAlpha.addEventListener (TweenEvent.MOTION_FINISH, currentPageOut);  ellers // hvis det ikke er nåværende side, vil vi utløse showNextPage-funksjonen. doNextPage ();  funksjon doNextPage (): void // plasser loaderclip som nextPage nextPage.x = 238.0; nextPage.y = 0; // Tween alfa fra 0 til 1 var tweenAlpha: Tween = ny Tween (nextPage, "alpha", Regular.easeOut, 0, 1, .3, true); // Legg til neste side til scenen addChild (nextPage); // Neste side er nå vår nåværende side - forvirrende? Det er det ikke. Vi erstatter neste side med vår nåværende. currentPage = nextPage;  // Når animasjonen er fullført, utløser vi denne funksjonsfunksjonen currentPageOut (event: Event): void // Fjern den nåværende siden helt fra scenen removeChild (currentPage); // La oss vise neste side doNextPage ();  // ikke legg inn en stoppekommando fordi vi vil ligge direkte på ramme 2.

Trinn 14: Handling! ... HitTest for menyen Åpne

Til slutt beveger vi oss opp en ramme. Pass på at du er på rammen 2 i meny_total movieclip.

 // legge til en hendelsesliste for mousemove HOVER.addEventListener (MouseEvent.MOUSE_MOVE, openmenu); funksjon openmenu (e: Event): void // når musens x & y-verdier er inne i movieclip-klippet kalt "HOVER", hittestedet er sant HOVER.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay "OVER"); // sørg for at vi fjerner lytteren slik at vi ikke kan utløse dette ved et uhell. HOVER.removeEventListener (MouseEvent.MOUSE_MOVE, openmenu);  Stoppe();

Trinn 15: Tiltak! ... HitTest for meny ut

Gå nå over til rammen 24 i menu_total movieclip.

 // legge til en hendelseliste for mousemove HOVER_OUT.addEventListener (MouseEvent.MOUSE_MOVE, meny); funksjonsmenyout (e: Begivenhet): void // når musens x & y-verdier er inne i movieclip-klippet kalt "HOVER_OUT", hittestedet er sant HOVER_OUT.hitTestPoint (parent.mouseX, parent.mouseY, true) gotoAndPlay "UTE"); // sørg for at vi fjerner lytteren slik at vi ikke kan utløse dette ved et uhell. HOVER_OUT.removeEventListener (MouseEvent.MOUSE_MOVE, menuout);  Stoppe();

Trinn 16: Tiltak! ... Gå til "Stengt" Ramme:

På den siste rammen av animasjonen, angi bare følgende linje av kode. Årsaken er at vi hopper over ramme 1, slik at menyen ikke lastes igjen og dermed mister den aktive / deaktiverte tilstanden.

 gotoAndStop ( "lukket")

Konklusjon

Så der er vi! Du har lært hvordan du aktiverer / deaktiverer klikkte knapper i en matrise med kombinert data, bruk maskeringsteknikker og hvordan du oppretter enkle men effektive menysystemer som kan gjenbrukes med minimal innsats. Alt dette med en enkel, men effektiv sideovergang. Jeg håper du likte denne og fant en praktisk måte å øke hastigheten på arbeidsflyten din på i Flash.