Voraussetzungen:

• Umgehen mit den Flash Werkzeugen

Lernziele:

• Verwenden der NetStream Klasse
• Anzeigen von Variablen in Textfeldern

Hier eine Vorschau von dem, was wir erstellen werden:

Ausnahmsweise steht hier einmal der Inhalt und nicht das Design im Vordergrund. Der Player ist sehr einfach aufgebaut. Er lädt ein FLV File von www.mediacollege.com (Copyright by Mediacollege.com) und spielt es dann ab. Dazu kommen ein paar einfache Steuerbuttons und einige Textfelder mit Informationen über das FLV-File.

Als erstes benötigen wir ein neues Video Objekt. Dazu müsst ihr die Bibliothek öffnen [Ctrl+L] oder über Fenster -> Bibliothek. Dann klickt ihr dort rechts in das weisse Feld und ihm Kontextmenü wählt ihr darauf “Neues Video” aus.

In dem Menü gebt ihr nun einen Namen ein (dieser Spielt für die spätere Benutzung keine Rolle) und achtet darauf, dass “Video von Actionscript gesteuert) angewählt ist.

Nun zieht ihr das Objekt von der Biliothek auf die Bühne und gebt ihm den Instanznamen “my_video“. Mit dem “Frei Transformieren” Werkzeug [Q] könnt ihr zusätzlich noch die Grösse ändern.

Nun erstellt ihr folgende 6 Elemente auf der Bühne:

• dynamisches Textfeld mit der Variable “loaded”
• dynamisches Textfeld mit der Variable “fps“
• dynamisches Textfeld mit der Variable “time“
• Play Button mit dem Instanznamen “play_btn“
• Pause Button mit dem Instanznamen “pause_btn“
• Stop Button mit dem Instanznamen “stop_btn“

Schlussendlich kommt noch der Actionscript Code:

Nun die Erklärung dazu Schritt für Schritt:

Mit “var connection = new NetConnection()” erstellen wir eine neues NetConnection Objekt. Dieses soll dann erst einmal eine Verbindung aufbauen mit “connection.connect(null)”. Danach erstellen wir ein Stream Objekt dazu: “var stream = new NetStream(connection)“. Nun weisen wir unserem Video Objekt auf der Bühne den Stream zu : “my_video.attachVideo(stream)”. Schlussendlich bestimmen wir noch vieviel in den Zwischenspeicher geladen werden soll, in diesem Fall sind das 5 Sekunden, das heisst erst wenn 5 Sekunden des Videos geladen sind, fängt Flash an das Video abzuspielen. Bei grossen Videos empfiehlt es sich, hier einen grösseren Wert zu nehmen.

Nun bestimmen wir mit “url = “http://www.mediacollege.com/video-gallery/testclips/20051210-w50s.flv”” von wo das FLV File geladen werden soll. Jetzt können wir es mit “stream.play(url)” abspielen lassen.

Für die Play/Pause Buttons brauchen wir später noch die Variable “is_paused” die wir jetzt erst einmal auf “false” setzen: ” is_paused = false”.

Den wichtigen Teil haben wir jetzt, das Video wird geladen und abgespielt. Der Benutzer sollte jedoch auch noch einige Informationen über das Video erhalten und es pausieren können.

Die Informationen müssen wir während des Abspielens auslesen darum rufen wir sie auch in einer “onEnterFrame” Prozedur ab.

“kbTotal = Math.round(stream.bytesTotal * 0.0009765625)” liest aus wieviele Bytes das Video total umfasst. Wir multiplizieren es mit 0.0009765625 damit wir aus den Bytes, Kilobytes erhalten. Schlussendlich runden wir es mit “Math.round()” noch auf eine Ganzzahl.

Genau gleich gehen wir mit  ”kbLoaded = Math.round(stream.bytesLoaded * 0.0009765625)” vor, nur dass wir hier die Anzahl der geladenen Kilobytes bestimmen.

Jetzt weisen wir der Variable “loaded” die vorher ausgelesenen Werte zu: “loaded = kbLoaded + ” KB of ” + kbTotal + ” KB”“.
Zur Erinnerung: Die Variable “loaded” wir in einem Textfeld ausgegeben!

Nun lesen wir mit  ”fps = Math.round(stream.currentFps) + ” FPS”" die Anzahl der Frames pro Sekunde aus. Wieder wird der Wert auf eine Ganzzahl gerundet. Auch die Variable “fps” wir in einem unserer Textfelder ausgegeben.

Schlussendlich wollen wir noch wissen, wieviele Sekunden schon abgespielt wurden, dazu lesen wir mit folgendem Code die Zeit aus und weisen sie der Variable “time” zu: “time = Math.round(stream.time) + ” sec”“.

Nun kommen noch die Buttons. Wichtig dabei sind eigentlich nur folgende drei Befehle:

• stream.play(url) – lädt das Video nochmal und spielt es von vorne ab.
• stream.pause() – pausiert das Video b.z.w spielt es wieder ab.
• stream.close() - schliesst den Stream, sodass das Video anschliessen wieder neu geladen werden muss.

Wichtig ist auch noch, dass beim Play Button, je nachdem welchen Wert die Variable “is_paused” hat, entweder das Video neu lädt oder wieder abspielt.

Nun sind wir auch schon fertig mit unserem simplen FLV Player. Experimentiert ein bisschen damit herum, wie wäre es zum Beispiel wenn der User selbst eine URL eingeben könnte und dann würde der FLV Player das Video laden?

Fragen und Kritik einfach in die Comments.
MFG

Michael

Heute wollen wir einen dynamischen MP3 Player in Flash programmieren. Mit dynamisch ist gemeint, dass er nicht nur einfach ein spezifisches Lied abspielen kann, sondern das Lied dynamisch per Parameter übergeben wird.

Vorkentnisse:

• Umgang mit Flash
• Erstellen von Buttons
• etwas HTML

Ziele:

• Parameter an Flash übergeben
• Arbeiten mit Sound
• ID3 Tags auslesen

Hier die Vorschau unseres Endergebnisses:

Der Player lädt eine Datei mit dem Namen “song3.mp3″ die ihm dynamisch übergeben wird. Dabei liest er die ID3 Tags und zeigt diese dann an.

Bevor mit dem eigentlichen Teil anfangen können müssen zuerst ein paar grundlegende Sachen erstellt werden. Wir müssen uns also überlegen was der Player genau “braucht”.

In diesem Fall sind das folgende Dinge:

• einen Play-Button
• einen Pause-Button
• einen Stop-Button
• ein Textfeld indem Name + Artist angezeigt wird
• ein Textfeld indem die Länge und die Aktuelle Position des Lieds angezeigt wird

Öffnet ein neues Flash Dokument, mit der Grösse euers Players (in meinem Fall 301×21px) und erstellt danach folgende Dinge im erstenSchlüsselbild:

• Play-Button: play_btn
• Stop-Button: stop_btn
• Pause-Button: pause_btn
• Artist/Titel-Textfeld: track_title
• Position/Länge-Textfeld: track_length

Achtet darauf dass ihr “Dynamische Textfelder” erstellt!
So oder ähnlich kann euer Flash Movie nun aussehen:

Natürlich könnt ihr euren Player so designen wie ihr wollt, ich habe mich für ein eher schlichteres Design ohne viel Schnickschnack entschieden.

Nun kommen wir zum Code Teil, fügt folgenden Code in das Hauptframe ein:

Mit this._lockroot = true bewirken wir, dass wenn der Flashfilm in einen anderen Flashfilm reingeladen wird, die Variablen die mit “_root.” aufgerufen werden immer noch funktionieren. Dies ist zwar nicht 100% nötig, doch zur Sicherheit sollte man dies einfügen.

var snd = new Sound() erzeugt ein neues Sound Objekt in welches wir dann mit snd.loadSound(_root.my_song, true) einen Sound laden. Der erste Parameter ist die Variable “_root.my_song” doch halt, die Varible exisitert ja gar nicht! Dies kommt davon, dass diese Varible erst später beim Einbinden des Flashfilms übergeben wird. Mit dem zweiten Parameter bestimmen wir ob der Sound gestreamt werden soll oder nicht. In unserem Fall soll er gestreamt werden also geben wir “true” ein.

Nun kommen wir zu der Programmierung der Buttons:

Eigentlich ist dieser Code ganz simpel, wenn ein Button losgelassen wird, wird der Sound entweder abgespielt oder gestoppt. Bei dem Play-Button fügen wir zusätzlich noch eine if Abfrage ein die kontrolliert ob die Variable _root.pos exisitert. Dies benötigen wir für die Pause-Funktion. Wenn der Pause Button losgelassen wird, wird der Sound gestoppt und die aktuelle Position im Sound gespeichert. Dies lesen wir beim Abspielen wieder aus, darum auch die if Abfrage. _root.snd.start(_root.pos / 1000,0) springt also zu der Stelle die wir beim Pause-Drücken gespeichert haben und spielt dann den Sound ab. Der Wert wird aber vorher noch durch 1000 geteilt, da der Wert in Millisekunden gespeichert wurde, man für die start() Funktion aber Sekunden braucht. Die “0″ steht übrigens dafür wie oft der Sound wiederholt werden soll, in unserem Fall gar nicht, also 0.
Speziell beim Stop Button ist noch, dass die Position auf 0 gesetzt wird, damit das Lied auch ja wieder von vorne gestartet wird.

Eine nützliche Funktion von Flash ist, dass man ID3 Tags auslesen kann. Genau diese Funktion werden wir uns nun zu nutzen machen.

Es sieht wieder einmal komplizierter aus, als es eigentlich ist. Die “_root.snd.onID3” Funktion wird dann aufgerufen, wenn die ID3 Tags für ein Lied ausgelesen werden können, dazu muss das Lied zu einem bestimmten Teil geladen sein, die ID3 Tags werden also nicht gleich am Anfang angezeigt werden.
Zuerst speichern wir nun den Songname und den Artist in zwei verschiedenen Variablen. Zusätzlich könnte man noch viele Dinge mehr auslesen wie zum Beispiel: Genre, Album, Erscheinungsjahr etc. doch da ich den Player möglichst klein halten will, lassen wir das.

Nun kommen einige Berechnungen. Mit  ”_root.snd.duration” wir die Länge des Liedes in Millisekunden ausgegeben. Nachfolgend werden die Millisekunden dann umgerechnet so dass wir sie ganz einfach darstellen können. Schlussendlich werden die Informationen mit “_root.track_title.text = artist + ” – ” + songname” und “_root.track_length.text = _root.Mins2 + “:” + _root.Secs2 + ” / ” + _root.Mins + “:” + _root.Secs” in den Textfeldern angezeigt. Wie ihr seht werden da die Variablen “_root.Mins2” und “_root.Secs2” verwendet, diese Variablen haben wir aber noch nicht definiert, sie sollen die aktuelle Position des Liedes anzeigen.

Und hier kommt auch schon der Code dazu:

Eigentlich ist das so ziemlich das selbe wie schon oben, nur eben mit der Aktuelle Position die wir mit “_root.snd.position” abfragen können. Danach wird das ganze wieder umgewandelt und schlussendlich in dem Textfeld angezeigt. Der Hauptunterschied besteht dabei, dass das ganze in der “onEnterFrame” Funktion steht und so also immer ausgeführt wird, da sich die Position beim Abspielen auch fortlaufend ändert.

So, der Player ist fertig, doch ihr werdet feststellen, dass wenn ihr ihn testet, nichts passiert und nur eine Fehlermeldung ausgegeben wird, in der steht, dass die Datei nicht geladen werden konnte. Das kommt davon, dass der Player noch nicht weiss welchen Song er laden soll, da er die Variable “_root.my_song” noch nicht übermittelt bekommen hat.

Dies passiert beim einbinden, öffnet nun ein leeres HTML Dokument und fügt folgenden Code ein:

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”de” lang=”de”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>simple_mp3</title>
</head>
<body bgcolor=”#ffffff”>
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0″ width=”300″ height=”21″ id=”simple_mp3″ align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”allowFullScreen” value=”false” />
<param name=”movie” value=”simple_mp3.swf?my_song=song1.mp3″ />
<param name=”quality” value=”high” /><param name=”bgcolor” value=”#ffffff” />
<embed src=”simple_mp3.swf?my_song=song1.mp3″ quality=”high” bgcolor=”#ffffff” width=”300″ height=”20″ name=”simple_mp3″ align=”middle” allowScriptAccess=”sameDomain” allowFullScreen=”false” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>
</body>
</html>

Wichtig ist hierbei nur diese beiden Teile: “<param name=”movie” value=”simple_mp3.swf?my_song=song1.mp3″ />” und “embed src=”simple_mp3.swf?my_song=song1.mp3″” denn hier wird unsere Variable übermittelt. Nach dem Fragezeichen kommt zuerst der Name der Variable, in unserem Falle “my_song” und anschliessend den Wert. Hier wird dem Player gesagt er soll eine Datei mit dem Namen “song1.mp3” laden. Natürlich kann der Player jede erdenklicke MP3 Datei abspielen, auch wenn sie auf einem externen Webserver liegt.

Probiert das ganze nun aus, indem ihr die HTML Datei in eurem Wunschbrowser öffnet. Nun sollte der Song abgespielt werden, wenn nicht überprüft ob der Song auch wirklich zu finden ist und ob ihr den richtigen Pfad angegeben habt.

Download Source

Vielen Dank fürs Lesen postet euere Meinung/Kritk/Fragen doch in den Comments

MFG
Michael

Oft möchte man in Spielen gern, dass sich der Spieler dorthin bewegt wo es ihm die Maus “befiehlt”. In diesem Tutorial werde ich euch zeigen, wie einfach das eigentlich ist und wie ihr es dann verwenden könnt.

Als erstes erstellen wir 2 Movieclips:

• Einen Spieler Movieclip mit dem Instanznamen:player_mc
• Ein “Ziel” Movieclip mit dem Instanznamen: ziel_mc

Wichtig ist, dass sich der ziel_mc Movieclip vorerst nur in der Bibliothek befindet. Öffnet nun die Bibliothek und rechtsklickt dann auf den ziel_mc. Wählt dann im erscheinenden Kontextmenü “Verknüpfung…” aus. Gebt nun im erscheinenden Fenster bei Bezeichner “ziel” ein. Denkt daran bei “Export für Actionscript” ein Häkchen zu setzen.

Kopiert nun folgenden Code in euer Hauptframe:

Nun zur Erklärung des Codes:

Zuerst definieren wir mit  var speed = 5; die Geschwindigkeit, mit der sich der Player zu dem Punkt bewegen soll. Die Funktion onMouseDown wird immer dann aufgerufen, wenn der Spieler irgendwo auf dem Bildschirm mit der Maus klickt. Nun “holen” wir uns mit attachMovie unseren Ziel Movieclip aus der Bibliothek. Die Funktion attachMovie braucht dabei mindestens drei Parameter: idName, neuer Name und Tiefe. Mit idName ist der Name gemeint den wir vorher bei der Verknüpfung des ziel_mc Movieclips angegeben haben. Mit neuerName ist logischerweise der neue Name gemeint der dem Objekt zugewiesen werden soll. Schlussendlich können wir mit Tiefe noch angeben, wie “tief” der Movieclip ist. In unserem Falle spielt das aber keine Rolle und darum geben wir einfach 0 an.

Nun setzen wir unseren, aus der Bibliothek geholten, Movieclip mit ziel._x = _xmouse und ziel._y = _ymouse noch an die richtige Position, nämlich dort wo sich die Maus gerade befindet.
Schlussendlich sagen wir dem Player mit der Variable bewegen = true noch, dass er sich nun bewegen darf.

Nun kommt der Spielerscript, zuerst wird mit var a = this._x – ziel._x und var b = this._y – ziel._y der Abstand zwischen dem Player und dem Zielpunkt berechnet, dann kann es auch schon losgehen. Wenn bewegen = true ist, dreht sich der Spieler Richtung Ziel und läuft los. Die Zeilen:

this._rotation = Math.atan2(a, b) / Math.PI * -180
this._x += speed * Math.sin((this._rotation) * Math.PI / 180)
this._y += -speed * Math.cos((this._rotation) * Math.PI / 180)

sind dabei eigentlich bei dem ganzen Script die wichtigsten. Alles zu erklären würde 1. den Rahmen dieses Tutorial sprengen und 2. tiefer in die Geo-/Trigonometrie eingehen, grob kann man aber sagen, dass mit  Math.atan2(a, b) / Math.PI * -180 der Winkel errechnet wird, in dem sich der Spieler drehen muss, um Richtung Ziel zu sehen. Danach bewegt sich der Spieler darauf zu.

Zum Abschluss muss noch geprüft werden, ob der Spieler das Ziel auch erreicht hat, dies tun wir mit einem einfachen hitTest. Wenn ja, wird das Ziel gelöscht und der Spieler hört auf sich zu bewegen.

Das wars auch schon, testet das Script und wie ihr seht könnt ihr dem Spieler nun sagen wohin er gehen soll. Diese Form von Spielsteuerung kann man sehr gut in Geschicklichkeitsspielen verwenden.

Download (Source .fla)

Fragen, Kritik oder Wünsche einfach in die Comments schreiben.

Viel Spass beim Lesen

Michael Ziörjen

Was unser Spiel bereits beinhaltet:

• Flugzeug, welches man von oben nach unten bewegen kann

Und das wär’s auch schon, nicht gerade viel, aber das werden wir in diesem Teil des Tutorials ändern!

Wir wollen uns um die Gegner kümmern. Die Gegner sollen immer auf der rechten Seite erscheinen und sich Richtung Spieler bewegen.

Holt euren Gegner Movieclip auf die Bühne und gebt ihm den Instanznamen “enemy_mc“. Achtet jedoch darauf, dass er sich ausserhalb des sichtbaren Bereichs der Bühne befindet, warum das wichtig ist, erfahrt ihr später.

Nun können wir auch schon anfangen, kopiert erstmal folgenden Code in das Hauptframe auf der Ebene “actions”, dort wo auch schon der Player Code steht.

var maxanzGegner = 3; — Die Anzahl der Gegner die auf einmal erscheinen sollen.
var anzGegner = 0; — Die Anzahl der Gegner die momentan auf dem Bildschirm sind ( Am Anfang immer = 0)
var speedGegner = 8: – Gibt an wie schnell sich die Gegner bewegen.
var i = 0; — Eine Zählvariable, diese brauchen wir später für unsere Schlaufe.

if(anzGegner < maxanzGegner) { – Wenn die Anzahl der Gegner auf dem Bildschirm kleiner ist als die Anzahl der Gegner die maximal da sein dürfen…
for(i=0;i < maxanzGegner; i++) { — Dies ist unsere Schlaufe, sobald i = 0 ist und i kleiner wie die maxanzGegner ist, Wird i um 1 erhöht und der Code in der Schlaufe ausgeführt.

enemy = this.duplicateMovieClip(_root.enemy_mc, _root.getNextHighestDepth()); – Dieser Teil ist interessant, es wird ein neues Objekt mit dem Namen “enemy” erstellt. Dabei wird einfach unser enemy_mc. Die Funktion _root.getNextHighestDepth() gibt uns einen immer fortlaufenden Wert, weiter darauf eingehen möchte ich nicht, es MUSS einfach da sein.

enemy._x = 550 + random(500); — Nun bestimmen wir die X-Position, doch warum ist der Wert grösser als die Bühne selbst? Ganz einfach, wir wollen jah nicht, dass der Spieler sieht wie die Gegner  plötzlich erscheinen, sie sollen schön von Rechts her “herein schweben”. Mit random(500) generieren wir eine Zufällige Zahl zwischen 0 und 500.
enemy._y = 30 + random(340); — Das  Ganze  jetzt auch für die  Y-Position.

enemy.onEnterFrame = function () { – Die Funktion kennen wir ja schon, nun wird diese für unser enemy Objekt angewendet.

this._x -= speedGegner; — Dies bewirkt, dass sich der Gegner nach rechts bewegt und zwar genau so schnell wie in der Variable speedGegner festgelegt.

if(this._x <= -20) { — Sobald der Gegner links  aus der Bühne rausgeht,
_root.anzGegner = _root.anzGegner – 1; – wird die Anzahl der Gegner um 1 verringert
this.removeMovieClip() — und der Gegner gelöscht.

Schlussendlich wird mit anzGegner = anzGegner + 1; die Gegnerzahl um 1 erhöht, da unser Gegner ja gerade erstellt wurde und somit ein Gegner mehr auf der Bühne ist.

Testet euer Spiel nun und wenn alles richtig ist, sollten nun einige Gegner erscheinen und sich nach links bewegen und sobald sie den Bildschirm verlassen haben, wieder erscheinen.

Das ist alles schön und gut, doch irgendwie ist es doch langweilig wenn die Gegner einfach nur so rumfliegen. Damit unser Spieler ihnen auch ausweichen muss, müssen wir eine Art Lebensanzeige machen. In diesem Fall reicht uns ein einfaches dynamisches Textfeld mit der Variable “live“. Erstellt also im Hauptframe ein neues dynamisches Textfeld und ordnet ihr die Variable live zu.

Testet euer Spiel, jetzt solltet ihr in dem Textfeld den Wert der Variable live sehen, wenn nicht habt ihr irgendetwas falsch gemacht.

Nun wollen wir die Kollision programmieren. Fügt dazu folgenden Code in die onEnterFrame Funktion des enemy Objekts welches in der for-Schlaufe erstellt wird:

if(_root.player_mc.hitTest(this._x, this._y, true)) { — Wenn der player_mc Movieclip mit this (in diesem Fall, der Gegner) kollidiert,
live = live – 1; — Wird ein Leben abgezogen,
this.removeMovieClip() — Der Gegner gelöscht
_root.anzGegner = _root.anzGegner – 1; — und die Anzahl gegner um 1 verringert.

So, nun werden dem Spieler jedesmal Leben abgezogen, wenn er einen Gegner berührt. Doch was ist wenn der Spieler keine Leben mehr hat? Im Moment noch nichts, doch dies soll sich nun ändern. Sobald der User keine mehr Leben mehr hat also die Variable live <= 0 ist, soll ein GameOver erscheinen. Um dies zu tun müssen wir zuerst ein neues Frame erstellen, dort sollten sich folgende Dinge befinden:

• Ein GameOver Schriftzug
• Ein Button um das Spiel neuzustarten

Erstellt also ein neues Frame und erstellt dort ein statisches Textfeld in dem geschrieben steht “GameOver” und anschliessend ein Button mit dem Istanznamen “back_btn” . Kopiert nun folgenden Code in das eben erstellte Frame in der Ebene “actions“.

_root.back_btn.onRelease = function() { — Wird aufgerufen, wenn der Button gedrückt wird.
_root.gotoAndStop(1) — Zurück zum ersten Frame springen. (Also das Spiel neustarten)

Wenn ihr das Spiel jetzt testet, werdet ihr merken, dass der Film die ganze Zeit vom 1. ins 2. Frame wechselt, das liegt daran, dass wir im 1. Frame noch kein stop() eingefügt haben. Geht also in das erste Frame auf der actions Ebene und fügt dort zuoberst “stop()” ein. Nun sollte es gehen, doch Moment, auch wenn der Spieler weniger als 0 Leben hat, passiert nichts. Damit sich das ändert, kopiert folgenden Code ins 1. Frame in die onEnterFrame Funktion des player_mc Movieclips:

Testet das Spiel und nach dem Verlust der Leben sollte nun das 2. Frame angezeigt werden.

if(live <= 0) { – Wenn die Variable live kleiner oder gleich 0 ist,
_root.gotoAndStop(2); — Springt der Film ins 2. Frame.

Doch was fällt auf? Die Gegner “sterben” nicht automatisch, wenn der Film ins 2. Frame springt, dies sieht nicht gerade schön aus und stört. Um dieses Problem und um die “Waffen” des Spielers kümmern wir uns in Teil 3 meines Flugzeug Spiel Tutorials.

Wenn ihr Fragen oder Kritik habt, postet diese doch in den Comments.

Vielen Dank fürs lesen uns bis zum nächsten Mal

Michael Ziörjen

Flugzeug Spiel – Teil 1

In diesem Tutorial wollen wir ein einfaches Flugzeug Spiel in Flash erstellen. In diesem Spiel soll es darum gehen, das Flugzeug von oben nach unten zu steuern und dabei die Gegner abzuschiessen. Vorkentnisse:

• Umgehen mit Flash (Toolbox, Tweens, erstellen von Movieclips)

Ziele:

• Tasteneingaben (bewegen durch drücken der Pfeiltasten)
• Dynamisches Erstellen von Movieclips (Schiessen)
• Zufälliges Platzieren und Bewegen von Movieclips (Gegner)
• Anzeigen von Punktzahl und Leben durch Textfelder

1. Erstellen der Movieclips

Um überhaupt anfangen zu können, müssen wir zuerst unsere Movieclips erstellen. Folgende Movieclips müssen erstellt werden:

• Player player_mc - Unser Spieler, in diesem Fall ein Flugzeug
• Gegner enemy_mc - Unser(e) Gegner
• Schuss bullet_mc – Die Schüsse die der Spieler abschiesst

Öffnet also ein neues Flash Dokument mit den Massen 550 x 400 px und mit 24 fps. Fügt auch gleich eine neue Ebene mit dem Namen “actions” hinzu. Erstellt nun alle Movieclips und gebt ihnen die Kursiv dargestellten Instanznamen. Alle Grafiken die ich verwendet haben, findet ihr auch in dem Ressourcepack am Ende dieses Tutorials. So sehen meine Movieclips im moment aus, natürlich dürft ihr eure Movieclips noch etwas schöner und detailreicher gestalten, doch für meinen Geschmack sehen meine Movieclips nicht schlecht aus.

2. Das Flugzeug steuern

Alle Hobbypilote können sich nun freuen, wir werden fliegen – nunja dann doch nicht ganz aber immerhin unser Flugzeug im Spiel soll fliegen können. Damit sich unser Flugzeug nun nach oben und unten bewegt müssen wir die Y-Koordinaten des Flugzeugs ändern. Fügt nun folgenden Code in das 1. Frame auf der Ebene “actions” ein:

Testet das Ganze mal indem ihr “Strg + Enter” drückt. Wenn alles stimmt, könnt ihr das Flugzeug nun nach oben und nach unten bewegen. Gehen wir den Code nun Stück für Stück durch. var speed = 5; - Am Anfang definieren wir erstmal ein paar Variablen. Hier zum Beispiel die Variable speed in der wir festhalten, wie schnell sich unser Flugzeug auf und ab bewegen kann. _root.player_mc.onEnterFrame = function () – wird 24 mal in der Sekunde aufgerufen, da wir jah 24 fps eingestellt haben. if(Key.isDown(Key.UP)) – Wenn die Auf-Taste gedrückt wird, this._y -= speed; – wird die Y-Position verändert. Das gleiche dann auch, wenn die Ab-Taste gedrückt wird.

3. Ergebnis:

Dies ist das Ende, des ersten Teils meines “Flugzeug Spiel Tutorials”. Lest in Teil 2, wie die Gegner programmiert werden. Vielen Dank fürs Lesen. Postet euere Fragen oder Kritik in den Comments. Mit freundlichen Grüssen

Michael Ziörjen

Flugzeug Spiel – Teil 2
Ressourcepack