AS3-Tutorium: Flash: Butterfly 07a character

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

1. In der Bibliothek: Das Symbol Butterfly mit einem Doppelklick öffnen.
2. In der Zeitleiste: Zwei neue Ebenen (ganz oben) einfügen:
3. * scripts
4. * labels
5. 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.
6. 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.
7. 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.
8. In der Zeitleiste, Ebene wings: Klick auf Frame 20 → Rechtsklick auf Frame 20 → Schlüsselbild einfügen.
9. 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.
10. In der Zeitleiste, Ebene wings: Klick auf Frame 1 → Rechtsklick auf Frame 1 → Bilder einfügen (nicht Bild einfügen!!).
11. 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.
12. In der Zeitleiste, Ebene wings: Klick auf Frame 20 → Rechtsklick auf Frame 20 → Bilder einfügen (nicht Bild einfügen!!).
13. In der Zeitleiste, Ebene labels: Klick auf Frame 1 → Eigenschaften-Fenster öffnen → Name: lb_opened
14. In der Zeitleiste, Ebene labels: Klick auf Frame 20 → Rechtsklick auf Frame 20 → Schlüsselbild einfügen → Eigenschaften-Fenster, Name: lb_closed
15. In der Zeitleiste, Ebene labels: Klick auf Frame 40 → Eigenschaften-Fenster, Name: lb_fluttering_opened
16. In der Zeitleiste, Ebene labels: Klick auf Frame 50 → Rechtsklick auf Frame 50 → Schlüsselbild einfügen → Eigenschaften-Fenster öffnen → Name: lb_fluttering_closed
17. In der Zeitleiste, Ebene scripts folgenden Code eintragen (Schlüsselbilder nicht vergessen!):

    Frame 10

    stop();

    Frame 39

    stop();

    Frame 59

    gotoAndPlay("lb_fluttering_opened");

18. Im Menü: Datei → Neu → ActionScript 3.0-Klasse (CS5) bzw. ActionScript-Datei (CS4 und früher) → OK -> Nur in Flsh CS5: Klassenname: Butterfly
19. Im Menü: Datei → Datei speichern unter → Butterfly.as (im selben Ordner wie die zugehörige fla-Datei.)

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)

Dieser Artikel ist GlossarWiki-konform.