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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
 
(108 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
=Zweck=
{{AS3-Tutorium:Flash:Butterfly:Menü}}


Dieses Dokument beschreibt, wie man in [[Flash 6]], [[Flash 7]], [[Flash 8]],
=Ziel=
[[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.
[[Datei:AS3-Tutorium Butterfly Use Cases.jpg|right|Use Cases der Tutoriums-Anwendung <code>Butterfly</code>]]
In diesem Tutorium wird beschrieben, wie man in [[Flash 10]] ([[Flash CS4]]) oder
[[Flash 11]] ([[Flash CS5]]) [[FLA]]-Dokumente erstellt, in denen ein Schmetterling auf der Bühne umherflattert.


=Flatternden Schmetterling erzeugen=
Diese einfachen Flash-Movies dienen dazu, erste Erfahrungen mit der [[Flash-Entwicklungsumgebung]] zu machen.
Es handelt sich im Prinzip lediglich um bessere Hello-World-Anwendungen.


==Schmetterling-Symbol erzeugen==
Die ersten drei Tutorien können auch mit [[Flash 6]], [[Flash 7]], [[Flash 8]] oder
# Neues Flash-Dokument erzeugen: <code>schmetterling.fla</code>
[[Flash 9]] ([[Flash CS3]]) durchgeführt werden. Die restlichen Tutorien sollten auch mit
# Flügel malen (z.B. geeignete Farbe wählen, Freihandwerkzeug, Stiftwerkzeug, Farbeimerwerkzeug)
Flash 9 (CS3) realisiert werden können. Dies wurde aber nicht getestet.
# 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>Wing</code>''' => Bibliothek enthält eine Symbol namens <code>Wing</code>
# 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>
# 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>Wing</code>
#* <code>Body</code>
# Ebene <code>Wing</code> aktivieren
# Symbol <code>Wing</code> auf die Bühne ziehen, dabei sollte das Kreuz auf der Bühne in der Rumpfmitte zum liegen kommen.  
# Ebene <code>Wing</code> aktivieren
# Körper zeichnen (dabei können die Flügel gegebenenfalls temporär ausgeblendet werden)
# In der Zeitleiste der Ebene <code>Body</code>: '''<code>Bild</code>''' bei Frame 20 einfügen (rechter Mausklick => <code>Bild einfügen</code>)


==Flügel schlagen mit „modernen“ Tweens (ab Flash 10)==
==Use Cases==
# In der Zeitleiste der Ebene <code>Wing</code>: '''<code>Bild</code>''' bei Frame 20 einfügen (rechter Mausklick => <code>Bild einfügen</code>)
Im Use-Case-Diagramm wird gezeigt, was die Anwendung leisten soll:
# In der Zeitleiste der Ebene <code>Wing</code>: rechter Mausklick auf Balken in der Zeitleiste -> <code>Bewegungs-Tween erstellen</code>
Der Benutzer kann eine Rundenzahl eingeben und dann die Animation starten.
# In der Zeitleiste der Ebene <code>Wing</code>: rechter Mausklick auf Frame 20 -> <code>Schlüsselbild einfügen</code>
Die Spielfigur (ein Schmetterling) fliegt daraufhin die gewünschte Anzahl von Runden und anschließend weg.
# In der Zeitleiste der Ebene <code>Wing</code>: rechter Mausklick auf Frame 10 -> <code>Schlüsselbild einfügen</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 10 stehen)


==Flügel schlagen mit klassischen Tweens (ab Flash 6)==
Beachten Sie, dass laut UML-Standard ein [[Akteur]] nur außerhalb des Systems gezeichnet werden darf.  
# In der Zeitleiste der Ebene <code>Wing</code>: '''<code>Schlüsselbild</code>''' bei Frame 20 einfügen  (rechter Mausklick => <code>Schlüsselbild einfügen</code>)
Für Multimedia-Anwendungen mit Spielfiguren oder Avataren hat es sich jedoch als vorteilhaft
# In der Zeitleiste der Ebene <code>Wing</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>)
erwiesen, vom Standard abzuweichen. Eine Spielfigur (wie hier der Schmetterling) ist ein Akteur im System,
# In der Zeitleiste der Ebene <code>Wing</code>: '''<code>Schlüsselbild</code>''' bei Frame 10 einfügen  (rechter Mausklick => <code>Schlüsselbild einfügen</code>)
der von außen lediglich die Befehle erhält zu agieren.
# 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 10 stehen)


=Schmetterling testen=
=Tutorium=
 
# [[AS3-Tutorium: Flash: Butterfly 01 fluttering|Flatternder Schmetterling]]  <swf width="110" height="80">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering_multi/Butterfly01MultiFlash11.swf</swf>
# Auf <code>Szene 1</code> in der linken oberen Ecke der Bühne klicken
# [[AS3-Tutorium: Flash: Butterfly 02 path|Schmetterling fliegt auf einem Pfad]] <swf width="110" height="80">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_02_path_multi/Butterfly02MultiFlash11.swf</swf>
# Symbol <code>Butterfly</code> auf die Bühne ziehen
# [[AS3-Tutorium: Flash: Butterfly 03 fixed number of rounds|Schmetterling fliegt eine vorgegebene Anzahl von Runden]] <swf width="110" height="80">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_03_fixed_number_of_rounds_multi/Butterfly03MultiFlash11.swf</swf>
# Film mit <code>Strg-Return</code> (<code>Ctrl-Return</code>) starten
# [[AS3-Tutorium: Flash: Butterfly 04 variable number of rounds|Schmetterling fliegt eine variable Anzahl von Runden]]
 
# [[AS3-Tutorium: Flash: Butterfly 05 external code|Schmetterling fliegt eine variable Anzahl von Runden (externe Hauptklasse)]]
=Schmetterling auf Pfad fliegen lassen=
# [[AS3-Tutorium: Flash: Butterfly 06 external code|Schmetterling fliegt eine variable Anzahl von Runden (externe Hauptklasse, externe Schmetterlingsklasse)]] <swf width="226" height="160">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_04_variable_number_of_rounds_multi/Butterfly04MultiFlash11.swf</swf>
 
# [[AS3-Tutorium:_Flash:_Butterfly_07a_character|Schmetterling als (Spiel-)Figur]] (simple Variante)
# In der Bibliothek: Klick auf rechte Maus-Taste -> <code>Neues Symbol</code> -> <code>Name</code>: <code>ButterflyMovie</code>
# [[AS3-Tutorium:_Flash:_Butterfly_07b_character|Schmetterling als (Spiel-)Figur]] (verbesserte Variante)
# In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>ButterflyMovie</code> => Auf der Bühne wird <code>ButterflyMovie</code> geöffnet
# [[AS3-Tutorium:_Flash:_Butterfly_07c_character|Schmetterling als (Spiel-)Figur]] (vereinfachte verbesserte Variante)
# Ebene benennen:
# [[AS3-Tutorium:_Flash:_Butterfly_08_character|Schmetterlingsmovie als (Spiel-)Figur]]
#* <code>Butterfly</code>
# [[AS3-Tutorium:_Flash:_Butterfly_09_mvc|Schmetterling fliegt eine variable Anzahl von Runden]], implementiert gemäß dem [[Model-View-Controller-PParadigma|MVC-Pattern]]
# Ebene <code>Butterfly</code> aktivieren
# [[AS3-Tutorium:_Flash:_Butterfly_10_vclsd|Schmetterling fliegt eine variable Anzahl von Runden]], implementiert gemäß dem [[View-Controller-Logic-Service-Data-Paradigman|VCLSD-Pattern]]
# Symbol <code>Butterfly</code> auf die Bühne ziehen und am Ebenenkreuz ausrichten
 
==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>
# Klick auf das Icon <code>Auswahlwerkzeug</code> (erstes Icon von oben in der Werkzeugleiste)
# Schmetterling an andere Position auf der Bühne ziehen (der Abspielkopf-Kopf muss auf Frame 150 stehen)
# Den entstehenden Pfad mit Mauszeiger anfassen und verbiegen
# Den Schmetterling in Pfadrichtung ausrichten (Pfad selektieren -> <code>Eigenschaften</code> -> Häckchen vor <code>An Pfad ausrichten</code>)
# Den Pfad weiter gestalten (evtl. mit Hilfe des Bewegungs-Editors); für Schritt 5 (Rundflug) wird ein Pfad benötigt, bei dem Anfang und Ende sehr nahe beieinander liegen
 
==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 Schritt 5 (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>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 ...)
 
=Schmetterling-Movie 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=
=Quellen=
<noinclude>
# {{Quelle|Kowarschick, W.: Multimedia-Programmierung}}</noinclude>
# [http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/ Musterlösungen (Flash CS5)]
# [http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs4/butterfly/ Musterlösungen (Flash CS4)]


*[[Kowarschick, W.: Multimedia-Programmierung]]
== [[Subversion/HowTo|SVN]]-Repository-Verweise ==
*[[Louis, Dirk; Nissen, Svend (2004): Flash MX 2004 und ActionScript]]
* [http://glossar.hs-augsburg.de/webdav/tutorium/flash_cs5/butterfly/ Musterlösungen (Flash CS5)]
 
* [http://glossar.hs-augsburg.de/webdav/tutorium/flash_cs4/butterfly/ Musterlösungen (Flash CS4)]
[[Kategorie:Flash-HowTo]]
<noinclude>[[Kategorie: AS3-Tutorium: Flash: Butterfly]][[Kategorie: Flash-Beispiel]][[Kategorie:Kapitel:Multimedia-Programmierung:Beispiele]]
[[Kategorie:Flash-Beispiel]]
</noinclude>
{{{{SITENAME}}-konformer Artikel}}

Aktuelle Version vom 14. März 2014, 12:10 Uhr

Dieser Artikel ist veraltet und wird künftig evtl. entfernt.

Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:

Korrektheit: 4
(großteils überprüft) 		Umfang: 3
(einige wichtige Fakten fehlen) 		Quellenangaben: 5
(vollständig vorhanden) 		Quellenarten: 5
(ausgezeichnet) 		Konformität: 4
(sehr gut)

AS3-Tutorium: Butterfly: Flash | Flex

Flash: Übersicht | Teil 1 | Teil 2 | Teil 3 | Teil 4 | Teil 5 | Teil 6 | Teil 7a | Teil 7b | Teil 7c | Teil 8 | Teil 9 | Teil 10

Ziel

Use Cases der Tutoriums-Anwendung Butterfly

In diesem Tutorium wird beschrieben, wie man in Flash 10 (Flash CS4) oder Flash 11 (Flash CS5) FLA-Dokumente erstellt, in denen ein Schmetterling auf der Bühne umherflattert.

Diese einfachen Flash-Movies dienen dazu, erste Erfahrungen mit der Flash-Entwicklungsumgebung zu machen. Es handelt sich im Prinzip lediglich um bessere Hello-World-Anwendungen.

Die ersten drei Tutorien können auch mit Flash 6, Flash 7, Flash 8 oder Flash 9 (Flash CS3) durchgeführt werden. Die restlichen Tutorien sollten auch mit Flash 9 (CS3) realisiert werden können. Dies wurde aber nicht getestet.

Use Cases

Im Use-Case-Diagramm wird gezeigt, was die Anwendung leisten soll: Der Benutzer kann eine Rundenzahl eingeben und dann die Animation starten. Die Spielfigur (ein Schmetterling) fliegt daraufhin die gewünschte Anzahl von Runden und anschließend weg.

Beachten Sie, dass laut UML-Standard ein Akteur nur außerhalb des Systems gezeichnet werden darf. Für Multimedia-Anwendungen mit Spielfiguren oder Avataren hat es sich jedoch als vorteilhaft erwiesen, vom Standard abzuweichen. Eine Spielfigur (wie hier der Schmetterling) ist ein Akteur im System, der von außen lediglich die Befehle erhält zu agieren.

Tutorium

  1. Flatternder Schmetterling <swf width="110" height="80">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_01_fluttering_multi/Butterfly01MultiFlash11.swf</swf>
  2. Schmetterling fliegt auf einem Pfad <swf width="110" height="80">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_02_path_multi/Butterfly02MultiFlash11.swf</swf>
  3. Schmetterling fliegt eine vorgegebene Anzahl von Runden <swf width="110" height="80">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_03_fixed_number_of_rounds_multi/Butterfly03MultiFlash11.swf</swf>
  4. Schmetterling fliegt eine variable Anzahl von Runden
  5. Schmetterling fliegt eine variable Anzahl von Runden (externe Hauptklasse)
  6. Schmetterling fliegt eine variable Anzahl von Runden (externe Hauptklasse, externe Schmetterlingsklasse) <swf width="226" height="160">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_04_variable_number_of_rounds_multi/Butterfly04MultiFlash11.swf</swf>
  7. Schmetterling als (Spiel-)Figur (simple Variante)
  8. Schmetterling als (Spiel-)Figur (verbesserte Variante)
  9. Schmetterling als (Spiel-)Figur (vereinfachte verbesserte Variante)
  10. Schmetterlingsmovie als (Spiel-)Figur
  11. Schmetterling fliegt eine variable Anzahl von Runden, implementiert gemäß dem MVC-Pattern
  12. Schmetterling fliegt eine variable Anzahl von Runden, implementiert gemäß dem VCLSD-Pattern

Quellen

  1. Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
  2. Musterlösungen (Flash CS5)
  3. Musterlösungen (Flash CS4)

SVN-Repository-Verweise

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=AS3-Tutorium:_Flash:_Butterfly&oldid=28986“