Schnelltipp Imitieren Sie die Stacks-Funktion von Mac OS X mit AS3

Die Stacks-Funktion ist seit Leopard Teil des Mac OS und eignet sich hervorragend für die Handhabung von Anzeigeelementen. In diesem Quick Tip werden wir diese Funktion mit ActionScript 3-Klassen nachahmen.


Endergebnisvorschau

Werfen wir einen Blick auf das Endergebnis, auf das wir hinarbeiten:


Schritt 1: Kurzübersicht

Wir verwenden die fantastische Klasse, die von PixelFumes erstellt wurde, und benutzerdefinierte Grafiken, um ein Stacks-Menü in Flash zu erstellen. Sie können die Quelle der Klasse von der Website des Entwicklers herunterladen.


Schritt 2: Richten Sie Ihre Flash-Datei ein

Starten Sie Flash und erstellen Sie ein neues Flash-Dokument. Stellen Sie die Bühnengröße auf 508x243px und die Bildrate auf 24fps ein.


Schritt 3: Schnittstelle

Dies ist die Schnittstelle, die wir verwenden werden. Der Hintergrund ist ein von meinem Desktop aufgenommenes Bild, und die coolen Logos sind Teil des Tuts + -Netzwerks.

Konvertieren Sie die Logos in MovieClip und markieren Sie das Export für ActionScript Kontrollkästchen Das graue Quadrat ist ein Stage-Button stackButton.


Schritt 4: ActionScript

Erstellen Sie eine neue ActionScript-Klasse (Cmd + N) und speichern Sie die Datei als Main.as und schreibe die folgenden Zeilen; Bitte lesen Sie die Kommentare im Code, um das Verhalten der Klasse vollständig zu verstehen.

 package import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import com.pixelfumes.stacks.Stack; // Denken Sie daran, die benutzerdefinierte Klasse import zu importieren. Fl.transitions.easing.Elastic; öffentliche letzte Klasse Main erweitert Sprite private var stack: Stack = new Stack (); // Erstellt einen neuen Stack-Container / * Die nächsten Variablen sind die Namen der Movieclips. Sie können den Stacks einen beliebigen Movieclip hinzufügen. * / Private var nt: NT = new NT (); // Nettuts + logo private var bei: AT = new AT (); // Activetuts + logo private var mt: MT = neues MT (); // Mobiletuts + Logo public final function Main (): void / * Setzt die Stapeleigenschaften * / stack.setRadius (240); stack.setAngle (35); stack.setStartAngle (0); stack.setOpenEasing (Elastic.easeOut); stack.setOpenTime (1); stack.setCloseEasing (Elastic.easeOut); stack.setCloseTime (0.5); / * Hinzufügen der Elemente zum Stapelcontainer * / stack.addItem (nt); stack.addItem (at); stack.addItem (mt); / * Positionieren Sie die Stapel und fügen Sie sie der Bühne hinzu. * / AddChild (stack); stack.x = stackButton.x; stack.y = stackButton.y; / * Wartet auf Klicks auf die Stack-Schaltfläche. * / StackButton.addEventListener (MouseEvent.MOUSE_DOWN, stackClick);  private letzte Funktion stackClick (e: Event): void if (stack.getStackOpen () == false) // Wenn der Stack geschlossen ist, öffnen Sie ihn stack.openStack ();  else // stack ist offen, also schließe es stack.closeStack (); 

Schritt 5: Dokumentenklasse

Fügen Sie der Klasse den Klassennamen hinzu Klasse Feld in der Veröffentlichen Abschnitt der Eigenschaften Panel.


Fazit

Sie haben ein nützliches Stapel-Menü für Ihre Anwendungen oder Ihre Website erstellt. Sie können das Projekt an Ihre Anforderungen anpassen oder diese Technik verwenden, um benutzerdefinierte Stapel zu erstellen.

Ich hoffe, Ihnen hat dieser Quick Tip gefallen, vielen Dank für das Lesen!