Weitere MausInteraktion mit Objekten in Flash Teil1
Ziele des Teil1 dieses Tutorials:
- die graphics-Komponente von AS3
- weitere Interaktionen mit der Maus
...und los geht's:
Das Endergebniss, soll dann in etwa so aussehen:
Ziehe den Ball und lasse ihn dann los!
1) Wir starten so wie üblich: Wir erstellen in Flash eine neue .fla-Datei, speichern diese unter "BouncingBall.fla" ab und tragen als DokumentenKlasse die Klasse "BouncingBall" ein.
2) Der 2. Schritt ist auch wie üblich: Wir erstellen in FlashDevelop ein neues .as-Dokument und speichern dies unter "BouncingBall.as" ab.
Das Gerüst der BouncingBall-Klasse sollte so aussehen:
3) So, nun legen wir die BouncingBall.as erstmal zur Seite und erstellen eine weitere Klasse: 'Ball' und speichern diese unter 'Ball.as' ab.
Dies wird die Klasse für den blauen Ball, den wir oben durch die Gegend geworfen haben. Die Klasse müsste nun fast gleich aussehen, wie 'BouncingBall.as' nur, dass der KlassenName und die MainMethode 'Ball' heißen.
Die Klasse soll von MovieClip 'erben', da der Ball ein Objekt werden soll, das wir auf dem Bildschirm sehen.
4) Nun müssen wir erst einmal dafür sorgen den Ball auf dem Bildschirm sehen zu können. Dafür legen wir eine neue Methode 'draw()' an. (der Name ist beliebig, man könnte sie auch 'ballZeichnen()' nennen)
Nun zum interessanten Teil, hier werden wir die Befehle geben, den Ball zu zeichnen:
Code:
graphics.clear();// löscht den Bilschirm(nicht wirklich nötig)
graphics.beginFill(0x6598FF,1);// legt die Farbe und den Alpha-Wert fest
graphics.drawCircle(7,7,14);// malt einen Kreis mit Radius:14 und Mittelpunkt:(7|7)
graphics.endFill();// beendet den Zeichenvorgang
Nun müssen wir bei der initialisierung der Klasse noch den Befehel der 'draw()'-Methode geben. Wenn wir das haben, dann sollte die Klasse etwa so aussehen:
// malt einen Kreis mit Radius:14 und Mittelpunkt:(7|7)
graphics.drawCircle(7,7,14);
// beendet den Zeichenvorgang
graphics.endFill();
}
}
}
So, als kleine Überprüfung, werden wir nun in der 'BouncingBall.as' einen 'Ball' erstellen um zu testen, ob dies klappt.
Also fügen wir in die MainMethode der 'BouncingBall.as' folgenden Zeilen ein:
Code:
//BouncingBall.as
var myBall:Ball = new Ball();// erstellt ein neues 'Ball-Object'
myBall.x = stage.stageWidth/2;// den Ball in die horizontale Mitte setzen
myBall.y = stage.stageHeight/2;// den Ball in die vertikale Mitte setzen
addChild(myBall);// fügt das 'Ball-Object' dem MovieClip hinzu
als kleine Kontrolle, die 'BouncingBall'-Klasse sollte nun ungefähr so aussehen:
Nun Starten wir das MovieClip, wenn alles richtig läuft, dann sollte ein blauer Ball in der Mitte des Bildschirms erscheinen.
Wir können allerdings mit dem Ball nicht interagieren. Wie im Tutorial 'Interaktionen mit Flash' beschrieben wird, können wir Methoden definieren, die ,bei bestimmten Interaktionen mit Objekten, ausgeführt werden sollen. Also fügen wir dem Ball-Objekt zwei EventListener hinzu.
Übersetzt: Wenn die Maustaste gedrückt wird, soll die Methode 'mouseDownHandler' ausgeführt werden, und wenn die Maustaste losgelassen wird, soll die Methode 'mouseUpHandler' ausgeführt werden.
Die Methoden werden wir vorerst relativ Simpel halten, wir wollen damit nur in der Lage sein den Ball an eine andere Position zu schieben. Dafür verwenden wir die von AS3 vorgefertigten Methoden 'startDrag()' und 'stopDrag()':
Wenn wir nun unser MovieClip starten, dann haben wir einen Ball, den wir an jede beliebige andere Position ziehen können.
Das war der Teil 1 des 'BouncingBall'-Tutorials, in Teil 2 geht es dann darum den Ball 'weiter fliegen' zu lassen, wenn man die Maus los lässt.
Bei Fragen oder Anregungen zu dieser Seite, steht dir das Forum zur Verfügung.
In 10min zur ersten Flash Applikation!
eine weitere Klasse: 'Ball' und speichern diese unter 'Ball.as' ab.