Share
In diesem Schnelltipp erfahren Sie, wie Sie mit der Tween-Klasse von AS3 ein Menü mit einer coolen Schiebeleiste erstellen. Hervorragend für die Navigation!
Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:
Starten Sie ein neues Flash Actionscript 3.0-Dokument mit einer Größe von 600 x 300 Pixel.
Wählen Sie zuerst das Textwerkzeug aus und geben Sie Ihr Navigationsmenü ein. In diesem Tutorial habe ich verwendet Taste 1 | Taste 2 | Taste 3 | Taste 4, Verwenden Sie "Arista Light" bei 30pt für die Schrift und # 999999 für die Farbe.
Gehen Sie dann zur Registerkarte Ausrichten (wenn Sie sie nicht sehen können, klicken Sie auf Fenster> Ausrichten) Richten Sie dann den Text vertikal und horizontal auf Ihrer Bühne aus.
Benennen Sie die vorhandene Ebene in "Text" um und sperren Sie sie, damit der Text nicht versehentlich verschoben wird. Erstellen Sie dann eine neue Ebene mit dem Namen "Buttons". Wählen Sie das Rechteckwerkzeug aus und ziehen Sie ein Rechteck (beliebiger Farbe) über "Schaltfläche 1", damit es an den Rändern anliegt. Dies ist der Trefferbereich für Ihren Menüpunkt.
Wählen Sie das gerade gezeichnete Rechteck aus und klicken Sie auf Ändern> Symbol konvertieren und nennen Sie es Taste. Stellen Sie sicher, dass sich der Registrierungspunkt in der Mitte befindet (möglicherweise müssen Sie das Ausrichtungsfenster erneut verwenden.).
Geben Sie dann im Eigenschaftenfenster dieser Schaltfläche einen Instanznamen von an Taste 1 und setze das Alpha auf 0%.
Kopieren Sie die neue "unsichtbare" Schaltfläche und fügen Sie sie über die anderen drei Schaltflächen ein, und geben Sie ihnen Instanznamen button2, button3 und button4 beziehungsweise. Verwenden Sie das Werkzeug "Frei umwandeln", um sie zu strecken oder zu verkleinern, so dass sie jeweils genau über dem Menüelement liegen und keine Lücken dazwischen aufweisen.
Wählen Sie erneut das Rechteckwerkzeug aus, setzen Sie die abgerundeten Ecken auf 5 Pixel und zeichnen Sie ein Rechteck mit einer Höhe von 4 Pixel und etwa der Breite der ersten Schaltfläche.
Positionieren Sie es unter Ihrer ersten Schaltfläche und klicken Sie Ändern> In Symbol konvertieren und nennen Sie es Bar. Stellen Sie wieder sicher, dass sich der Registrierungspunkt in der Mitte befindet.
Geben Sie einen Instanznamen von Bar und ein Alpha von 0%, genau wie die Knöpfe. Sperren Sie die Schaltflächenebene und erstellen Sie eine neue Ebene mit dem Namen Aktionen; sperren Sie das auch. Klicken Sie nun mit der rechten Maustaste auf den ersten Frame Ihres neuen Aktionen schichten und klicken Aktionen.
// Importieren Sie zum Tweening benötigte Klassen import fl.transitions.Tween; import fl.transitions.easing. *;
Wir werden die verwenden Tween Klasse, um die Leiste mit Code zu verschieben, importieren Sie sie. Das LockerungAußerdem wird ein Paket benötigt, damit wir den genauen Typ der zu verwendenden Tween-Bewegung angeben können.
// Definiere die Tween-Variable für die "x" -Position der Leiste var barX: Tween; // Definiere die Tween-Variable für das Einblenden des Balkens var barAlphaIn: Tween; // Definiere die Tween-Variable für das Ausblenden des Balkens var barAlphaOut: Tween; // Definiere die Tween-Variable für die Balkenbreite var barWidth: Tween;
Definieren Sie die Variablen, die wir zum Tweening der Leiste verwenden werden.
// Einen Ereignis-Listener für das Überschreiben der Schaltfläche hinzufügen 1 button1.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Einen Ereignis-Listener für das Rollout der Schaltfläche hinzufügen 1 button1.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Füge einen Event-Listener für das Rollover von Button 2 hinzu button2.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Füge einen Event Listener für das Rollout von Button 2 hinzu button2.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Einen Ereignis-Listener für das Überschreiben der Schaltfläche hinzufügen 3 button3.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Einen Ereignis-Listener für das Rollout der Schaltfläche hinzufügen 3 button3.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler); // Einen Ereignis-Listener für das Überschreiben der Schaltfläche hinzufügen 4 button4.addEventListener (MouseEvent.ROLL_OVER, rollOverHandler); // Einen Ereignis-Listener für das Rollout der Schaltfläche hinzufügen 4 button4.addEventListener (MouseEvent.ROLL_OUT, rollOutHandler);
Das sieht zwar nach viel Code aus, ist aber eigentlich ganz einfach.
Zuerst fügen wir einen Ereignis-Listener hinzu, der darauf wartet, dass die Maus über button1 rollt, und führt dann den aus rollOverHandler Funktion. Dann fügen wir einen weiteren Ereignis-Listener hinzu, der darauf wartet, dass die Maus rollt aus von button1 und führt das aus rollOutHandler Funktion.
Wir wiederholen diese Zuhörer nur für alle vier Tasten.
// Funktion für Rollover-Ereignisfunktion ausführen rollOverHandler (e: MouseEvent): void // Stellen Sie die "x" -Position der Leiste auf die gleiche Schaltfläche wie die Schaltfläche ein. Parameter sind: // Objekt zum Tween (dh zum Animieren) // Eigenschaft des zu tweenenden Objekts // Art der Beschleunigung (Bewegungsart) // zu verwendender Anfangswert (dh Wert zum Tween der Eigenschaft von) // Ende value (dh Wert, mit dem die Eigenschaft endet, wenn das Tween beendet ist) // Dauer des Tweens // ob die Dauer in Sekunden (true) oder Frames (false) gemessen werden soll. barX = new Tween (bar, "x", Back.) easeOut, bar.x, e.target.x, 1, true); // Tween des Balkens des Balkens, um es in barAlphaIn einblenden zu lassen = new Tween (bar, "alpha", Regular.easeOut, bar.alpha, 1, 1, true); // Tweenen Sie die Breite der Leiste, um dieselbe zu werden wie die Schaltfläche barWidth = new Tween (Leiste, "width", Regular.easeOut, bar.width, e.target.width, 1, true); // Funktion für Rollout-Ereignisfunktion ausführen rollOutHandler (e: MouseEvent): void // Tween des Balkens des Balkens, um es auszublenden. 1 wahr);
Wenn wir über eine Schaltfläche rollen, wird die Funktion angezeigt rollOverHandler wird ausgeführt, wodurch der Balken von seiner aktuellen x-Position zur x-Position der Schaltfläche verschoben wird, die gerade überrollt wird. (Hinweis: e.target bezieht sich immer auf die Schaltfläche, die den ausgelöst hat rollOverHandler Funktion.) Dies verleiht der Stange eine angenehme horizontale Bewegung.
Dann wird das Alpha des Balkens von seinem aktuellen Alpha auf 1 (100% Alpha) und die Breite von der aktuellen Breite bis zur Breite der Schaltfläche, die die Handler-Funktion ausgelöst hat, ausgeblendet.
Wenn wir aus der Taste rollen, wird die Funktion angezeigt rollOutHandler wird ausgeführt und der Balken wird von seinem aktuellen Alpha auf 0 (vollständig transparent) ausgeblendet.
Da die Schaltflächen eng aneinander liegen und keine Lücke dazwischen besteht, wird der Balken nur ausgeblendet, wenn Sie aus ihm rollen alles die Menüpunkte auf einmal, sonst wird es zu früh wieder eingeblendet, damit Sie es nicht erkennen können!
Sie sollten jetzt etwas ähnliches wie die Vorschau haben. Großartig! Sie haben gelernt, wie Sie die Tween-Klasse in ActionScript 3.0 verwenden, um eine effektive Menüanimation zu erstellen, die die Aufmerksamkeit der Benutzer auf sich zieht und sich von normalen Menüs abhebt. Die Möglichkeiten sind endlos.
Nächster Schritt: Wie füge ich ein MouseEvent.CLICK Listener und Handler für jede Schaltfläche, damit der Benutzer mit einem Klick verschiedene Aktionen auslösen kann?
Ich hoffe, dass Ihnen dieses Tutorial gefallen hat und dass Sie es gelesen haben.
Accentsconagua