AS3-Tutorium: Flash: Butterfly 01 fluttering: Unterschied zwischen den Versionen

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Zeile 57: Zeile 57:
Anderenfalls müssten Sie zwei Dateien erstellen: eine enthält den Rumpf und die andere die Flügel.
Anderenfalls müssten Sie zwei Dateien erstellen: eine enthält den Rumpf und die andere die Flügel.


Am Beispiel der Datei [http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_01_fluttering/butterfly.ai butterfly.ai] (Autor: Sonja Kowarschick)
Am Beispiel der Datei [http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_01_fluttering/ai/butterfly.ai butterfly.ai] (Autor: Sonja Kowarschick)
wird die Erstellung eines Schmetterlings-Symbols im Folgenden beschrieben:
wird die Erstellung eines Schmetterlings-Symbols im Folgenden beschrieben:


===Version 1: <code>butterfly_01_fluttering_ai</code> ===
# In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neuer Ordner</code> → <code>Name</code>: <code>ButterflyAssetsAI</code>.
# Importieren Sie [http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_01_fluttering/butterfly.ai butterfly.ai]: <code>Datei</code> → <code>Importieren</code> → <code>In Bibliothek importieren</code> → <code>Ebenen konvertieren in: Flash-Ebenen</code>.
# In der Bibliothek: Grafik-Symbol <code>butterfly.ai</code> in den Ordner <code>ButterflyAssets</code> verschieben.
# In der Bibliothek: Doppel-Klick auf Icon vor dem Grafik-Symbol <code>butterfly.ai</code> ⇒ Auf der Bühne wird <code>butterfly.ai</code> geöffnet.
# Auf der Bühne: Körper selektieren, <code>F8</code> drücken und Symbol <code>BodyAI</code> erzeugen.
# Auf der Bühne: <strong>Beide Flügel</strong> selektieren, <code>F8</code> drücken und Symbol <code>WingsAI</code> erzeugen.
# Die Symbole <code>BodyAI</code> und <code>WingsAI</code> in den Ordner <code>ButterflyAssetsAI</code> verschieben.
# In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neues Symbol</code> → <code>Name</code>: <code>ButterflyAI</code>.
# Das Symbol <code>ButterflyAI</code> in den Ordner <code>ButterflyAssetsAI</code> verschieben.
# In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>ButterflyAI</code> ⇒ Auf der Bühne wird <code>ButterflyAI</code> geöffnet.
# Zwei Ebenen anlegen:
#* <code>wings</code>
#* <code>body</code>
# Die Ebene <code>wings</code> aktivieren.
# Das Symbol <code>WingsAI</code> auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen.
# Die Ebene <code>body</code> aktivieren.
# Das Symbol <code>BodyAI</code> auf die Bühne an die richtige Position ziehen.
===Version 2: <code>butterfly_01_fluttering_ai2</code> ===
[[Medium:Flash CS5 Butterfly AI Import.PNG|miniatur|550px|Import einer AI-Vektordatei in Flash]]
[[Medium:Flash CS5 Butterfly AI Import.PNG|miniatur|550px|Import einer AI-Vektordatei in Flash]]
# In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neuer Ordner</code> → <code>Name</code>: <code>ButterflyAssetsAI</code>.
# In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neuer Ordner</code> → <code>Name</code>: <code>ButterflyAssetsAI</code>.
# Importieren Sie [http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_01_fluttering/butterfly.ai butterfly.ai]: <code>Datei</code> → <code>Importieren</code> → <code>In Bibliothek importieren</code> → <code>Ebenen konvertieren in: Flash-Ebenen</code>. 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 von <code>WingsAI</code> und <code>ButterflyAI</code> auf diese Symbole zurückgreifen. Allerdings ist es im Fall des Schmtterling nicht notwendig, MovieClips beim Import automatisch generieren zu lassen.
# Importieren Sie [http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_01_fluttering/butterfly.ai butterfly.ai]: <code>Datei</code> → <code>Importieren</code> → <code>In Bibliothek importieren</code> → <code>Ebenen konvertieren in: Flash-Ebenen</code>. 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 von <code>WingsAI</code> und <code>ButterflyAI</code> auf diese Symbole zurückgreifen.
# In der Bibliothek: Grafik-Symbol <code>butterfly.ai</code> (und gegebenenfalls den Ordner <code>butterfly.ai Elemente</code>) in den Ordner <code>ButterflyAssets</code> verschieben.
# In der Bibliothek: Grafik-Symbol <code>butterfly.ai</code> und den Ordner <code>butterfly.ai Elemente</code> in den Ordner <code>ButterflyAssets</code> verschieben.
# In der Bibliothek: Doppel-Klick auf Icon vor dem Grafik-Symbol <code>butterfly.ai</code> ⇒ Auf der Bühne wird <code>butterfly.ai</code> geöffnet.
# In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neues Symbol</code> → <code>Name</code>: <code>WingsAI</code>.
# Auf der Bühne: Körper selektieren, <code>F8</code> drücken und Symbol <code>BodyAI</code> erzeugen, sofern ein entsprechendes Symbol nicht schon im zweiten Schritt automatisch von Flash im Ordner <code>butterfly.ai Elemente</code> angelegt wurde.
# In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>WingsAI</code> ⇒ Auf der Bühne wird <code>WingsAI</code> geöffnet.
# Auf der Bühne: <strong>Beide Flügel</strong> selektieren, <code>F8</code> drücken und Symbol <code>WingsAI</code> erzeugen. Alternativ kann ein leeres Symbol erstellt werden, in das die beiden Flügel-MovieClips, sofern sie beim Import im Ordner <code>butterfly.ai Elemente</code> automatisch erstellt wurden, eingefügt werden.
# Die Grafik <code>butterfly.ai</code> aus der Bibliothek in <code>WingsAI</code> einfügen und den Schwerpunkt des Schmetterlings am Mittelpunkt von <code>WingsAI</code> ausrichten.
# Symbole <code>BodyAI</code> und <code>WingsAI</code> in den Ordner <code>ButterflyAssetsAI</code> verschieben.
# 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 beiden Flügel-Symbole an der Schmetterlingsgrafik <code>butterfly.ai</code> ausrichten (<code>Ansicht</code> <code>Vorschaumodus</code> <code>Konturen</code>).
# Die erste Ebene samt der  Schmetterlingsgrafik <code>butterfly.ai</code> aus <code>WingsAI</code> löschen.
# Die Symbole <code>BodyAI</code> und <code>WingsAI</code> in den Ordner <code>ButterflyAssetsAI</code> verschieben.
# In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neues Symbol</code> → <code>Name</code>: <code>ButterflyAI</code>.
# In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neues Symbol</code> → <code>Name</code>: <code>ButterflyAI</code>.
# Symbol <code>ButterflyAI</code> in den Ordner <code>ButterflyAssetsAI</code> verschieben.
# Das Symbol <code>ButterflyAI</code> in den Ordner <code>ButterflyAssetsAI</code> verschieben.
# In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>ButterflyAI</code> ⇒ Auf der Bühne wird <code>ButterflyAI</code> geöffnet.
# In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>ButterflyAI</code> ⇒ Auf der Bühne wird <code>ButterflyAI</code> geöffnet.
# Ebenen anlegen:
# Zwei Ebenen anlegen:
#* <code>wings</code>
#* <code>wings</code>
#* <code>body</code>
#* <code>body</code>
# Ebene <code>wings</code> aktivieren.
# Die Ebene <code>wings</code> aktivieren.
# Symbol <code>WingsAI</code> auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen.  
# Das Symbol <code>WingsAI</code> auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen.  
# Ebene <code>body</code> aktivieren.
# Die Ebene <code>body</code> aktivieren.
# Symbol <code>BodyAI</code> auf die Bühne an die richtige Position ziehen.
# Das Symbol <code>BodyAI</code> auf die Bühne an die richtige Position ziehen.


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

Version vom 21. Oktober 2010, 17:33 Uhr

zurück zur Übersicht

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

  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: Wings ⇒ Bibliothek enthält ein Symbol namens Wings
  5. In der Bibliothek: Klick auf rechte Maus-Taste → Neuer OrdnerName: 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 SymbolName: Butterfly
  9. Symbol Butterfly in den Ordner ButterflyAssets verschieben
  10. In der Bibliothek: Doppel-Klick auf Icon vor dem Namen Butterfly ⇒ Auf der Bühne wird Butterfly geöffnet
  11. Ebenen anlegen:
    • wings
    • body
  12. Ebene wings aktivieren
  13. Symbol Wings auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen
  14. Ebene body aktivieren
  15. 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:

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

  1. In der Bibliothek: Klick auf rechte Maus-Taste → Neuer OrdnerName: ButterflyAssetsAI.
  2. Importieren Sie butterfly.ai: DateiImportierenIn Bibliothek importierenEbenen konvertieren in: Flash-Ebenen.
  3. In der Bibliothek: Grafik-Symbol butterfly.ai in den Ordner ButterflyAssets verschieben.
  4. In der Bibliothek: Doppel-Klick auf Icon vor dem Grafik-Symbol butterfly.ai ⇒ Auf der Bühne wird butterfly.ai geöffnet.
  5. Auf der Bühne: Körper selektieren, F8 drücken und Symbol BodyAI erzeugen.
  6. Auf der Bühne: Beide Flügel selektieren, F8 drücken und Symbol WingsAI erzeugen.
  7. Die Symbole BodyAI und WingsAI in den Ordner ButterflyAssetsAI verschieben.
  8. In der Bibliothek: Klick auf rechte Maus-Taste → Neues SymbolName: ButterflyAI.
  9. Das Symbol ButterflyAI in den Ordner ButterflyAssetsAI verschieben.
  10. In der Bibliothek: Doppel-Klick auf Icon vor dem Namen ButterflyAI ⇒ Auf der Bühne wird ButterflyAI geöffnet.
  11. Zwei Ebenen anlegen:
    • wings
    • body
  12. Die Ebene wings aktivieren.
  13. Das Symbol WingsAI auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen.
  14. Die Ebene body aktivieren.
  15. 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

  1. In der Bibliothek: Klick auf rechte Maus-Taste → Neuer OrdnerName: ButterflyAssetsAI.
  2. Importieren Sie butterfly.ai: DateiImportierenIn Bibliothek importierenEbenen 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 von WingsAI und ButterflyAI auf diese Symbole zurückgreifen.
  3. In der Bibliothek: Grafik-Symbol butterfly.ai und den Ordner butterfly.ai Elemente in den Ordner ButterflyAssets verschieben.
  4. In der Bibliothek: Klick auf rechte Maus-Taste → Neues SymbolName: WingsAI.
  5. In der Bibliothek: Doppel-Klick auf Icon vor dem Namen WingsAI ⇒ Auf der Bühne wird WingsAI geöffnet.
  6. Die Grafik butterfly.ai aus der Bibliothek in WingsAI einfügen und den Schwerpunkt des Schmetterlings am Mittelpunkt von WingsAI ausrichten.
  7. In WingsAI zweite Ebene anlegen.
  8. Die MovieClips WingAI left und WingAI right aus der Bibliothek (im Ordner butterfly.ai Elemente) in die soeben angelegte Ebene kopieren.
  9. Die beiden Flügel-Symbole an der Schmetterlingsgrafik butterfly.ai ausrichten (AnsichtVorschaumodusKonturen).
  10. Die erste Ebene samt der Schmetterlingsgrafik butterfly.ai aus WingsAI löschen.
  11. Die Symbole BodyAI und WingsAI in den Ordner ButterflyAssetsAI verschieben.
  12. In der Bibliothek: Klick auf rechte Maus-Taste → Neues SymbolName: ButterflyAI.
  13. Das Symbol ButterflyAI in den Ordner ButterflyAssetsAI verschieben.
  14. In der Bibliothek: Doppel-Klick auf Icon vor dem Namen ButterflyAI ⇒ Auf der Bühne wird ButterflyAI geöffnet.
  15. Zwei Ebenen anlegen:
    • wings
    • body
  16. Die Ebene wings aktivieren.
  17. Das Symbol WingsAI auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen.
  18. Die Ebene body aktivieren.
  19. Das Symbol BodyAI auf die Bühne an die richtige Position ziehen.

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

  1. In der Zeitleiste der Ebene body: Bild bei Frame 21 einfügen (rechter Mausklick → Bild einfügen)
  2. In der Zeitleiste der Ebene wings: Bild bei Frame 21 einfügen (rechter Mausklick → Bild einfügen)
  3. In der Zeitleiste der Ebene wings: rechter Mausklick auf Balken in der Zeitleiste → Bewegungs-Tween erstellen
  4. In der Zeitleiste der Ebene wings: rechter Mausklick auf Frame 21 → Schlüsselbild einfügenSaklierung
  5. In der Zeitleiste der Ebene wings: rechter Mausklick auf Frame 11 → Schlüsselbild einfügenSaklierung
  6. Klick auf das Icon Frei transformieren (Q) (drittes Icon von oben in der Werkzeugleiste)
  7. 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)

  1. In der Zeitleiste der Ebene body: Bild bei Frame 21 einfügen (rechter Mausklick → Bild einfügen)
  2. In der Zeitleiste der Ebene wings: Schlüsselbild bei Frame 21 einfügen (rechter Mausklick → Schlüsselbild einfügen)
  3. 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)
  4. In der Zeitleiste der Ebene wings: Schlüsselbild bei Frame 11 einfügen (rechter Mausklick → Schlüsselbild einfügen)
  5. Klick auf das Icon Frei transformieren (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 11 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

Quellen


Dieser Artikel ist GlossarWiki-konform.