Share
I denna Snabba Tips lär du dig hur du använder AS3: s Tween-klass för att skapa en meny med en cool glidstång. Utmärkt för navigering!
Låt oss ta en titt på det slutliga resultatet vi ska arbeta för:
Starta ett nytt Flash ActionScript 3.0-dokument med en storlek på 600 x 300px.
Välj först Textverktyget och skriv ut din navigationsmeny. För denna tutorials skull användes jag Knapp 1 | Knapp 2 | Knapp 3 | Knapp 4, använder "Arista Light" vid 30pt för teckensnittet och # 999999 för färgen.
Gå sedan till justeringsfliken (om du inte kan se den klickar du på Fönster> Justera) justera sedan texten vertikalt och horisontellt centrerad på ditt stadium.
Byt namn på det befintliga lagret till "Text" och lås det så att du inte kommer att flytta texten av misstag. Skapa sedan ett nytt lager som heter "Knappar". Välj rektangelverktyget och dra en rektangel (av vilken färg som helst) över "Knapp 1" så att den passar snyggt mot kanterna. Detta kommer att bli träffområdet för ditt menyalternativ.
Välj rektangeln som du just ritade, klicka Ändra> Konvertera till symbol och namnge det knapp. Se till att registreringspunkten ligger i mitten (du kan behöva använda panelen Justera igen).
Sedan, i fönstret Egenskaper, ge den här knappen ett förekomstnamn på button1 och ställa alfabetet till 0%.
Kopiera och klistra in din nya "osynliga" -knapp över de andra tre knapparna och ge dem förekomstnamn på button2, button3 och Button4 respektive. Använd verktyget Free Transform för att sträcka eller krympa dem så att alla passar snyggt över menyalternativet, utan några luckor mellan.
Välj rektangelverktyget igen, sätt de avrundade hörnen till 5 pixlar och rita en rektangel som är 4 pixlar hög och ungefär bredden på din första knapp.
Placera den under din första knapp, klicka Ändra> Konvertera till symbol och namnge det bar. Återigen, se till att registreringspunkten ligger i mitten.
Ge det ett förekomstnamn på bar och en alfa på 0%, precis som knapparna. Låsa knapplagret och skapa ett nytt lager som heter åtgärder; lås detta också. Högerklicka nu på den första ramen i ditt nya åtgärder lager och klicka Åtgärder.
// Importklasser som behövs för tweening import fl.transitions.Tween; import fl.transitions.easing. *;
Vi ska använda Tween klass för att göra baren flytta med kod, så importera den. De easingpaket behövs också, så att vi kan ange exakt vilken typ av rörelse som ska användas.
// Definiera intervallvariabeln för barens "x" -position var barX: Tween; // Definiera variabeln för barens fade-in var barAlphaIn: Tween; // Definiera intervallvariabeln för barens fade-out var barAlphaOut: Tween; // Definiera intervallvariabeln för stavbredden var barVidth: Tween;
Definiera variablerna som vi ska använda för att ställa in mellan fältet.
// Lägg till en händelse lyssnare för övergången av knappen 1 button1.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Lägg till en händelse lyssnare för utrullningen av knappen 1 button1.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Lägg till en händelse lyssnare för övergången av knappen 2 button2.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Lägg till en händelse lyssnare för utrullningen av knappen 2 button2.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Lägg till en händelse lyssnare för rulla över knappen 3 button3.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Lägg till en händelse lyssnare för utrullning av knappen 3 button3.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Lägg till en händelse lyssnare för rulla över av knappen 4 button4.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Lägg till en händelse lyssnare för utrullning av knappen 4 button4.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);
Det kan se ut som mycket kod men det är faktiskt väldigt enkelt.
Först lägger vi till en händelse lyssnare som lyssnar för att musen ska rulla över knappen1 och sedan exekvera rollOverHandler fungera. Sedan lägger vi till en annan händelse lyssnare som lyssnar för att musen ska rulla ut av knapp1 och kör rollOutHandler fungera.
Vi upprepar bara de lyssnare för alla fyra knapparna.
// Utför funktion för rolloverhändelsesfunktionen rollOverHandler (e: MouseEvent): void // Justera stångens "x" -position till samma som knappen. Parametrar är: // objekt till tween (dvs att animera) // egenskap för objektet som ska tweened // typ av lättnad (typ av rörelse) att använda // inledningsvärde (dvs värdet till mellan egenskapen från) // slutet värdet (dvs värdet egenskapen slutar med när intervallet är färdigt) // varaktighet av intervall // om hur lång tid ska mätas i sekunder (sant) eller ramar (false) barX = ny Tween (bar, "x", bakåt. easeOut, bar.x, e.target.x, 1, true); // Tween barens alfa för att göra det blekna i barAlphaIn = new Tween (bar, "alfa", Regular.easeOut, bar.alpha, 1, 1, true); // Tween barens bredd för att bli samma som knappens barWidth = ny Tween (bar, "width", Regular.easeOut, bar.width, e.target.width, 1, true); // Utför funktion för rollout händelse funktion rollOutHandler (e: MouseEvent): void // Tween barens alfa för att göra det blekna ut barAlphaOut = ny Tween (bar, "alfa", Regular.easeOut, bar.alpha, 0, 1, sant);
När vi rullar över en knapp, funktionen rollOverHandler exekveras, vilket kommer att röra sig mellan stapeln från sin nuvarande x-position till x-positionen för den knapp som för närvarande rullas över. (Notera: e.target hänvisar alltid till den knapp som utlösts rollOverHandler funktion.) Detta ger baren en fin jämn horisontell rörelse.
Därefter försvinner det alfabetet i fältet från sin nuvarande alfa till 1 (100% alfa) och bredden från dess nuvarande bredd till bredden på den knapp som utlöst handlarfunktionen.
När vi rullar ut av knappen, funktionen rollOutHandler exekveras och baren är bleknad ut från dess nuvarande alfa till 0 (helt transparent).
Eftersom knapparna passar tätt ihop utan mellanrum mellan dem ser du bara baren blekna ut om du rullar ut ur Allt menyalternativen på en gång, annars kommer det att blekna in igen för tidigt för att du ska upptäcka den!
Du borde nu ha något liknande förhandsvisningen. Bra! Du har lärt dig hur du använder Tween-klassen i ActionScript 3.0 för att skapa en effektiv menyanimering som kommer att få folk att uppmärksamma och sticka ut från vanliga menyer. Möjligheterna är oändliga.
Nästa steg: Vad sägs om att lägga till en MouseEvent.CLICK lyssnare och hanterare på varje knapp för att låta användaren utlösa olika handlingar med ett klick?
Jag hoppas att du haft denna handledning och tack för att du läste.
Accentsconagua