|
|
| Zeile 3: |
Zeile 3: |
| =Flatternder Schmetterling= | | =Flatternder Schmetterling= |
|
| |
|
| Im ersten Teil des Tutoriums wird ein Schmetterling erzeugt, der mit den Flügeln schlägt. | | Im ersten Teil des Flex-Tutoriums wird der Schmetterling aus [[AS3-Tutorium: Flex: Butterfly 01 fluttering]] |
| | in eine Flex-Anwendung eingebunden. |
|
| |
|
| 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.
| |
| <noinclude>
| |
|
| |
|
| <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> | | <swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flex_cs5/butterfly/butterfly_01_fluttering_multi/butterfly_01_fluttering_multi.swf</swf> |
| '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering_multi/ Erweiterte Musterlösung (Flash CS5)]''' | | '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flex4_cs5/butterfly/butterfly_01_fluttering_multi/ Erweiterte Musterlösung (Flex 4/Flash CS5)]''' |
| ([http://glossar.hs-augsburg.de/webdav/tutorium/flash_cs5/butterfly/butterfly_01_fluttering_multi/ SVN-Repository]) | | ([http://glossar.hs-augsburg.de/webdav/tutorium/flex4_cs5/butterfly/butterfly_01_fluttering_multi/ SVN-Repository]) |
|
| |
|
| '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs4/butterfly/butterfly_01_fluttering_multi/ Erweiterte Musterlösung (Flash CS4)]''' | | '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flex4_cs4/butterfly/butterfly_01_fluttering_multi/ Erweiterte Musterlösung (Flex 4/Flash CS4)]''' |
| ([http://glossar.hs-augsburg.de/webdav/tutorium/flash_cs4/butterfly/butterfly_01_fluttering_multi/ SVN-Repository]) | | ([http://glossar.hs-augsburg.de/webdav/tutorium/flex4_cs4/butterfly/butterfly_01_fluttering_multi/ SVN-Repository]) |
| </noinclude> | | </noinclude> |
|
| |
|
| ==Schmetterlingssymbol mit Flash-Vektorwerkzeugen erstellen== | | ==Flash-Schmetterlingssymbol in Flex integrieren== |
| <noinclude>
| |
| | |
| <swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/butterfly_01_fluttering.swf</swf>
| |
| '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/ Musterlösung (Flash CS5)]'''
| |
| ([http://glossar.hs-augsburg.de/webdav/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/ SVN-Repository])
| |
| | |
| '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs4/butterfly/butterfly_01_fluttering/ Musterlösung (Flash CS4)]'''
| |
| ([http://glossar.hs-augsburg.de/webdav/tutorium/flash_cs4/butterfly/butterfly_01_fluttering/ SVN-Repository])
| |
| </noinclude>
| |
| | |
| # Neues Flash-Dokument erzeugen: <code>butterfly.fla</code>.
| |
| # Flügel malen (z.B. geeignete Farbe wählen, Freihandwerkzeug, Stiftwerkzeug, Farbeimerwerkzeug).
| |
| # Die Flügel kopieren (Markieren, <code>Strg-c</code>, <code>Strg-v</code>) und spiegeln (<code>Modifizieren → Transformieren → Horizontal spiegeln</code>).
| |
| # '''Alles selektieren, <code>F8</code> drücken → neuen Movie-Clip erzeugen, Name: <code>Wings</code>''' ⇒ Bibliothek enthält ein Symbol namens <code>Wings</code>.
| |
| # In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neuer Ordner</code> → <code>Name</code>: <code>ButterflyAssets</code>.
| |
| # Das Symbol <code>Wings</code> in den Ordner <code>ButterflyAssets</code> verschieben.
| |
| # Auf der Bühne: Flügel-Objekt löschen.
| |
| # In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neues Symbol</code> → <code>Name</code>: <code>Butterfly</code>.
| |
| # Das Symbol <code>Butterfly</code> in den Ordner <code>ButterflyAssets</code> verschieben.
| |
| # In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>Butterfly</code> ⇒ Auf der Bühne wird <code>Butterfly</code> geöffnet.
| |
| # Zwei Ebenen anlegen:
| |
| #* <code>wings</code>
| |
| #* <code>body</code>
| |
| # Die Ebene <code>wings</code> aktivieren.
| |
| # Das Symbol <code>Wings</code> auf die Bühne ziehen. Dabei sollte die linke obere Ecken der [[Bounding Box]] des Symbols <code>Wings</code> im Registrierungspunkt (das ist das Kreuz auf der Bühne) zum Liegen kommen, um später den so genannten Flash-Builder-Bounding-Box-Fehler zu vermeiden (siehe Abbildung).[[Medium:Flash Builder Bounding Box Error.png|miniatur|361px|Flash-Builder-Bounding-Box-Fehler]]
| |
| # Die Ebene <code>body</code> aktivieren.
| |
| # Einen Körper zeichnen (dabei können die Flügel gegebenenfalls temporär ausgeblendet werden).
| |
| # Wenn die Bounding Box des Rumpfes nach oben über die Bounding Box der Flügel hinausragt, sollten der der Rumpf und die Flügel um den Differenzbetrag der beiden Boxen nach unten verschoben werden, um sicherzustellen, dass die linke obere Ecke der Bounding Box des gesamten Schmetterlings wieder im Registrieungspunkt zum Liegen kommt.
| |
| | |
| Der zuvor erwähnte Flash-Builder-Bounding-Box-Fehler tritt im [[Flash Builder]] auf, wenn ein Flash-Symbol, dessen linke obere Ecke der Bounding Box nicht mit dem Registrierungspunkt übereinstimmt,
| |
| in eine Flex-Komponente (<code>mx.flash.UIMovieClip</code>) umgewandelt wird, um das Symbol in einer Flex-Anwendung einsetzen zu können. | |
| Die Umwandlung eines Flash-Symbols in eine Flex-Komponente wird in [[AS3-Tutorium: Flex: Butterfly 01 fluttering]] beschrieben.
| |
| | |
| Der Ordner <code>ButterflyAssets</code> 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==
| |
| <noinclude> | | <noinclude> |
|
| |
|
| <swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering_ai/butterfly_01_fluttering_ai.swf</swf> | | <swf width="183" height="133">http://glossar.hs-augsburg.de/beispiel/tutorium/flex4__cs5/butterfly/butterfly_01_fluttering/butterfly_01_fluttering.swf</swf> |
| '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering_ai/ Musterlösung (Flash CS5)]''' | | '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flex4__cs5/butterfly/butterfly_01_fluttering/ Musterlösung (Flex 4/Flash CS5)]''' |
| ([http://glossar.hs-augsburg.de/webdav/tutorium/flash_cs5/butterfly/butterfly_01_fluttering_ai/ SVN-Repository]) | | ([http://glossar.hs-augsburg.de/webdav/tutorium/flex4__cs5/butterfly/butterfly_01_fluttering/ SVN-Repository]) |
|
| |
|
| '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs4/butterfly/butterfly_01_fluttering_ai/ Musterlösung (Flash CS4)]''' | | '''[http://glossar.hs-augsburg.de/beispiel/tutorium/flex4__cs4/butterfly/butterfly_01_fluttering/ Musterlösung (Flex 4/Flash CS4)]''' |
| ([http://glossar.hs-augsburg.de/webdav/tutorium/flash_cs4/butterfly/butterfly_01_fluttering_ai/ SVN-Repository]) | | ([http://glossar.hs-augsburg.de/webdav/tutorium/flex4__cs4/butterfly/butterfly_01_fluttering/ SVN-Repository]) |
| </noinclude> | | </noinclude> |
|
| |
|
| Erstellen Sie mit einem Vektor-Zeichenprogramm eine Schmetterlingszeichnung. Flash unterstützt eine Reihe von Vektor-Grafikformaten:
| | # Flash Builder 4 (deutsche Version) starten. |
| *[[Freehand]]: <code>.fh</code>, <code>.fh7</code>, <code>.fh8</code>, <code>.fh9</code>, <code>.fh10</code> etc.
| | # Die Flash-Perspektive öffenen: <code>Fenster</code> → <code>Perspektive öffnen</code> → <code>Andere...</code> → <code>Flash</code>. |
| *[[Illustrator]]: <code>.ai</code>, <code>.fxg</code>, <code>.eps</code>
| | # Ein neues Flex-Projekt erzeugen: <code>Datei</code> → <code>Neu</code> → <code>Flex-Projekt</code> → Projektname: <code>Butterfly01</code> → <code>Fertig stellen</code>. |
| *[[AutoCAD]]: <code>.dxf</code>
| |
| *[[Windows Metafile]]: <code>.wmf</code>, <code>.emf</code>
| |
| * etc.
| |
| | |
| Falls Flash den Import von Ebenen unterstützt (wie z.B. bei <code>.fh</code>, <code>.ai</code> und <code>.fxg</code>), erstellen Sie eine Datei
| |
| mit mindestens zwei Ebenen: eine Ebene für den Rumpf (<code>body</code>) und eine oder zwei Ebenen für die Flügel (<code>wings</code>).
| |
| 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/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/ai/butterfly.ai butterfly.ai] (Autor: Sonja Kowarschick)
| | ==Anwendung testen== |
| 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/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/ai/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> ===
| |
| | |
| # 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/tutorium/flash_cs5/butterfly/butterfly_01_fluttering/ai/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 nachfolgende 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.[[Medium:Flash CS5 Butterfly AI Import.png|miniatur|650px|Import einer AI-Vektordatei in Flash]]
| |
| # 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: 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.
| |
| # 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.
| |
| # 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>.
| |
| # 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.
| |
| | |
| ==Flügel schlagen mit „modernen“ Tweens (ab Flash 10)==
| |
| # In der Zeitleiste der Ebene <code>body</code>: '''<code>Bild</code>''' bei Frame 21 einfügen (rechter Mausklick → <code>Bild einfügen</code>).
| |
| # In der Zeitleiste der Ebene <code>wings</code>: '''<code>Bild</code>''' bei Frame 21 einfügen (rechter Mausklick → <code>Bild einfügen</code>).
| |
| # In der Zeitleiste der Ebene <code>wings</code>: rechter Mausklick auf Balken in der Zeitleiste → <code>Bewegungs-Tween erstellen</code>.
| |
| # In der Zeitleiste der Ebene <code>wings</code>: rechter Mausklick auf Frame 21 → <code>Schlüsselbild einfügen</code> → <code>Skalierung</code>.
| |
| # In der Zeitleiste der Ebene <code>wings</code>: rechter Mausklick auf Frame 11 → <code>Schlüsselbild einfügen</code> → <code>Skalierung</code>.
| |
| # Klick auf das Icon <code>Frei transformieren (Q)</code> (drittes Icon von oben in der Werkzeugleiste).
| |
| # Die 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 → <code>Bild einfügen</code>" ausgeführt wird.
| |
| | |
| ==Flügel schlagen mit klassischen Tweens (ab Flash 6)==
| |
| # In der Zeitleiste der Ebene <code>body</code>: '''<code>Bild</code>''' bei Frame 21 einfügen (rechter Mausklick → <code>Bild einfügen</code>).
| |
| # In der Zeitleiste der Ebene <code>wings</code>: '''<code><strong>Schlüssel</strong>bild</code>''' bei Frame 21 einfügen (rechter Mausklick → <code>Schlüsselbild einfügen</code>).
| |
| # In der Zeitleiste der Ebene <code>wings</code>: Tween einfügen (rechter Mausklick auf einen Frame '''vor'''' Frame 20 → je nach Flash-Version: <code>Klassisches Tween erstellen</code> bzw. <code>Tween einfügen</code>).
| |
| # In der Zeitleiste der Ebene <code>wings</code>: '''<code>Schlüsselbild</code>''' bei Frame 11 einfügen (rechter Mausklick → <code>Schlüsselbild einfügen</code>).
| |
| # Klick auf das Icon <code>Frei transformieren</code> (drittes Icon von oben in der Werkzeugleiste).
| |
| # Die 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 <code>Szene 1</code> in der linken oberen Ecke der Bühne klicken. | | # Auf <code>Szene 1</code> in der linken oberen Ecke der Bühne klicken. |
| # Das Symbol <code>Butterfly</code> auf die Bühne ziehen. | | # Das Symbol <code>Butterfly</code> auf die Bühne ziehen. |
| # Den Film mit <code>Strg-Return</code> (<code>Ctrl-Return</code>) starten. | | # Den Film mit <code>Strg-Return</code> (<code>Ctrl-Return</code>) starten. |
| | |
| | ==Schmetterlingssymbol aus Flash in Flex integrieren== |
|
| |
|
| =Quellen= | | =Quellen= |
