Schaltflächen in Flash MX Teil 2
Animierte Schaltflächen sind nicht nur schön anzuschauen, sie sind auch noch recht simpel zu erstellen. Durch das Hinzufügen eines Sounds erreichen Sie spätestens ein Niveau, das man nur auf wenigen guten Flash-Webseiten wieder findet.
Öffnen Sie ein neues Projekt und erstellen Sie einen Text. Ich habe mich für den Schriftzug „Flash-Button“ entschieden, wie Sie der im Anschluss des Artikels beigefügten Beispieldatei entnehmen können. Konvertieren Sie den Text in ein Grafik-Symbol. Gehen Sie dafür wie gewohnt vor, indem Sie den Text markieren und beispielsweise die Funktionstaste F8 drücken.
Erstellen eines Grafik-Symbols:
Wählen Sie als Symbolart „Grafik“. Verlassen Sie das Fenster über die OK-Schaltfläche und rufen Sie danach sofort wieder das Fenster auf. Dieses Mal erstellen Sie eine Schaltfläche. Wechseln Sie danach in den Bearbeitungsmodus des Schaltflächensymbols. Erstellen Sie in den Zuständen „Darüber“ und „Gedrückt“ ein Schlüsselbild. Im Zustand „Aktiv“ müssen Sie wegen der im ersten Teil erklärten Problematik eine durchgängige Fläche (z. B. ein Rechteck) zeichnen. Klicken Sie auf das Schlüsselbild im Zustand „Darüber“, sodass es markiert ist. Nun wollen wir unsere Animation erstellen. Rufen Sie hierfür erneut das Fenster zum Erzeugen eines Symbols auf. Dieses Mal wählen Sie die Symbolart „Movieclip“. Wechseln Sie anschließend in den Bearbeitungsmodus des Movieclips. Dies gelingt Ihnen am schnellsten über das Pulldown-Menü am rechten oberen Rand der Arbeitsbühne.
Symbolauswahl:
Sie können ebenso in der Bibliothek im Kontextmenü der rechten Maustaste den Eintrag „Bearbeiten“ wählen um zum Bearbeitungsmodus zu gelangen. Sie sehen erneut eine leere Zeitleiste vor sich. In der vorhandenen Ebene befindet sich lediglich eine Instanz des Grafik-Symbols. Erzeugen Sie eine weitere Ebene und fügen Sie dieser ebenso eine Instanz des Grafik-Symbols hinzu. Wiederholen Sie diesen Schritt. Zentrieren Sie die Symbole auf der Bühne, so dass alle Schriftzüge direkt übereinander liegen. Wechseln Sie in die mittlere Ebene und markieren Sie das Grafik-Symbol. Setzen Sie den Alpha-Wert auf 50%. Gehen Sie hierfür ins Eigenschaften-Bedienfeld und wählen unter Farbe den Eintrag „Alpha“. Setzen Sie im daneben erscheinenden Feld den Wert auf die besagten 50%. Wiederholen Sie diesen Schritt ebenso für die unterste Ebene der Zeitleiste.
Anpassung des Alpha-Wertes:
Fügen Sie nun im Bild 10 der mittleren Ebene ein Schlüsselbild ein. Markieren Sie in diesem Schlüsselbild das Grafik-Symbol und transformieren Sie die Größe des Symbols auf 200%. Hierfür rufen Sie am Besten das Bedienfeld „Transformieren“ auf. Setzen Sie den Alpha-Wert für die Grafik in diesem Schlüsselbild auf 0%. Nun wollen wir ein Bewegungs-Tween zwischen dem Schlüsselbild im Bild 1 und im Bild 10 erstellen. Wählen Sie hierfür wiederum das Bild 1 an und betätigen Sie die rechte Maustaste. Im aufkommenden Kontextmenü wählen Sie den Eintrag „Bewegungs-Tween erstellen“.
Wechseln Sie in die unterste Ebene und fügen Sie im Bild 5 und im Bild 15 ein Schlüsselbild ein. Wir wollen zwischen diesen beiden Schlüsselbildern den eben erstellen Effekt wiederholen. Gehen Sie also ins Bild 15 und transformieren Sie hier die Größe des Grafik-Symbols auf 200%, setzen Sie zudem den Alpha-Wert auf 0%. Erstellen Sie anschließend erneut ein Bewegungs-Tween zwischen dem Bild 5 und dem Bild 15. Da die anderen Ebenen keinen Effekt bis ins Bild 15 besitzen, müssen wir diese noch mit Bildern auffüllen. Gehen Sie in die entsprechenden Ebenen ins Bild 15 und wählen Sie im Kontextmenü der rechten Maustaste den Eintrag „Bild einfügen“ oder drücken Sie die Funktionstaste F5. Da unsere Animation nur ein Mal abgespielt werden soll, benötigen wir noch einen Stopp-Befehl. Gehen Sie ins Bild 15 der untersten Ebene und rufen Sie anschließend das Aktionen-Bedienfeld auf. Wählen Sie über das blaue Kreuz unter „Globale Funktionen“ im Bereich „Zeitleistensteuerung“ den Eintrag „stop“. Das Bedienfeld sollte nun folgendermaßen aussehen:
Das Bedienfeld Aktionen:
Testen Sie anschließend die fertige Animation mit Strg + Enter. Es sollte nacheinander zwei Mal der Schriftzug des Grafik-Symbols aus dem Original-Schriftzug austreten und schließlich verblassen. Die Zeitleiste der fertigen Animation sollte wie folgt aussehen:
Fertige Zeitleiste des Movieclips:
Wechseln Sie zurück in die Bühnenansicht. Sollte die Animation wie erwünscht funktionieren, so sollte nun auch Ihre Schaltfläche die Animation im Zustand „Darüber“ abspielen.
Lassen Sie uns die Schaltfläche mit einem Sound erweitern. Der Sound soll ebenso mit der Animation im Zustand „Darüber“ abgespielt werden. Hierfür müssen wir zunächst eine Sound-Datei im MP3- oder WAV-Format importieren. Gehen Sie im Menü „Datei“ auf den Eintrag „Importieren“ und wählen Sie hier den Befehl „In Bibliothek importieren“ aus. Wie der Befehl vermuten lässt, finden wir die Sound-Datei nach dem Importieren in der Bibliothek wieder. Damit der Sound nun mit der Animation abgespielt wird, müssen Sie wiederum in den Bearbeitungsmodus der Schaltfläche wechseln. Erstellen Sie eine zweite Ebene. Fügen Sie im Bild „Darüber“ ein Schlüsselbild ein. Gehen Sie anschließend in das Bedienfeld „Eigenschaften“. Unter „Sound“ können Sie nun Ihre Sounddatei auswählen. Sie sollten folgendes Bild in der Zeitleiste vorfinden:
Die „neue“ Zeitleiste des Buttons:
Bei Bedarf können Sie Ihren Sound noch mit Effekten wie beispielsweise einem Fade-In oder einem Fade-Out versehen. Die entsprechenden Einstellungen finden Sie ebenso im Bedienfeld „Eigenschaften“ unter „Effekte“. Mit einem Klick auf die Schaltfläche „Bearbeiten“ gelangen Sie zu einem erweiterten Editiermodus, um Ihren Sound mit individuellen Effekten auszustatten.
Bisher sind die erstellten Schaltflächen lediglich schön anzusehen. Sie lösen jedoch kein Ereignis aus und erzielen somit keine Interaktion mit dem Benutzer. Um die Schaltfläche mit einem Hyperlink zu versehen, klicken Sie auf die Schaltflächen-Instanz und rufen Sie anschließend das Aktionen-Bedienfeld auf. Fügen Sie folgende Codezeilen in das Bedienfeld ein:
Schaltflächen reagieren auf verschiedene Maus-Ereignisse. Wenn Sie eine Aktion ausführen wollen, muss das zu behandelnde Maus-Ereignis stets mit angegeben werden. Mit der Anweisung „on(release)“ reagieren Sie auf das Loslassen der Maustaste. Dies ist zugleich das am Häufigsten verwendete Ereignis. Mit dem Befehl „getURL“ erzeugen Sie einen Aufruf der im ersten Parameter angegebenen URL. Im zweiten Parameter bestimmen Sie das Zieldokument. Wählen Sie hier zwischen den in HTML üblichen Angaben „_blank“, „_parent“, „_self“ und „_top“. Mit dem Wert „_blank“ rufen wir die URL in einem neuen Browserfenster auf. Entscheiden Sie sich im letzten Parameter für eine der Request-Methoden „GET“ oder „POST“.
Beispieldatei: Animierte Schaltfläche mit Sound [Schaltflaechen_in_Flash_MX_Teil2.zip]
Öffnen Sie ein neues Projekt und erstellen Sie einen Text. Ich habe mich für den Schriftzug „Flash-Button“ entschieden, wie Sie der im Anschluss des Artikels beigefügten Beispieldatei entnehmen können. Konvertieren Sie den Text in ein Grafik-Symbol. Gehen Sie dafür wie gewohnt vor, indem Sie den Text markieren und beispielsweise die Funktionstaste F8 drücken.
Erstellen eines Grafik-Symbols:
Wählen Sie als Symbolart „Grafik“. Verlassen Sie das Fenster über die OK-Schaltfläche und rufen Sie danach sofort wieder das Fenster auf. Dieses Mal erstellen Sie eine Schaltfläche. Wechseln Sie danach in den Bearbeitungsmodus des Schaltflächensymbols. Erstellen Sie in den Zuständen „Darüber“ und „Gedrückt“ ein Schlüsselbild. Im Zustand „Aktiv“ müssen Sie wegen der im ersten Teil erklärten Problematik eine durchgängige Fläche (z. B. ein Rechteck) zeichnen. Klicken Sie auf das Schlüsselbild im Zustand „Darüber“, sodass es markiert ist. Nun wollen wir unsere Animation erstellen. Rufen Sie hierfür erneut das Fenster zum Erzeugen eines Symbols auf. Dieses Mal wählen Sie die Symbolart „Movieclip“. Wechseln Sie anschließend in den Bearbeitungsmodus des Movieclips. Dies gelingt Ihnen am schnellsten über das Pulldown-Menü am rechten oberen Rand der Arbeitsbühne.
Symbolauswahl:
Sie können ebenso in der Bibliothek im Kontextmenü der rechten Maustaste den Eintrag „Bearbeiten“ wählen um zum Bearbeitungsmodus zu gelangen. Sie sehen erneut eine leere Zeitleiste vor sich. In der vorhandenen Ebene befindet sich lediglich eine Instanz des Grafik-Symbols. Erzeugen Sie eine weitere Ebene und fügen Sie dieser ebenso eine Instanz des Grafik-Symbols hinzu. Wiederholen Sie diesen Schritt. Zentrieren Sie die Symbole auf der Bühne, so dass alle Schriftzüge direkt übereinander liegen. Wechseln Sie in die mittlere Ebene und markieren Sie das Grafik-Symbol. Setzen Sie den Alpha-Wert auf 50%. Gehen Sie hierfür ins Eigenschaften-Bedienfeld und wählen unter Farbe den Eintrag „Alpha“. Setzen Sie im daneben erscheinenden Feld den Wert auf die besagten 50%. Wiederholen Sie diesen Schritt ebenso für die unterste Ebene der Zeitleiste.
Anpassung des Alpha-Wertes:
Fügen Sie nun im Bild 10 der mittleren Ebene ein Schlüsselbild ein. Markieren Sie in diesem Schlüsselbild das Grafik-Symbol und transformieren Sie die Größe des Symbols auf 200%. Hierfür rufen Sie am Besten das Bedienfeld „Transformieren“ auf. Setzen Sie den Alpha-Wert für die Grafik in diesem Schlüsselbild auf 0%. Nun wollen wir ein Bewegungs-Tween zwischen dem Schlüsselbild im Bild 1 und im Bild 10 erstellen. Wählen Sie hierfür wiederum das Bild 1 an und betätigen Sie die rechte Maustaste. Im aufkommenden Kontextmenü wählen Sie den Eintrag „Bewegungs-Tween erstellen“.
Wechseln Sie in die unterste Ebene und fügen Sie im Bild 5 und im Bild 15 ein Schlüsselbild ein. Wir wollen zwischen diesen beiden Schlüsselbildern den eben erstellen Effekt wiederholen. Gehen Sie also ins Bild 15 und transformieren Sie hier die Größe des Grafik-Symbols auf 200%, setzen Sie zudem den Alpha-Wert auf 0%. Erstellen Sie anschließend erneut ein Bewegungs-Tween zwischen dem Bild 5 und dem Bild 15. Da die anderen Ebenen keinen Effekt bis ins Bild 15 besitzen, müssen wir diese noch mit Bildern auffüllen. Gehen Sie in die entsprechenden Ebenen ins Bild 15 und wählen Sie im Kontextmenü der rechten Maustaste den Eintrag „Bild einfügen“ oder drücken Sie die Funktionstaste F5. Da unsere Animation nur ein Mal abgespielt werden soll, benötigen wir noch einen Stopp-Befehl. Gehen Sie ins Bild 15 der untersten Ebene und rufen Sie anschließend das Aktionen-Bedienfeld auf. Wählen Sie über das blaue Kreuz unter „Globale Funktionen“ im Bereich „Zeitleistensteuerung“ den Eintrag „stop“. Das Bedienfeld sollte nun folgendermaßen aussehen:
Das Bedienfeld Aktionen:
Testen Sie anschließend die fertige Animation mit Strg + Enter. Es sollte nacheinander zwei Mal der Schriftzug des Grafik-Symbols aus dem Original-Schriftzug austreten und schließlich verblassen. Die Zeitleiste der fertigen Animation sollte wie folgt aussehen:
Fertige Zeitleiste des Movieclips:
Wechseln Sie zurück in die Bühnenansicht. Sollte die Animation wie erwünscht funktionieren, so sollte nun auch Ihre Schaltfläche die Animation im Zustand „Darüber“ abspielen.
Lassen Sie uns die Schaltfläche mit einem Sound erweitern. Der Sound soll ebenso mit der Animation im Zustand „Darüber“ abgespielt werden. Hierfür müssen wir zunächst eine Sound-Datei im MP3- oder WAV-Format importieren. Gehen Sie im Menü „Datei“ auf den Eintrag „Importieren“ und wählen Sie hier den Befehl „In Bibliothek importieren“ aus. Wie der Befehl vermuten lässt, finden wir die Sound-Datei nach dem Importieren in der Bibliothek wieder. Damit der Sound nun mit der Animation abgespielt wird, müssen Sie wiederum in den Bearbeitungsmodus der Schaltfläche wechseln. Erstellen Sie eine zweite Ebene. Fügen Sie im Bild „Darüber“ ein Schlüsselbild ein. Gehen Sie anschließend in das Bedienfeld „Eigenschaften“. Unter „Sound“ können Sie nun Ihre Sounddatei auswählen. Sie sollten folgendes Bild in der Zeitleiste vorfinden:
Die „neue“ Zeitleiste des Buttons:
Bei Bedarf können Sie Ihren Sound noch mit Effekten wie beispielsweise einem Fade-In oder einem Fade-Out versehen. Die entsprechenden Einstellungen finden Sie ebenso im Bedienfeld „Eigenschaften“ unter „Effekte“. Mit einem Klick auf die Schaltfläche „Bearbeiten“ gelangen Sie zu einem erweiterten Editiermodus, um Ihren Sound mit individuellen Effekten auszustatten.
Bisher sind die erstellten Schaltflächen lediglich schön anzusehen. Sie lösen jedoch kein Ereignis aus und erzielen somit keine Interaktion mit dem Benutzer. Um die Schaltfläche mit einem Hyperlink zu versehen, klicken Sie auf die Schaltflächen-Instanz und rufen Sie anschließend das Aktionen-Bedienfeld auf. Fügen Sie folgende Codezeilen in das Bedienfeld ein:
001:002:003:
on(release) { getURL("http://www.12max.de", "_blank", "GET"); }
Schaltflächen reagieren auf verschiedene Maus-Ereignisse. Wenn Sie eine Aktion ausführen wollen, muss das zu behandelnde Maus-Ereignis stets mit angegeben werden. Mit der Anweisung „on(release)“ reagieren Sie auf das Loslassen der Maustaste. Dies ist zugleich das am Häufigsten verwendete Ereignis. Mit dem Befehl „getURL“ erzeugen Sie einen Aufruf der im ersten Parameter angegebenen URL. Im zweiten Parameter bestimmen Sie das Zieldokument. Wählen Sie hier zwischen den in HTML üblichen Angaben „_blank“, „_parent“, „_self“ und „_top“. Mit dem Wert „_blank“ rufen wir die URL in einem neuen Browserfenster auf. Entscheiden Sie sich im letzten Parameter für eine der Request-Methoden „GET“ oder „POST“.
Beispieldatei: Animierte Schaltfläche mit Sound [Schaltflaechen_in_Flash_MX_Teil2.zip]
