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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
← zur vorherigen Versionen-Differenzzur nächsten Versionen-Differenz →
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Kowa (Diskussion | Beiträge)
Administrator, Bots, Bürokraten, emailconfirmed, Oberflächenadministratoren, interwiki, oversight, SMW-Administratoren, SMW-Kuratoren, SMW-Editoren, Oversighter, Administratoren
42.989 Bearbeitungen
Keine Bearbeitungszusammenfassung
Zeile 109: Zeile 109:
# Film mit <code>Strg-Return</code> (<code>Ctrl-Return</code>) starten
# 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]
<oflash file="http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_02_path/butterfly_02_path.swf" width="550" height="400"/>
==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 
# 1. 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/>&nbsp;&nbsp;gotoAndPlay("start");<br/>else<br/>&nbsp;&nbsp;stop();</code>
=Quellen=
*[[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}}

Version vom 13. Oktober 2010, 17:55 Uhr

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.

Repository mit Beispielen

Beispiel-FLA-Dateien zum nachfolgenden Tutorium finden sich im Glossar-Repository:

Flatternden Schmetterling erzeugen

Beispiels-Implementierung: butterfly_01_fluttering <oflash file="http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_01_fluttering/butterfly_01_fluttering.swf" width="367" height="267"/>

Schmetterlingssymbol erzeugen

  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 Ordner → Name: 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 Symbol → Name: 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.

In der Beispiels-Implementierung butterfly_01_fluttering wurden zwei weitere Symbole erzeugt:

  • Wing enthält einen einzelen Flügel und dienst als Basis von Wings
  • Body enthält den Schmetterlings-Rumpf, der im Symbol Butterfly 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:

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:

  1. In der Bibliothek: Klick auf rechte Maus-Taste → Neuer Ordner → Name: ButterflyAssetsAI
  2. Importieren Sie butterfly.ai: Datei → Importieren → In Bibliothek importieren → Ebenen 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. Symbole BodyAI und WingsAI in den Ordner ButterflyAssetsAI verschieben
  8. In der Bibliothek: Klick auf rechte Maus-Taste → Neues Symbol → Name: ButterflyAI
  9. 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. Ebenen anlegen:
    • wings
    • body
  12. Ebene wings aktivieren
  13. Symbol WingsAI auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne im Rumpfschwerpunkt zum liegen kommen
  14. Ebene body aktivieren
  15. 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ügen → Saklierung
  5. In der Zeitleiste der Ebene wings: rechter Mausklick auf Frame 11 → Schlüsselbild einfügen → Saklierung
  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


Dieser Artikel ist GlossarWiki-konform.
Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=AS3-Tutorium:_Flash:_Butterfly&oldid=14538“