AS3-Tutorium: Flash: Butterfly 02 path

Dieser Artikel ist veraltet und wird künftig evtl. entfernt.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 4 (großteils überprüft)

Umfang: 3 (einige wichtige Fakten fehlen)

Quellenangaben: 5 (vollständig vorhanden)

Quellenarten: 5 (ausgezeichnet)

Konformität: 4 (sehr gut)

AS3-Tutorium: Butterfly: Flash | Flex

Flash: Übersicht | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Teil 7a | Teil 7b | Teil 7c | Teil 8 | Teil 9 | Teil 10

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="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_02_path_multi/Butterfly02MultiFlash11.swf</swf> Erweiterte Musterlösung (Flash CS5) (SVN-Repository)

Erweiterte Musterlösung (Flash CS4) (SVN-Repository)

Schmetterlingsmovie erstellen

1. Die Datei Butterfly01Flash.fla unter dem Namen Butterfly02Flash.fla speichern und mit dieser Datei weiterarbeiten.
2. In der Bibliothek: Klick auf rechte Maus-Taste → Neues Symbol → Name: ButterflyMovie.
3. Das Symbol ButterflyMovie in den Ordner ButterflyAssets verschieben.
4. In der Bibliothek: Doppel-Klick auf Icon vor dem Namen ButterflyMovie ⇒ Auf der Bühne wird ButterflyMovie geöffnet.
5. Zwei Ebenen erzeugen:
   • butterfly
   • boundingBox
6. Ansicht → Lineale aktivieren, evtl. auch Ansicht → Raster → Raster einbelnden.
7. Auf Szene 1 in der linken oberen Ecke der Bühne klicken.
8. Ein Rechteck in Größe der Bühne 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 von der Bühne löschen.
11. In der Bibliothek: Doppel-Klick auf Icon vor dem Namen ButterflyMovie ⇒ Auf der Bühne wird ButterflyMovie geöffnet.
12. Die Ebene boundingBox aktivieren.
13. Das Rechteck BoundingBox aus der Bibliothek auf die Bühne ziehen. Die linke obere Ecke der Bounding Box muss im Fadenkreuz des MovieClips liegen. Das ist wichtig, wenn der ButterflyMovie im Flash Builder verwendet werden soll.
14. Das Rechteck unsichtbar machen: Rechteck selektieren → Eigenschaften → Farbeffekt → Stil: Alpha → Wert 0%. (Zunächst, während die Schmetterlings-Fluckanimation gezeichnet wird, ist es geschickt, die Box schwach sichtbar zu lassen. Erst wenn die Animation fertig gestellt ist, sollte man die Bounding Box ganz unsichbar machen.)
15. Die Ebene butterfly aktivieren.
16. Die Symbol butterfly auf die Bühne ziehen, positionieren und auf die gewünschte Große skalieren.
17. Falls notwendig: Den Transfomationspunkt (ein weiß gefüllter Kreis) des Schmetterlings-Objekts auf der Bühne in den Schwerpunkt des Schmetterlings verschieben: Werkzeug Frei transformieren (Q) (drittes Icon von oben in der Werkzeugleiste), den Mauszeiger über den Transformationspunkt bewegen (der Maus-Cursor wird um einen kleinen Kreis in der rechten unteren Ecke erweitert), linke Maustaste drücken und Transformationspunkt verschieben.

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/Butterfly02Flash11.swf</swf> Musterlösung (Flash CS5) (SVN-Repository)

Musterlösung (Flash CS4) (SVN-Repository)

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 Auswahlwerkzeug (V) dem Pfad verbiegen (der Pfad darf nicht selektiert worden sein, sonst wird der gesamte Pfad verschoben), mit dem Werkzeug Unterauswahl (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) selektieren → Eigenschaften → Häckchen vor An Pfad ausrichten).

Wenn man den Schmetterlingsfilm in Flash CS5 erstellt und dann unter Flash CS4 abspeichert, funktioniert die Option An Pfad ausrichten für Illustrator-Grafiken nicht mehr korrekt, sobald man diese Datei mit Flash CS4 öffnet und veröffentlicht. Daher ist die Flash-CS4-Musterlösung fehlerhaft: <swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs4/butterfly/butterfly_02_path_multi/Butterfly02MultiFlash10.swf</swf> Musterlösung für Flash CS4: Der rote Schmetterling dreht sich nicht entlang des Pfades

Allerdings funktioniert das oben beschriebene Vorgehen, wenn man den Film vollständig in Flash CS4 erstellt.

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

1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
2. Musterlösung (Flash CS5)
3. Musterlösung (Flash CS4)
4. Erweiterte Musterlösung (Flash CS4)
5. Erweiterte Musterlösung (Flash CS5)

SVN-Repository-Verweise

• Musterlösung (Flash CS5)
• Musterlösung (Flash CS4)
• Erweiterte Musterlösung (Flash CS4)
• Erweiterte Musterlösung (Flash CS5)