AS3-Tutorium: Flash: Butterfly 01 fluttering: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
Zeile 86: | Zeile 86: | ||
# In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neues Symbol</code> → <code>Name</code>: <code>WingsAI</code>. | # In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neues Symbol</code> → <code>Name</code>: <code>WingsAI</code>. | ||
# In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>WingsAI</code> ⇒ Auf der Bühne wird <code>WingsAI</code> geöffnet. | # In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>WingsAI</code> ⇒ Auf der Bühne wird <code>WingsAI</code> geöffnet. | ||
# Die Grafik <code>butterfly.ai</code> aus der Bibliothek in <code>WingsAI</code> einfügen und | # Die Grafik <code>butterfly.ai</code> aus der Bibliothek in <code>WingsAI</code> einfügen und die linke obere Ecke des Schmetterlings am Ankerpunkt (Kreuz) von <code>WingsAI</code> ausrichten. | ||
# In <code>WingsAI</code> zweite Ebene anlegen. | # In <code>WingsAI</code> zweite Ebene anlegen. | ||
# Die MovieClips <code>WingAI left</code> und <code>WingAI right</code> aus der Bibliothek (im Ordner <code>butterfly.ai Elemente</code>) in die soeben angelegte Ebene kopieren. | # Die MovieClips <code>WingAI left</code> und <code>WingAI right</code> aus der Bibliothek (im Ordner <code>butterfly.ai Elemente</code>) in die soeben angelegte Ebene kopieren. |
Version vom 21. Oktober 2010, 17:35 Uhr
Flatternder Schmetterling
Im ersten Teil des Tutoriums wird ein Schmetterling erzeugt, der mit den Flügeln schlägt.
Der Schmetterling wird mit Hilfe einer Vektorgrafik dargestellt. Im Folgenden werden zwei Alternativen präsentiert:
- Zeichnen des Schmetterlings mittels Vektor-Werkzeugen, die in Flash enthalten sind.
- Zeichnen des Schmetterlings mittels eines Vektorzeichenprogramms; Importieren und Weiterverarbeiten dieser Grafik in Flash.
<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/multi/butterfly_01_fluttering_multi.swf</swf> Erweiterte Musterlösung: butterfly_01_fluttering_multi.swf
Schmetterlingssymbol mit Flash-Vektorwerkzeugen erstellen
<swf width="110" height="80">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/butterfly_01_fluttering.swf</swf> Musterlösung: butterfly_01_fluttering.swf
- 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.
Alternative: Schmetterlingssymbol mit einem Vektor-Zeichenprogramm erstellen
<swf width="110" height="80">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/ai/butterfly_01_fluttering_ai.swf</swf> Musterlösung: butterfly_01_fluttering_ai.swf
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:
Version 1: butterfly_01_fluttering_ai
- 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. - Die Symbole
BodyAI
undWingsAI
in den OrdnerButterflyAssetsAI
verschieben. - In der Bibliothek: Klick auf rechte Maus-Taste →
Neues Symbol
→Name
:ButterflyAI
. - Das Symbol
ButterflyAI
in den OrdnerButterflyAssetsAI
verschieben. - In der Bibliothek: Doppel-Klick auf Icon vor dem Namen
ButterflyAI
⇒ Auf der Bühne wirdButterflyAI
geöffnet. - Zwei Ebenen anlegen:
wings
body
- Die Ebene
wings
aktivieren. - Das Symbol
WingsAI
auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen. - Die Ebene
body
aktivieren. - Das Symbol
BodyAI
auf die Bühne an die richtige Position ziehen.
Version 2: butterfly_01_fluttering_ai2
miniatur|550px|Import einer AI-Vektordatei in Flash
- 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
. Beim Import einer Vektorgrafik wird ein Baum mit allen Grafik-Ebenen angezeigt (siehe nebenstehende Abbildung), aus denen diejenigen ausgewählt werden können, für die Flash beim Import automatisch MovieClips erstellen soll. Wenn man dies für die beiden Flügel und den Körper macht, kann man im Folgenden bei der Erzeugung vonWingsAI
undButterflyAI
auf diese Symbole zurückgreifen. - In der Bibliothek: Grafik-Symbol
butterfly.ai
und den Ordnerbutterfly.ai Elemente
in den OrdnerButterflyAssets
verschieben. - In der Bibliothek: Klick auf rechte Maus-Taste →
Neues Symbol
→Name
:WingsAI
. - In der Bibliothek: Doppel-Klick auf Icon vor dem Namen
WingsAI
⇒ Auf der Bühne wirdWingsAI
geöffnet. - Die Grafik
butterfly.ai
aus der Bibliothek inWingsAI
einfügen und die linke obere Ecke des Schmetterlings am Ankerpunkt (Kreuz) vonWingsAI
ausrichten. - In
WingsAI
zweite Ebene anlegen. - Die MovieClips
WingAI left
undWingAI right
aus der Bibliothek (im Ordnerbutterfly.ai Elemente
) in die soeben angelegte Ebene kopieren. - Die beiden Flügel-Symbole an der Schmetterlingsgrafik
butterfly.ai
ausrichten (Ansicht
→Vorschaumodus
→Konturen
). - Die erste Ebene samt der Schmetterlingsgrafik
butterfly.ai
ausWingsAI
löschen. - Die Symbole
BodyAI
undWingsAI
in den OrdnerButterflyAssetsAI
verschieben. - In der Bibliothek: Klick auf rechte Maus-Taste →
Neues Symbol
→Name
:ButterflyAI
. - Das Symbol
ButterflyAI
in den OrdnerButterflyAssetsAI
verschieben. - In der Bibliothek: Doppel-Klick auf Icon vor dem Namen
ButterflyAI
⇒ Auf der Bühne wirdButterflyAI
geöffnet. - Zwei Ebenen anlegen:
wings
body
- Die Ebene
wings
aktivieren. - Das Symbol
WingsAI
auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen. - Die Ebene
body
aktivieren. - Das 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
Quellen
- Kowarschick, W.: Multimedia-Programmierung
- butterfly_01_fluttering (Flash CS5)
- butterfly_01_fluttering (Flash CS4)
- SVN-Repository (Flash CS5)
- SVN-Repository (Flash CS4)