|
|
| Zeile 13: |
Zeile 13: |
| *[http://glossar.hs-augsburg.de/beispiel/flash_cs5/butterfly direkter Zugriff über einen Web-Browser] | | *[http://glossar.hs-augsburg.de/beispiel/flash_cs5/butterfly direkter Zugriff über einen Web-Browser] |
|
| |
|
| =Flatternden Schmetterling erzeugen= | | =Tutorium= |
| | | # [[AS3-Tutorium: Flash: Butterfly 01 fluttering|Flatternder Schmetterling]] |
| Beispiels-Implementierung: [http://glossar.hs-augsburg.de/beispiel/flash_cs5/butterfly/butterfly_01_fluttering/ butterfly_01_fluttering]
| | # [[AS3-Tutorium: Flash: Butterfly 02 path|Schmetterling fliegt auf einem Pfad]] |
| <swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/flash_cs5/butterfly/butterfly_01_fluttering/butterfly_01_fluttering.swf</swf>
| | # [[AS3-Tutorium: Flash: Butterfly 03 fixed number of rounds|Schmetterling fliegt eine vorgegebene Anzahl von Runden]] |
| | |
| ==Schmetterlingssymbol erzeugen==
| |
| | |
| # Neues Flash-Dokument erzeugen: <code>butterfly.fla</code>
| |
| # Flügel malen (z.B. geeignete Farbe wählen, Freihandwerkzeug, Stiftwerkzeug, Farbeimerwerkzeug)
| |
| # 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>
| |
| # 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>
| |
| # 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
| |
| # Ebenen anlegen:
| |
| #* <code>wings</code>
| |
| #* <code>body</code>
| |
| # Ebene <code>wings</code> aktivieren
| |
| # Symbol <code>Wings</code> auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen
| |
| # Ebene <code>body</code> aktivieren
| |
| # Körper zeichnen (dabei können die Flügel gegebenenfalls temporär ausgeblendet werden)
| |
| | |
| 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.
| |
| | |
| In der Beispiels-Implementierung [http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_01_fluttering/ butterfly_01_fluttering]
| |
| wurden zwei weitere Symbole erzeugt:
| |
| *<code>Wing</code> enthält einen einzelen Flügel und dienst als Basis von <code>Wings</code>
| |
| *<code>Body</code> enthält den Schmetterlings-Rumpf, der im Symbol <code>Butterfly</code> 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]]: <code>.fh</code>, <code>.fh7</code>, <code>.fh8</code>, <code>.fh9</code>, <code>.fh10</code> etc.
| |
| *[[Illustrator]]: <code>.ai</code>, <code>.fxg</code>, <code>.eps</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/flash_cs5/butterfly/butterfly_01_fluttering/butterfly.ai butterfly.ai] (Autor: Sonja Kowarschick)
| |
| wird die Erstellung eines Schmetterlings-Symbols im Folgenden beschrieben:
| |
| | |
| # 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
| |
| # 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>
| |
| # 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
| |
| # Ebenen anlegen:
| |
| #* <code>wings</code>
| |
| #* <code>body</code>
| |
| # 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
| |
| # Ebene <code>body</code> aktivieren
| |
| # 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>Saklierung</code>
| |
| # In der Zeitleiste der Ebene <code>wings</code>: rechter Mausklick auf Frame 11 → <code>Schlüsselbild einfügen</code> → <code>Saklierung</code>
| |
| # Klick auf das Icon <code>Frei transformieren (Q)</code> (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 → <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)
| |
| # 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
| |
| # Symbol <code>Butterfly</code> auf die Bühne ziehen
| |
| # Film mit <code>Strg-Return</code> (<code>Ctrl-Return</code>) starten
| |
| | |
| =Schmetterling auf Pfad fliegen lassen=
| |
| | |
| Beispiels-Implementierung: [http://glossar.hs-augsburg.de/beispiel/flash_cs5/butterfly/butterfly_02_path/ butterfly_02_path]
| |
| <swf>http://glossar.hs-augsburg.de/beispiel/flash_cs5/butterfly/butterfly_02_path/butterfly_02_path.swf</swf>
| |
| | |
| ==Schmetterlingsmovie erstellen==
| |
| # In der Bibliothek: Klick auf rechte Maus-Taste → <code>Neues Symbol</code> → <code>Name</code>: <code>ButterflyMovie</code> | |
| # Symbol ButterflyMovie in den Ordner ButterflyAssets verschieben
| |
| # In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>ButterflyMovie</code> ⇒ Auf der Bühne wird <code>ButterflyMovie</code> geöffnet
| |
| # Ebenen benennen:
| |
| #* <code>butterfly</code>
| |
| #* <code>boundingBox</code>
| |
| # <code>Ansicht</code> → <code>Lineale</code> aktivieren, evtl. auch <code>Ansicht</code> → <code>Raster</code> → <code>Raster einbelnden</code>
| |
| # Hilfslinien für Bühnenränder zeichnen (einfach in entsprechendes Lineal klicken, Maus-Taste gedrückt halten und Linie auf die Bühne ziehen)
| |
| # Ebene <code>boundingBox</code> aktivieren
| |
| # Rechteck zeichnen entlang der Hilfslinien zeichnen (damit später nicht die Bounding Box des Schmetterlings an dessen Startposition angezeigt wird, sondern die Bounding Box dieses Rechtecks)
| |
| # Rechteck in ein Symbol mit Namen <code>BoundingBox</code> umwandeln (Rechteck selektieren, Taste F8)
| |
| # Rechteck unsichtbar machen: Rechteck selektieren → <code>Eigenschaften</code> → <code>Farbeffekt</code> → <code>Stil</code>: <code>Alpha</code> → Wert <code>0</code>%
| |
| # Ebene <code>butterfly</code> aktivieren
| |
| # Symbol <code>butterfly</code> auf die Bühne ziehen, positionieren und auf die gewünschte Große skalieren
| |
| | |
| ==Fliegen mit „modernen“ Tweens (ab Flash 10)==
| |
| | |
| # In der Zeitleiste der Ebene <code>Butterfly</code>: '''<code>Bild</code>''' bei Frame 150 einfügen (rechter Mausklick → <code>Bild einfügen</code>)
| |
| # In der Zeitleiste der Ebene <code>Butterfly</code>: rechter Mausklick auf Balken in der Zeitleiste → <code>Bewegungs-Tween erstellen</code>
| |
| # Sicherstellen, dass der Abspielkopf noch bei Frame 150 steht
| |
| # Klick auf das Icon <code>Auswahlwerkzeug (V)</code> (erstes Icon von oben in der Werkzeugleiste)
| |
| # Schmetterling an andere Position auf der Bühne ziehen
| |
| # Den entstehenden Pfad mit Mauszeiger anfassen und verbiegen
| |
| # Den Pfad weiter gestalten (Kopf an andere Position schieben und dann Schmetterling verschieben, mit dem <code>Unterauswahlwerkzeug (A)</code> Schlüsselbilder bearbeiten, mit Hilfe des Bewegungs-Editor weitere Einstellungen vornehmen); für den später zu definierenden Rundflug wird ein Pfad benötigt, bei dem Anfang und Ende sehr nahe beieinander liegen
| |
| # Den Schmetterling in Pfadrichtung ausrichten (Pfad mit <code>Auswahlwerkzeug (V)v</code> selektieren → <code>Eigenschaften</code> → Häckchen vor <code>An Pfad ausrichten</code>)
| |
| | |
| ==Fliegen mit „klassischen“ Tweens (ab Flash 6)==
| |
| | |
| # In der Zeitleiste der Ebene <code>Butterfly</code>: '''<code>Schlüsselbild</code>''' bei Frame 150 einfügen (rechter Mausklick → <code>Schlüsselbild einfügen</code>)
| |
| # In der Zeitleiste der Ebene <code>Butterfly</code>: Tween einfügen (rechter Mausklick auf einen Frame '''vor'''' Frame 150 → je nach Flash-Version: <code>Klassisches Tween erstellen</code> bzw. <code>Tween einfügen</code>)
| |
| # Rechtsklick auf das '''Ebenensysmbol''' (links neben der Zeitleiste) <code>Butterfly</code> → je nach Flash-Version: <code>Klassischen Pfad hinzufügen</code> bzw. <code>Pfad einfügen</code> bzw. <code>Pfad hinzufügen</code>
| |
| # Pfad-Ebene selektieren
| |
| # Freihandwerkzeug mit Option <code>smooth</code>/<code>Glätten</code> bzw. Stiftwerkzeug → Pfad zeichnen (ohne Kreuzung); für den später zu definierenden Rundflug wird ein Pfad benötigt, bei dem Anfang und Ende sehr nahe beieinander liegen
| |
| # Erstes Schmetterlingsbild: Schmetterling (Mittelpunkt) auf Pfad-Anfang legen, in Flugrichtung drehen und Größe anpassen:
| |
| ## Ebene <code>Butterfly</code> aktivieren
| |
| ## Erstes Schmetterlingsild (Frame) selektieren
| |
| ## Selektionswerkzeug aktivieren
| |
| ## Option (<code>Eigenschaften</code>-Inspektor): <code>An Objekten ausrichten</code> bzw. <code>An Pfad ausrichten</code> aktivieren
| |
| ## Flash 8: '''Shift drücken''' ⇒ Mittelpunkt rastet besser in Linie ein
| |
| ## Recher Mausklick → <code>Frei transformieren</code>: Schmetterling in Flugrichtung ausrichten
| |
| # Letztes Schmetterlingsbild: analog
| |
| # In der Zeitleiste der Ebene <code>Butterfly</code>: evtl. weitere Schlüsselbilder einfügen
| |
| # Schmetterling an allen Schlüsselbildern geeignet transformieren (Größe, Rotation, Alphakanal ...)
| |
| | |
| ==Schmetterlingsmovie testen==
| |
| | |
| # Auf <code>Szene 1</code> in der linken oberen Ecke der Bühne klicken
| |
| # Symbol <code>ButterflyMovie</code> auf die Bühne ziehen
| |
| # Film mit <code>Strg-Return</code> (<code>Ctrl-Return</code>) starten
| |
| | |
| =Schmetterling zweimal im Kreis fliegen lassen=
| |
| | |
| ==ActionScript 3 (ab Flash 9) und ActionScript 2 (bis Flash 8)==
| |
| | |
| # Butterfly-Movie öffnen
| |
| # Oberhalb der Ebene <code>Butterfly</code> (und gegebenenfalls der Pfad-Ebene) zwei Ebenen anlegen:
| |
| #* <code>Scripts</code>
| |
| #* <code>Labels</code>
| |
| # In der Zeitleiste der Ebene <code>Labels</code>: Schlüsselbild bei Frame 2 erzeugen
| |
| # Im Eigenschafts-Inspektor: <code>Name</code> (Bildbezeichnung, label name) → <code>start</code>
| |
| # In der Zeitleiste der Ebene <code>Scripts</code>: Schlüsselbild bei Frame 150 erzeugen
| |
| # In der Zeitleiste der Ebene <code>Scripts</code>: Schlüsselbild bei Frame 1 selektieren und Actionscript-Editor öffnen (Taste <code>F9</code>)
| |
| # Code einfügen: <br/><code>var g_rounds_to_fly: int = 2;</code>
| |
| # In der Zeitleiste der Ebene <code>Scripts</code>: Schlüsselbild bei Frame 150 selektieren
| |
| # Code einfügen: <br/><code>g_rounds_to_fly--;<br/>if (g_rounds_to_fly > 0)<br/> gotoAndPlay("start");<br/>else<br/> stop();</code>
| |
|
| |
|
| =Quellen= | | =Quellen= |
|
| |
|
| *[[Kowarschick, W.: Multimedia-Programmierung]] | | *[[Kowarschick, W.: Multimedia-Programmierung]] |
| *[[Louis, Dirk; Nissen, Svend (2004): Flash MX 2004 und ActionScript]]
| |
|
| |
|
| |
|
| [[Kategorie:Flash-HowTo]] | | [[Kategorie:Flash-HowTo]] |
| [[Kategorie:Flash-Beispiel]] | | [[Kategorie:Flash-Beispiel]] |
| {{{{SITENAME}}-konformer Artikel}} | | {{{{SITENAME}}-konformer Artikel}} |
