Schaltflächen in Flash MX Teil 1
Schaltflächen, im Web-Jargon auch gerne als Buttons bezeichnet, bieten Ihnen eine ideale Möglichkeit, mit dem Anwender zu interagieren. So können Sie dem Benutzer durch das Bereitstellen von Schaltflächen beispielsweise die Abspielsteuerung einer Animation überlassen oder gar das Navigieren durch die gesamte Webseite ermöglichen. Zum Erstellen eines Flash-Buttons benötigen wir natürlich eine optische Vorlage. Nutzen Sie die Flash-Werkzeuge und kreieren Sie sich eine Schaltfläche bis ins letzte Detail, so wie es der Benutzer später sehen soll. Prinzipiell reicht für unsere Ausführungen zunächst auch ein einfacher Text. Als nächstes müssen Sie Ihre Vorlage in ein Schaltflächen-Symbol konvertieren. Symbole sind wiederverwendbare Objekte, welche in der Bibliothek von Flash gelagert werden. Ein Symbol kann mehrmals auf der Bühne platziert werden. Dabei entstehen so genannte Instanzen vom Originalsymbol. Die Instanzen können Sie mit beliebigen Effekten ausstatten. Das Originalsymbol bleibt dabei unberührt. Wenn Sie jedoch das Originalsymbol bearbeiten, dann verändern Sie auch alle Instanzen auf der Bühne. Zum Erstellen eines Schaltflächen-Symbols markieren Sie zunächst die entsprechenden Objekte auf der Bühne. Wählen Sie nun aus dem Kontextmenü der rechten Maustaste den Eintrag „In Symbol konvertieren“. Sie können nach dem Markieren die Objekte ebenso in das Bibliothek-Bedienfeld ziehen oder die Funktionstaste F8 betätigen. In jedem Fall gelangen Sie zu einem neuen Fenster, in dem Sie aufgefordert werden, die Symbolart zu bestimmen und einen Namen für das Symbol zu vergeben.
Erstellen eines Symbols:
Zusätzlich können Sie den Registrierungspunkt angeben. Letzteres ist vor allem für die Drehbewegung und das Ausrichten des Symbols von Bedeutung. Wir wollen natürlich eine Schaltfläche erstellen. Wählen Sie daher die Symbolart „Schaltfläche“. Das Symbol wird nach Betätigung der OK-Schaltfläche unter dem gewählten Symbolnamen in der Bibliothek gelistet.
Entfernen Sie, falls nötig, im Menü „Steuerung“ unter „Schaltflächen aktivieren“ den Haken und klicken Sie anschließend doppelt auf die Instanz des Symbols, um in den Bearbeitungsmodus zu wechseln. Statt der üblichen Zeitleiste mit durchnummerierten Bildern sehen Sie nun vier Spezialbilder: „Up“, „Darüber“, „Gedrückt“ und „Aktiv“.
Die vier Zustandsbilder eines Schaltflächen-Symbols:
Das Bild „Up“ definiert den Zustand, den der Benutzer zu sehen bekommt, wenn kein Ereignis eintritt. Dieser Zustand legt somit das generelle Erscheinungsbild des Buttons fest. Im Zustandsbild „Darüber“ bestimmen Sie das Aussehen und Verhalten der Schaltfläche, wenn der Benutzer sich mit seinem Mauszeiger über der Schaltfläche befindet. Der Zustand „Gedrückt“ tritt ein, sobald der Benutzer die Schaltfläche betätigt. Das letzte Zustandsbild „Aktiv“ ist ein spezielles Bild. Hier definieren Sie den Bereich, auf den die Schaltfläche reagieren soll. Das Bild legt somit den klickbaren Bereich bzw. den Hotspotbereich für die Zustände „Darüber“ und „Gedrückt“ fest.
Bisher befindet sich nur im Zustand „Up“ ein Schlüsselbild. Damit Sie in den Bildern „Darüber“ und „Gedrückt“ optische Veränderungen am Button vornehmen oder aber ein weiterführendes Verhalten definieren können, benötigen Sie ebenso in diesen Zuständen ein Schlüsselbild. Klicken Sie hierfür auf das entsprechende Bild und betätigen Sie die Funktionstaste F6. Erstellen Sie ebenso im Zustand „Aktiv“ ein Bild und definieren Sie durch eine Form wie ein Rechteck oder einen Kreis den aktiven Bereich der Schaltfläche. Sollten Ihre Schaltfläche, wie anfänglich als ausreichend erklärt, lediglich aus einer Textebene bestehen, so reicht es keinesfalls, ein weiteres Text-Schlüsselbild im Zustand „Aktiv“ zu erstellen. Dieser häufige Anfängerfehler hätte zur Folge, dass der Mauszeiger bei geringen Positionsveränderungen innerhalb des Textes stetig zwischen dem Pfeil- und dem Handcursor wechselt. Der Grund liegt in der Tatsache, dass sich in diesem Fall im Bild „Aktiv“ nur der Text und keine durchgängige Fläche befindet. Beachten Sie, dass immer nur der Bereich einer Schaltfläche aktiv ist, der im Zustandsbild „Aktiv“ auch zeichnerisch vorgenommen wurde.
Verändern Sie beispielsweise im Zustand „Darüber“ die Farbe des Buttons und wechseln Sie anschließend wieder in die Bühnenansicht. Wenn Sie nun Ihre Schaltfläche mit Strg + Enter testen, sollten Sie zunächst den Zustand „Up“ sehen. Sobald Sie den Mauscursor über die Schaltfläche bewegen, sollte der entsprechende Zustand „Darüber“ mit dem Farbwechsel eintreten.
Neben der Standard-Schaltfläche gibt es einige weitere interessante Variationen. So können Sie ganze Animationen in einer Schaltfläche abspielen oder Sound-Dateien einbinden. Im zweiten Teil des Artikels werden wir auf diese Möglichkeiten zurückkommen. Eine ganz spezielle Variation der üblichen Schaltfläche bietet die so genannte unsichtbare Schaltfläche. Im ersten Moment scheint die Bezeichnung „unsichtbare Schaltfläche“ paradox. Was hätten Sie von einer Schaltfläche in ihrer Flash-Datei, die niemand sehen kann? Stellen Sie sich vor, Sie wollen nachträglich alle Schaltflächen mit einer neuen Schriftart versehen. Da Sie für jede Schaltfläche einzeln in den Zuständen „Up“, „Darüber“ und „Gedrückt“ eine entsprechende Korrektur vornehmen müssten, wären Sie bei lediglich 10 Schaltflächen schon bei 30 Korrekturvorgängen. Legen Sie jedoch eine unsichtbare Schaltfläche über einen normalen Text, so müssen Sie bei einem gewünschten Wechsel der Schriftart nur noch 10 Mal nachbessern.
Zum Erstellen einer unsichtbaren Schaltfläche gehen Sie zunächst gleichermaßen wie zuletzt vor. Erstellen Sie ein Rechteck und wandeln Sie dieses anschließend in ein Schaltflächen-Symbol um. Wie gewohnt, befindet sich lediglich im Bild „Up“ ein Schlüsselbild. Verschieben Sie dieses Schlüsselbild in den Zustand „Aktiv“. Das Rechteck legt somit den aktiven Bereich des Buttons fest.
Erstellen einer unsichtbaren Schaltfläche:
Das war auch schon alles. Wechseln Sie wieder in die Bühnenansicht. Sie sehen nun ein halbtransparentes Rechteck. Dies dient nur zur visuellen Kommunikation während der Bearbeitung und ist in der späteren Flash-Datei nicht mehr zu sehen. Legen Sie den gewünschten Text unter die Schaltfläche und testen Sie Ihr Ergebnis mit Strg + Enter.
Ohne ein Ereignis auszulösen sind unsere Schaltflächen bisher nur schön anzusehen. Das Hinzufügen eines Hyperlinks mit ActionScript ist jedoch schnell gemacht. Lesen Sie hierzu mehr im zweiten Teil des Artikels. Erfahren Sie zudem alles über animierte Schaltflächen und das Einbinden von Soundfiles.
[Schaltflaechen_in_Flash_MX_Teil1.zip]
Erstellen eines Symbols:
Zusätzlich können Sie den Registrierungspunkt angeben. Letzteres ist vor allem für die Drehbewegung und das Ausrichten des Symbols von Bedeutung. Wir wollen natürlich eine Schaltfläche erstellen. Wählen Sie daher die Symbolart „Schaltfläche“. Das Symbol wird nach Betätigung der OK-Schaltfläche unter dem gewählten Symbolnamen in der Bibliothek gelistet.
Entfernen Sie, falls nötig, im Menü „Steuerung“ unter „Schaltflächen aktivieren“ den Haken und klicken Sie anschließend doppelt auf die Instanz des Symbols, um in den Bearbeitungsmodus zu wechseln. Statt der üblichen Zeitleiste mit durchnummerierten Bildern sehen Sie nun vier Spezialbilder: „Up“, „Darüber“, „Gedrückt“ und „Aktiv“.
Die vier Zustandsbilder eines Schaltflächen-Symbols:
Das Bild „Up“ definiert den Zustand, den der Benutzer zu sehen bekommt, wenn kein Ereignis eintritt. Dieser Zustand legt somit das generelle Erscheinungsbild des Buttons fest. Im Zustandsbild „Darüber“ bestimmen Sie das Aussehen und Verhalten der Schaltfläche, wenn der Benutzer sich mit seinem Mauszeiger über der Schaltfläche befindet. Der Zustand „Gedrückt“ tritt ein, sobald der Benutzer die Schaltfläche betätigt. Das letzte Zustandsbild „Aktiv“ ist ein spezielles Bild. Hier definieren Sie den Bereich, auf den die Schaltfläche reagieren soll. Das Bild legt somit den klickbaren Bereich bzw. den Hotspotbereich für die Zustände „Darüber“ und „Gedrückt“ fest.
Bisher befindet sich nur im Zustand „Up“ ein Schlüsselbild. Damit Sie in den Bildern „Darüber“ und „Gedrückt“ optische Veränderungen am Button vornehmen oder aber ein weiterführendes Verhalten definieren können, benötigen Sie ebenso in diesen Zuständen ein Schlüsselbild. Klicken Sie hierfür auf das entsprechende Bild und betätigen Sie die Funktionstaste F6. Erstellen Sie ebenso im Zustand „Aktiv“ ein Bild und definieren Sie durch eine Form wie ein Rechteck oder einen Kreis den aktiven Bereich der Schaltfläche. Sollten Ihre Schaltfläche, wie anfänglich als ausreichend erklärt, lediglich aus einer Textebene bestehen, so reicht es keinesfalls, ein weiteres Text-Schlüsselbild im Zustand „Aktiv“ zu erstellen. Dieser häufige Anfängerfehler hätte zur Folge, dass der Mauszeiger bei geringen Positionsveränderungen innerhalb des Textes stetig zwischen dem Pfeil- und dem Handcursor wechselt. Der Grund liegt in der Tatsache, dass sich in diesem Fall im Bild „Aktiv“ nur der Text und keine durchgängige Fläche befindet. Beachten Sie, dass immer nur der Bereich einer Schaltfläche aktiv ist, der im Zustandsbild „Aktiv“ auch zeichnerisch vorgenommen wurde.
Verändern Sie beispielsweise im Zustand „Darüber“ die Farbe des Buttons und wechseln Sie anschließend wieder in die Bühnenansicht. Wenn Sie nun Ihre Schaltfläche mit Strg + Enter testen, sollten Sie zunächst den Zustand „Up“ sehen. Sobald Sie den Mauscursor über die Schaltfläche bewegen, sollte der entsprechende Zustand „Darüber“ mit dem Farbwechsel eintreten.
Neben der Standard-Schaltfläche gibt es einige weitere interessante Variationen. So können Sie ganze Animationen in einer Schaltfläche abspielen oder Sound-Dateien einbinden. Im zweiten Teil des Artikels werden wir auf diese Möglichkeiten zurückkommen. Eine ganz spezielle Variation der üblichen Schaltfläche bietet die so genannte unsichtbare Schaltfläche. Im ersten Moment scheint die Bezeichnung „unsichtbare Schaltfläche“ paradox. Was hätten Sie von einer Schaltfläche in ihrer Flash-Datei, die niemand sehen kann? Stellen Sie sich vor, Sie wollen nachträglich alle Schaltflächen mit einer neuen Schriftart versehen. Da Sie für jede Schaltfläche einzeln in den Zuständen „Up“, „Darüber“ und „Gedrückt“ eine entsprechende Korrektur vornehmen müssten, wären Sie bei lediglich 10 Schaltflächen schon bei 30 Korrekturvorgängen. Legen Sie jedoch eine unsichtbare Schaltfläche über einen normalen Text, so müssen Sie bei einem gewünschten Wechsel der Schriftart nur noch 10 Mal nachbessern.
Zum Erstellen einer unsichtbaren Schaltfläche gehen Sie zunächst gleichermaßen wie zuletzt vor. Erstellen Sie ein Rechteck und wandeln Sie dieses anschließend in ein Schaltflächen-Symbol um. Wie gewohnt, befindet sich lediglich im Bild „Up“ ein Schlüsselbild. Verschieben Sie dieses Schlüsselbild in den Zustand „Aktiv“. Das Rechteck legt somit den aktiven Bereich des Buttons fest.
Erstellen einer unsichtbaren Schaltfläche:
Das war auch schon alles. Wechseln Sie wieder in die Bühnenansicht. Sie sehen nun ein halbtransparentes Rechteck. Dies dient nur zur visuellen Kommunikation während der Bearbeitung und ist in der späteren Flash-Datei nicht mehr zu sehen. Legen Sie den gewünschten Text unter die Schaltfläche und testen Sie Ihr Ergebnis mit Strg + Enter.
Ohne ein Ereignis auszulösen sind unsere Schaltflächen bisher nur schön anzusehen. Das Hinzufügen eines Hyperlinks mit ActionScript ist jedoch schnell gemacht. Lesen Sie hierzu mehr im zweiten Teil des Artikels. Erfahren Sie zudem alles über animierte Schaltflächen und das Einbinden von Soundfiles.
[Schaltflaechen_in_Flash_MX_Teil1.zip]
