Share
I denne Quick Tip lærer du hvordan du bruker AS3s Tween-klasse for å lage en meny med en kul skyvebøyle. Utmerket for navigering!
La oss se på det endelige resultatet vi vil jobbe for:
Start et nytt Flash ActionScript 3.0-dokument med en størrelse på 600 x 300px.
Først velg tekstverktøyet og skriv ut navigasjonsmenyen. For denne tutorials skyld brukte jeg Knapp 1 | Knapp 2 | Knapp 3 | Knapp 4, bruker "Arista Light" ved 30pt for skrifttypen og # 999999 for fargen.
Deretter går du til justeringsfanen (hvis du ikke kan se den, klikker du på Vindu> Juster) deretter juster teksten vertikalt og horisontalt sentrert på scenen din.
Gi nytt navn til det eksisterende laget til "Tekst" og lås det slik at du ikke vil flytte teksten ved et uhell. Deretter opprett et nytt lag kalt "Knapper". Velg rektangulærverktøyet og dra et rektangel (av hvilken som helst farge) over "Knapp 1" slik at den passer godt til kantene. Dette vil være hitområdet for menyelementet ditt.
Velg rektangelet du nettopp har tegnet, klikk Endre> Konverter til symbol og nev det knapp. Kontroller at registreringspunktet er i midten (det kan hende du må bruke Justeringspanelet på nytt).
Deretter, i Egenskaper-panelet, gi denne knappen et forekomstnavn på Button1 og sett alfa til 0%.
Kopier og lim inn den nye "usynlige" knappen over de tre andre knappene og gi dem forekomstnavn på knappen2, button3 og Button4 henholdsvis. Bruk Free Transform-verktøyet til å strekke eller krympe dem slik at hver enkelt passer godt over menyelementet, uten hull i mellom.
Velg rektangulært verktøy igjen, sett de avrundede hjørner til 5 piksler og tegne et rektangel som er 4 piksler høyt og om bredden på den første knappen.
Plasser den under den første knappen, klikk Endre> Konverter til symbol og nev det Bar. Igjen, sørg for at registreringspunktet er i midten.
Gi det et forekomstnavn på Bar og en alfa på 0%, akkurat som knappene. Lås knappelaget og opprett et nytt lag som heter handlinger; lås dette også. Høyreklikk nå på den første rammen til den nye handlinger lag og klikk handlinger.
// Importklasser som trengs for tweening import fl.transitions.Tween; importere fl.transitions.easing. *;
Vi skal bruke Tween klasse for å gjøre baren flytte med kode, så importer den. De lettelserpakke er også nødvendig, slik at vi kan spesifisere den eksakte typen tween bevegelse som skal brukes.
// Definer tween-variabelen for barens "x" -posisjon var barX: Tween; // Definer tween-variabelen for barens fade-in var barAlphaIn: Tween; // Definer tween-variabelen for barens fade-out var barAlphaOut: Tween; // Definer tween-variabelen for stolpene bredde var bar Bredde: Tween;
Definer variablene vi skal bruke til tween linjen.
// Legg til en hendelselytter for overgangen til knapp 1 knapp1.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Legg til en hendelse lytter for utrulning av knapp 1 button1.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Legg til en hendelselytter for overgangen til knapp 2 button2.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Legg til en hendelselytter for utrullingen av knapp 2 button2.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Legg til en hendelselytter for overgangen til knapp 3 button3.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Legg til en hendelse lytter for utrulning av knapp 3 button3.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Legg til en hendelselytter for overgangen til knapp 4 button4.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Legg til en hendelselytter for utrullingen av knapp 4 button4.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);
Dette kan se ut som mye kode, men det er faktisk veldig enkelt.
Først legger vi til en hendelselytter som lytter til musen for å rulle over knappen1 og deretter utfører rollOverHandler funksjon. Deretter legger vi til en annen hendelselytter som lytter etter at musen skal rulle ute av knapp 1 og kjører rollOutHandler funksjon.
Vi gjentar bare de lytterne for alle fire knappene.
// Utfør funksjon for rollover-hendelsesfunksjon rollOverHandler (e: MouseEvent): void // Juster stangets "x" -posisjon til det samme som knappen. Parametre er: // objekt til tween (dvs. å animere) // egenskap for objektet som skal tweened // type lettelse (type bevegelse) for å bruke // startverdi (dvs. verdi til mellom egenskapen fra) // ende verdi (dvs. verdien egenskapen vil ende opp med når tween er ferdig) // varighet av tween // om å måle varigheten i sekunder (sant) eller rammer (false) barX = ny Tween (bar, "x", Tilbake. easeOut, bar.x, e.target.x, 1, true); // Tween barens alfa for å gjøre det fade i barAlphaIn = new Tween (bar, "alpha", Regular.easeOut, bar.alpha, 1, 1, true); // Tween barens bredde for å bli den samme som knappens barWidth = ny Tween (bar, "width", Regular.easeOut, bar.width, e.target.width, 1, true); // Utfør funksjon for utrullingshendelsesfunksjon rollOutHandler (e: MouseEvent): void // Tween barens alfa for å gjøre det forsvinne barAlphaOut = ny Tween (bar, "alfa", Regular.easeOut, bar.alpha, 0, 1, sant);
Når vi ruller over en knapp, funksjonen rollOverHandler utføres, som vil tvinge mellom linjen fra sin nåværende x-posisjon til x-stillingen til knappen som for tiden rulles over. (Merk: e.target refererer alltid til knappen som utløste rollOverHandler funksjon.) Dette gir stangen en fin jevn horisontal bevegelse.
Deretter forsvinner den alfa av linjen fra den nåværende alfa til 1 (100% alfa), og bredden fra den nåværende bredden til bredden på knappen som utløste håndteringsfunksjonen.
Når vi ruller ut av knappen, funksjonen rollOutHandler utføres og baren er bleknet ut fra den nåværende alfa til 0 (helt gjennomsiktig).
Siden knappene passer tett sammen uten mellomrom mellom dem, ser du bare linjen fade ut hvis du ruller ut av alle menyelementene på en gang, ellers vil det falme inn igjen for tidlig for å få øye på det!
Du bør nå ha noe som ligner på forhåndsvisningen. Flott! Du har lært hvordan du bruker Tween-klassen i ActionScript 3.0 for å opprette en effektiv menyanimasjon som vil fange folks oppmerksomhet og skille seg ut fra vanlige menyer. Mulighetene er endeløse.
Neste trinn: Hva med å legge til en MouseEvent.CLICK lytter og håndterer til hver knapp for å la brukeren utløse forskjellige handlinger med et klikk?
Jeg håper du likte denne opplæringen og takk for å lese.
Accentsconagua