Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Effects

Erstellen einer Schaltfläche mit vier Status mit der Flash-Timeline und ActionScript 3.0

by
Read Time:13 minsLanguages:

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

Dieses Tutorial entstand, nachdem online nach Hilfe zum selben Thema gesucht wurde. Viele Leute scheinen die gleiche Frage zu stellen, aber es war schwierig, eine ordentlich verpackte Anleitung zu finden, der sie folgen konnten.

Wie jeder anständige Internetnutzer habe ich diesen Artikel zusammengeschustert, mich von einigen anderen Blogs inspirieren lassen und die Erfahrungen aus einigen Versuchen und Irrtümern selbst genutzt. Und jetzt biete ich es Ihnen an, in der Hoffnung, dass dies Ihre eigene Suche beendet.

In diesem Lernprogramm wird Flash CS4 in Kombination mit ActionScript 3.0 verwendet. Sie können diese Prinzipien jedoch in Flash CS3 anwenden. Es wird davon ausgegangen, dass Sie bereits ein gutes Gespür für das Erstellen von Animationen in der Timeline haben und ein gutes Verständnis dafür haben, wie ActionScript auf die Timeline angewendet wird.

Ziel ist es, eine Navigationsschaltfläche in Form einer seitlich versteckten Registerkarte zu haben, mit der Sie durch eine Bildpräsentation rückwärts gehen können. Ich möchte, dass es sich öffnet, die Farbe ändert und das Etikett anzeigt. Wenn der Benutzer darauf klickt, navigiert er eine Folie zurück. Wenn der Benutzer vor dem Klicken eine Maus ausstellt, wird er an seine ursprüngliche Position und Farbe zurückgeschoben.

Hinweis: Denken Sie daran, häufig zu speichern, um nicht von vorne zu beginnen, falls etwas schief gehen sollte.

Grenzen des Schaltflächensymbols

Mit Flash können Sie ein Schaltflächensymbol erstellen, es ist jedoch auf drei Zustände beschränkt: Auf/Up, Über/Over und Ab/Down. Es gibt auch Treffer, der den interaktiven Bereich um die Schaltfläche definiert. Dies ist für die meisten Verwendungen einer einfachen Schaltfläche in Ordnung. Tatsächlich ist dieses Schaltflächensymbol ein Mitglied der SimpleButton-Klasse. Was aber, wenn Sie das Erscheinungsbild der Schaltfläche ändern oder animieren möchten, wenn der Benutzer mit der Maus über die Maus fährt und sie dann ohne Klicken entfernt? In diesem Fall benötigen Sie einen vierten Status namens Out.

Das eingebaute Schaltflächensymbol hat leider keinen Ausgangszustand.

Hier ist der Imbiss: Jedes Symbol, wie ein Grafiksymbol oder ein Movieclip-Symbol, kann zu einer Schaltfläche werden. Sie müssen nur das richtige ActionScript anwenden. In diesem Tutorial wird ein Movieclip in eine Schaltfläche mit vier Status umgewandelt.

Schritt 1: Storyboard oder Skizze der Schaltfläche

Es wird Ihr Leben viel einfacher machen, wenn Sie bereits eine klare visuelle Vorstellung davon haben, wie sich Ihre Schaltfläche in jedem der vier Zustände verhält. Skizzieren Sie es auf Papier oder verwenden Sie Illustrator oder Photoshop, um Prototypen der visuellen Elemente zu erstellen, die wiederum in Flash importiert werden können. Dies ist ein bisschen Arbeit im Vorfeld, aber es ist viel besser, als blind zu arbeiten und zurück zu gehen und etwas zu reparieren, weil das Konzept nicht logisch durchdacht wurde.

Step 1Step 1Step 1

Schritt 2: Richten Sie das Dokument ein

Erstellen Sie ein neues Dokument und wählen Sie Flash-Datei (ActionScript 3.0). Stellen Sie die Bühne mit der richtigen Größe und Hintergrundfarbe ein.

Step 2Step 2Step 2

Schritt 3: Erstellen Sie ein leeres Movieclip-Symbol

Anstatt ein Schaltflächensymbol zu erstellen, erstellen wir ein neues Movieclip-Symbol. Drücken Sie Strg-F8 (Befehl-F8 auf einem Mac) oder wählen Sie Einfügen > Neues Symbol aus dem Menü. Wir nennen es "Four State Button".

Step 3Step 3Step 3

Schritt 4: Fügen Sie eine Aktionsebene hinzu

Fügen Sie im Movieclip "four state button" eine neue Ebene hinzu und nennen Sie sie "actions".

Step 4Step 4Step 4

Schritt 5: Fügen Sie Beschriftungen für die vier Zustände hinzu

Erstellen Sie eine weitere Ebene und nennen Sie sie "labels". Fügen Sie vier leere Keyframes in ungefähr gleichen Abständen gerade so weit ein, dass Sie genügend Platz zum Lesen der einzelnen Etiketten lassen. Hier habe ich sie in 20 Frame-Intervallen platziert. Geben Sie im Eigenschaftenfenster die Beschriftungsnamen up, over, down und out an. Dies sind Ihre Schaltflächenzustände.

Step 5Step 5Step 5

Schritt 6: Erstellen Sie Aktions-Keyframes

Fügen Sie in der Aktionsebene Keyframes hinzu, die den vier Zuständen in der Beschriftungsebene entsprechen.

Step 6Step 6Step 6

Schritt 7: Stoppaktionen hinzufügen

Fügen Sie für jeden leeren Keyframe in der Aktionsebene this.stop() hinzu. im ActionScript-Editor. Dadurch wird sichergestellt, dass der Movieclip nicht in andere Schaltflächenzustände abgespielt wird.

Step 7Step 7Step 7

Schritt 8: Der Up-Status

Erstellen Sie ein neues Movieclip-Symbol, indem Sie Strg-F8 (Befehlstaste-F8 auf einem Mac) drücken, oder wählen Sie im Menü Einfügen > Neues Symbol und nennen Sie es "Animation hoch".

Step 8Step 8Step 8

Schritt 9: Up State Graphic

Zeichnen Sie für die Schaltfläche ein grünes Kästchen in einer Ebene und fügen Sie einen weißen Pfeil in eine Ebene darüber ein. Stellen Sie sicher, dass es in der oberen linken Ecke registriert ist. Da dies statisch ist, ist keine Reihe von Frames für die Animation erforderlich, aber Sie haben immer die Flexibilität, wenn Sie sich entscheiden, sie zu animieren, z. B. eine Box, die in der Ansicht eingeblendet wird.

Step 9Step 9Step 9

Schritt 10: Fügen Sie eine Stoppaktion hinzu

Erstellen Sie eine neue Ebene und nennen Sie sie "actions". Stellen Sie sicher, dass es oben ist. Wählen Sie den leeren Keyframe aus und fügen Sie this.stop() hinzu. zum ActionScript-Editor. In diesem Fall ist dies nicht unbedingt erforderlich, da es sich nur um ein statisches Bild handelt. Es empfiehlt sich jedoch, zu verhindern, dass sich jeder Status wiederholt.

Step 10Step 10Step 10

Schritt 11: Definieren Sie den Trefferbereich

Das einzige, was im Bearbeitungsmodus für Schaltflächensymbole fehlt, das Sie bei Movieclips nicht haben, ist ein spezielles Bild, das für den Trefferbereich reserviert ist. Dies würde die Grenzen definieren, an denen Mausereignisse wie Klicks und Hovers auftreten. Erstelle eine neue Ebene und nenne sie "hit area".

Zeichnen Sie eine Form auf der Ebene und setzen Sie ihren Alpha-Wert im Eigenschaftenfenster auf 0, um sie unsichtbar zu machen. Dieser Trefferbereich ist so groß wie die Schaltfläche, wenn er vollständig ausgefahren ist. Hinweis: Wenn Sie eine animierte Sequenz haben, stellen Sie sicher, dass sich die Frames des Trefferbereichs über die gesamte Länge der Animation erstrecken.

Step 11Step 11Step 11

Schritt 12: Instanziieren Sie den Up-State-Movieclip

Erstellen Sie eine neue Ebene im Movieclip-Symbol mit vier Statusschaltflächen, die als Schaltflächenstatus bezeichnet wird. Ziehen Sie eine Instanz des Up-Animationssymbols aus dem Bedienfeld Bibliothek in den Bearbeitungsbereich für Movieclipsymbole mit vier Statusschaltflächen in der Ebene Schaltflächenstatus. Stellen Sie sicher, dass die X- und Y-Koordinaten auf 0 eingestellt sind. Fügen Sie einen Frame in Frame 20 ein.

Step 12Step 12Step 12

Schritt 13: Der Over State

Drücken Sie Strg-F8 (Befehl-F8 auf einem Mac) oder wählen Sie Einfügen > Neues Symbol aus dem Menü und wählen Sie Movieclip. Wir nennen es "over animation".

Step 13Step 13Step 13

Schritt 14: Tween-Animation formen

Kehren Sie zum Movieclip "up animation" zurück, klicken Sie auf die grüne Schaltfläche und kopieren Sie ihn. Kehren Sie zum Filmclip "over animation" zurück und fügen Sie eine neue Ebene mit dem Namen "button morph" hinzu. Klicken Sie mit der rechten Maustaste, um die grüne Schaltfläche in den leeren Keyframe einzufügen.

Erstellen Sie einen weiteren leeren Keyframe in Frame 20 und klicken Sie mit der rechten Maustaste, um ihn wieder einzufügen. Erhöhen Sie mit dieser Form die Breite und ändern Sie die Farbe in Orange. Es sollte dieselbe Größe haben wie der in Schritt 10 erstellte Trefferbereich. Wählen Sie den gesamten Rahmenbereich aus und klicken Sie mit der rechten Maustaste, um ein Form-Tween zu erstellen.

Step 14Step 14Step 14

Schritt 15: Blenden Sie das Etikett ein

Um eine Schaltflächenbeschriftung hinzuzufügen, erstellen Sie eine neue Ebene mit dem Namen "text appear" und verwenden Sie das Textwerkzeug, um ein statisches Textobjekt zu erstellen, in diesem Fall VORHERIG in einem leeren Keyframe.

Klicken Sie mit der rechten Maustaste, um einen Frame in Frame 20 einzufügen. Wählen Sie einen Frame in der Ebene aus und klicken Sie mit der rechten Maustaste, um ein Bewegungs-Tween zu erstellen. Ich möchte, dass das Etikett ab der Mitte der Animation ausgeblendet wird. Deshalb gehe ich zum Bewegungseditor und erstelle in der Mitte und am Ende Keyframes, um drei Keyframes zu erstellen. Der erste Keyframe fügt einen Farbeffekt mit einem Alpha von 0% hinzu und die letzten beiden haben ein Alpha von 100%.

Step 15Step 15Step 15

Schritt 16: Definieren Sie den Trefferbereich

Füge eine neue Ebene mit dem Namen "hit area" hinzu. Sie können die längere orange Form am Ende des Form-Tweens auswählen, kopieren und an Ort und Stelle in einen leeren Keyframe auf der Ebene "hit area" einfügen. Wählen Sie es aus und geben Sie im Eigenschaftenfenster einen Alpha-Wert von 0% ein. Fügen Sie bei Bild 20 ein Bild ein, damit sich der Trefferbereich über die gesamte Animation erstreckt.

Step 16Step 16Step 16

Schritt 17: Fügen Sie eine Stoppaktion hinzu

Fügen Sie oben eine neue Ebene hinzu und nennen Sie sie "actions". Fügen Sie bei Frame 20 einen leeren Keyframe hinzu und fügen Sie this.stop() hinzu. Aktion im Aktionsbereich. Dadurch wird verhindert, dass sich die Animation wiederholt.

Step 17Step 17Step 17

Schritt 18: Instanziieren Sie den Over State

Kehren Sie zum Movieclip "four state button" zurück. Fügen Sie einen leeren Keyframe in Frame 21 auf der Ebene "Schaltflächenstatus" ein und ziehen Sie eine Instanz des Überanimations-Movieclips aus der Bibliothek. Stellen Sie sicher, dass die Koordinaten auf 0 gesetzt sind. Fügen Sie einen Frame in Frame 40 ein.

Step 18Step 18Step 18

Schritt 19: Der Down-Zustand

Erstellen Sie ein neues Grafiksymbol, indem Sie Strg-F8 (Befehlstaste-F8 auf einem Mac) drücken, oder wählen Sie Einfügen > Neues Symbol aus dem Menü und nennen Sie es "down graphic". Es ist keine explizite Animation erforderlich, da diese nur sofort angezeigt wird, wenn die Maustaste gedrückt wird.

Step 19Step 19Step 19

Schritt 20: Down State Graphic

Für diesen Zustand ist es lediglich erforderlich, die Farbe der vollständig erweiterten Schaltfläche zu ändern. Sie können das orangefarbene Feld sowie das PREVIOUS Etikett aus dem Movieclip "over animation" in die entsprechenden Ebenen kopieren und einfügen. Ändern Sie das orangefarbene Feld in rot. Es ist nur ein Frame erforderlich, es ist kein Trefferbereich erforderlich, da die Schaltfläche den gesamten Bereich abdeckt. Und da es sich um ein grafisches Symbol handelt, kein stop(); Aktion ist erforderlich.

Step 20Step 20Step 20

Schritt 21: Instanziieren Sie die Down State-Grafik

Kehren Sie zum Movieclip "four state button" zurück. Fügen Sie einen leeren Keyframe in Frame 41 auf der Ebene "button states" ein und ziehen Sie eine Instanz des Symbols "down graphic" aus der Bibliothek. Stellen Sie sicher, dass die Koordinaten auf 0 gesetzt sind. Fügen Sie einen Frame in Frame 60 ein.

Step 21Step 21Step 21

Schritt 22: Der Out-Status

Drücken Sie Strg-F8 (Befehl-F8 auf einem Mac) oder wählen Sie Einfügen > Neues Symbol aus dem Menü und wählen Sie Movieclip. Wir nennen es "out animation".

Step 22Step 22Step 22

Schritt 23: Kehren Sie das Form-Tween um

Der out-Zustand ist im Wesentlichen eine umgekehrte Version des over-Zustands. Kehren Sie zum Movieclip "over animation" zurück und kopieren Sie die Form zwischen den Frames. Kehren Sie dann zur "out animation" zurück, erstellen Sie eine Ebene mit dem Namen "button morph" und fügen Sie die Frames in den leeren Keyframe ein. Wählen Sie dann alle Frames in dieser Ebene aus und wählen Sie im Menü Ändern > Zeitleiste > Frames umkehren.

Step 23Step 23Step 23

Schritt 24: Blenden Sie das Etikett aus

Kehren Sie zum Movieclip "over animation" zurück und kopieren Sie das VORHERIGE Textobjekt. Kehren Sie dann zur "out animation" zurück, erstellen Sie eine neue Ebene mit dem Namen "text disappear" und fügen Sie sie ein.

Fügen Sie ein Bild in Bild 20 ein, wählen Sie den Bildbereich aus und erstellen Sie ein Bewegungs-Tween. Sie machen die Umkehrung des in Schritt 15 erstellten Bewegungs-Tweens und erstellen Keyframes in der Mitte und am Ende im Bewegungseditor. Der erste und mittlere Keyframe haben jedoch ein Alpha von 100%, während der letzte Keyframe ein Alpha von 100% hat 0%.

Step 24Step 24Step 24

Schritt 25: Fügen Sie den Pfeil hinzu

Um das Erscheinungsbild der Schaltfläche wieder in den ursprünglichen Zustand zu versetzen, fügen Sie eine Ebene mit dem Namen "arrow" hinzu und platzieren Sie einen Keyframe in Frame 20, wobei die ersten 19 Frames leer bleiben. Kopieren Sie den Pfeil aus der "up animation" und fügen Sie ihn wieder in die "out animation" in diesem letzten Keyframe ein.

Step 25Step 25Step 25

Schritt 26: Definieren Sie den Trefferbereich

Wieder müssen wir eine neue Ebene namens "hit area" erstellen und eine Box platzieren, die groß genug ist, um die volle Größe der erweiterten Schaltfläche abzudecken. Geben Sie ihm ein Alpha von 0, um es unsichtbar zu machen.

Step 26Step 26Step 26

Schritt 27: Fügen Sie eine Stoppaktion hinzu

Um zu verhindern, dass die "out animation" wiederholt wird, müssen wir eine Ebene mit dem Namen "Actions" hinzufügen, einen leeren Keyframe in Frame 20 einfügen und this.stop(); hinzufügen. Aktion im Bedienfeld Aktionen.

Step 27Step 27Step 27

Schritt 28: Instanziieren Sie den Out-Status

Kehren Sie zum Movieclip "four state button" zurück. Fügen Sie einen leeren Keyframe in Frame 61 auf der Ebene "button states" ein und ziehen Sie eine Instanz des Symbols "out animation" aus der Bibliothek. Stellen Sie sicher, dass die Koordinaten auf 0 gesetzt sind. Fügen Sie einen Frame in Frame 80 ein.

Step 28Step 28Step 28

Schritt 29: Ereignis-Listener hinzufügen

Jetzt kommt das ActionScript, damit alles funktioniert. Um Mausereignisse wie Klicks und Hovers zu erkennen, müssen wir Ereignis-Listener hinzufügen.

Klicken Sie im Movieclip "Vier-Status-Schaltfläche" auf den ersten Keyframe der Aktionsebene, in dem wir zuerst eine Stoppaktion hinzugefügt und das Bedienfeld Aktionen geöffnet haben. Wir werden Ereignis-Listener wie unten gezeigt hinzufügen, um eine Maus ROLL_OVER, eine MOUSE_UP (wenn die Maustaste losgelassen wird) und eine MOUSE_DOWN (wenn die Maustaste gedrückt wird) zu erkennen.

Wir verwenden das ROLL_OVER-Ereignis anstelle des MOUSE_OVER-Ereignisses, da es die untergeordneten Elemente des Movieclips im Kontext mit dem übergeordneten Movieclip behandelt, der für dieses Setup besser geeignet ist. Wir fügen den Parametern false, 0, true hinzu, um diese Listener für die Speicherbereinigung zu markieren, wenn sie nicht mehr benötigt werden.

Schritt 30: Funktionen umschalten

Für jeden Ereignis-Listener wird eine Funktion aufgerufen. Jede Funktion versetzt die Timeline im Wesentlichen in den entsprechenden Status innerhalb des Movieclips mit vier Statusschaltflächen und spielt diesen Abschnitt unter Bezugnahme auf den Labelnamen ab.

Sie werden feststellen, dass für ein MOUSE_OUT-Ereignis kein Ereignis-Listener erstellt wurde. Anstatt einen eigenständigen Ereignis-Listener zu erstellen, rufen wir einfach das ROLL_OVER-Ereignis auf, um eine Funktion aufzurufen, die wiederum ihren eigenen Ereignis-Listener entfernt und einen neuen Ereignis-Listener für ein ROLL_OUT-Ereignis hinzufügt. In diesem Setup funktioniert ein ROLL_OUT-Ereignis besser als ein MOUSE_OUT-Ereignis.

Gleiches gilt für das Gegenteil, bei dem ein ROLL_OUT-Ereignis seinen eigenen Listener entfernt und den Ereignis-Listener für ein ROLL_OVER-Ereignis wiederherstellt. Durch Umschalten dieser Rollover und Rollouts halten wir den Code sauber und frei von potenziellen Konflikten.

Schritt 31: Funktion onMouseDownButton

Erstellen Sie zum Abspielen des Down-Status eine Funktion, die dem vom Ereignis-Listener eingerichteten MOUSE_DOWN-Ereignis entspricht.

Schritt 32: onMouseClick-Funktion

Schließlich müssen wir der Schaltfläche tatsächlich mitteilen, was zu tun ist, wenn sie angeklickt wird. Fügen Sie eine Funktion hinzu, die dem Ereignis MOUSE_UP entspricht. Ein MOUSE_UP-Ereignis ist im Wesentlichen dasselbe wie der letzte Teil eines CLICK-Ereignisses (nach unten, dann nach oben).

Zu Testzwecken habe ich einen Weblink in einer URL-Variablen (in diesem Fall zur Adobe-Website) erstellt und der Funktion die navigateToURL() -Methode hinzugefügt, damit ich überprüfen kann, ob sie funktioniert. Sie können diese Methode jedoch durch einen Aufruf ersetzen, um mit gotoAndPlay oder einer anderen von Ihnen bevorzugten Methode zu einer anderen Frame-Bezeichnung, Nummer oder Szene zu navigieren.

Schritt 33: Instanziieren Sie die Schaltfläche

Die Schaltfläche mit vier Status kann jetzt verwendet werden. Kehren Sie zur Hauptzeitleiste zurück und ziehen Sie das Movieclip-Symbol mit vier Statusschaltflächen auf einer eigenen Ebene auf die Bühne. Auf einer anderen Ebene wird ein Ersatzhintergrund hinzugefügt, um den Effekt im Kontext mit anderen Elementen auf der Bühne besser zu sehen.

Step 33Step 33Step 33

Schritt 34. Testen Sie den Film

Stellen Sie sicher, dass die Datei gespeichert ist, und drücken Sie die Strg-Eingabetaste (Befehlstaste-Eingabetaste auf einem Mac), um den Film zu testen.

Danksagung

Vielen Dank an Alex in den Sanctified Studios für die Inspiration für die ursprüngliche Idee, einen Movieclip als Schaltfläche zu verwenden, und an Dominic Gelineau vom Zedia Flash Blog, der gezeigt hat, wie Rollovers und Rollouts in ActionScript 3 am besten erstellt werden können.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.