14 Von Mäusen und Duplikaten
Mit der Maus arbeiten, MovieClips duplizieren und hinzufügenSie werden lernen:
- Wie folgen Sie der Mausbewegung?
- Wie lassen sich MovieClips duplizieren?
- Wie fügen Sie MovieClips mit ActionScript hinzu?
Die Kunst des Ausruhens ist ein Teil der Kunst des Arbeitens. – John Steinbeck1
ActionScript bietet Ihnen viele Freiheiten: Es steht Ihnen frei, auf Tastaturereignisse, auf Rollover, auf Mausklicks des Nutzers zu reagieren – alles Ereignisse, auf die Sie reagieren können, aber nicht müssen. Schon in den vorangegangenen Kapiteln haben wir verschiedene Varianten eingesetzt. In diesem Kapitel erweitern wir Ihr Repertoire und zeigen Ihnen, wie Sie mit Mausbewegungen umgehen.
In Kapitel 13, »Zeichnen und Zufall«, haben Sie gelernt, wie Sie einen neuen, leeren MovieClip erzeugen. Jetzt geben wir Ihnen Informationen, wie Sie bestehende MovieClips duplizieren und MovieClips aus der Bibliothek per ActionScript auf der Bühne einsetzen.
14.1 Mausbewegungen und mehr
mouseDown und mouseUp |
Neben mouseMove gibt es die Ereignisse mouseDown (Drücken der Maustaste) und mouseUp (Loslassen der Maustaste). Sie treten ein, wenn der Nutzer die Maustaste an einer beliebigen Stelle drückt. Der Einsatz erfolgt wie bei mouseMove: entweder im Hauptfilm oder in einem MovieClip. |
Wenn Elemente Ihres Films auf Mausbewegungen reagieren sollen, benötigen Sie zuerst das passende Ereignis, nämlich mouseMove für MovieClips. mouseMove tritt ein, sobald der Nutzer den Mauszeiger bewegt; es ist dabei egal, wo sich der Mauszeiger befindet. Der Mauszeiger muss sich also nicht über dem Inhalt des MovieClips befinden, für den das Ereignis eingesetzt wird.
mouseMove können Sie als Ereignisprozedur – hier für den Hauptfilm – einsetzen:
_root.onMouseMove = function() { Anweisungen; }
Oder Sie verwenden mouseMove mit onClipEvent in der Aktion für einen MovieClip:
onClipEvent (mouseMove) { Anweisungen; }
mouseMove gibt es erst seit Flash MX. Wollen Sie in Flash 5 einen MovieClip auf die Spuren des Mauspfeils setzen, müssen Sie startDrag() und stopDrag() verwenden, die in Kapitel 12, »Farbe wechseln und Drag & Drop«, bereits Thema waren.
Nun kennen Sie das Ereignis mouseMove. Die Frage ist allerdings, wie Sie etwas über die Position des Mauszeigers erfahren. Hierfür bietet die MovieClip-Klasse zwei Eigenschaften an: _xmouse und _ymouse. Sie geben die x- und y-Koordinate des Mauszeigers zurück. Wenn Sie beispielsweise einen MovieClip auf die aktuelle Position des Mauszeigers setzen möchten, benützen Sie folgenden Code:
_root.movieclip_mc._x = _root._xmouse; _root.movieclip_mc._y = _root._ymouse;
Die Mauskoordinaten selbst lassen sich nicht verändern, das heißt, Sie können die Position des Mauszeigers nicht über ActionScript anpassen. Der Grund dafür liegt auf der Hand: Der Rechner des Nutzers wäre sonst quasi fernsteuerbar – ein unzumutbares Sicherheitsrisiko.
Mouse-Klasse
Seit Flash MX gibt es – neben den neuen Ereignissen mouseMove, mouseDown und mouseUp – noch eine eigene Klasse für die Maus: die Mouse-Klasse. Sie finden Sie im Aktionen-Bedienfeld unter ActionScript 2.0-Klassen • Film • Mouse (Flash MX und MX 2004: Integrierte Klassen • Film • Mouse). Funktional hat sie zweierlei zu bieten: zum einen verschiedene Event-Listener, um Mausereignisse abzufangen (siehe nächster Abschnitt), zum anderen zwei nützliche Methoden.
Abbildung 14.1 Die Mouse-Klasse im Aktionen-Bedienfeld
Die beiden Methoden sind hide() und show(). Der Name ist Programm: hide() versteckt den Mauszeiger, show() zeigt ihn wieder an. Das gilt natürlich nur innerhalb der Grenzen des SWF-Films. Außerhalb hat der Flash-Player keinen Einfluss.
Von JavaScript kennen Sie vielleicht die Fähigkeit, das Aussehen des Mauszeigers zu wandeln. Das klappt allerdings in verschiedenen Browsern unterschiedlich gut (und nervt oft). In Flash brauchen Sie eine solche Möglichkeit nicht, da Sie einen beliebigen MovieClip an den Mauszeiger binden und diesen ausblenden können. Wie das geht, lesen Sie im unten stehenden Abschnitt »Dem Mauszeiger folgen«.
Event-Listener
In Kapitel, 9 »Tasten«, haben wir Sie zum ersten Mal mit einem Event-Listener konfrontiert. Sie erinnern sich: Das Key-Objekt erlaubt einem Event-Listener, das Ereignis abzufangen, wenn eine Taste gedrückt wird. Ähnlich ist es bei der Mouse-Klasse: Hier können Sie die Bewegung der Maus abfangen. Das Ergebnis ist dasselbe wie bei onMouseMove, das Sie als Ereignisprozedur eines MovieClips kennen gelernt haben. Allerdings unterscheidet sich die Vorgehensweise:
1. | Sie definieren zuerst einen Event-Listener als Object (Klasse)Objekt: |
var eventListener_obj:Object = new Object();
2. | Dann fügen Sie eine Ereignisprozedur für den Event-Listener hinzu: |
eventListener_obj.onMouseMove = function() { Anweisungen; };
3. | Zum Schluss weisen Sie den Event-Listener mit addListener (Listener)addListener() (Methode) der Mouse-Klasse zu: |
Mouse.addListener(eventListener_obj);
Wenn das Ergebnis gleich ist, welche Vorteile haben dann Event-Listener?
Sie sind flexibler: Für ein Ereignis können Sie mehrere Event-Listener definieren und diese beliebig durchwechseln. Mit der Methode removeListener(Listener) lassen sich Event-Listener außerdem schnell und einfach wieder entfernen.
In der Praxis kommen sie dennoch nicht besonders häufig zum Einsatz als normale Ereignisprozeduren, da ihr Code relativ kompliziert ist.
Dem Mauszeiger folgen
Mit dem Wissen der letzen Abschnitte können Sie nun ein einfaches ActionScript programmieren, das einen MovieClip dem Mauszeiger folgen lässt.
Den Mauszeiger selbst sollten Sie aus optischen Gründen ausblenden. Wir haben als Beispiel einen kleinen Stern gewählt (siehe Abbildung 14.2 auf Seite 254).
Die Datei mit dem Stern finden Sie auf der CD-ROM unter dem Namen mauspfeil_folgen.fla in den jeweiligen Ordnern für Flash 8, MX 2004 und Flash MX.
Da außer dem Stern kein anderes Flash-Element enthalten ist, können Sie auch irgendeinen anderen MovieClip als Mauspfeil verwenden. Wichtig ist nur, dass der Instanzname mit dem Namen im Code (bei uns mausPfeil_mc) übereinstimmt.
Schritt für Schritt: Dem Mauszeiger folgen
In den folgenden Schritten kommt onMouseMove als Ereignisprozedur zum Einsatz. Deswegen können Sie den gesamten Code in das Schlüsselbild des Hauptfilms schreiben.
Zuerst verstecken Sie den Mauszeiger:
Mouse.hide();
Anschließend setzen Sie den MovieClip mit dem Stern auf die aktuellen Koordinaten der Maus:
_root.mausPfeil_mc._x = _root._xmouse; _root.mausPfeil_mc._y = _root._ymouse;
Dieser Schritt verhindert, dass der MovieClip vor der ersten Mausbewegung an einer ganz anderen Stelle sitzt als der Mauszeiger. Wenn Sie ihn weglassen, macht der MovieClip zu Anfang einen unschönen Sprung.
Da der kleine Stern etwas zu klein ist, vergrößern Sie ihn:
_root.mausPfeil_mc._xscale = 200; _root.mausPfeil_mc._yscale = 200;
_xscale und _yscale verändern die Breite beziehungsweise Höhe eines MovieClips auf den angegebenen Prozentwert. »200« verdoppelt also die Breite und Höhe.
Unsere einfache Größenänderung zeigt, wie flexibel ein MovieClip als Mauszeiger ist. Sie können ihn mit allen Eigenschaften und Methoden für MovieClip-Objekte bearbeiten.
Als Nächstes reagieren Sie mit onMouseMove auf die Mausbewegung:
_root.onMouseMove = function() {
Anschließend folgen die Anweisungen für die Ereignisprozedur.
Platzieren Sie den MovieClip auf den aktuellen Mauskoordinaten:
_root.mausPfeil_mc._x = _root._xmouse; _root.mausPfeil_mc._y = _root._ymouse; };
Vergessen Sie die letzte Zeile nicht! Die Ereignisprozedur muss wieder mit }; geschlossen werden.
Abbildung 14.2 Der Stern saust über die Bühne, denn bei jeder Mausbewegung passt die Ereignisprozedur die Position des MovieClips an die Bewegung an.
Die fertige Datei trägt den Namen mauspfeil_folgen_AS1_AS2.fla bzw. mauspfeil_folgen_AS1.fla. Für Interessierte haben wir das Beispiel auch mit Event-Listenern umgesetzt: mauspfeil_folgen_eventlistener_AS2.fla und mauspfeil_folgen_eventlistener_AS1.fla.
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.