Bewegungsunschärfe mit ActionScript
Wenn wir von Bewegungsunschärfe sprechen, dann meinen wir in diesem Zusammenhang das Erzeugen einer Unschärfe oder eines Weichzeichnungs-Effektes in einem Bild durch Bewegen der jeweiligen Grafik oder genauer einer Instanz der Grafik. Durch den Einsatz von ActionScript stehen Ihnen zahlreiche Möglichkeiten zur Verfügung, diesen Effekt auszunutzen
Erstellen Sie ein neues Flashdokument. Für die Darstellung der Effekte benötigen wir zunächst eine Grafik. Zum Importieren einer Bilddatei betätigen Sie die Tastenkombination Strg + R. Richten Sie die Grafik an der linken oberen Ecke der Bühne, dem so genannten Nullpunkt, aus. Verschieben Sie hierfür das Objekt per Drag & Drop mit der Maus. Genauer geht es über das Bedienfeld „Eigenschaften“ durch Angabe des Wertes „0“ für die X- und Y-Koordinate. Da wir die Grafik mehrmals auf der Bühne platzieren wollen, sollten wir diese aber noch in ein Symbol konvertieren. Mittels der Funktionstaste F8 rufen Sie das Dialogfenster zum Konvertieren auf
Das Dialogfenster zum Konvertieren:
Wählen Sie unter Verhalten die Option „Movieclip“. Erzeugen Sie anschließend eine zweite Ebene in der Zeitleiste und platzieren Sie auf dieser eine Instanz des soeben erzeugten Symbols. Rufen Sie dazu die Bibliothek mit Strg + L auf und ziehen Sie das Symbol per Drag & Drop auf die Bühne. Richten Sie die Instanz ebenso an dem Nullpunkt aus. Zu diesem Zeitpunkt sollte unser Dokument damit aus 2 Ebenen mit jeweils einer Instanz des Symbols bestehen.
Markieren Sie die Instanz in der oberen Ebene und gehen Sie erneut in das Bedienfeld Eigenschaften. Wählen Sie unter „Farbe“ den Eintrag „Alpha“ und setzen Sie den Alpha-Wert anschließend auf 30%.
Das Bedienfeld „Eigenschaften“:
Dieser Schritt ist notwendig, damit die Instanz des Grafik-Symbols auf der unteren Ebene weiterhin zu sehen ist. Durch Verschieben und Skalieren der Instanz auf der oberen Ebene erzeugen wir nun die gewünschte Unschärfe. Markieren Sie hierfür die Instanz und rufen Sie mit F9 das Aktionen-Fenster auf. Platzieren Sie in das Fenster folgenden Code:
Mit den obigen Anweisungen verändern wir bei jedem Bildereignis die Position und die Größe der Instanz. Dabei nutzen wir die Funktion „random“ um einen zufälligen Wert zwischen 0 und dem angegebenen Zahlenwert zu erhalten. Testen Sie die fertige Animation durch Betätigen der Tastenkombination Strg + Eingabe. Bedenken Sie, dass Sie den Effekt durch den Einsatz mehrerer Instanzen verstärken können. Verändern Sie den ActionScript in der Instanz der oberen Ebene zu dem Folgenden:
Statt Zufallswerte zu verwenden, wollen wir dieses Mal lediglich eine Zählervariable „i“ hoch zählen lassen. Zunächst initialisieren wir die Variable beim Laden jedoch mit dem Wert „0“. In jedem Bildereignis erhöhen wir den Wert daraufhin um Eins. Sobald sie den Wert 10 erreicht, setzen wir die Variable „i“ wieder auf den Startwert „0“ zurück. Entscheidend ist nun, dass wir bei jedem Bildereignis zusätzlich die X-Koordinate der Instanz beeinflussen. Ausgehend von einem Wert von 5 Pixeln verringern wir diesen um den Betrag von „i“.
Erstellen Sie eine weitere Ebene und platzieren Sie dort eine neue Instanz des Symbols. Achten Sie darauf, dass sich die neue Ebene oberhalb der anderen Ebene in der Zeitleiste befindet. Setzen Sie den Alpha-Wert in der oben vorgestellten Vorgehensweise auf 30%. Rufen Sie anschließend für die Instanz das Aktionen-Fenster auf, um folgende ActionScript-Anweisungen einzufügen:
Das ActionScript unterscheidet sich nur in einer Zeile von dem Code der anderen Instanz. Wir beginnen mit einem Wert von „-5“ für die X-Koordinate der Instanz und erhöhen diesen um den Betrag von „i“. Somit arbeiten beide Instanzen gegeneinander. Die Auswirkungen dieser Technik können Sie durch Betätigen der Tasten Strg + Eingabe bewundern.
Verstehen Sie diesen Artikel eher als eine Anregung. Wir haben Ihnen einen schönen Effekt gezeigt, mit dem sich in vielen Variationen tolle Animationen erstellen lassen. Ihrer Fantasie sind dabei keine Grenzen gesetzt.
Beispieldatei: Zufallswerte [Bewegungsunschaerfe_mit_ActionScript1.zip]
Beispieldatei: Doppelte Verschiebung [Bewegungsunschaerfe_mit_ActionScript2.zip]
Erstellen Sie ein neues Flashdokument. Für die Darstellung der Effekte benötigen wir zunächst eine Grafik. Zum Importieren einer Bilddatei betätigen Sie die Tastenkombination Strg + R. Richten Sie die Grafik an der linken oberen Ecke der Bühne, dem so genannten Nullpunkt, aus. Verschieben Sie hierfür das Objekt per Drag & Drop mit der Maus. Genauer geht es über das Bedienfeld „Eigenschaften“ durch Angabe des Wertes „0“ für die X- und Y-Koordinate. Da wir die Grafik mehrmals auf der Bühne platzieren wollen, sollten wir diese aber noch in ein Symbol konvertieren. Mittels der Funktionstaste F8 rufen Sie das Dialogfenster zum Konvertieren auf
Das Dialogfenster zum Konvertieren:
Wählen Sie unter Verhalten die Option „Movieclip“. Erzeugen Sie anschließend eine zweite Ebene in der Zeitleiste und platzieren Sie auf dieser eine Instanz des soeben erzeugten Symbols. Rufen Sie dazu die Bibliothek mit Strg + L auf und ziehen Sie das Symbol per Drag & Drop auf die Bühne. Richten Sie die Instanz ebenso an dem Nullpunkt aus. Zu diesem Zeitpunkt sollte unser Dokument damit aus 2 Ebenen mit jeweils einer Instanz des Symbols bestehen.
Markieren Sie die Instanz in der oberen Ebene und gehen Sie erneut in das Bedienfeld Eigenschaften. Wählen Sie unter „Farbe“ den Eintrag „Alpha“ und setzen Sie den Alpha-Wert anschließend auf 30%.
Das Bedienfeld „Eigenschaften“:
Dieser Schritt ist notwendig, damit die Instanz des Grafik-Symbols auf der unteren Ebene weiterhin zu sehen ist. Durch Verschieben und Skalieren der Instanz auf der oberen Ebene erzeugen wir nun die gewünschte Unschärfe. Markieren Sie hierfür die Instanz und rufen Sie mit F9 das Aktionen-Fenster auf. Platzieren Sie in das Fenster folgenden Code:
001:002:003:004:005:006:007:
onClipEvent(enterFrame) { this._x = -2 + random(5); this._y = -1 + random(3); this._xscale = 98 + random(5); this._yscale = 98 + random(5); }
Mit den obigen Anweisungen verändern wir bei jedem Bildereignis die Position und die Größe der Instanz. Dabei nutzen wir die Funktion „random“ um einen zufälligen Wert zwischen 0 und dem angegebenen Zahlenwert zu erhalten. Testen Sie die fertige Animation durch Betätigen der Tastenkombination Strg + Eingabe. Bedenken Sie, dass Sie den Effekt durch den Einsatz mehrerer Instanzen verstärken können. Verändern Sie den ActionScript in der Instanz der oberen Ebene zu dem Folgenden:
001:002:003:004:005:006:007:008:
onClipEvent(load) { var i = 0; } onClipEvent(enterFrame) { i = (i < 10) ? i + 1 : 0; this._x = 5 - i; }
Statt Zufallswerte zu verwenden, wollen wir dieses Mal lediglich eine Zählervariable „i“ hoch zählen lassen. Zunächst initialisieren wir die Variable beim Laden jedoch mit dem Wert „0“. In jedem Bildereignis erhöhen wir den Wert daraufhin um Eins. Sobald sie den Wert 10 erreicht, setzen wir die Variable „i“ wieder auf den Startwert „0“ zurück. Entscheidend ist nun, dass wir bei jedem Bildereignis zusätzlich die X-Koordinate der Instanz beeinflussen. Ausgehend von einem Wert von 5 Pixeln verringern wir diesen um den Betrag von „i“.
Erstellen Sie eine weitere Ebene und platzieren Sie dort eine neue Instanz des Symbols. Achten Sie darauf, dass sich die neue Ebene oberhalb der anderen Ebene in der Zeitleiste befindet. Setzen Sie den Alpha-Wert in der oben vorgestellten Vorgehensweise auf 30%. Rufen Sie anschließend für die Instanz das Aktionen-Fenster auf, um folgende ActionScript-Anweisungen einzufügen:
001:002:003:004:005:006:007:008:
onClipEvent(load) { var i = 0; } onClipEvent(enterFrame) { i = (i < 10) ? i + 1 : 0; this._x = -5 + i; }
Das ActionScript unterscheidet sich nur in einer Zeile von dem Code der anderen Instanz. Wir beginnen mit einem Wert von „-5“ für die X-Koordinate der Instanz und erhöhen diesen um den Betrag von „i“. Somit arbeiten beide Instanzen gegeneinander. Die Auswirkungen dieser Technik können Sie durch Betätigen der Tasten Strg + Eingabe bewundern.
Verstehen Sie diesen Artikel eher als eine Anregung. Wir haben Ihnen einen schönen Effekt gezeigt, mit dem sich in vielen Variationen tolle Animationen erstellen lassen. Ihrer Fantasie sind dabei keine Grenzen gesetzt.
Beispieldatei: Zufallswerte [Bewegungsunschaerfe_mit_ActionScript1.zip]
Beispieldatei: Doppelte Verschiebung [Bewegungsunschaerfe_mit_ActionScript2.zip]
