AS3-Tutorium: Flash: Butterfly 07a character: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) |
Kowa (Diskussion | Beiträge) |
||
Zeile 27: | Zeile 27: | ||
==Das Schmetterlingssymbol als Spielfigur== | ==Das Schmetterlingssymbol als Spielfigur== | ||
# In der Bibliothek: Das Symbol <code>Butterfly</code> mit einem Doppelklick öffnen. | |||
# In der Zeitleiste: Zwei neue Ebenen (ganz oben) einfügen: | |||
# * <code>scripts</code> | |||
# * <code>labels</code> | |||
# In der Zeitleiste: Alle Ebenen (und damit alle Frames) markieren und den Block mit allen Frames nach rechts verschieben, so dass das erste Schlüsselbild auf Frame 40 liegt. | |||
# In der Zeitleiste, Ebene <code>body</code>: Klick auf das Schlüsselbild bei Frame 40 → <code>Alt</code>-Taste drücken und festhalten → Linke Maustaste über Schlüsselbild bei Frame 40 drücken, festhalten und nach links bis Frame 1 verschieben ⇒ Der Schmetterlingskörper ist ab Frame 1 vorhanden; eer entsprechende Bereich in der Zeitleiste hat sich grau eingefärbt. | |||
# In der Zeitleiste, Ebene <code>body</code>: Das Schlüssenbild bei Frame 40 entfernen: Klick auf das Schlüsselbild → Rechtsklick auf das Schlüsselbild → <code>Schlüsselbild löschen</code>. | |||
# In der Zeitleiste, Ebene <code>wings</code>: Klick auf Frame 20 → Rechtsklick auf Frame 20 → <code>Schlüsselbild einfügen</code>. | |||
# In der Zeitleiste, Ebene <code>wings</code>: <code>Strg</code>/<code>Ctrl</code>-Taste drücken und festhalten → Klick auf das Schlüsselbild bei Frame 40 → Rechtsklick auf das Schlüsselbild → <code>Bilder kopieren</code>. | |||
# In der Zeitleiste, Ebene <code>wings</code>: Klick auf Frame 1 → Rechtsklick auf Frame 1 → <code>Bilder einfügen</code> (nicht <code>Bild einfügen</code>!!). | |||
# In der Zeitleiste, Ebene <code>wings</code>: <code>Strg</code>/<code>Ctrl</code>-Taste drücken und festhalten → Klick auf das Schlüsselbild bei Frame 50 → Rechtsklick auf das Schlüsselbild → <code>Bilder kopieren</code>. | |||
# In der Zeitleiste, Ebene <code>wings</code>: Klick auf Frame 20 → Rechtsklick auf Frame 20 → <code>Bilder einfügen</code> (nicht <code>Bild einfügen</code>!!). | |||
==Der Schmetterlings-Movie als Spielfigur== | ==Der Schmetterlings-Movie als Spielfigur== |
Version vom 17. November 2010, 15:27 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
Dieser Artikel wird derzeit von einem Autor gründlich bearbeitet. Die Inhalte sind daher evtl. noch inkonsistent.
Weiterentwicklung der sechsten Version des Schmetterling-Movies
In AS3-Tutorium: Flash: Butterfly 06 external code wurde der Code aus den Zeitleisten des Hauptmoivies sowie der Symbole weitestgehend in Klassen ausgelagert.
Allerdings wurde bei der Implementierung bislang nicht das Prinzip Separation of Concerns (siehe auch Programmierprinzipien) beachtet.
Um dies zu erreichen, werden in einem ersten Schritt
die Symbole Butterfly
und ButterflyMovie
in „Spielfiguren“ (characters) umgewandelt.
Eine Spielfigur kann verschieden Zustände einnehmen, wie z.B. „stehen“, „laufen nach links“, „laufen nach rechts“, „hüpfen“ etc. Dabei sollte ein Figur-Objekt nicht selbst entscheiden, wann es in welchen Zustand übergeht. Die wird von außen (z.B.) über eine Logik-Komponente gesteuert. Das heißt, eine Figur hat nur noch eine einzige Aufgabe: Den Zustand dieser Figur (der im Allgemeinen in einem Datenobjekt gespeichert wird) zu visualisieren.
Im Folgenden wird zunächst das Symbol Butterfly
in eine Spielfigur (im zuvor beschrieben Sinn) umgewandelt, um das Grundprinzip klar zu machen.
Danach wird das Symbol ButterflyMovie
in eine „Figur“ umgewandelt. Hierbei wird insbesondere die Progammlogik (fliegen einer via roundsToFly
vorgegebenen Anzahl von Runden)
aus der Klasse ButterflyMovie
in die Hauptklasse Main
verlagert.
<swf width="367" height="267">http://glossar.hs-augsburg.de/beispiel/tutorium/flash_cs5/butterfly/butterfly_07_avatar/Butterfly07Flash11.swf</swf>
Musterlösung (Flash CS5)
(SVN-Repository)
Musterlösung (Flash CS4) (SVN-Repository)
Das Schmetterlingssymbol als Spielfigur
- In der Bibliothek: Das Symbol
Butterfly
mit einem Doppelklick öffnen. - In der Zeitleiste: Zwei neue Ebenen (ganz oben) einfügen:
- *
scripts
- *
labels
- In der Zeitleiste: Alle Ebenen (und damit alle Frames) markieren und den Block mit allen Frames nach rechts verschieben, so dass das erste Schlüsselbild auf Frame 40 liegt.
- In der Zeitleiste, Ebene
body
: Klick auf das Schlüsselbild bei Frame 40 →Alt
-Taste drücken und festhalten → Linke Maustaste über Schlüsselbild bei Frame 40 drücken, festhalten und nach links bis Frame 1 verschieben ⇒ Der Schmetterlingskörper ist ab Frame 1 vorhanden; eer entsprechende Bereich in der Zeitleiste hat sich grau eingefärbt. - In der Zeitleiste, Ebene
body
: Das Schlüssenbild bei Frame 40 entfernen: Klick auf das Schlüsselbild → Rechtsklick auf das Schlüsselbild →Schlüsselbild löschen
. - In der Zeitleiste, Ebene
wings
: Klick auf Frame 20 → Rechtsklick auf Frame 20 →Schlüsselbild einfügen
. - In der Zeitleiste, Ebene
wings
:Strg
/Ctrl
-Taste drücken und festhalten → Klick auf das Schlüsselbild bei Frame 40 → Rechtsklick auf das Schlüsselbild →Bilder kopieren
. - In der Zeitleiste, Ebene
wings
: Klick auf Frame 1 → Rechtsklick auf Frame 1 →Bilder einfügen
(nichtBild einfügen
!!). - In der Zeitleiste, Ebene
wings
:Strg
/Ctrl
-Taste drücken und festhalten → Klick auf das Schlüsselbild bei Frame 50 → Rechtsklick auf das Schlüsselbild →Bilder kopieren
. - In der Zeitleiste, Ebene
wings
: Klick auf Frame 20 → Rechtsklick auf Frame 20 →Bilder einfügen
(nichtBild einfügen
!!).
Der Schmetterlings-Movie als Spielfigur
Probleme der Implementierung
Quellen
- Kowarschick, W.: Multimedia-Programmierung
- Musterlösung (Flash CS5)
- Musterlösung (Flash CS4)
- Erweiterte Musterlösung (Flash CS4)
- Erweiterte Musterlösung (Flash CS5)
SVN-Repository-Verweise
- Musterlösung (Flash CS5)
- Musterlösung (Flash CS4)
- Erweiterte Musterlösung (Flash CS4)
- Erweiterte Musterlösung (Flash CS5)