Quick Tips: Hvordan bygge en horisontal Sliding Menu Paddle
Del
Del
Del
Share < .no> Dette Cyber ​​mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne hurtig Tips vil du lære hvordan du bruker AS3 er Tween klasse for å lage en meny med en kul skyve bar. Utmerket for navigasjon

Endelig resultat Forhåndsvisning

La oss ta en titt på det endelige resultatet vi skal jobbe mot:

Trinn 1 : Tekst

Start en ny Flash Actionscript 3.0 dokument med en størrelse på 600 x 300px

Først velger du tekstverktøyet og skriv ut navigasjonsmeny.. For å få til denne opplæringen jeg brukte Knapp 1 | Button 2 | Knapp 3 | Knapp 4
, ved hjelp av "Arista Light" på 30pt for skriften og # 999999 for fargen

Så gå til kategorien justere (hvis du ikke kan se det klikk på Vindu >. Align
) deretter justere teksten vertikalt og horisontalt sentrert på scenen

Trinn 2:. Tegn en knapp

Endre navn på eksisterende lag til "Text" og låse den slik at du vant ' t uhell flytte teksten. Deretter oppretter et nytt lag som heter "Knapper". Velg rektangel verktøyet og dra et rektangel (uansett farge) over "Button 1", slik at den ligger tett til kantene. Dette vil bli rammet området for menyvalget

Trinn 3:. Ferdigstille Button

Velg rektangelet som du nettopp tegnet, klikk Modify > Konverter til symbol Hotell og name it -knappen
. Kontroller at registreringspunktet er i sentrum (du må kanskje bruke Align panel igjen).

Så, i Properties panelet, gir denne knappen en forekomst navn Button1 Hotell og satt alfa til 0%

Trinn 4:. Legg Flere knapper

Kopier og lim inn nye "usynlige" -knappen i løpet av de tre andre knappene og gi dem eksempel navnene på knappen2
, Button3 Hotell og button4
hhv. Bruk Free Transform verktøyet for å strekke eller krympe dem slik at hver og en passer perfekt over sin menyelement, uten mellomrom mellom

Trinn 5:. Tegn Bar

Velg rektangelverktøyet igjen , satt de avrundede hjørner til 5 piksler, og tegne et rektangel som er 4 piksler høyt og om bredden på første knappen

Plasser den under din første knappen, klikk Modify >.; Konverter til Symbol Hotell og name it bar
. Igjen, sørg registreringspunktet er i sentrum.

Gi det en forekomst navn bar Hotell og en alfa på 0%, akkurat som på knappene. Lås knapper laget og opprette et nytt lag som heter handlinger
; låse dette også. Nå høyreklikker du på det første bildet av den nye handlinger
lag og klikk på Handlinger

Trinn 6:. Import Classes
//Import klasser som trengs for tweeningimport fl.transitions.Tween;. import fl.transitions.easing *;

Vi skal bruke Tween
klasse å gjøre baren farten ved hjelp av kode, så importere den. lettelser
pakken er også nødvendig, slik at vi kan spesifisere nøyaktig type tween bevegelse som skal brukes

Trinn 7:. Definere variabler
//Definer tween variabel for barens "x" positionvar Barx: Tween; //Definer tween variabel for barens fade-invar barAlphaIn: Tween; //Definer tween variabel for barens fade-outvar barAlphaOut: Tween; //Definer tween variabel for barer widthvar barWidth: Tween;

Definer variablene vi skal bruke til tween baren

Trinn 8: Arrangement Lyttere
//Legg til en hendelse lytteren for rulle over på knappen 1button1.addEventListener (. MouseEvent.ROLL_OVER, rollOverHandler); //Legg til en hendelse lytteren for utrullingen av knappen 1button1.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); //Legg til en hendelse lytteren for rulle over på knappen 2button2.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); //Legg til en hendelse lytteren for utrullingen av knappen 2button2.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); //Legg til en hendelse lytteren for rulle over på knappen 3button3.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); //Legg til en hendelse lytteren for utrullingen av knappen 3button3.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); //Legg til en hendelse lytteren for rulle over på knappen 4button4.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); //Legg til en hendelse lytteren for utrullingen av knappen 4button4.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);

Det kan se ut som mye kode, men det er faktisk veldig enkelt

Først legger vi en hendelse lytteren som lytter. for musen for å rulle over Button1 og deretter utfører rollOverHandler
funksjon. Så vi legge til en annen hendelse lytteren som lytter for musen til å rulle ut
av Button1 og utfører rollOutHandler
funksjon.

Vi bare gjenta disse lytterne for alle fire knapper.

Trinn 9: Funksjoner
//Execute funksjon for roll eventfunction rollOverHandler (e: MouseEvent): void {//Juster barens "x" stilling til det samme som på knappen. Parametrene er: //protestere mot tween (dvs. å animere) //eiendommen av objektet som skal tweened //type lettelser (type bevegelse) til å bruke //initial verdi (dvs. verdien til tween eiendommen fra) //end verdi (dvs. verdi eiendommen vil ende opp med når tween er ferdig) //varighet tween //om å måle varighet i sekunder (true) eller frames (falsk) Barx = new Tween (bar, "x", Back. easeOut, bar.x, e.target.x, 1, true); //Tween barens alpha for å gjøre det visne i barAlphaIn = new Tween (bar, "alpha", Regular.easeOut, bar.alpha, 1, 1, true); //Tween pens bredde til å bli den samme som knappens barWidth = new Tween (bar, "bredde", Regular.easeOut, bar.width, e.target.width, 1, true);} //Execute funksjon for utrulling eventfunction rollOutHandler (e: MouseEvent): void {//Tween barens alpha for å gjøre det fade ut barAlphaOut = new Tween (bar, "alpha", Regular.easeOut, bar.alpha, 0, 1, true);}

Når vi ruller over en knapp, funksjonen rollOverHandler
utføres, noe som vil tween baren fra sin nåværende x-posisjon til x-posisjonen til knappen som er i ferd med å bli rullet over. (Merk: e.target
alltid refererer til den knappen som utløste rollOverHandler
funksjonen.) Dette gir baren en fin jevn horisontal bevegelse

Deretter forsvinner den. alfa av baren fra gjeldende alfa til 1 (100% alfa), og bredden fra sin nåværende bredde til bredden på knappen som utløste handler funksjon.

Når vi ruller ut av knapp, funksjonen rollOutHandler
er utført, og baren er falmet ut fra sin nåværende alfa til 0 (helt gjennomsiktig).

Siden knappene passe tett sammen med noe mellomrom mellom dem, vil du bare se bar fade ut hvis du ruller ut av alle
menyelementene på en gang, ellers vil det visne inn igjen for tidlig for deg å få øye på det!

Konklusjon

Du skal nå ha noe som ligner på forhåndsvisningen. Flott! Du har lært hvordan du bruker Tween klasse i Actionscript 3.0 for å skape en effektiv meny animasjon som vil fange folks oppmerksomhet og skiller seg ut fra vanlige menyene. Mulighetene er uendelige

Neste trinn:.? Hva med å legge en MouseEvent.CLICK
lytter og handler til hver knapp for å la brukeren utløse ulike handlinger med et klikk

Jeg håper du likte denne opplæringen og takk for lesing.