Erstellen von Schaltflächen in Adobe Animate

Suchen

Zuletzt aktualisiert am 1. Mai 2021

Schaltflächen in Animate (früher Flash Professional) sind Symbole, die vier Bilder enthalten. Jedes Bild eines Schaltflächensymbols stellt einen möglichen Status für die Schaltfläche dar: „Normal“, „Darüber“, „Gedrückt“ und „Aktiv“. Diese Status bestimmen die Darstellung der Schaltfläche, wenn die Maus darüber bewegt wird oder wenn der Benutzer auf die Schaltfläche klickt. In diesem Dokument wird die Erstellung einfacher und erweiterter Schaltflächen erklärt.

Einfache Schaltfläche erstellen

Wählen Sie „Einfügen“ > „Neues Symbol“ oder drücken Sie Strg+F8 (Windows) bzw. Befehlstaste+F8 (Macintosh).
Hinweis: Heben Sie in Flash 3 und früher die Auswahl aller Elemente auf der Bühne auf und wählen Sie „Einfügen“ > „Symbol erstellen“.
Geben Sie im Dialogfeld „Symboleigenschaften“ einen Namen für das neue Schaltflächensymbol und wählen Sie für „Verhalten“ die Option „Schaltfläche“. Klicken Sie auf „OK“.

Flash wechselt in den Symbolbearbeitungsmodus. In der Zeitleiste werden vier aufeinander folgende Bilder namens „Normal“, „Darüber“, „Gedrückt“ und „Aktiv“ angezeigt. Beim ersten Bild mit der Bezeichnung „Normal“ handelt es sich um einen leeren Keyframe.
Um das Bild für den Auf-Zustand der Schaltfläche zu erstellen, verwenden Sie die Zeichenwerkzeuge, importieren Sie eine Grafik oder platzieren Sie eine Instanz eines anderen Symbols auf der Bühne. Sie können entweder einen Movieclip oder ein Grafiksymbol in einer Schaltfläche verwenden. Es ist jedoch nicht möglich, eine andere Schaltfläche in einer Schaltfläche zu verwenden. Mithilfe von Movieclip-Symbolen können Sie eine animierte Schaltfläche erstellen.
Wählen Sie das zweite Bild mit der Bezeichnung „Darüber“ aus und wählen Sie „Einfügen“ > „Keyframe“. Das Schaltflächenbild aus dem ersten Bild wird auf der Bühne angezeigt.
Ändern Sie das Schaltflächenbild für den Status „Darüber“. Wiederholen Sie die Schritte 4 und 5 für die Bilder für „Gedrückt“ und „Aktiv“.

Hinweis:
Das Bild „Aktiv“ ist während der Wiedergabe nicht auf der Bühne sichtbar, es bestimmt jedoch den Bereich der Schaltfläche, der auf einen Klick reagiert. Achten Sie darauf, als Grafik für das Bild „Aktiv“ eine durchgehende Fläche zu verwenden, die so groß ist, dass sie sämtliche Grafikelemente der Bilder „Normal“, „Gedrückt“ und „Darüber“ umschließt. Diese Grafik kann durchaus auch etwas größer sein als die sichtbare Schaltfläche. Wenn Sie kein Bild für den Schaltflächenzustand „Aktiv“ erstellen, werden stattdessen die Objekte im Bild „Normal“ verwendet.
Nachdem Sie die Bilder für die vier Schaltflächenzustände definiert haben, wählen Sie „Bearbeiten“ > „Film bearbeiten“, um den Symbolbearbeitungsmodus zu beenden.
Öffnen Sie das Fenster „Bibliothek“, indem Sie „Fenster“ > „Bibliothek“ wählen. Suchen Sie die Schaltfläche im Fenster „Bibliothek“ und ziehen Sie das Schaltflächensymbol aus der Bibliothek auf die Bühne. Mit diesem Schritt erstellen Sie eine Instanz der Schaltfläche im Film.

Informationen zum Zuweisen von Aktionen zur Schaltflächeninstanz finden Sie in der Dokumentation zu der von Ihnen verwendeten Version von Animate. Die Dokumentation finden Sie im Folgenden:

Zuweisen einer einfachen Aktion zu einer Schaltfläche (Flash 5)

Wählen Sie im Filmbearbeitungsmodus die Schaltflächeninstanz, die Sie in Schritt 7 erstellt haben.
Wählen Sie „Fenster“ > „Aktionen“, um das Aktionen-Bedienfeld zu öffnen.
Klicken Sie in der Toolbox-Liste links im Fenster auf die Kategorie „Basic Actions“ (Einfache Aktionen), um die einfachen Aktionen anzuzeigen.
Um eine Aktion zuzuweisen, führen Sie einen der folgenden Schritte aus:
- Doppelklicken Sie in der Kategorie „Basic Actions“ auf eine Aktion.
- Ziehen Sie eine Aktion aus der Kategorie für einfache Aktionen links in die Aktionsliste im rechten Fensterbereich.
- Klicken Sie auf die Schaltfläche „Hinzufügen“ (+) und wählen Sie eine Aktion aus dem Popupmenü.
- Verwenden Sie den Tastaturbefehl.
Sind Parameter mit der gewählten Aktion verknüpft, werden diese im Bereich „Parameter“ unten im Fenster „Aktionen“ angezeigt. (Wenn der Bereich „Parameter „nicht sichtbar ist, klicken Sie auf das kleine Dreieck in der unteren rechten Ecke des Fensters.) Wählen Sie die benötigten Parameter für die Aktion bzw. geben Sie sie ein. So enthält beispielsweise die unten gezeigte Aktion gotoAndPlay drei Parameter: Szene, Typ, Bild, sowie eine Option für Goto and Play (Gehe zu und Wiedergabe).

Zuweisen einer einfachen Aktion zu einer Schaltfläche (Flash 4 und früher)

Wählen Sie im Filmbearbeitungsmodus die Schaltflächeninstanz, die Sie in Schritt 7 erstellt haben.
Stellen Sie sicher, dass die Option „Schaltflächen aktivieren“ aus dem Menü „Steuerung“ deaktiviert ist.
Doppelklicken Sie auf die Schaltfläche, um das Dialogfeld „Instanzeigenschaften“ zu öffnen.
Hinweis: Bei Flash 2 hatte dieses Dialogfeld den Namen „Link Properties: Button“ (Verknüpfungseigenschaften: Schaltfläche)
Weisen Sie die Aktion zu, indem Sie im Dialogfeld „Instanzeigenschaften“ die Registerkarte „Aktion“ öffnen. Klicken Sie auf die Schaltfläche mit dem Pluszeichen (+) und doppelklicken Sie auf die gewünschte Aktion.

Hinweis:
In Flash 2 verwenden Sie zum Zuweisen der Aktion das Popupmenü „Aktion“ im Dialogfeld „Link Properties: Button“ (Verknüpfungseigenschaften: Schaltfläche). Der Schaltfläche kann immer nur eine Aktion zugewiesen werden.
Stellen Sie sicher, dass die Schaltfläche „Aktivieren“ im Menü „Steuerung“ wieder aktiviert wird (ein Häkchen wird daneben angezeigt).
Wenn mit der ausgewählten Aktion Parameter verknüpft sind, werden diese im Bereich „Parameter“ rechts im Bereich „Aktionen“ angezeigt. Wählen Sie die benötigten Parameter für die Aktion bzw. geben Sie sie ein.

Erstellen erweiterter Schaltflächen

Nachdem Sie mit der Erstellung einfacher Schaltflächen vertraut sind, können Sie mit der Arbeit an komplexeren Animate-Schaltflächen beginnen. Sie können unsichtbare Schaltflächen, Schaltflächen mit animierten Zuständen und Schaltflächen mit Rollover-Effekten erstellen.

Beim Entwickeln komplexer Schaltflächen ist der Zustand „Aktiv“ von besonderer Bedeutung. Die Form und Fläche der Schaltfläche bestimmen deren aktiven Bereich.Experimentieren Sie wie folgt mit dem Status „Aktiv“:

Fügen Sie eine Schaltfläche aus den allgemeinen Bibliotheken auf der Bühne ein. Bearbeiten Sie die Schaltfläche.
Markieren Sie das Bild im Aktiv-Zustand der Schaltfläche und fügen Sie einen Keyframe ein. Aktivieren Sie dieses Verhalten in einem Film.
Verkleinern Sie das Objekt im Aktiv-Zustand erheblich und testen Sie das Ergebnis.
Löschen Sie den Keyframe im Aktiv-Zustand und testen Sie die Schaltfläche.
Beachten Sie die Auswirkungen auf den Schaltflächencursor und auf die Zustände „Normal“, „Darüber“, „Gedrückt“ und „Aktiv“, wenn die Schaltfläche aktiviert wird.

Unsichtbare Schaltflächen

Sie können die Status „Nach oben“, „Nach unten“ und „Darüber“ einer Schaltfläche leer lassen. Wenn diese Status leer sind, muss der Status „Aktiv“ mit Inhalt definiert werden.

Wenn der Zustand „Normal“ der Schaltfläche leer oder unsichtbar ist, wird diese auf der Bühne als blaue Form dargestellt. Diese Form entspricht dem Inhalt des nächsten Keyframes in der Schaltfläche. Im fertigen Film ist die blaue Form nicht sichtbar.

Schaltflächen mit animierten Zuständen

Um animierte Schaltflächen in Animate zu erstellen, platzieren Sie einen Movieclip in den Zustand, den Sie animieren möchten.

Erstellen Sie einen Movieclip für jeden Schaltflächenzustand, der animiert werden soll.
Erstellen Sie die Schaltfläche.
Platzieren Sie die Movieclips in den zu animierenden Schaltflächenzuständen.
Platzieren Sie die Schaltfläche auf der Bühne.
Hinweis: Movieclips können nicht im Code der Editor überprüft werden. Wählen Sie „Steuerung“ > „Film testen“ oder exportieren Sie den Film als SWF-Datei, um ihn zu testen.

Ein Rollover in einem Bereich des Films wirkt sich auf einen anderen Bereich des Films aus

Um diesen Effekt zu erzielen, verschieben Sie die Elemente des Zustands „Aktiv“ an eine andere Stelle der Bühne als die Elemente des Zustands „Darüber“. Diese Methode funktioniert für einfache Rollover-Effekte. Der aktive Bereich der Schaltfläche befindet sich an einer anderen Stelle der Bühne als der Rollover-Effekt.

Weitere Informationen

Eine gute Möglichkeit, mehr über Schaltflächen und ihre Erstellung zu erfahren, besteht darin, die als Muster mit Animate bereitgestellten Schaltflächen zu analysieren. In Version 5 sind diese Beispielschaltflächen über „Fenster“ > „Allgemeine Bibliotheken“ > „Schaltflächen“ verfügbar. Wenn Sie Version 4 verwenden, können Sie über „Bibliotheken“ > „Schaltflächen“ auf diese Schaltflächen zugreifen. In Version 2 können die Bibliotheken mit Beispielschaltflächen über das Extras-Menü aufgerufen werden.

Eine schrittweise Anleitung zum Erstellen einer Schaltfläche finden Sie auch in den mit Version 5 bereitgestellten Lektionen. Wählen Sie in Flash „Hilfe“ > „Lektionen“ > „06 Schaltflächen“, um diese Lektion aufzurufen.