9.3 Spielerische Tasten 

Zum Abschluss dieses Kapitels folgt ein kleines Bonbon: Wir zeigen Ihnen, wie Sie mit Tasten MovieClips steuern können. Damit erhalten Sie die Grundlage zu vielen mit Flash realisierten Spielen. Zusätzlich lernen Sie, wie Sie mehrere Tasten auf einmal abfragen.

Wenn Sie einen MovieClip verschieben, ändern Sie seine Position im Koordinatensystem. Diese Position ist abhängig vom Registrierungspunkt, den Sie beim Erstellen eines MovieClips vergeben.

Öffnen Sie zuerst die Ausgangsdatei tastensteuerung.fla von der CD-ROM (in den Ordnern Flash8, FlashMX2004 und FlashMX). Sie sehen einen Kran, der nun per Tastatur gesteuert werden soll. Außerdem wollen wir die Last und das zugehörige Seil beweglich gestalten, und zwar horizontal und vertikal. Last und Seil bilden zusammen den Schlitten des Krans.

Abbildung 9.7 Ein Kran mit Last (1) , Seil (2) und Schlitten (3) .

Der Kran besteht aus einem MovieClip, der weitere MovieClips enthält. Alle Elemente, die beweglich sein sollen, haben wir als eigenen MovieClip angelegt. Das ist wichtig, da nur MovieClips mit ActionScript bewegt werden können.

Abbildung 9.8 Der Aufbau des Films tastensteuerung.fla

Wenn Sie eine Tastensteuerung entwerfen, sollten Sie sich nicht nur Gedanken machen, was bewegt wird, sondern auch mit welchen Tasten. Eine einfache Übersicht wie die folgende Tabelle reicht aus, um sich Klarheit zu verschaffen:

Tabelle 9.1 Tasten und ihre Wirkung für das Kran-Beispiel

Schritt für Schritt: Kransteuerung

Nach den grundlegenden Gedanken geht es ans Programmieren. Zum Einsatz kommen wieder Ereignisprozeduren, so dass der komplette Code im ersten Schlüsselbild des Hauptfilms auf der Ebene ActionScript landet.

Definieren Sie drei Variablen, die angeben, um wie viel das Element jeweils versetzt wird:

var kranVersatz_num:Number = 5;
var xVersatz_num:Number = 5;
var yVersatz_num:Number = 5;

Die Variablen steuern die Bewegungsgeschwindigkeit. kranVersatz gibt an, wie viele Pixel der Kran nach links und rechts bewegt werden soll, xVersatz steht für den Versatz des Schlittens und yVersatz für die Höhenänderung von Seil und Last.

Die drei Variablen vor dem eigentlichen Code zu definieren, ist sehr sinnvoll, da sie so jederzeit flexibel und zentral geändert werden können.

Als Nächstes fügen Sie die Ereignisprozedur für den Kran hinzu:

_root.kran_mc.onEnterFrame = function() {

Sie könnten alternativ auch mit einem Event-Listener arbeiten. Wir fügen hier das Ereignis nicht direkt dem Hauptfilm zu – was durchaus möglich wäre. Dies sorgt dafür, dass das Ereignis erst ausgeführt wird, wenn der Kran geladen wird.

Nun schließen Sie die folgenden Anweisungen in eine with ()-Anweisung ein:

   with (kran_mc) {
   // Hier kommen die Anweisungen hin
}

Die with (Objekt)-Anweisung ist für Sie etwas Neues. Es handelt sich dabei um eine Vereinfachung: Sie schreiben in runden Klammern hinter with ein Objekt.

Alle Methoden und Eigenschaften, die in den Anweisungsblock (geschweifte Klammern) geschrieben werden, beziehen sich automatisch auf dieses Objekt. Sie müssen sie also nicht mehr eintippen.

Beim nächsten Schritt prüfen Sie, ob und gedrückt wurden:

      if (Key.isDown(Key.RIGHT) && Key.isDown(Key.SHIFT)) {
         if (_x < 200) {
            _x += kranVersatz_num;
         }
      }

Um die zwei Tasten zu koppeln, verbinden Sie die beiden Bedingungsüberprüfungen mit isDown() einfach durch ein logisches UND (&&). Jetzt wird nur dann true geliefert, wenn beide Tasten gedrückt sind.

Ist das Ergebnis true, ändert sich die horizontale Position des Krans (Eigenschaft _x des Kran-MovieClips kran_mc) um den Wert der Variablen kranVersatz_num (in unserem Fall 5).

Die umschließende if-Anweisung verhindert, dass der Kran über den rechten Rand hinausgeschoben wird.

Bei einer horizontalen Position (_x) von 200 Pixeln ist Schluss mit Verschieben.

Analog verschieben Sie den Kran mit folgenden Anweisungen nach links:

      else if (Key.isDown(Key.LEFT) && Key.isDown(Key.SHIFT)) {
         if (_x > 5) {
            _x -= kranVersatz_num;
         }
      }
   }
};

So viel zum Bewegen des Krans. Testen Sie einfach selbst das Ergebnis mit + .

Abbildung 9.9 Der Kran lässt sich mit und bzw. verschieben.

Weiter geht es mit der Steuerung des Kranschlittens nach links und rechts.

Schritt für Schritt: Kransteuerung II

Zuerst benötigen Sie das Ereignis:

_root.kran_mc.schlitten_mc.onEnterFrame = function() {
   with (kran_mc.schlitten_mc) {

Sie machen sich auch hier die Arbeit mit with () einfacher. Dieses Mal greifen Sie direkt auf den untergeordneten MovieClip schlitten_mc zu.

Anschließend prüfen Sie, ob der Nutzer drückt:

      if (Key.isDown(Key.RIGHT) && !Key.isDown(Key.SHIFT)) {
         if (_x <= 110) {
            _x += yVersatz_num;
         }
      }

Die if-Bedingung testet hier nicht nur, ob gedrückt ist, sondern schließt auch aus, dass gerade betätigt wird.¹  Der Grund liegt auf der Hand: und sollen nur den Kran, nicht aber den Schlitten verschieben.

Der Versatz erfolgt wie beim Kran mit einer Variablen (yVersatz), die zur aktuellen horizontalen Position des Schlittens (_x) hinzugezählt wird. Dank if-Anweisung endet das Verschieben bei einer Position von 110 Pixeln.

Fügen Sie den Code für hinzu. Er arbeitet nach demselben Muster wie bei aus dem vorherigen Schritt.

      else if (Key.isDown(Key.LEFT) && !Key.isDown(Key.SHIFT)) {
         if (_x > 0) {
            _x -= yVersatz_num;
         }
      }
   }
};

Nach Erklärung der horizontalen Bewegung sollten Sie nun wieder selbst das Ergebnis testen und den Schlitten ein wenig hin- und herfahren.

Abbildung 9.10 Der Schlitten bewegt sich dank der bzw. in horizontaler Richtung.

Im letzten Teil dieses umfangreichen Workshops bewegen Sie Last und Seil auf und ab.

Schritt für Schritt: Kransteuerung III

Den Anfang macht folgendes Ereignis, auch hier unterstützt von einer with ()-Anweisung:

_root.kran_mc.schlitten_mc.seil_mc.onEnterFrame = function() {
   with (kran_mc.schlitten_mc.seil_mc) {

Die with ()-Anweisung gilt in diesem Fall nur für den MovieClip des Seils. Der MovieClip für die Last (last_mc) muss komplett adressiert werden:

Fügen Sie folgenden Code ein, um die Last nach oben zu verschieben:

      if (Key.isDown(Key.UP)) {
         if (_height > 25) {
            _height -= xVersatz_num;
            _root.kran_mc.schlitten_mc.last_mc._y -= 
            xVersatz_num;
         }
      }

Sehen Sie den Unterschied zum horizontalen Verschieben des Schlittens oder Krans? Das Seil ändert nicht seine Position, sondern nur seine Höhe (_height). Die Last nimmt dagegen eine andere Position ein (_y).

Wenn Sie die Höhe eines MovieClips variieren, müssen Sie aufpassen: Die Höhe ändert sich immer relativ zum Registrierungspunkt. Für das Seil haben wir den Registrierungspunkt in diesem Fall oben in der Mitte gewählt.

Analog zum Code für fügen Sie den Code für ein:

      else if (Key.isDown(Key.DOWN)) {
         //Seil und Last nach unten
         if (_height < 160) {
            _height += xVersatz_num;
            _root.kran_mc.schlitten_mc.last_mc._y += xVersatz_num;
         }
      }
   }
};

Abbildung 9.11 Nun lässt sich die Last mit bzw. nach unten und nach oben bewegen.

Die fertige Datei mit dem kompletten Code finden Sie unter dem Namen Tastensteuerung_AS2.fla im Ordner Flash8 bzw. Flash MX2004 und unter tastensteuerung_AS1.fla im Ordner FlashMX auf der CD-ROM.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.