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

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


=1. Schritt: 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.


# Neues Flash-Dokument erzeugen: <code>schmetterling.fla</code>
Die ersten drei Tutorien können auch mit [[Flash 6]], [[Flash 7]], [[Flash 8]] oder
# Flügel malen (z.B. geeignete Farbe wählen, Freihandwerkzeug, Stiftwerkzeug, Farbeimerwerkzeug)
[[Flash 9]] ([[Flash CS3]]) durchgeführt werden. Die restlichen Tutorien sollten auch mit
# Flügel kopieren (Markieren, <code>Strg-c</code>, <code>Strg-v</code>) und spiegeln (<code>Modifizieren -> Transformieren -> Horizontal spiegeln</code>)
Flash 9 (CS3) realisiert werden können. Dies wurde aber nicht getestet.
# '''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>Scripts</code>
#* <code>Labels</code>
#* <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 (an Flash CS4)'''
==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'''
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 (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)


=2. Schritt: 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)]]
=3. Schritt: 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)
# Rechtsklick auf das Ebenensysmbol <code>Wing</code> => je nach Flash-Version: <code>Klassischen Pfad hinzufügen</code> bzw. <code>Pfad einfügen</code> bzw. <code>Pfad hinzufügen</code>
# [[AS3-Tutorium:_Flash:_Butterfly_07b_character|Schmetterling als (Spiel-)Figur]] (verbesserte Variante)
# Pfad-Ebene selektieren, Freihandwerkzeug mit Option <code>smooth</code>/<code>Glätten</code> bzw. Stiftwerkzeug => Pfad zeichnen (ohne Kreuzung)
# [[AS3-Tutorium:_Flash:_Butterfly_07c_character|Schmetterling als (Spiel-)Figur]] (vereinfachte verbesserte Variante)
# 1. Schmetterlingsbild: Schmetterling (Mittelpunkt) auf Pfad-Anfang legen, in Flugrichtung drehen und Größe anpassen
# [[AS3-Tutorium:_Flash:_Butterfly_08_character|Schmetterlingsmovie als (Spiel-)Figur]]
## Ebene <code>Butterfly</code> aktivieren
# [[AS3-Tutorium:_Flash:_Butterfly_09_mvc|Schmetterling fliegt eine variable Anzahl von Runden]], implementiert gemäß dem [[Model-View-Controller-PParadigma|MVC-Pattern]]
## erstes Schmetterlingsild (Frame) selektieren
# [[AS3-Tutorium:_Flash:_Butterfly_10_vclsd|Schmetterling fliegt eine variable Anzahl von Runden]], implementiert gemäß dem [[View-Controller-Logic-Service-Data-Paradigman|VCLSD-Pattern]]
## 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 Eben <code>Butterfly</code>: evtl. weitere Schlüsselbilder einfügen
# Schmetterling an allen Schlüsselbildern geeignet transformieren (Größe, Rotation, Alphakanal ...)
 
 
 
 
Schmetterlingsmovie durch Doppelklick auf <code>ButterflyMovie</code> öffnen.
 
Entweder Einzelbilder hintereinanderfügen oder Schmetterlingsflügel mit Hilfe eines Tweens verzerren (ohne den Schmetterlings-Mittelpunkt vom Platz zu bewegen
 
=> <code>frei transformieren</code>; Alt-Taste drücken


=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, 10: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
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“