AS3-Tutorium: Flash: Butterfly
aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
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
- Neues Flash-Dokument erzeugen:
schmetterling.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:Wing
=> Bibliothek enthält eine Symbol namensWing
- Auf der Bühne: Flügel-Objekt löschen
- In der Bibliothek: Klick auf rechte Maus-Taste ->
Neues Symbol
->Name
:Butterfly
- In der Bibliothek: Doppel-Klick auf Icon vor dem Namen
Butterfly
=> Auf der Bühne wirdButterfly
geöffnet - Ebenen anlegen:
Wing
Body
- Ebene
Wing
aktivieren - Symbol
Wing
auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne in der Rumpfmitte zum liegen kommen. - Ebene
Wing
aktivieren - Körper zeichnen (dabei können die Flügel gegebenenfalls temporär ausgeblendet werden)
- In der Zeitleiste der Ebene
Body
:Bild
bei Frame 20 einfügen (rechter Mausklick =>Bild einfügen
)
Flügel schlagen mit „modernen“ Tweens (ab Flash 10)
- In der Zeitleiste der Ebene
Wing
:Bild
bei Frame 20 einfügen (rechter Mausklick =>Bild einfügen
) - In der Zeitleiste der Ebene
Wing
: rechter Mausklick auf Balken in der Zeitleiste ->Bewegungs-Tween erstellen
- In der Zeitleiste der Ebene
Wing
: rechter Mausklick auf Frame 20 ->Schlüsselbild einfügen
- In der Zeitleiste der Ebene
Wing
: rechter Mausklick auf Frame 10 ->Schlüsselbild einfügen
- 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 10 stehen)
Flügel schlagen mit klassischen Tweens (ab Flash 6)
- In der Zeitleiste der Ebene
Wing
:Schlüsselbild
bei Frame 20 einfügen (rechter Mausklick =>Schlüsselbild einfügen
) - 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
) - In der Zeitleiste der Ebene
Wing
:Schlüsselbild
bei Frame 10 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 10 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 (frei transformieren)
- 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
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)
- 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();
ActionScript 2 (bis Flash 8)
To Be Done
Quellen
- Kowarschick, W.: Multimedia-Programmierung
- Louis, Dirk; Nissen, Svend (2004): Flash MX 2004 und ActionScript
Dieser Artikel ist GlossarWiki-konform.