AS3-Tutorium: Flash: Butterfly

Zweck

Dieses Dokument beschreibt, wie man in Flash 6, Flash 7, Flash 8, Flash 9 (Flash CS3), Flash 10 (Flash CS4) oder Flash 11 (Flash CS5) ein FLA-Dokument erstellt, in dem ein Schmetterling auf der Bühne umherflattert.

Dieses einfache Flash-Movie dient dazu, erste Erfahrungen mit der Flash-Entwicklungsumgebung zu machen.

Flatternden Schmetterling erzeugen

Schmetterling-Symbol erzeugen

1. Neues Flash-Dokument erzeugen: butterfly.fla
2. Flügel malen (z.B. geeignete Farbe wählen, Freihandwerkzeug, Stiftwerkzeug, Farbeimerwerkzeug)
3. Flügel kopieren (Markieren, Strg-c, Strg-v) und spiegeln (Modifizieren -> Transformieren -> Horizontal spiegeln)
4. Alles selektieren, F8 drücken => neuen Movie-Clip erzeugen, Name: Wing => Bibliothek enthält ein Symbol namens Wing
5. In der Bibliothek: Klick auf rechte Maus-Taste -> Neuer Ordner -> Name: ButterflyAssets
6. Symbol Wings in den Ordner ButterflyAssets verschieben
7. Auf der Bühne: Flügel-Objekt löschen
8. In der Bibliothek: Klick auf rechte Maus-Taste -> Neues Symbol -> Name: Butterfly
9. In der Bibliothek: Doppel-Klick auf Icon vor dem Namen Butterfly => Auf der Bühne wird Butterfly geöffnet
10. Ebenen anlegen:
    • wings
    • body
11. Ebene wings aktivieren
12. Symbol wings auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne in der Rumpfmitte zum liegen kommen.
13. In der Zeitleiste der Ebene body: Bild bei Frame 21 einfügen (rechter Mausklick => Bild einfügen)
14. Ebene body aktivieren
15. Körper zeichnen (dabei können die Flügel gegebenenfalls temporär ausgeblendet werden)
16. In der Zeitleiste der Ebene body: Bild bei Frame 21 einfügen (rechter Mausklick => Bild einfügen)

Flügel schlagen mit „modernen“ Tweens (ab Flash 10)

1. In der Zeitleiste der Ebene Wing: Bild bei Frame 20 einfügen (rechter Mausklick => Bild einfügen)
2. In der Zeitleiste der Ebene Wing: rechter Mausklick auf Balken in der Zeitleiste -> Bewegungs-Tween erstellen
3. In der Zeitleiste der Ebene Wing: rechter Mausklick auf Frame 20 -> Schlüsselbild einfügen
4. In der Zeitleiste der Ebene Wing: rechter Mausklick auf Frame 10 -> Schlüsselbild einfügen
5. Klick auf das Icon Frei transformieren (Q) (drittes Icon von oben in der Werkzeugleiste)
6. Bounding Box des Flügels mit Hilfe des Anfassers in der Mitte der linken oder rechten Seite schmal ziehen (Achtung: Der Absspielkopf muss auf Frame 10 stehen)

Flügel schlagen mit klassischen Tweens (ab Flash 6)

1. In der Zeitleiste der Ebene Wing: Schlüsselbild bei Frame 20 einfügen (rechter Mausklick => Schlüsselbild einfügen)
2. In der Zeitleiste der Ebene Wing: Tween einfügen (rechter Mausklick auf einen Frame vor' Frame 20 => je nach Flash-Version: Klassisches Tween erstellen bzw. Tween einfügen)
3. In der Zeitleiste der Ebene Wing: Schlüsselbild bei Frame 10 einfügen (rechter Mausklick => Schlüsselbild einfügen)
4. Klick auf das Icon Frei transformieren (drittes Icon von oben in der Werkzeugleiste)
5. Bounding Box des Flügels mit Hilfe des Anfassers in der Mitte der linken oder rechten Seite schmal ziehen (Achtung: Der Absspielkopf muss auf Frame 10 stehen)

Schmetterling testen

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

Schmetterling auf Pfad fliegen lassen

1. In der Bibliothek: Klick auf rechte Maus-Taste -> Neues Symbol -> Name: ButterflyMovie
2. In der Bibliothek: Doppel-Klick auf Icon vor dem Namen ButterflyMovie => Auf der Bühne wird ButterflyMovie geöffnet
3. Ebene benennen:
   • Butterfly
4. Ebene Butterfly aktivieren
5. Symbol Butterfly auf die Bühne ziehen und am Ebenenkreuz ausrichten

Fliegen mit „modernen“ Tweens (ab Flash 10)

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. Klick auf das Icon Auswahlwerkzeug (erstes Icon von oben in der Werkzeugleiste)
4. Schmetterling an andere Position auf der Bühne ziehen (der Abspielkopf-Kopf muss auf Frame 150 stehen)
5. Den entstehenden Pfad mit Mauszeiger anfassen und verbiegen
6. Den Schmetterling in Pfadrichtung ausrichten (Pfad selektieren -> Eigenschaften -> Häckchen vor An Pfad ausrichten)
7. Den Pfad weiter gestalten (evtl. mit Hilfe des Bewegungs-Editors); für Schritt 5 (Rundflug) wird ein Pfad benötigt, bei dem Anfang und Ende sehr nahe beieinander liegen

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. Pfad-Ebene selektieren
5. Freihandwerkzeug mit Option smooth/Glätten bzw. Stiftwerkzeug => Pfad zeichnen (ohne Kreuzung); für Schritt 5 (Rundflug) wird ein Pfad benötigt, bei dem Anfang und Ende sehr nahe beieinander liegen
6. 1. Schmetterlingsbild: Schmetterling (Mittelpunkt) auf Pfad-Anfang legen, in Flugrichtung drehen und Größe anpassen
   1. Ebene Butterfly aktivieren
   2. Erstes Schmetterlingsild (Frame) selektieren
   3. Selektionswerkzeug aktivieren
   4. 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. Schmetterling an allen Schlüsselbildern geeignet transformieren (Größe, Rotation, Alphakanal ...)

Schmetterling-Movie testen

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

Schmetterling zweimal im Kreis fliegen lassen

ActionScript 3 (ab Flash 9) und ActionScript 2 (bis Flash 8)

1. Butterfly-Movie öffnen
2. Oberhalb der Ebene Butterfly (und gegebenenfalls der Pfad-Ebene) zwei Ebenen anlegen:
   • Scripts
   • Labels
3. In der Zeitleiste der Ebene Labels: Schlüsselbild bei Frame 2 erzeugen
4. Im Eigenschafts-Inspektor: Name (Bildbezeichnung, label name) -> start
5. In der Zeitleiste der Ebene Scripts: Schlüsselbild bei Frame 150 erzeugen
6. In der Zeitleiste der Ebene Scripts: Schlüsselbild bei Frame 1 selektieren und Actionscript-Editor öffnen (Taste F9)
7. Code einfügen:
   var g_rounds_to_fly: int = 2;
8. In der Zeitleiste der Ebene Scripts: Schlüsselbild bei Frame 150 selektieren
9. Code einfügen:
   g_rounds_to_fly--;
if (g_rounds_to_fly > 0)
  gotoAndPlay("start");
else
  stop();

Quellen

• Kowarschick, W.: Multimedia-Programmierung
• Louis, Dirk; Nissen, Svend (2004): Flash MX 2004 und ActionScript

Dieser Artikel ist GlossarWiki-konform.