Share
In deze Quick Tip leer je hoe je de Tween-klasse van AS3 kunt gebruiken om een menu te maken met een coole schuifbalk. Uitstekend geschikt voor navigatie!
Laten we eens kijken naar het eindresultaat waar we naartoe zullen werken:
Start een nieuw Flash Actionscript 3.0-document met een grootte van 600 x 300 px.
Selecteer eerst het gereedschap Tekst en typ uw navigatiemenu. In het belang van deze tutorial die ik heb gebruikt Knop 1 | Knop 2 | Knop 3 | Knop 4, gebruik "Arista Light" op 30pt voor het lettertype en # 999999 voor de kleur.
Ga vervolgens naar het tabblad Uitlijnen (als u het niet kunt zien, klikt u op Venster> Uitlijnen) lijn de tekst vervolgens verticaal en horizontaal uit in het midden van je werkgebied.
Hernoem de bestaande laag naar "Tekst" en vergrendel deze zodat je de tekst niet per ongeluk verplaatst. Maak vervolgens een nieuwe laag met de naam "Knoppen". Selecteer het gereedschap Rechthoek en sleep een rechthoek (van elke kleur) over "Knop 1", zodat deze goed aansluit op de randen. Dit is het hit-gebied voor uw menu-item.
Selecteer de rechthoek die u zojuist tekende, klik Wijzig> Converteren naar symbool en noem het knop. Zorg ervoor dat het registratiepunt zich in het midden bevindt (mogelijk moet u het paneel Uitlijnen opnieuw gebruiken).
Geef vervolgens in het paneel Properties deze knop een instantienaam op button1 en stel de alpha in op 0%.
Kopieer en plak je nieuwe "onzichtbare" knop over de andere drie knoppen en geef ze instantienamen van button2, button3 en Button4 respectievelijk. Gebruik het gereedschap Vrije transformatie om ze uit te rekken of te verkleinen, zodat ze allemaal netjes over het menu-item passen, zonder gaten ertussen.
Selecteer opnieuw het gereedschap Rechthoek, stel de afgeronde hoeken in op 5 pixels en teken een rechthoek met een hoogte van 4 pixels en ongeveer de breedte van je eerste knop.
Plaats het onder je eerste knop, klik Wijzig> Converteren naar symbool en noem het bar. Nogmaals, zorg ervoor dat het registratiepunt in het midden ligt.
Geef het een instantienaam van bar en een alpha van 0%, net als de knoppen. Vergrendel de knoppenlaag en maak een nieuwe laag met de naam acties; sluit dit ook. Klik nu met de rechtermuisknop op het eerste frame van uw nieuwe acties laag en klik acties.
// Importeer klassen die nodig zijn voor het tweenen van import fl.transitions. Tween; import fl.transitions.easing. *;
We zullen de gebruiken Tween klasse om de balk te verplaatsen met behulp van code, dus importeer hem. De versoepelingpakket is ook nodig, zodat we het exacte type tween-beweging kunnen specificeren dat moet worden gebruikt.
// Definieer de tween-variabele voor de "x" -positie van de staaf var barX: Tween; // Definieer de tween-variabele voor de fade-in van de balk var barAlphaIn: Tween; // Definieer de tween-variabele voor de uitfasering van de balk var barAlphaOut: Tween; // Definieer de tween-variabele voor de breedte van de balken var barWidth: Tween;
Definieer de variabelen die we zullen gebruiken om de balk te tweenen.
// Voeg een gebeurtenislistener toe voor de roll-over van knop 1 button1.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Voeg een gebeurtenislistener toe voor de uitrol van knop 1 button1.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Voeg een gebeurtenislistener toe voor de roll-over van knop 2 button2.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Voeg een gebeurtenislistener toe voor de uitrol van knop 2 button2.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Voeg een gebeurtenislistener toe voor de roll-over van knop 3 button3.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Voeg een gebeurtenislistener toe voor de uitrol van knop 3 button3.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Voeg een gebeurtenislistener toe voor de roll-over van knop 4 button4.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Voeg een gebeurtenislistener toe voor de uitrol van knop 4 button4.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);
Dit lijkt op veel code, maar het is eigenlijk heel eenvoudig.
Eerst voegen we een gebeurtenislistener toe die luistert naar de muis om button1 om te gooien en vervolgens de rollOverHandler functie. Vervolgens voegen we een andere gebeurtenislistener toe die luistert naar de muis die moet worden gerold uit van knop 1 en voert de rollOutHandler functie.
We herhalen gewoon die luisteraars voor alle vier de knoppen.
// Execute-functie voor functie rollover-gebeurtenis rollOverHandler (e: MouseEvent): void // Pas de "x" -positie van de balk aan naar dezelfde als de knop. Parameters zijn: // object om te tween (dwz om te animeren) // eigenschap van het te tweenen object // type easing (type beweging) om // initiële waarde (dwz waarde voor tween de eigenschap van) // end te gebruiken // end waarde (dwz de waarde waarmee de eigenschap eindigt wanneer de tween is voltooid) // duur van de tween // of de duur in seconden (true) of frames (false) barX wordt gemeten = nieuwe Tween (bar, "x", Back. easeOut, bar.x, e.target.x, 1, true); // Tween de alfa van de balk om deze te laten vervagen in barAlphaIn = nieuwe Tween (bar, "alpha", Regular.easeOut, bar alpha, 1, 1, true); // Tween over de breedte van de balk om gelijk te worden aan de bar van de knop Widget = nieuwe Tween (balk, "breedte", Regular.easeOut, bar.width, e.target.width, 1, true); // Execute-functie voor rollout-gebeurtenisfunctie rollOutHandler (e: MouseEvent): void // Tween de alfa van de balk om deze uit te laten barAlphaOut = nieuwe Tween (bar, "alpha", Regular.easeOut, baralpha, 0, 1, waar);
Wanneer we over een knop rollen, de functie rollOverHandler wordt uitgevoerd, die de staaf tussen de huidige x-positie en de x-positie van de knop die nu wordt opgerold, tweent. (Notitie: e.target verwijst altijd naar de knop die de trigger heeft geactiveerd rollOverHandler functie.) Dit geeft de staaf een mooie vloeiende horizontale beweging.
Vervolgens vervaagt het de alpha van de balk van de huidige alpha naar 1 (100% alpha) en de breedte van de huidige breedte naar de breedte van de knop die de handler-functie heeft geactiveerd.
Wanneer we uit de knop rollen, de functie rollOutHandler wordt uitgevoerd en de balk wordt vervaagd van de huidige alpha naar 0 (volledig transparant).
Omdat de knoppen dicht bij elkaar passen en er geen opening tussen zit, zie je alleen de balk uitvallen als je uitrolt allemaal de menu-items tegelijk, anders wordt het te snel weer zichtbaar om het te zien!
Je zou nu iets moeten hebben dat lijkt op het voorbeeld. Super goed! U hebt geleerd hoe u de klasse Tween in ActionScript 3.0 moet gebruiken om een effectieve menu-animatie te maken die de aandacht van mensen trekt en zich onderscheidt van gewone menu's. De mogelijkheden zijn eindeloos.
Volgende stap: hoe zit het met het toevoegen van een MouseEvent.CLICK luisteraar en handler voor elke knop om de gebruiker verschillende acties met een klik te laten activeren?
Ik hoop dat je deze tutorial leuk vond en bedankt voor het lezen.
Accentsconagua