20.2 Maus
Grafisch orientierte Anwender bevorzugen die Bedienung durch die Maus und weniger per Kommandozeile, so wie es die meisten modernen Benutzeroberflächen inspiriert vom Xerox Parc (http://www.parc.xerox.com/) und Apple (http://www.apple.com/) vormachen.
Hier klicken, um das Bild zu Vergrößern
Abbildung 20.4
Ein Mausverfolger kann bereits mit nur zwei Anweisungen realisiert werden.
Mausverfolger
Ein etwas abgegriffener Klassiker ist der Mausverfolger, der bereits mit wenigen Zeilen Programmcode erreicht wird. Dieser basiert auf der Idee, dass sich ein Objekt der Maus langsam annähert. Der zugrunde liegende Algorithmus ermittelt dazu bei jedem Bildwechsel den horizontalen und vertikalen Abstand zwischen Mauszeiger und Objekt und nähert das Objekt dem Mauszeiger um jeweils einen Bruchteil dieses Abstandes an:
mausver-folger.fla
// Einfache Ereignismethode für Mausverfolger
monster_mc.onEnterFrame = function () {
// Lege "Verzögerung" fest
var delay = 16;
// Ermittle Abstand zur Maus
var dx = this._xmouse;
var dy = this._ymouse;
// Nähere Objekt der Maus an
this._x = this._x + (dx/delay);
this._y = this._y + (dy/delay);
}
Falls Sie den Mausverfolger auf die horizontale oder vertikale Bewegung einschränken, kann dies z.B. für Navigationsleisten ŕ la Yugop (http://yugop.com/ver2/) verwendet werden.
Yugop
Ein Klassiker bei der Verwendung innovativer Navigationsformen ist die Site »MONO*crafts« von Yugo Nakamura, kurz Yugop (http://yugop.com/ver2/).
Mausposition
Die Mausposition lässt sich aber nicht nur direkt mit Positionsangaben verbinden, sondern dient auf Wunsch als Wertelieferant für beliebige andere Eigenschaften. Beispielsweise lässt sich mit Hilfe der Mausposition ein Sound von links nach rechts verändern:
soundsteuerung.fla
this.my_sound = new Sound(_root);
this.onEnterFrame = function () {
// Verwende alternativ setTransform
this.my_sound.setPan((this._xmouse-275)/2.75);
}
oder die Farbigkeit eines Objekts variieren
farbigkeit.fla
this.my_color = new Color(monster_mc);
this.onEnterFrame = function () {
// Verwende alternativ setTransform
this.my_color.setRGB(this._xmouse);
}
Drag and Drop
Eine weitere Variante der Maussteuerung ist Drag and Drop. Das Ziehen und Loslassen von Objekten bietet sich beispielsweise bei Lernsystemen an. Aber auch Rollbalken (engl. Scrollbars) machen Gebrauch davon.
Das Ziehen eines Objekts starten Sie mit Hilfe der Methode startDrag, sobald der Anwender auf das Objekt klickt. Die Methode erfordert von Ihnen als ersten Parameter, ob das Objekt direkt unter dem Mauszeiger liegen soll (true) oder sich relativ zum Mauszeiger bewegt (false). Für Drag and Drop bietet sich meist eine relative Bewegung zum Mauszeiger an, da ja ohnehin direkt auf das betreffende Objekt geklickt wird:
drag.fla
monster_mc.onPress = function () {
this.startDrag(false);
}
Um ein Objekt nun loslassen zu können, kommen die Methode stopDrag und das Ereignis onRelease (beim Loslassen) zum Einsatz:
drag and drop.fla
monster_mc.onRelease = function() {
this.stopDrag();
};
Bei Anwendern mit einer schnellen »Maushand« kann es bei diesem Skript jedoch vorkommen, dass die Maus schneller als das eigentlich gezogene Objekt ist und sich das Objekt beim Loslassen noch gar nicht unter dem Mauszeiger befindet. Dies führt dazu, dass das Objekt dann weiterhin am Mauszeiger klebt. Ein einfacher Trick zur Lösung des Problems ist, dass das Ziehen auch dann beendet wird, wenn die Maustaste außerhalb losgelassen wird (onReleaseOutside). Da es sich in diesem Fall um dieselbe Funktion handelt wie beim normalen Loslassen, kann diese gleich doppelt verwendet werden:
drag and drop komplett.fla
// Drag...
monster_mc.onPress = function() {
this.startDrag(false);
};
// ...and Drop
monster_mc.onRelease = function() {
this.stopDrag();
};
monster_mc.onReleaseOutside = monster_mc.onRelease;
Rollbalken
Beinahe dasselbe Skript kommt für die bereits erwähnten Rollbalken zum Einsatz. Dabei machen Sie sich vier weitere optionale Parameter der startDrag-Methode zu Eigen, mit denen Sie einen Bereich bestimmen, in dem sich das Objekt befinden darf. Das Ziehen eines Objekts kann auf einen rechteckigen Bereich beschränkt werden. Den Bereich legen Sie anhand der linken, oberen, rechten und unteren Kante in Pixel fest:
this.startDrag(false, 75, 50, 475, 350);
drag and drop beschränkt.fla
Wenn Sie nun diesen rechteckigen Bereich zu einer Linie schrumpfen lassen, dann haben Sie einen Rollbalken, dessen Position letztendlich dem eingestellten Wert entspricht. Rollbalken sind eigentlich nichts anderes als Drag and Drop. Diesen Wert können Sie dann zur Steuerung anderer Eigenschaften mit ein wenig Dreisatz übernehmen:
scrollbar.fla
button_mc.onPress = function() {
___this.startDrag(true,_320,_80,_320,_280);
};
button_mc.onRelease_=_function()_{
___this.stopDrag();
___//_Uebernehme_eingestellten_Wert
___var_value_=_(this._y-80)/200;
___trace(value);
___monster_mc.rightArm_mc._rotation_=_value*360;
};
button_mc.onReleaseOutside_=_button_mc.onRelease;
Besonders flexibel ist es, wenn Sie einen Rollbalken in einen Movieclip in Form einer wieder verwendbaren Komponente packen. Denn in diesem Fall beziehen sich die gesamte Programmierung und die Ermittlung des Wertes auf den Movieclip, so dass Sie diesen ohne Auswirkung beinahe beliebig transformieren dürfen. Um die Werte nutzen zu können, verwenden Sie innerhalb der Komponente den Aufruf einer selbst definierten onChange-Methode:
button_mc.onRelease = function() {
this.stopDrag();
// Übernehme eingestellten Wert
var value = this._y/200;
onChange(value);
};
scrollbar als einfache komponente.fla
Die onChange-Methode nutzen Sie dann direkt aus Ihrem Projekt heraus in der folgenden Form:
scrollbar1_mc.onChange_=_function_(value)_{
___monster_mc._yscale_=_value_*_100;
}
scrollbar2_mc.onChange_=_function_(value)_{
___monster_mc._rotation_=_value_*_360;
}
Hier klicken, um das Bild zu Vergrößern
Abbildung 20.5
Es muss nicht immer eine Maus sein: Auch Trackballs und andere Eingabegeräte sind erlaubt.
Trackballs
Die Maus kann aber auch durch andere Eingabeinstrumente wie Trackballs ersetzt werden. Und einige Messgeräte erlauben es, dass Sie Ihre Daten wie Mausbewegungen an den Rechner schicken, denn letztendlich können die Werte für die X- und Y-Bewegung der Maus mit der Hilfe eines geschickten Bastlers auch von einem Temperatur- oder Feuchtigkeitsmesser generiert werden.
|
