7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. ActionScript

Erstellen Sie mit AS3 ein Mac Dock Style-Menü

Read Time: 16 mins

German (Deutsch) translation by Tatsiana Bochkareva (you can also view the original English article)

In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit AS3-Klassen ein Menü wie Apple's Dock erstellen. Wir werden eine einzelne AS-Datei erstellen, die die ganze Magie ausführt und sie um neue Funktionen erweitert.

Neu veröffentlichtes Tutorial

Alle paar Wochen besuchen wir einige der Lieblingsbeiträge unserer Leser aus der gesamten Geschichte der Website. Dieses Tutorial wurde erstmals im März 2010 veröffentlicht.


Endergebnis Vorschau

Schauen wir uns zunächst an, was wir erstellen werden. Bewegen Sie die Maus über die Symbole, um zu sehen, wie sie sich bewegen und skalieren.


Schritt 1: Erstellen Sie eine neue ActionScript-Datei

Erstellen Sie zunächst eine neue ActionScript-Datei und speichern Sie sie als "DockItem.as". Ich speichere meine unter c:/macmenu/org/effects/DockItem.as.

Beachten Sie, dass unser Dokumentstamm (in dem sich die .fla befindet) c:/macmenu lautet. Der Ordner /org/effects bildet das Paket für die DockItem-Klasse.


Schritt 2: Erstellen Sie eine neue FLA

Erstellen Sie eine neue ActionScript 3.0-Flash-Datei und öffnen Sie sie, sodass sowohl DockItem.as als auch diese .fla-Datei geöffnet sind. Speichern Sie diese .fla im Stammordner (DockItem.as befindet sich unter c:/macmenu/org/effekts, unser Site-Stammverzeichnis lautet also c:/macmenu). fla as c: /macmenu/macmenu.fla.


Schritt 3: Symbole importieren

Jetzt importieren oder zeichnen wir einige Symbole in die .fla. Ich habe einige Symbole, die ich hier habe, aus einer Illustrator-Datei importiert, aber Sie können natürlich Ihre eigenen zeichnen und einen Verlauf auf sie anwenden.


Schritt 4: Beginnen Sie mit der Konvertierung von Symbolen in Symbole

Wählen Sie ein Symbol aus und klicken Sie auf Ändern > In Symbol konvertieren.

Geben Sie in dem sich öffnenden Feld einen Namen ein (ich habe dieses Symbol "Star" genannt) und achten Sie auf den Registrierungspunkt. Es muss unten in der Mitte sein. Verwenden Sie für die Klasse denselben Namen (denken Sie daran, dass Sie keine Leerzeichen verwenden können) und für die Basisklasse org.effects.DockItem (die Klasse, die wir erstellen). Stellen Sie außerdem sicher, dass Ihr Typ auf Movieclip eingestellt ist.

Richten Sie dann alle Objekte nach unten aus: Wählen Sie alle aus, klicken Sie auf Fenster > Ausrichten, stellen Sie sicher, dass die Schaltfläche "Zu inszenieren" nicht ausgewählt ist (andernfalls wird sie am unteren Rand der Bühne ausgerichtet), und klicken Sie dann auf die Schaltfläche oben rechts Bedienfeld zum Ausrichten aller Objekte.


Schritt 5: Konvertieren Sie alle Icons in Symbole

Wir können so viele Schaltflächen haben, wie wir möchten. Konvertieren wir also alle unsere Icons in Symbole. Denken Sie daran, ihnen einen Namen und eine Klasse zu geben, alle Registrierungspunkte auf die untere Mitte zu setzen und die Basisklasse auf org.effects.DockItem zu setzen.

Im Folgenden erfahren Sie, wie unsere Bibliothek und die Symbole aussehen sollen. Beachten Sie den Abstand zwischen ihnen, es ist wichtig, um einen guten Effekt zu erzielen.


Schritt 6: Codieren Sie die DockItem-Klasse

Wenn wir den Film jetzt testen, wird ein Fehler ausgegeben, der besagt, dass eine ActionScript-Datei mindestens eine externe und sichtbare Definition haben muss. Das liegt daran, dass alle unsere Menüelemente die DockItem-Klasse erweitern, die wir noch nicht geschrieben haben. Lass es uns jetzt schreiben...

Beginnen Sie mit der Erstellung des Pakets, indem Sie die Sprite-Klasse erweitern (wir werden Sprite erweitern, da wir keine Timeline-Animation haben.)

Zu diesem Zeitpunkt haben wir unser DockItem, das die Sprite-Klasse erweitert. Wenn Sie es jetzt testen, funktioniert es, aber Sie werden keine Auswirkungen sehen.

(Verwirrt? Nicht an das Codieren mit Klassen gewöhnt? Lesen Sie diesen Quick-Tipp zur Verwendung einer Dokumentklasse als Einführung.)


Schritt 7: Importieren Sie die erforderlichen Klassen

Jetzt werden wir alle notwendigen Klassen importieren. Hier wird eine benutzerdefinierte Klasse verwendet, die TweenLite-Klasse, die Sie von GreenSock.com herunterladen können. Wenn Sie TweenLite heruntergeladen haben, extrahieren Sie es in Ihren Ordner /macmenu/ (Sie haben also einen Ordner /macmenu/com/greensock/).

Ich habe die Sprite-Klasse importiert, weil wir sie erweitern. Wenn Sie Animationen auf der Timeline haben, erweitern Sie die MovieClip-Klasse. Wir werden die Event-Klasse verwenden, wenn das benutzerdefinierte Objekt zur Bühne hinzugefügt wird, und wir werden das MouseEvent verwenden, wenn wir den Abstand jedes Symbols von der Maus überprüfen.


Schritt 8: Deklarieren Sie die erforderlichen Variablen

In diesem Schritt deklarieren wir die erforderlichen Variablen:

Beachten Sie, dass ich die _initPosition als privat verwendet habe: Sie legt nur die anfängliche x-Position des Symbols fest. Der Abstand der Maus wird immer von diesem Punkt aus gemessen, da sich die tatsächliche x-Position des Elements immer ändert.

maxXDistance ist der maximale x-Abstand, über den die Maus das Symbol beeinflusst, maxYDistance ist der maximale y-Abstand, über den die Maus das Symbol beeinflusst, und maxScale ist die maximale Skalierung, die dem Symbol hinzugefügt wird (z. B. wenn Sie festlegen Wenn der Wert 2 erreicht ist, kann das Objekt maximal 3 erreichen.)

Ich habe für die letzten drei öffentliche Variablen verwendet, damit wir sie zur Laufzeit ändern können.


Schritt 9: Codieren der Konstruktorfunktion

Die Konstruktorfunktion muss denselben Namen wie die Klasse haben (und daher denselben Namen wie die Datei), daher DockItem():

Warum haben wir hier einige Parameter? Dies ermöglicht es uns, verschiedene Kombinationen von Entfernungen und Skalen zu verwenden: Wir können eine kurze Distanz mit einer sehr großen Skala oder eine lange Distanz mit einer kleinen Skala haben. Außerdem können wir den y-Abstand bestimmen, innerhalb dessen die Maus das Symbol beeinflusst.

Während wir die Sprite-Klasse erweitern, können wir für jedes Symbol, das die DockItem-Klasse erweitert, untergeordnete Elemente hinzufügen oder sogar eine benutzerdefinierte Klasse codieren. Wenn wir es also erweitern, können wir die Funktion super() verwenden, um die neuen Parameter an die Oberklasse zu übergeben. Wir können dann die DockItem-Klasse jederzeit und überall verwenden.

In diesem Schritt setzen wir die Variablen maxXDistance, maxYDistance und maxScale auf die als Parameter übergebenen Werte. Außerdem prüfen wir, ob sich das Objekt auf der Bühne befindet. Wenn nicht, fügen wir ein Ereignis hinzu, um zu überprüfen, wann es sich befindet. Wir fügen auch einen weiteren Ereignis-Listener hinzu, um zu erkennen, wann das Symbol von der Bühne entfernt wird. Wir werden der Bühne ein MOUSE_MOVE-Ereignis hinzufügen, um die Entfernung zu ermitteln. Daher ist es wichtig zu wissen, ob es sich auf der Bühne befindet.


Schritt 10: Die Init() Funktion

Dies ist die Funktion, die ausgeführt wird, sobald das Symbol erstellt und der Bühne hinzugefügt wurde. In der Funktion init() fügen wir der Bühne einfach einen MouseEvent.MOUSE_MOVE-Listener hinzu, setzen die Variable _initPosition auf den x-Wert des Objekts und warten auf die Maus, die den Bühnenbereich verlässt.


Schritt 11: Die Mausfunktionen

Wenn sich die Maus über die Bühne bewegt, überprüft diese Funktion (ausgelöst durch das MOUSE_MOVE-Ereignis, für das wir im letzten Schritt einen Listener hinzugefügt haben) die Mausposition des übergeordneten Objekts und misst den Abstand vom Objekt zur übergeordneten Mausposition.

Wir verwenden parent.mouseX, da wir dadurch die x-Position der Maus relativ zu dem Objekt erhalten, das das Symbol enthält, und nicht relativ zum Registrierungspunkt des Symbols.

Wir schalten die Symbole auch wieder in ihre Ausgangsposition zurück, wenn die Maus die Bühne im mouseLeave() - Handler verlässt.

Zuerst überprüfen wir den y-Abstand (vertikaler Abstand zwischen dem Symbol und der Maus); Wenn es weiter entfernt ist als der Bereich, den wir mit maxYDistanceVariable festgelegt haben, prüfen wir, ob sich das Symbol wieder in seiner ursprünglichen Position befindet, und wenn nicht, tweeten wir es dort hin. Das Schlüsselwort return bricht aus der Funktion aus, sodass in diesem Fall kein Rest des Codes ausgeführt wird.

Wenn sich die Maus vertikal in der Nähe des Symbols befindet, verwenden wir einige mathematische Methoden, um anhand des horizontalen Abstands von der Maus einen neuen Maßstab und eine neue Position für das Symbol zu ermitteln und zwischen diesen Werten zu wechseln.


Schritt 12: Die End() Funktion

Wenn wir das Objekt von der Bühne entfernen, müssen wir die Listener mouseMove und mouseLeave entfernen. Andernfalls können bei jeder Bewegung der Maus Fehler auftreten. Diese Funktion ist der Handler für den zuvor hinzugefügten Listener REMOVED_FROM_STAGE und wird ausgelöst, wenn das Objekt entfernt wird.

In dieser Funktion entfernen wir lediglich den Ereignis-Listener von der Bühne.


Schritt 13: Testen Sie es!

An diesem Punkt können wir es bereits testen; Dies funktioniert, da jedes Objekt mit der Basisklasse DockItem verknüpft ist. Wir haben jedoch keinen Begrenzungsrahmen zum Klicken (wenn wir die buttonMode-Eigenschaft unseres Objekts auf true setzen, werden wir sehen, dass wir nur dann darauf klicken können, wenn sie sich über der tatsächlichen Grafik befindet.)


Schritt 14: Verwandeln Sie Symbole in Schaltflächen

Bisher können wir sehen, wie der Effekt funktioniert. Lassen Sie uns nun jedes Element in eine Schaltfläche verwandeln. Wir werden eine neue ActionScript-Datei erstellen und diese wird das DockItem erweitern - nennen wir es DockButton. Das Paket ist dasselbe wie DockItem (org.effects), daher speichern wir es im selben Ordner wie DockItem.as (Beispiel: c:/macmenu/org/effects/DockButton.as).


Schritt 15: Ändern Sie die Basisklasse

Jetzt ändern wir die Basisklasse jedes Objekts in der Bibliothek. Wir verwenden derzeit org.effects.DockItem als Basisklasse. Verwenden wir jetzt org.effects.DockButton.

Wenn wir es jetzt testen, wird es einen Fehler geben. Dies liegt daran, dass DockButton.as noch leer ist. Codieren wir es also.


Schritt 16: Starten Sie die Codierung von DockButton.as

OK, jetzt werden wir die DockItem-Klasse erweitern, da wir alles, was wir in DockItem haben, verwenden und einige weitere Tricks hinzufügen möchten (damit es als Schaltfläche fungieren kann), aber wir möchten die neuen Funktionen nicht zu DockItem hinzufügen direkt. Auf diese Weise können wir das DockItem verwenden, wenn wir das DockItem später als etwas anderes als eine Schaltfläche verwenden möchten. Wenn wir es jedoch als Schaltfläche verwenden möchten, können wir den DockButton verwenden.

Wenn wir unser Projekt jetzt testen, funktioniert es, aber es funktioniert genauso wie das DockItem, da wir noch nichts Neues hinzugefügt haben.


Schritt 17: Importieren von Klassen für DockButton

Importieren wir einige Dinge, die wir zum Erweitern des DockItem benötigen. Da wir das DockItem erweitern, müssen wir die bereits vorhandenen Klassen nicht importieren, da wir sie nicht direkt in DockButton verwenden.

Ich habe die Rectangle-Klasse importiert, aber warum? Dies liegt daran, dass wir den Begrenzungsrahmen unseres Objekts verwenden, um einen gefälschten Hintergrund zu erstellen, damit die Schaltfläche angeklickt werden kann, auch wenn sich die Maus nicht genau über einem farbigen Bereich befindet. Lassen Sie uns eine Hintergrundgrafik mit Alpha 0 (transparent) erstellen, damit wir ein Quadrat zum Klicken haben.


Schritt 18: Konstruktor für DockButton

Da wir einen Begrenzungsrahmen für DockButton erstellen müssen, erhalten wir seine eigenen Grenzen. Deshalb haben wir die Klasse flash.geom.Rectangle importiert

Was wir gemacht haben? Wir haben einen Konstruktor erstellt, der zuerst den buttonMode des Objekts auf true setzt, sodass unser DockButton als Button behandelt wird. Dann setzen wir mouseChildren auf false, damit Mausereignisse vom DockButton-Objekt stammen und nicht von einem anderen Objekt darin. Als nächstes erhalten wir die Grenzen des Objekts mit getBounds() und zeichnen mit dem Grafikobjekt ein transparentes Rechteck. (Die Grafik-Eigenschaft wird mit der Sprite-Klasse geliefert, und wir haben Sprite erweitert, um unser DockItem-Objekt zu erstellen. Jetzt haben wir unser DockItem erweitert, um unser DockButton-Objekt zu erstellen. DockButton enthält alles aus der Sprite-Klasse und der DockItem-Klasse.)


Schritt 19: Überprüfen Sie alles und testen Sie es

OK, lassen Sie uns eine Überprüfung durchführen:

  • Wir benötigen eine .fla-Datei (Beispiel: c:/macmenu/macmenu.fla).
  • Im selben Ordner wie die .fla-Datei benötigen wir einen anderen Ordner :/org/effects (Beispiel: c:/macmenu/org/effects).
  • In diesem Ordner benötigen wir zwei .as-Dokumente (DockItem.as und DockButton.as).
  • Innerhalb der .fla muss jedes Element in der Bibliothek mit einer Klasse verknüpft sein, und die Basisklasse jedes Elements muss org.effects.DockButton sein.

Wenn alles in Ordnung ist, testen Sie den Film...

(Wenn Sie zu diesem Zeitpunkt die Ordner org/effects in Ihren Klassenpfad einfügen möchten, können Sie diesen Ordner nicht in jedes von Ihnen erstellte Projekt kopieren und das DockItem oder den DockButton verwenden.)


Schritt 20: Ändern Sie die Farbe bei Mauszeiger

Warum nicht die Farbe der Schaltfläche ändern, wenn die Maus darüber fährt? In diesem Abschnitt werde ich lehren, wie. Zu diesem Zweck werden wir die TweenLite-Engine erneut verwenden, um dem Objekt einen gewissen Farbton zu verleihen. Wir verwenden TweenLite jedoch bereits im DockItem-Objekt und erweitern dieses Objekt in DockButton. Wir möchten DockButton erweitern, um die Farbe zu ändern, aber wir können TweenLite nicht mehr im selben Objekt verwenden, da das neue TweenLite-Objekt das andere überschreibt (selbst wenn die Eigenschaft overwrite:false in TweenLite die Leistung erheblich verringert, wenn wir verwenden es direkt im selben Objekt). Alles ist nicht verloren; Wir haben ein Symbol in jedem Objekt der Bibliothek und wir können den Farbton darauf anwenden.

Erstellen Sie dazu eine weitere ActionScript-Datei, speichern Sie diese jedoch im selben Ordner wie die .fla mit dem Namen "OverButton.as" (Beispiel: c:/macmenu/OverButton.as).


Schritt 21: Codieren des OverButton-Objekts

Zuerst erstellen wir das Paket und importieren die erforderlichen Klassen. Da wir die OverButton.as-Datei im selben Ordner wie die .fla-Datei gespeichert haben, befindet sich das Paket auf der obersten Ebene, sodass Sie nicht "package org.effects" schreiben müssen:

OK, dieses Mal erweitern wir DockButton und haben die DisplayObject-Klasse importiert, da wir das Symbol als DisplayObject behandeln. Wir haben auch MouseEvent importiert, mit dem wir überprüfen, ob sich die Maus über dem Symbol befindet und wann es ausgeht. Wir haben auch TweenLite, um einige Tween-Effekte mit der Farbe zu erzeugen.


Schritt 22: OverButton-Konstruktor

Warum haben wir ein privates var _object als DisplayObject erstellt? Unser eigentliches Symbol wird in dieser Variablen gespeichert (genau das tut Zeile 13) und als DisplayObject behandelt. Wir werden den Farbeffekt auf unser Symbol anwenden, nicht auf das gesamte Objekt.

Wir fügen die Ereignis-Listener der Maus hinzu, um zu überprüfen, wann die Maus vorbei ist und wann die Maus aus ist.


Schritt 23: Codieren von Mausfunktionen

Da wir die Listener für Mouse Over und Mouse Out erstellt haben, werden wir jetzt ihre Funktionen erstellen:

Beachten Sie, dass wir TweenLite jetzt für _object verwenden, nicht mehr für "this". Dies liegt daran, dass der OverButton den DockButton erweitert, der das DockItem erweitert, wenn bereits ein TweenLite verwendet wird. Außerdem haben wir in DockButton einen gefälschten Alpha 0-Hintergrund, der nicht gemalt werden muss.

Für die Tint-Eigenschaft von TweenLite habe ich einen Farbcode von 0x990099 verwendet, der ein mittleres Lila ist. Wenn Sie null als Wert verwenden, wird der Farbton sanft entfernt.


Schritt 24: Ändern Sie die Basisklassen

Wenn Sie den Film testen, werden Sie zu diesem Zeitpunkt keine Farbänderung feststellen, da wir die Basisklasse jedes Objekts in der Bibliothek erneut ändern müssen. Öffnen Sie die Bibliothek erneut in der .fla (Fenster > Bibliothek). Klicken Sie mit der rechten Maustaste auf jedes Objekt und ändern Sie seine Basisklasse in OverButton (nicht org.effects.OverButton, da sich die Klassendatei nicht im Ordner /org/effects befindet).

OK, jetzt können Sie es testen!

Abschluss

In diesem Tutorial habe ich das Erweitern von Objekten erklärt. Der eigentliche Dock-Effekt ist reine Mathematik - Entfernungsberechnungen, Skalierungseinstellungen - aber es ist wichtig, dass wir im Code sehen, dass wir die Eigenschaft "x" nicht als Positionsreferenz verwenden können, da die Eigenschaft "x" jedes Mal geändert wird. Ich hoffe, Sie alle haben jetzt ein besseres Verständnis für das Schlüsselwort "extends" und können verstehen, wie die Berechnungen hier durchgeführt werden. Danke fürs Lesen :)

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.