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

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(100 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.


=Repository mit Beispielen=
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.


Beispiel-FLA-Dateien zum nachfolgenden Tutorium finden sich im Glossar-Repository:
Die ersten drei Tutorien können auch mit [[Flash 6]], [[Flash 7]], [[Flash 8]] oder
*[http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly SVN-Repository] (für den Zugriff mit [[Subversion/HowTo|Subversion-Clients]])  
[[Flash 9]] ([[Flash CS3]]) durchgeführt werden. Die restlichen Tutorien sollten auch mit
*[http://glossar.hs-augsburg.de/beispiel/flash_cs5/butterfly direkter Zugriff über einen Web-Browser]
Flash 9 (CS3) realisiert werden können. Dies wurde aber nicht getestet.


=Flatternden Schmetterling erzeugen=
==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.


Beispiels-Implementierung: [http://glossar.hs-augsburg.de/webdav/flash_cs5/butterfly/butterfly_01_fluttering/ butterfly_01_fluttering]
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.


==Schmetterling-Symbol erzeugen==
=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>
# Neues Flash-Dokument erzeugen: <code>butterfly.fla</code>
# [[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>
# Flügel malen (z.B. geeignete Farbe wählen, Freihandwerkzeug, Stiftwerkzeug, Farbeimerwerkzeug)
# [[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>
# Flügel kopieren (Markieren, <code>Strg-c</code>, <code>Strg-v</code>) und spiegeln (<code>Modifizieren -> Transformieren -> Horizontal spiegeln</code>)
# [[AS3-Tutorium: Flash: Butterfly 04 variable number of rounds|Schmetterling fliegt eine variable Anzahl von Runden]]
# '''Alles selektieren, <code>F8</code> drücken => neuen Movie-Clip erzeugen, Name: <code>Wings</code>''' => Bibliothek enthält ein Symbol namens <code>Wings</code>
# [[AS3-Tutorium: Flash: Butterfly 05 external code|Schmetterling fliegt eine variable Anzahl von Runden (externe Hauptklasse)]]
# In der Bibliothek: Klick auf rechte Maus-Taste -> <code>Neuer Ordner</code> -> <code>Name</code>: <code>ButterflyAssets</code>
# [[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>
# Symbol <code>Wings</code> in den Ordner <code>ButterflyAssets</code> verschieben
# [[AS3-Tutorium:_Flash:_Butterfly_07a_character|Schmetterling als (Spiel-)Figur]] (simple Variante)
# Auf der Bühne: Flügel-Objekt löschen
# [[AS3-Tutorium:_Flash:_Butterfly_07b_character|Schmetterling als (Spiel-)Figur]] (verbesserte Variante)
# In der Bibliothek: Klick auf rechte Maus-Taste -> <code>Neues Symbol</code> -> <code>Name</code>: <code>Butterfly</code>
# [[AS3-Tutorium:_Flash:_Butterfly_07c_character|Schmetterling als (Spiel-)Figur]] (vereinfachte verbesserte Variante)
# Symbol <code>Butterfly</code> in den Ordner <code>ButterflyAssets</code> verschieben
# [[AS3-Tutorium:_Flash:_Butterfly_08_character|Schmetterlingsmovie als (Spiel-)Figur]]
# In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>Butterfly</code> => Auf der Bühne wird <code>Butterfly</code> geöffnet
# [[AS3-Tutorium:_Flash:_Butterfly_09_mvc|Schmetterling fliegt eine variable Anzahl von Runden]], implementiert gemäß dem [[Model-View-Controller-PParadigma|MVC-Pattern]]
# Ebenen anlegen:
# [[AS3-Tutorium:_Flash:_Butterfly_10_vclsd|Schmetterling fliegt eine variable Anzahl von Runden]], implementiert gemäß dem [[View-Controller-Logic-Service-Data-Paradigman|VCLSD-Pattern]]
#* <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 in der Rumpfmitte zum liegen kommen.
# In der Zeitleiste der Ebene <code>body</code>: '''<code>Bild</code>''' bei Frame 21 einfügen (rechter Mausklick => <code>Bild einfügen</code>)
# 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.
 
==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)
 
==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</code>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=
 
# In der Bibliothek: Klick auf rechte Maus-Taste -> <code>Neues Symbol</code> -> <code>Name</code>: <code>ButterflyMovie</code>
# In der Bibliothek: Doppel-Klick auf Icon vor dem Namen <code>ButterflyMovie</code> => Auf der Bühne wird <code>ButterflyMovie</code> geöffnet
# Ebene benennen:
#* <code>Butterfly</code>
# Ebene <code>Butterfly</code> aktivieren
# 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>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 ...)
 
=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“