Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative.

Inhaltsverzeichnis
Vorwort
1 Flash für ActionScript
2 ActionScript in Flash
3 Flash Pro für ActionScript
4 Grundlagen der Programmierung
5 Einfache Filmsteuerung
6 Bildschirme und Präsentationen
7 Drucken und das Kontextmenü
8 Textfelder
9 Tasten
10 Datum und Zeit
11 Rechnen
12 Farbe wechseln und Drag
13 Zeichnen und Zufall
14 Von Mäusen und Duplikaten
15 Kollisionstest
16 Sound
17 Video
18 Externe Filme
19 Vorladen und Player erkennen
20 Formulare und UI-Komponenten
21 Komponenten anpassen
22 Formulare versenden
23 Warenkorb
24 Ausblick auf ActionScript 3
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler
Aktuell zu Flash 8
Buch: Einstieg in ActionScript

Einstieg in ActionScript
brosch., mit CD und QuickFinder und Referenz
416 S., 24,90 Euro
Rheinwerk Design
ISBN 978-3-89842-774-6
Pfeil 9 Tasten
  Pfeil 9.1 Tastaturereignis keyPress
  Pfeil 9.2 Key-Objekt
  Pfeil 9.3 Spielerische Tasten


Rheinwerk Computing - Zum Seitenanfang

9.3 Spielerische Tasten  topZur vorigen Überschrift

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:


Tasten Wirkung

Shift + Pfeil links und

Shift + Pfeil rechts

sollen den Kran horizontal auf seiner Schiene verschieben.

Pfeil links und

Pfeil rechts

dienen dazu, den Schlitten mit Seil und Last horizontal zu verschieben.

Pfeil oben und

Pfeil unten

heben und senken die Last mit dem Seil. Das Seil muss dazu kürzer und länger werden.


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 Pfeil rechts und Shift 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 Strg + Return .

Abbildung 9.9 Der Kran lässt sich mit Shift und Pfeil links bzw. Pfeil rechts 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 Pfeil rechts 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 Pfeil rechts gedrückt ist, sondern schließt auch aus, dass Shift gerade betätigt wird. Der Grund liegt auf der Hand: Shift und Pfeil rechts 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 Pfeil links hinzu. Er arbeitet nach demselben Muster wie bei Pfeil rechts 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 Pfeil rechts bzw. Pfeil links 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 Pfeil oben fügen Sie den Code für Pfeil unten 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 Pfeil oben bzw. Pfeil unten 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.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: ActionScript 3 – Das Praxisbuch
ActionScript 3
Das Praxisbuch

bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: JavaScript






 JavaScript


Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern