Zur Navigation springen | Zum Inhalt springen
Drucken Favoriten Weitersagen Sitemap

Bewegungsgestaltung per Formtweening

Autor:
McMiG
Schwierigkeit:
mittel
Kenntnisse:
-
Arbeitsmaterial:
download
Artikelbewertung:

Tutorial bewerten


Probleme mit dem Artikel?

Zum Forum


Bevor wir loslegen, stellt sich vielleicht die Frage was ein Formtweening überhaupt ist?!

Zuallererst gibt es 2 Tweeningarten in Flash: den Bewegungstween und den hier behandelten Formtween. Ersteres wird eingesetzt um Bildelemente von einer Stelle zur anderen wandern, zweiteres um einen Morpheffekt zwischen 2 Elementen entstehen zu lassen. Flash übernimmt in beiden Fällen die Berechnung der Zwischenbilder. Was wir also erstmal tun müssen, ist einen Anfangs- und einen Endpunkt zu setzen. Dies und die dazugehörigen Zwischenschritte möchte ich anhand einer sich im Wasser bewegenden Pflanze zeigen. (Das fertige Flash-Dokument findet Ihr in den Arbeitsmaterialien)


1. Erstellung eines Blattes

Um in Flash effizient zu arbeiten, sollten wir nicht jedes Blatt einzeln erstellen, sondern nur so viele wie nötig sind, um eine halbwegs echt wirkende Pflanze darzustellen. In diesem Fall also nur eines. Es wird als Grundlage für die anderen dienen.

Damit die Gestaltung einfacher von der Hand geht, empfiehlt es sich eine Ellipse aufzuziehen, die als Füllfarbe einen dunkleren Grün-Ton und eine schwarze Umrandung von 1 haben sollte. Mit Hilfe des „Unterauswahl“ - Werkzeuges (Shortcut A) und dem „Frei Transformieren“ - Tool (Shortcut Q) wird sie in eine uns ansprechende Blattform gebracht. Wenn wir damit fertig sind, erzeugen wir eine neue Ebene mit dem Symbol am linken Rand in der Zeitleiste. Dort wird vorläufig das Blattmark seinen Platz finden. Dieses erstellen wir indem der grüne Bereich des Blattgrundes mit dem „Pfeilwerkzeug“ (Shortcut V) markiert, per STRG + C kopiert und mit STRG + V in die neue Ebene eingefügt wird. Danach können wir es mit den gleichen Mitteln verjüngen, die uns geholfen haben, dass Blatt in Form zu bringen. Warum das ganze auf einer neuen Ebene? Ganz einfach: Flash vermischt die Formen und wir benötigen sie später getrennt.

Das immer noch markierte Objekt bekommt ein helleres Grün zugewiesen (Eigenschaften), als der Blattgrund. Jetzt nur noch die beiden Teile zusammenführen und fertig ist die Gestaltung des Referenzblattes. (Abb. 1) Natürlich kann dieser Schritt auch anders nachvollzogen werden, je nach eigener Vorliebe.


2. Bewegung ins Spiel bringen

Die Erweiterbarkeit von Flash-Projekten hängt oft mit einem effizienten Aufbau des Dokuments zusammen, deshalb konvertieren wir den vollständig markierten Blattgrund per Rechtsklick -> „In Symbol konvertieren“ in ein solches. Als Verhalten stellen wir „Movieclip“ ein, schließlich soll sich am Ende auch etwas bewegen. Wir wechseln in die temporäre Ebene mit dem Blattmark, nehmen es per STRG + C in den Zwischenspeicher, löschen die Ebene (per Drag&Drop auf den Mülleimer) und klicken doppelt auf das eben erstellte Blattgrundsymbol. Mit der letzten Aktion sind wir in die Ebene des Symbols gelangt, was eine Art Unterordner darstellt. Dort erzeugen wir wie gehabt eine neue Ebene und fügen in diese das Blattmark so ein, dass es auf den Grund passt. Alle Vorbereitungen sind damit abgeschlossen und wir kommen zum eigentlichen Teil des Tutorials.

Unsere Aufmerksamkeit gilt nun verstärkt der Zeitleiste. Im unteren Teil können wir die Bildwiederholrate ausmachen (2. Feld links von der vertikalen Scrollbar). Da wir weiche Bewegungsabläufe erzielen wollen setzen wir die Rate auf 30 Bilder pro Sekunde hoch (Doppelklick auf das Feld und 30 bei Bildrate eingeben). Bisher sind 2 Ebenen sichtbar, die 1 Bild lang sind. Wir markieren beide per SHIFT - Taste und mit Rechtsklick -> „Bilder kopieren“, einem weiteren Rechtsklick auf das 60ste Bild -> „Bilder einfügen“ erreichen wir eine Verlängerung des Films auf 2 Sekunden und Platz für den Formtween. Jetzt sollten beide Ebenen nochmals bei irgendeiner Bildnummer im grauen Bereich markiert und in der Eigenschaften – Leiste unter dem Punkt „Tween“ -> „Form“ ausgewählt werden. Die grauen Leisten wandeln sich in grüne, die jeweils mit einem Pfeil durchzogen sind. (Abb. 2) Das ist der Bereich den Flash berechnen wird. Geben wir dem Morph zu wenig Bilder wird er stockend, lassen wir ihm im Gegensatz zu viele wird er zu langatmig. Keine Angst, die Länge der Tweens kann man im nachhinein ändern. F5 fügt neue Bilder in die Leiste am markierten Punkt hinzu, SHIFT + F5 löscht sie wieder.

Die nächsten Schritte sind einfach, aber nicht ganz von Komplikationen befreit. Die Endbilder von der Blattgrund- und Blattmarkebene (immer noch grau) müssen jeweils der gewünschten Bewegung angepasst werden, genauso wie wir sie am Anfang aus der Ellipse erstellt haben, also per Transformieren (Q), Unterauswahl (A) usw.. Da sich die Blätter später relativ smooth bewegen sollen, reicht es allerdings aus, sie im ersten Bewegungsschritt etwas zu neigen. Die beiden Teilebenen müssen natürlich aneinander angepasst werden. Kleine Differenzen machen die Bewegung lebendiger, also brauchen wir hier nicht allzu pedantisch arbeiten.

Flash kann immer nur eine Form morphen. Da das Blatt aber aus 2 Elementen besteht, mussten wir es teilen. Um die Blattbewegung auch als solche erkennen zu können, sollten wir Zwischenschritte einlegen, sonst wird der Morph zu linear. Das ist auch der Grund, warum wir erstmal nur 2 Sekunden ausgefüllt haben. Um einen nächsten Bewegungsabschnitt zu beginnen, müssen die Endbilder wieder kopiert und nach ca. 60 Bildern eingefügt werden. Alles weitere wie gehabt. Der Schlusstween muss allerdings mit den Anfangsbildern enden, um einen sauberen Loop zu erhalten. Beim Rücklauf der Bewegung sollte nicht mit Arbeit gespart und ebenso viele Teilabschnitte eingebaut werden, wie am Anfang. Wenn wir den Film ab und zu testen (Steuerung -> Film testen), hilft uns das bei der Entscheidungsfindung, ob und welche Veränderungen noch gemacht werden müssen. Eine ausreichend lange Bewegung haben wir mit ca. 200 Einzelbildern und 4 Abschnitten (inklusive Rücklauf) erreicht. Wer will kann natürlich mehr machen und das Gesamtbild damit verfeinern.

Zu Problemen kann es kommen, wenn die Differenz zwischen Start- und Endform zu groß ist. Dann nämlich, weiß Flash nicht so recht wohin die Einzelpunkte gemorpht werden sollen und sucht sich meist den unpassendsten Weg aus. (Abb. 3)


Gehe zu Seite

Blattform erstellen
Abbildung 1
Blätter wachsen nicht nur auf Bäumen.
Zeitleiste
Abbildung 2
Die Zeitleiste, wenn der Formtween richtig angesetzt wurde.
Negativbeispiel
Abbildung 3
So sollte es nicht aussehen.