AS3-Tutorium: Flash: Butterfly 02 path

zurück zur Übersicht

Schmetterling fliegt auf einem Pfad

Im zweiten Teil des Tutoriums wird für den flatternden Schmetterling ein geschlossener Pfad definert, auf dem Schmetterling dauerhaft im Kreis fliegt.

<swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_02_path/multi/butterfly_02_path_multi.swf</swf> Erweiterte Musterlösung: butterfly_02_path.swf

Schmetterlingsmovie erstellen

1. In der Bibliothek: Klick auf rechte Maus-Taste → Neues Symbol → Name: ButterflyMovie.
2. Das Symbol ButterflyMovie in den Ordner ButterflyAssets verschieben.
3. In der Bibliothek: Doppel-Klick auf Icon vor dem Namen ButterflyMovie ⇒ Auf der Bühne wird ButterflyMovie geöffnet.
4. Zwei Ebenen erzeugen:
   • butterfly
   • boundingBox
5. Ansicht → Lineale aktivieren, evtl. auch Ansicht → Raster → Raster einbelnden.
6. Hilfslinien für Bühnenränder zeichnen (einfach in entsprechendes Lineal klicken, Maus-Taste gedrückt halten und Linie auf die Bühne ziehen).
7. Die Ebene boundingBox aktivieren.
8. Ein Rechteck zeichnen entlang der Hilfslinien zeichnen (damit später nicht die Bounding Box des Schmetterlings an dessen Startposition angezeigt wird, sondern die Bounding Box dieses Rechtecks).
9. Das Rechteck in ein Symbol mit Namen BoundingBox umwandeln (Rechteck selektieren, Taste F8).
10. Das Rechteck unsichtbar machen: Rechteck selektieren → Eigenschaften → Farbeffekt → Stil: Alpha → Wert 0%.
11. Die Ebene butterfly aktivieren.
12. Die Symbol butterfly auf die Bühne ziehen, positionieren und auf die gewünschte Große skalieren.

Die Bounding Box dient dazu, dass später, wenn man die Schmetterlingsanimation auf die Bühne zieht, die Fläche der gesamten Animation mit Hilfe eines Rahmens angezeigt wird. Ohne die Bounding Box sieht man sonst nur die Startposition des Schmetterlings. In diesem Fall ist es viel schieriger, die Animation korrekt auf der Bühne zu platzieren.

Fliegen mit „modernen“ Tweens (ab Flash 10)

<swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_02_path/butterfly_02_path.swf</swf> Musterlösung: butterfly_02_path.swf

1. In der Zeitleiste der Ebene Butterfly: Bild bei Frame 150 einfügen (rechter Mausklick → Bild einfügen).
2. In der Zeitleiste der Ebene Butterfly: rechter Mausklick auf Balken in der Zeitleiste → Bewegungs-Tween erstellen.
3. Sicherstellen, dass der Abspielkopf noch bei Frame 150 steht.
4. Klick auf das Icon Auswahlwerkzeug (V) (erstes Icon von oben in der Werkzeugleiste).
5. Den Schmetterling an eine andere Position auf der Bühne ziehen.
6. Den entstehenden Pfad mit Mauszeiger anfassen und verbiegen.
7. Den Pfad weiter gestalten (den Kopf an eine andere Position schieben und dann den Schmetterling verschieben, mit dem Unterauswahlwerkzeug (A) Schlüsselbilder bearbeiten, mit Hilfe des Bewegungs-Editor weitere Einstellungen vornehmen); für den später zu definierenden Rundflug wird ein Pfad benötigt, bei dem Anfang und Ende sehr nahe beieinander liegen.
8. Den Schmetterling in Pfadrichtung ausrichten (Pfad mit Auswahlwerkzeug (V)v selektieren → Eigenschaften → Häckchen vor An Pfad ausrichten).

Fliegen mit „klassischen“ Tweens (ab Flash 6)

1. In der Zeitleiste der Ebene Butterfly: Schlüsselbild bei Frame 150 einfügen (rechter Mausklick → Schlüsselbild einfügen).
2. In der Zeitleiste der Ebene Butterfly: Tween einfügen (rechter Mausklick auf einen Frame vor' Frame 150 → je nach Flash-Version: Klassisches Tween erstellen bzw. Tween einfügen).
3. Rechtsklick auf das Ebenensysmbol (links neben der Zeitleiste) Butterfly → je nach Flash-Version: Klassischen Pfad hinzufügen bzw. Pfad einfügen bzw. Pfad hinzufügen.
4. Die Pfad-Ebene selektieren.
5. Das Freihandwerkzeug mit Option smooth/Glätten bzw. Stiftwerkzeug aktivieren → Pfad zeichnen (ohne Kreuzung); für den später zu definierenden Rundflug wird ein Pfad benötigt, bei dem Anfang und Ende sehr nahe beieinander liegen.
6. Erstes Schmetterlingsbild: Schmetterling (Mittelpunkt) auf Pfad-Anfang legen, in Flugrichtung drehen und Größe anpassen:
   1. Die Ebene Butterfly aktivieren.
   2. Den ersten Schmetterlingsframe selektieren.
   3. Das Selektionswerkzeug aktivieren.
   4. Die Option (Eigenschaften-Inspektor): An Objekten ausrichten bzw. An Pfad ausrichten aktivieren.
   5. Flash 8: Shift drücken ⇒ Mittelpunkt rastet besser in Linie ein.
   6. Recher Mausklick → Frei transformieren: Schmetterling in Flugrichtung ausrichten.
7. Letztes Schmetterlingsbild: analog.
8. In der Zeitleiste der Ebene Butterfly: evtl. weitere Schlüsselbilder einfügen.
9. Den Schmetterling an allen Schlüsselbildern geeignet transformieren (Größe, Rotation, Alphakanal ...).

Schmetterlingsmovie testen

1. Auf Szene 1 in der linken oberen Ecke der Bühne klicken.
2. Das Symbol ButterflyMovie auf die Bühne ziehen.
3. Den Film mit Strg-Return (Ctrl-Return) starten.

Quellen

• Kowarschick, W.: Multimedia-Programmierung
• butterfly_02_path (Flash CS5)
• butterfly_02_path (Flash CS4)
• SVN-Repository (Flash CS5)
• SVN-Repository (Flash CS4)

Dieser Artikel ist GlossarWiki-konform.