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="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. Die Ebene boundingBox aktivieren.
7. 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). 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. (vgl. Abbildung Flash-Builder-Bounding-Box-Fehler in AS3-Tutorium: Flash: Butterfly 02 fluttering)
8. Das Rechteck in ein Symbol mit Namen BoundingBox umwandeln (Rechteck selektieren, Taste F8).
9. Das Rechteck unsichtbar machen: Rechteck selektieren → Eigenschaften → Farbeffekt → Stil: Alpha → Wert 0%.
10. Die Ebene butterfly aktivieren.
11. Die Symbol butterfly auf die Bühne ziehen, positionieren und auf die gewünschte Große skalieren.
12. Den Transfomationspunkt (ein Kreis) des Schmetterlings-Objekts auf der Bühne in die Mitter des Schmetterlings verschieben: Werkzeug Frei transformieren (Q) (drittes Icon von oben in der Werkzeugleiste), den Mauszeiger über den Transformationspunkt (i.Allg. beim oder in der Nähe des Registrierungspunktes) bewegen (der Maus-Cursor wird um einen kleinen Kreis in der rechten unteren Ecker 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/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.