Grundlagen in Flash MX: Die erste Animation
Stellen Sie sich vor, Sie wollen die junge Lebensgeschichte des Internets protokollieren. Flash hätte in diesem Protokoll mit Sicherheit einen Eintrag verdient. Als zunächst statische HTML-Seiten das Internet prägten und Scriptsprachen die ersten Interaktionen mit dem Benutzer erlaubten, war das Internet überwiegend auf das Vermitteln von Informationen bedacht. Erst mit der Zugänglichkeit schnellerer Internetverbindungen, aber auch mit der Etablierung von Flash, lernte das Internet seine multimediale Seite so richtig auszuleben. Heutzutage ist Flash mit seinen animierten Bannern, aufwendig gestalteten Filmsequenzen, komplett interaktiven Webseiten und amüsanten Browsergames kaum noch aus dem WWW wegzudenken.
Die Möglichkeiten der Animation in Flash sind ebenso wie die Bedienung umfangreich. Aus diesem Grunde können wir im Rahmen eines Artikels keine Anleitung zu einer umfassenden Animation bieten und geben an dieser Stelle nur einen Einblick zum Aufbau sowie eine Anleitung zum Testen einer Animation.
Als Flash-Anwender wissen Sie bereits von der zentralen Bedeutung der Zeitleiste bei der Erstellung einer Animation. Sollten Sie den Artikel „Die Zeitleiste“ noch nicht gelesen haben und kein Grundwissen über die Bedienung der Zeitleiste von Flash MX besitzen, so empfehle ich Ihnen an dieser Stelle zum Verständnis des vorliegenden Textes den obigen Artikel.
Eine Flash-Animation besteht, naiv betrachtet, aus einer Hintereinanderreihung von Einzelbildern in unserer Zeitleiste. Zum Erstellen einer simplen Animation, wie das Bewegen eines Objektes, müssen Sie nun nicht mühselig viele Einzelbilder in der Zeitleiste hintereinander anordnen. Grundlegend definieren Sie lediglich zwei Zustände. Die Berechnung des Übergangs vom einen in den anderen Zustand erledigt Flash für Sie. Zum Definieren eines Zustandes benötigen Sie die bereits bekannten Schlüsselbilder. Für eine Animation benötigen Sie also mindestens zwei Schlüsselbilder. Die Zustände der Objekte in den jeweiligen Schlüsselbildern müssen sich natürlich unterscheiden. Dies kann beispielsweise in der Position, der Farbe oder der Form sein.
Erstellen Sie ein neues Projekt und fügen Sie im ersten Bild der Zeitleiste ein Objekt auf der Bühne ein. Wie Sie bereits wissen, liegt im ersten Bild der Zeitleiste direkt ein Schlüsselbild vor. Fügen Sie im Bild 30 ein weiteres Schlüsselbild ein und verschieben Sie die Position des Bühnenobjektes in diesem Bild.
Zeitleiste mit 2 Schlüsselbildern:
Wenn Sie die Animation gegenwärtig abspielen würden, würde das Objekt die ersten 29 Bilder an der ursprünglichen Position verharren und im 30. Bild an die veränderte Position springen. Was fehlt, ist die Berechnung der Zwischenschritte. Markieren Sie den gesamten Bilderblock inklusive der Schlüsselbilder. Betätigen Sie anschließend die rechte Maustaste und wählen im Kontextmenü den Eintrag „Bewegungs-Tween erstellen“. Ihre Zeitleiste sollte nun wie folgt aussehen:
Ebene mit Bewegungs-Tween:
Verschieben Sie anschließend den Abspielcursor in der Zeitleiste, so werden Sie sehen, dass Flash die nötigen Zwischenschritte für Sie berechnet hat. Mit der Tastenkombination Shift + Enter können Sie Ihr Ergebnis nun testen. Ich empfehle Ihnen jedoch zur genaueren Abspielsteuerung die Steuerungsleiste zu verwenden. Diese finden Sie im Fenster-Menü im Bereich „Symbolleisten“ unter „Steuerung“.
Die Symbolleiste „Steuerung“:
Setzen Sie im Menü „Steuerung“ den Haken unter „In Schleife abspielen“, wenn Sie eine Endlosschleife beim Abspielen der Animation wünschen.
Mit Hilfe von Szenen können Sie Ihre Animation thematisch gliedern. So können Sie beispielsweise eine Animation in Vorspann, Hauptfilm und Abspann einteilen. Bei der Wiedergabe einer Animation, die aus mehreren Szenen besteht, fügt Flash die einzelnen Szenen automatisch wieder zusammen. Dabei orientiert sich Flash an die Reihenfolge der Szenen im Szenen-Fenster. Das Szenen-Fenster finden Sie unter den Design-Bedienfeldern im Fenster-Menü. Hier können Sie per Drag & Drop die Reihenfolge der Szenen verändern, Szenen hinzufügen, löschen und duplizieren oder die Benennung einer Szene per Doppelklick auf den jeweiligen Szenennamen ändern.
Das Szenen-Fenster:
Unter „Gehe zu“ im Menü „Ansicht“ können Sie jederzeit zwischen den einzelnen Szenen zur Bearbeitung wechseln.
Zum Testen aller Szenen mit der Abspielsteuerung muss im Steuerungs-Menü unter „Alle Szenen abspielen“ der Haken gesetzt sein. Sie können weiterhin im gleichen Menü unter „Szene testen“ oder mit der Tastenkombination Strg + Alt + Enter einzelne Szenen abspielen. Wählen Sie im Steuerungs-Menü den Eintrag „Film testen“ oder betätigen Sie die Tasten Strg + Enter um Ihre Animation unter echten Ausgabebedingungen abzuspielen.
Bisher haben wir den Begriff der Flash-Animation etwas naiv betrachtet. Erst durch den Einsatz von ActionScript, der programminternen Scriptsprache von Flash, werden viele Animationen, wie das Darbieten einer aktuellen Uhrzeit, erst möglich. Zum Verwalten von Benutzerinteraktionen ist ActionScript gänzlich unverzichtbar. ActionScript baut, wie auch JavaScript, auf dem ECMA-Standard auf. Bestehende Ähnlichkeiten in der Syntax beider Sprachen sind daher unverkennbar.
Lassen Sie uns einen ersten Gehversuch wagen. Wir wollen einen Eingriff auf die Abspielsteuerung der einzelnen Szenen unserer Animation riskieren.
Fügen Sie Ihrer obigen Animation eine zweite Szene über das Szenen-Fenster hinzu. Erstellen Sie in der zweiten Szene einige Objekte oder Animationen. Begeben Sie sich nun wieder in die erste Szene in das letzte Bild. Mit der Funktionstaste F9 oder über das Fenster-Menü im Bereich Entwicklungs-Bedienfelder können Sie nun das Aktionen-Fenster aufrufen. Klicken Sie auf das Plus-Symbol rechts oben, um eine Befehlsübersicht von ActionScript zu erhalten. Die Befehle sind seit Flash MX neu thematisch gegliedert. Wählen Sie aus dem Bereich „Globale Funktionen“ im Unterbereich „Zeitleistensteuerung“ den Eintrag „stop“. Sie sollten nun folgende Situation vorfinden:
Das Aktionen-Fenster:
Wenn Sie nun Ihre Animation testen, wird Flash nach der ersten Szene stoppen. In einem weiteren Schritt könnten Sie dem Betrachter über eine Schaltfläche das manuelle Fortfahren der Animation ermöglichen. Im gleichen Unterbereich der Befehlsübersicht stehen Ihnen weitere Befehle zur Verfügung, um einen direkten Einfluss auf die Abspielsteuerung der einzelnen Szenen zu erlangen. Holen Sie sich ruhig etwas Sicherheit im Umgang mit ActionScript und experimentieren Sie etwas herum.
Die Möglichkeiten der Animation in Flash sind ebenso wie die Bedienung umfangreich. Aus diesem Grunde können wir im Rahmen eines Artikels keine Anleitung zu einer umfassenden Animation bieten und geben an dieser Stelle nur einen Einblick zum Aufbau sowie eine Anleitung zum Testen einer Animation.
Als Flash-Anwender wissen Sie bereits von der zentralen Bedeutung der Zeitleiste bei der Erstellung einer Animation. Sollten Sie den Artikel „Die Zeitleiste“ noch nicht gelesen haben und kein Grundwissen über die Bedienung der Zeitleiste von Flash MX besitzen, so empfehle ich Ihnen an dieser Stelle zum Verständnis des vorliegenden Textes den obigen Artikel.
Eine Flash-Animation besteht, naiv betrachtet, aus einer Hintereinanderreihung von Einzelbildern in unserer Zeitleiste. Zum Erstellen einer simplen Animation, wie das Bewegen eines Objektes, müssen Sie nun nicht mühselig viele Einzelbilder in der Zeitleiste hintereinander anordnen. Grundlegend definieren Sie lediglich zwei Zustände. Die Berechnung des Übergangs vom einen in den anderen Zustand erledigt Flash für Sie. Zum Definieren eines Zustandes benötigen Sie die bereits bekannten Schlüsselbilder. Für eine Animation benötigen Sie also mindestens zwei Schlüsselbilder. Die Zustände der Objekte in den jeweiligen Schlüsselbildern müssen sich natürlich unterscheiden. Dies kann beispielsweise in der Position, der Farbe oder der Form sein.
Erstellen Sie ein neues Projekt und fügen Sie im ersten Bild der Zeitleiste ein Objekt auf der Bühne ein. Wie Sie bereits wissen, liegt im ersten Bild der Zeitleiste direkt ein Schlüsselbild vor. Fügen Sie im Bild 30 ein weiteres Schlüsselbild ein und verschieben Sie die Position des Bühnenobjektes in diesem Bild.
Zeitleiste mit 2 Schlüsselbildern:
Wenn Sie die Animation gegenwärtig abspielen würden, würde das Objekt die ersten 29 Bilder an der ursprünglichen Position verharren und im 30. Bild an die veränderte Position springen. Was fehlt, ist die Berechnung der Zwischenschritte. Markieren Sie den gesamten Bilderblock inklusive der Schlüsselbilder. Betätigen Sie anschließend die rechte Maustaste und wählen im Kontextmenü den Eintrag „Bewegungs-Tween erstellen“. Ihre Zeitleiste sollte nun wie folgt aussehen:
Ebene mit Bewegungs-Tween:
Verschieben Sie anschließend den Abspielcursor in der Zeitleiste, so werden Sie sehen, dass Flash die nötigen Zwischenschritte für Sie berechnet hat. Mit der Tastenkombination Shift + Enter können Sie Ihr Ergebnis nun testen. Ich empfehle Ihnen jedoch zur genaueren Abspielsteuerung die Steuerungsleiste zu verwenden. Diese finden Sie im Fenster-Menü im Bereich „Symbolleisten“ unter „Steuerung“.
Die Symbolleiste „Steuerung“:
Setzen Sie im Menü „Steuerung“ den Haken unter „In Schleife abspielen“, wenn Sie eine Endlosschleife beim Abspielen der Animation wünschen.
Mit Hilfe von Szenen können Sie Ihre Animation thematisch gliedern. So können Sie beispielsweise eine Animation in Vorspann, Hauptfilm und Abspann einteilen. Bei der Wiedergabe einer Animation, die aus mehreren Szenen besteht, fügt Flash die einzelnen Szenen automatisch wieder zusammen. Dabei orientiert sich Flash an die Reihenfolge der Szenen im Szenen-Fenster. Das Szenen-Fenster finden Sie unter den Design-Bedienfeldern im Fenster-Menü. Hier können Sie per Drag & Drop die Reihenfolge der Szenen verändern, Szenen hinzufügen, löschen und duplizieren oder die Benennung einer Szene per Doppelklick auf den jeweiligen Szenennamen ändern.
Das Szenen-Fenster:
Unter „Gehe zu“ im Menü „Ansicht“ können Sie jederzeit zwischen den einzelnen Szenen zur Bearbeitung wechseln.
Zum Testen aller Szenen mit der Abspielsteuerung muss im Steuerungs-Menü unter „Alle Szenen abspielen“ der Haken gesetzt sein. Sie können weiterhin im gleichen Menü unter „Szene testen“ oder mit der Tastenkombination Strg + Alt + Enter einzelne Szenen abspielen. Wählen Sie im Steuerungs-Menü den Eintrag „Film testen“ oder betätigen Sie die Tasten Strg + Enter um Ihre Animation unter echten Ausgabebedingungen abzuspielen.
Bisher haben wir den Begriff der Flash-Animation etwas naiv betrachtet. Erst durch den Einsatz von ActionScript, der programminternen Scriptsprache von Flash, werden viele Animationen, wie das Darbieten einer aktuellen Uhrzeit, erst möglich. Zum Verwalten von Benutzerinteraktionen ist ActionScript gänzlich unverzichtbar. ActionScript baut, wie auch JavaScript, auf dem ECMA-Standard auf. Bestehende Ähnlichkeiten in der Syntax beider Sprachen sind daher unverkennbar.
Lassen Sie uns einen ersten Gehversuch wagen. Wir wollen einen Eingriff auf die Abspielsteuerung der einzelnen Szenen unserer Animation riskieren.
Fügen Sie Ihrer obigen Animation eine zweite Szene über das Szenen-Fenster hinzu. Erstellen Sie in der zweiten Szene einige Objekte oder Animationen. Begeben Sie sich nun wieder in die erste Szene in das letzte Bild. Mit der Funktionstaste F9 oder über das Fenster-Menü im Bereich Entwicklungs-Bedienfelder können Sie nun das Aktionen-Fenster aufrufen. Klicken Sie auf das Plus-Symbol rechts oben, um eine Befehlsübersicht von ActionScript zu erhalten. Die Befehle sind seit Flash MX neu thematisch gegliedert. Wählen Sie aus dem Bereich „Globale Funktionen“ im Unterbereich „Zeitleistensteuerung“ den Eintrag „stop“. Sie sollten nun folgende Situation vorfinden:
Das Aktionen-Fenster:
Wenn Sie nun Ihre Animation testen, wird Flash nach der ersten Szene stoppen. In einem weiteren Schritt könnten Sie dem Betrachter über eine Schaltfläche das manuelle Fortfahren der Animation ermöglichen. Im gleichen Unterbereich der Befehlsübersicht stehen Ihnen weitere Befehle zur Verfügung, um einen direkten Einfluss auf die Abspielsteuerung der einzelnen Szenen zu erlangen. Holen Sie sich ruhig etwas Sicherheit im Umgang mit ActionScript und experimentieren Sie etwas herum.
