Hier entsteht für meine Schüler in der HTL-Salzburg, Künstlerisches Gestalten ein Tutorial um PacMan in Flash zu programmieren.
Diese Seite dient nur Ausbildungszwecken und angeführte Markennamen, Bilder, Sounds und Techniken unterlieben dem Urheberrecht und sind im Eigentum der jeweiligen Besitzer.
PacMan-Tutorial für Flash, Version 1
1. Übung:
Der PacMan (MovieClip/Symbol) soll - wie hier gezeigt - endlos in einem Viereck laufen.
2. Übung:
Share ThisJetzt kommt die Tastatursteuerung und ein wenig Programmierung hinzu.
- Zuerst legen wir eine Ebene “Punkte” an.
Dort zeichen wir - außerhalb der Bühne ein weißes Quadrat und benennen es in den Eigenschaften mit dem Namen “Point”. Denn nur benannte Objekte können in ActionScript angesprochen werden.- Damit wir jetzt 10 Punkte in der horizontalen und 10 Punkte in der vertikalen erhalten, benötigen wir ein wenig ActionScript im ersten Bild dieser Ebene.
//Variablen initialisieren //An dieser Position wird der 1. Punkt erscheinen newX=100; newY=40; pacman.swapDepths(1000); //Schleife mit 10 Durchgaengen zum Erzeugen der horizontalen Punkte for (i=0;i<=9;i++) { //Vorhandenen MovieClip verdoppeln und als Parameter //einen neuen eindeutigen Namen (’pnt0′ bis ‘pnt9′) vergeben. //Der Zweite Parameter ist eine eindeutige Zahl (100 bis 109) um die //Tiefenebene (sozusagen die z-Achse) festzulegen. point.duplicateMovieClip(”pnt”+i,(100+i)); //Mit with() kann man sich viel Schreibarbeit ersparen. //Alles innerhalb der Blockoperatoren ({ und }) bezieht sich auf das //innerhalb der Klammern von with() angegebene Objekt. with (_root[”pnt”+i]) { //Die neue horizontale Position des Punktes festlegen _x = newX; //Die neue vertikale Position des Punktes festlegen _y = newY; } //Fuer den naechsten Schleifendurchgang den x-Wert (horizontale Position) um //40 Pixel erhoehen newX=newX+40; } //Schleife fuer die vertikalen Punkte. Diese funktioniert analog zu der vorhergehenden Schleife //Es werden hier nur die y-Werte veraendert. for (i=0;i<=9;i++) { point.duplicateMovieClip(”pnt”+(10+i),(110+i)); with (_root[”pnt”+(10+i)]) { _x = newX; _y = newY; } newY=newY+40; }
- Nun haben wir mal eine Punkte-Spur auf unserer Bühne. (Natürlich nur wenn der Film läuft!)
- Jetzt kommt die Steuerung des PacMans über die Tasten. Wir wollen das der PacMan nach rechts, links, oben und unten laufen kann. Dazu erzeugen wir als neue Ebene. Dies liegt an oberster Position des Stapels und erhält den Namen “Steuerung”. Hier programmieren wir die komplette Tastatursteuerung über einen EventListener (sozusagen einen Zuhörer).
//Festlegen wie gross ein Schritt in Pixel ist. var intStep=10; //Jetzt fuehren wir verschiedene Variablen ein. Diese legen wir in das global gueltige Objekt //_global ab. Damit haben wir sie jederzeit zur Verfuegung.//Der erste Schritt fuer PacMan erfolgt nach rechts _global.pacStepX=intStep; //In der vertikalen wird die Position nicht veraendert _global.pacStepY=0; //Sobald der Film startet, soll PacMan loslaufen _global.pacmanGo=true;//Nun definieren wir ein neues Objekt (new Object) mit dem Namen myListener: var myListener:Object = new Object(); //Dies wird sozusagen unser Zuhoerer. Dieser wird in der Folge auf einen Tastendruck reagieren. //Er horcht also die ganze Zeit ob eine Taste gedrueckt wurde (myListener.onKeyDown). //Und falls dies der Fall ist macht er etwas. Dieses Etwas wird in der Funktion (function()) //festgelegt. myListener.onKeyDown = function() { //Wurde [ESC] gedrueckt? if (Key.getCode() == Key.ESCAPE) { //Setze die globale Variable auf false _global.pacmanGo=false; //Halte das Programm an. stop(); //Wurde Cursor-Rechts gedrueckt? } else if (Key.getCode() == Key.RIGHT) { //Setze die Richtung des MovieClips pacman auf 0 Grad. //In ActionScript gilt 0° = 3 Uhr, 90° = 6 Uhr, 180° = 9 Uhr und 270° = 12 Uhr //Mit der Eigenschaft _rotation des pacman-Objekts koennen wir die Ausrichtung des //MovieClips und somit des Mundes von PacMan bestimmen. pacman._rotation=0; //Da eine Richtungs-Taste gedrueckt wurde soll PacMan loslaufen. //Laeuft er bereits ist es egal, er laeuft einfach weiter. _global.pacmanGo=true; //Da Rechts gedrueckt wurde soll er auch nach rechts laufen. //Also wird der x-Wert um intStep (=10) erhoeht. _global.pacStepX = intStep; //Da er in der Horizontalen laeuft, soll sich der y-Wert nicht veraendern. _global.pacStepY=0; //Wurde Cursor-Links gedrueckt? } else if (Key.getCode() == Key.LEFT) { //Setze die Richtung des MovieClips pacman auf 180 Grad. pacman._rotation=180; //Da eine Richtungs-Taste gedrueckt wurde soll PacMan loslaufen. _global.pacmanGo=true; //Da Links gedrueckt wurde soll er auch nach links laufen. //Also wird der x-Wert um intStep (=10) vermindert (*(-1)). _global.pacStepX = intStep*(-1); //Da er in der Horizontalen laeuft, soll sich der y-Wert nicht veraendern. _global.pacStepY=0;} else if (Key.getCode() == Key.UP) { //Setze die Richtung des MovieClips pacman auf 270 Grad. pacman._rotation=270; //Da eine Richtungs-Taste gedrueckt wurde soll PacMan loslaufen. _global.pacmanGo=true; //Da Oben gedrueckt wurde soll er auch nach oben laufen. //Also wird der y-Wert um intStep (=10) vermindert (*(-1)). _global.pacStepY=intStep*(-1); //Da er in der Vertikalen laeuft, soll sich der x-Wert nicht veraendern. _global.pacStepX=0;} else if (Key.getCode() == Key.DOWN) { //Setze die Richtung des MovieClips pacman auf 90 Grad. pacman._rotation=90; //Da eine Richtungs-Taste gedrueckt wurde soll PacMan loslaufen. _global.pacmanGo=true; //Da Unten gedrueckt wurde soll er auch nach unten laufen. //Also wird der y-Wert um intStep (=10) erhoeht. _global.pacStepY=intStep; //Da er in der Vertikalen laeuft, soll sich der x-Wert nicht veraendern. _global.pacStepX=0; } } //Nun muessen wir unseren Zuhoerer (myListener) nur mehr an ein Objekt binden, dass abgehorcht //(ueberwacht) werden soll. //Schlauerweise ueberwachen wir die Tastatur (das globale Objekt Key) Key.addListener(myListener);
- Die Steuerung der Tastatur haben wir programmiert. Die Schritt die PacMan gehen soll sind jetzt in den jeweiligen globalen Variablen abgelegt. Aber… Wo wurde der MovieClip pacman neue positioniert? Wir haben bis jetzt nur die Ausrichtung des PacMan über die Eigenschaft _rotation festgelegt.
- Dazu erzeugen wir eine Ebene zwischen den bestehenden beiden Ebenen. Wir benennen sie “Clip” und ziehen unseren PacMan aus der Bibliothek auf die Bühne. (Natürlich haben wir den alten Film weiterverwendet. Daher ist der PacMan auch in der Bibliothek.) Nun geben wir den MovieClip in den Eigenschaften den Namen “pacman”. Dies ist - wie oben beschrieben - wichtig, denn ohne Namen können wir das Obejkt in ActionScript nicht verwenden.
- Und dies machen wir jetzt auch. Wir legen im ersten Frame des Objekts pacman ein kleines Programm ab:
//Wir erfuellen das Event enterFrame mit Leben. //Dieses Event wird jedesmal wenn das Bild/der Frame aufgerufen durchgefuehrt. //Da der Film endlos laeuft und der Fiml auch nur aus einem Bild/Frame besteht. //Wird dieses Event dauernd ausgeloest. onClipEvent (enterFrame) { //Mit trace() haben wir einen Befehl zur Ausgabe von Text. //Es wird ein eigenes Fenster geoeffnet und die aktuelle //Position vom MovieClip pacman (this ist eine Abkuerzung dafuer) ausgeben. trace (”X:” + this._x + ” :: ” + “Y:” + this._y); //Falls die globale Variable pacmanGo = true (also wahr) ist if (pacmanGo) { //Wir addieren zum akutellen x-Wert des pacman-Movieclips den x-Wert aus //der Tastatursteuerung hinzu. //Sollte dieser Wert negativ sein wird er halt abgezogen (PacMan geht nach links) // und sollte er Null sein wird halt nichts hinzuaddiert. this._x += pacStepX; //Wir addieren zum akutellen y-Wert des pacman-Movieclips den y-Wert aus //der Tastatursteuerung hinzu. //Sollte dieser Wert negativ sein wird er halt abgezogen (PacMan geht nach oben) // und sollte er Null sein wird halt nichts hinzuaddiert und PacMan geht in der Horizontalen. this._y += pacStepY; } }
