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.
Repository mit Beispielen
Beispiel-FLA-Dateien zum nachfolgenden Tutorium finden sich im Glossar-Repository:
- SVN-Repository (für den Zugriff mit Subversion-Clients)
- direkter Zugriff über einen Web-Browser
Flatternden Schmetterling erzeugen
<oflash file="http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_01_fluttering/butterfly_01_fluttering.swf" width="225" height="200"/> Beispiels-Implementierung: butterfly_01_fluttering
Schmetterlingssymbol erzeugen
- Neues Flash-Dokument erzeugen:
butterfly.fla
- Flügel malen (z.B. geeignete Farbe wählen, Freihandwerkzeug, Stiftwerkzeug, Farbeimerwerkzeug)
- Flügel kopieren (Markieren,
Strg-c
,Strg-v
) und spiegeln (Modifizieren → Transformieren → Horizontal spiegeln
) - Alles selektieren,
F8
drücken → neuen Movie-Clip erzeugen, Name:Wings
⇒ Bibliothek enthält ein Symbol namensWings
- In der Bibliothek: Klick auf rechte Maus-Taste →
Neuer Ordner
→Name
:ButterflyAssets
- Symbol
Wings
in den OrdnerButterflyAssets
verschieben - Auf der Bühne: Flügel-Objekt löschen
- In der Bibliothek: Klick auf rechte Maus-Taste →
Neues Symbol
→Name
:Butterfly
- Symbol
Butterfly
in den OrdnerButterflyAssets
verschieben - In der Bibliothek: Doppel-Klick auf Icon vor dem Namen
Butterfly
⇒ Auf der Bühne wirdButterfly
geöffnet - Ebenen anlegen:
wings
body
- Ebene
wings
aktivieren - Symbol
Wings
auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen - Ebene
body
aktivieren - Körper zeichnen (dabei können die Flügel gegebenenfalls temporär ausgeblendet werden)
Der Ordner ButterflyAssets
wurde angelegt, um von Anfang
an eine gewisse Ordnung in der Bibliothek zu gewährleisten.
Anderenfalls findet man sich sehr schnell nicht mehr zurecht,
da die Zahl der Symbole und Grafiken selbst bei kleinen Flash-Filmen
rasant anwächst.
In der Beispiels-Implementierung butterfly_01_fluttering wurden zwei weitere Symbole erzeugt:
Wing
enthält einen einzelen Flügel und dienst als Basis vonWings
Body
enthält den Schmetterlings-Rumpf, der im SymbolButterfly
anstelle eines direkt gezeichneten Rumpfes benutzt wird.
Alternative: Schmetterlingssymbol mit einem Vektor-Zeichenprogramm erzeugen
Erstellen Sie mit einem Vektor-Zeichenprogramm eine Schmetterlingszeichnung. Flash unterstützt eine Reihe von Vektor-Grafikformaten:
- Freehand:
.fh
,.fh7
,.fh8
,.fh9
,.fh10
etc. - Illustrator:
.ai
,.fxg
,.eps
- AutoCAD:
.dxf
- Windows Metafile:
.wmf
,.emf
- etc.
Falls Flash den Import von Ebenen unterstützt (wie z.B. bei .fh
, .ai
und .fxg
), erstellen Sie eine Datei
mit mindestens zwei Ebenen: eine Ebene für den Rumpf (body
) und eine oder zwei Ebenen für die Flügel (wings
).
Anderenfalls müssten Sie zwei Dateien erstellen: eine enthält den Rumpf und die andere die Flügel.
Am Beispiel der Datei butterfly.ai (Autor: Sonja Kowarschick) wird die Erstellung eines Schmetterlings-Symbols im Folgenden beschrieben:
- In der Bibliothek: Klick auf rechte Maus-Taste →
Neuer Ordner
→Name
:ButterflyAssetsAI
- Importieren Sie butterfly.ai:
Datei
→Importieren
→In Bibliothek importieren
→Ebenen konvertieren in: Flash-Ebenen
- In der Bibliothek: Grafik-Symbol
butterfly.ai
in den OrdnerButterflyAssets
verschieben - In der Bibliothek: Doppel-Klick auf Icon vor dem Grafik-Symbol
butterfly.ai
⇒ Auf der Bühne wirdbutterfly.ai
geöffnet - Auf der Bühne: Körper selektieren,
F8
drücken und SymbolBodyAI
erzeugen - Auf der Bühne: Beide Flügel selektieren,
F8
drücken und SymbolWingsAI
erzeugen - Symbole
BodyAI
undWingsAI
in den OrdnerButterflyAssetsAI
verschieben - In der Bibliothek: Klick auf rechte Maus-Taste →
Neues Symbol
→Name
:ButterflyAI
- Symbol
ButterflyAI
in den OrdnerButterflyAssetsAI
verschieben - In der Bibliothek: Doppel-Klick auf Icon vor dem Namen
ButterflyAI
⇒ Auf der Bühne wirdButterflyAI
geöffnet - Ebenen anlegen:
wings
body
- Ebene
wings
aktivieren - Symbol
WingsAI
auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen - Ebene
body
aktivieren - Symbol
BodyAI
auf die Bühne an die richtige Position ziehen
Flügel schlagen mit „modernen“ Tweens (ab Flash 10)
- In der Zeitleiste der Ebene
body
:Bild
bei Frame 21 einfügen (rechter Mausklick →Bild einfügen
) - In der Zeitleiste der Ebene
wings
:Bild
bei Frame 21 einfügen (rechter Mausklick →Bild einfügen
) - In der Zeitleiste der Ebene
wings
: rechter Mausklick auf Balken in der Zeitleiste →Bewegungs-Tween erstellen
- In der Zeitleiste der Ebene
wings
: rechter Mausklick auf Frame 21 →Schlüsselbild einfügen
→Saklierung
- In der Zeitleiste der Ebene
wings
: rechter Mausklick auf Frame 11 →Schlüsselbild einfügen
→Saklierung
- Klick auf das Icon
Frei transformieren (Q)
(drittes Icon von oben in der Werkzeugleiste) - 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 11 stehen)
Die Schritte 1 und 2 können auch gleichzeitig durchgeführt werden, indem die Bilder 21 beider Ebenen selektiert werden, bevor die Aktion
"rechter Mausklick → Bild einfügen
" ausgeführt wird.
Flügel schlagen mit klassischen Tweens (ab Flash 6)
- In der Zeitleiste der Ebene
body
:Bild
bei Frame 21 einfügen (rechter Mausklick →Bild einfügen
) - In der Zeitleiste der Ebene
wings
:Schlüsselbild
bei Frame 21 einfügen (rechter Mausklick →Schlüsselbild einfügen
) - In der Zeitleiste der Ebene
wings
: Tween einfügen (rechter Mausklick auf einen Frame vor' Frame 20 → je nach Flash-Version:Klassisches Tween erstellen
bzw.Tween einfügen
) - In der Zeitleiste der Ebene
wings
:Schlüsselbild
bei Frame 11 einfügen (rechter Mausklick →Schlüsselbild einfügen
) - Klick auf das Icon
Frei transformieren
(drittes Icon von oben in der Werkzeugleiste) - 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 11 stehen)
Schmetterling testen
- Auf
Szene 1
in der linken oberen Ecke der Bühne klicken - Symbol
Butterfly
auf die Bühne ziehen - Film mit
Strg-Return
(Ctrl-Return
) starten
Schmetterling auf Pfad fliegen lassen
- In der Bibliothek: Klick auf rechte Maus-Taste →
Neues Symbol
→Name
:ButterflyMovie
- In der Bibliothek: Doppel-Klick auf Icon vor dem Namen
ButterflyMovie
⇒ Auf der Bühne wirdButterflyMovie
geöffnet - Ebene benennen:
Butterfly
- Ebene
Butterfly
aktivieren - Symbol
Butterfly
auf die Bühne ziehen und am Ebenenkreuz ausrichten
Fliegen mit „modernen“ Tweens (ab Flash 10)
- In der Zeitleiste der Ebene
Butterfly
:Bild
bei Frame 150 einfügen (rechter Mausklick →Bild einfügen
) - In der Zeitleiste der Ebene
Butterfly
: rechter Mausklick auf Balken in der Zeitleiste →Bewegungs-Tween erstellen
- Klick auf das Icon
Auswahlwerkzeug
(erstes Icon von oben in der Werkzeugleiste) - Schmetterling an andere Position auf der Bühne ziehen (der Abspielkopf-Kopf muss auf Frame 150 stehen)
- Den entstehenden Pfad mit Mauszeiger anfassen und verbiegen
- Den Schmetterling in Pfadrichtung ausrichten (Pfad selektieren →
Eigenschaften
→ Häckchen vorAn Pfad ausrichten
) - 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)
- In der Zeitleiste der Ebene
Butterfly
:Schlüsselbild
bei Frame 150 einfügen (rechter Mausklick →Schlüsselbild einfügen
) - 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
) - 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
- Pfad-Ebene selektieren
- 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 - 1. Schmetterlingsbild: Schmetterling (Mittelpunkt) auf Pfad-Anfang legen, in Flugrichtung drehen und Größe anpassen
- Ebene
Butterfly
aktivieren - Erstes Schmetterlingsild (Frame) selektieren
- Selektionswerkzeug aktivieren
- Option (
Eigenschaften
-Inspektor):An Objekten ausrichten
bzw.An Pfad ausrichten
aktivieren - Flash 8: Shift drücken ⇒ Mittelpunkt rastet besser in Linie ein
- Recher Mausklick →
Frei transformieren
: Schmetterling in Flugrichtung ausrichten
- Ebene
- Letztes Schmetterlingsbild: analog
- In der Zeitleiste der Ebene
Butterfly
: evtl. weitere Schlüsselbilder einfügen - Schmetterling an allen Schlüsselbildern geeignet transformieren (Größe, Rotation, Alphakanal ...)
Schmetterling-Movie testen
- Auf
Szene 1
in der linken oberen Ecke der Bühne klicken - Symbol
ButterflyMovie
auf die Bühne ziehen - Film mit
Strg-Return
(Ctrl-Return
) starten
Schmetterling zweimal im Kreis fliegen lassen
ActionScript 3 (ab Flash 9) und ActionScript 2 (bis Flash 8)
- Butterfly-Movie öffnen
- Oberhalb der Ebene
Butterfly
(und gegebenenfalls der Pfad-Ebene) zwei Ebenen anlegen:Scripts
Labels
- In der Zeitleiste der Ebene
Labels
: Schlüsselbild bei Frame 2 erzeugen - Im Eigenschafts-Inspektor:
Name
(Bildbezeichnung, label name) →start
- In der Zeitleiste der Ebene
Scripts
: Schlüsselbild bei Frame 150 erzeugen - In der Zeitleiste der Ebene
Scripts
: Schlüsselbild bei Frame 1 selektieren und Actionscript-Editor öffnen (TasteF9
) - Code einfügen:
var g_rounds_to_fly: int = 2;
- In der Zeitleiste der Ebene
Scripts
: Schlüsselbild bei Frame 150 selektieren - 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