Einfacher Mausverfolger
Wenn wir von einem Mausverfolger sprechen, meinen wir damit ein kleines Objekt, welches stetig versucht, sich in ihrer Position derjenigen der Maus anzupassen. Ein Mausverfolger kann erstens mit sehr geringem Aufwand erstellt werden, zweitens benötigt ein entsprechendes Script kaum Speicherplatz und ist damit bei einer Betrachtung im Internet schnell geladen. Somit erfüllt es wichtige Voraussetzungen um dem Betrachter während eines Ladevorganges der eigentlichen Webseite die Zeit des Wartens zu verkürzen.
Lassen Sie uns mit der Realisierung beginnen. Zunächst benötigen wir ein Objekt, das später die Maus verfolgen soll. Erstellen Sie hierfür in einem neuen Flashdokument über das Menü „Einfügen“ unter „Neues Symbol“ oder über die Tastenkombination Strg + F8 ein Symbol. Wählen Sie als Verhalten „Movieclip“ aus und benennen Sie das Symbol mit „Objekt“. Durch Betätigen der Schaltfläche „OK“ gelangen Sie in den Bearbeitungsmodus des Symbols. Hier können Sie nun ein beliebiges Objekt platzieren. In den Beispieldateien zum Artikel verwenden wir einen einfachen Kreis. Sie können jedoch ebenso eine Grafik importieren und verwenden oder ein beliebiges Objekt einzeichnen. Markieren und zentrieren Sie das erstellte Objekt anschließend mit dem Bedienfeld „Ausrichten“ vertikal und horizontal auf der Bühne.
Das Bedienfeld „Ausrichten“
Aktivieren Sie hierfür im Bedienfeld die rechte Schaltfläche „An Bühne ausrichten“ und klicken Sie anschließend unter „Ausrichten“ auf das zweite Symbol von Links und von Rechts. Wechseln Sie mit Hilfe der Tastenkombination Strg + E zurück auf die Hauptbühne. Das soeben erstellte Symbol soll nun auf der Bühne platziert werden. Hierfür rufen sie mit dem Shortcut Strg + L die Bibliothek auf und ziehen das Symbol per Drag & Drop auf die Bühne. Flash legt somit eine Instanz des Symbols an. Achten Sie darauf, dass die Instanz markiert ist und drücken Sie die Funktionstaste F9 um in das Aktionen-Fenster zu gelangen. Fügen Sie das folgende ActionScript in das Fenster ein:
Da der Abstand der Instanz zur Maus stetig überprüft werden soll, sorgen wir mit „onClipEvent(enterFrame)“ bei jedem Bildereignis für einen Aufruf des ActionScripts. Das Script berechnet zunächst an Hand der X- und Y-Koordinaten den Abstand zwischen der Instanz und der Maus. Nachfolgend wird die Position der Instanz der Maus angepasst. Dabei nähern wir uns pro Durchlauf nur um einen Zehntel der eigentlichen Mausposition an. Mit diesem kleinen Trick verhindern wir, dass der Mausverfolger sofort an die Position der Maus springt. Das Objekt wird sich durch diese Vorgehensweise der Maus nähern und dabei stetig die Geschwindigkeit verringern.
Das Aktionen-Fenster mit dem ActionScript:
Die zuletzt erwähnte Geschwindigkeit können Sie im ActionScript beliebig anpassen. Ändern Sie hierfür in den letzten beiden Codezeilen vor der schließenden Blockklammer den Zahlenwert nach dem Slash („/“).
Einfacher geht es durch eine kleine Erweiterung des Scriptes. Entfernen Sie das Symbol „Objekt“ von der Bühne und erstellen Sie anschließend ein zweites Symbol. Geben Sie diesem Symbol den Namen „Mausverfolger“ und wählen Sie erneut das Verhalten „Movieclip“ aus. Im Bearbeitungsmodus des Symbols fügen Sie nun mit der oben vorgestellten Technik eine Instanz von „Objekt“ ein und zentrieren dieses mittig auf der Bühne. Achten Sie erneut darauf, dass die Instanz markiert ist und rufen Sie das Aktionen-Fenster auf. Fügen Sie den nachfolgenden Code ein:
Das Script muss durch die Erweiterung leicht angepasst werden. In den unteren beiden Zeilen steht statt einem Zahlenwert nur noch eine Variable „speed“. Damit diese Variable fortan einen Wert besitzt, wollen wir einen Parameter innerhalb unseres Symbols „Mausverfolger“ definieren. Wechseln Sie mit Strg + E auf die Hauptbühne. Klicken Sie in der Bibliothek mit der rechten Maustaste auf den Eintrag „Mausverfolger“. Im darauf erscheinenden Kontextmenü wählen Sie den Eintrag „Komponentendefinition“ aus.
Das Fenster „Komponentendefinition“:
Klicken Sie auf das Pluszeichen. Es erscheint eine neue Zeile, in der Sie mit einem Doppelklick in der Spalte „Name“ den Parameternamen „speed“ eintragen. Verlassen Sie das Fenster anschließend über die Schaltfläche „OK“. Ziehen Sie nun das Symbol „Mausverfolger“ auf die Bühne. Markieren Sie die soeben erstellte Instanz und wechseln Sie in das Bedienfeld „Eigenschaften“. Unter „Parameter“ müssen Sie einen Wert für „speed“ eintragen. Testen Sie den Mausverfolger mit verschiedenen Zahlenwerten. Bei einem höheren Wert verfolgt das Objekt die Maus langsamer. Ein kleinerer Wert hat dementsprechend eine schnellere Anpassung der Objekt- an die Mausposition zur Folge.
Beispieldatei: Einfacher Mausverfolger[Einfacher_Mausverfolger1.zip]
Beispieldatei: Erweiteter Mausverfolger[Einfacher_Mausverfolger2.zip]
Lassen Sie uns mit der Realisierung beginnen. Zunächst benötigen wir ein Objekt, das später die Maus verfolgen soll. Erstellen Sie hierfür in einem neuen Flashdokument über das Menü „Einfügen“ unter „Neues Symbol“ oder über die Tastenkombination Strg + F8 ein Symbol. Wählen Sie als Verhalten „Movieclip“ aus und benennen Sie das Symbol mit „Objekt“. Durch Betätigen der Schaltfläche „OK“ gelangen Sie in den Bearbeitungsmodus des Symbols. Hier können Sie nun ein beliebiges Objekt platzieren. In den Beispieldateien zum Artikel verwenden wir einen einfachen Kreis. Sie können jedoch ebenso eine Grafik importieren und verwenden oder ein beliebiges Objekt einzeichnen. Markieren und zentrieren Sie das erstellte Objekt anschließend mit dem Bedienfeld „Ausrichten“ vertikal und horizontal auf der Bühne.
Das Bedienfeld „Ausrichten“
Aktivieren Sie hierfür im Bedienfeld die rechte Schaltfläche „An Bühne ausrichten“ und klicken Sie anschließend unter „Ausrichten“ auf das zweite Symbol von Links und von Rechts. Wechseln Sie mit Hilfe der Tastenkombination Strg + E zurück auf die Hauptbühne. Das soeben erstellte Symbol soll nun auf der Bühne platziert werden. Hierfür rufen sie mit dem Shortcut Strg + L die Bibliothek auf und ziehen das Symbol per Drag & Drop auf die Bühne. Flash legt somit eine Instanz des Symbols an. Achten Sie darauf, dass die Instanz markiert ist und drücken Sie die Funktionstaste F9 um in das Aktionen-Fenster zu gelangen. Fügen Sie das folgende ActionScript in das Fenster ein:
001:002:003:004:005:006:007:008:009:
onClipEvent (enterFrame) { // Abstand zwischen Maus und Mausverfolger berechnen deltaX = _root._xmouse - this._x; deltaY = _root._ymouse - this._y; // Position des Mausverfolgers an Maus annaehern this._x = this._x + deltaX / 10; this._y = this._y + deltaY / 10; }
Da der Abstand der Instanz zur Maus stetig überprüft werden soll, sorgen wir mit „onClipEvent(enterFrame)“ bei jedem Bildereignis für einen Aufruf des ActionScripts. Das Script berechnet zunächst an Hand der X- und Y-Koordinaten den Abstand zwischen der Instanz und der Maus. Nachfolgend wird die Position der Instanz der Maus angepasst. Dabei nähern wir uns pro Durchlauf nur um einen Zehntel der eigentlichen Mausposition an. Mit diesem kleinen Trick verhindern wir, dass der Mausverfolger sofort an die Position der Maus springt. Das Objekt wird sich durch diese Vorgehensweise der Maus nähern und dabei stetig die Geschwindigkeit verringern.
Das Aktionen-Fenster mit dem ActionScript:
Die zuletzt erwähnte Geschwindigkeit können Sie im ActionScript beliebig anpassen. Ändern Sie hierfür in den letzten beiden Codezeilen vor der schließenden Blockklammer den Zahlenwert nach dem Slash („/“).
Einfacher geht es durch eine kleine Erweiterung des Scriptes. Entfernen Sie das Symbol „Objekt“ von der Bühne und erstellen Sie anschließend ein zweites Symbol. Geben Sie diesem Symbol den Namen „Mausverfolger“ und wählen Sie erneut das Verhalten „Movieclip“ aus. Im Bearbeitungsmodus des Symbols fügen Sie nun mit der oben vorgestellten Technik eine Instanz von „Objekt“ ein und zentrieren dieses mittig auf der Bühne. Achten Sie erneut darauf, dass die Instanz markiert ist und rufen Sie das Aktionen-Fenster auf. Fügen Sie den nachfolgenden Code ein:
001:002:003:004:005:006:007:008:009:
onClipEvent (enterFrame) { // Abstand zwischen Maus und Mausverfolger berechnen deltaX = _root._xmouse - _parent._x; deltaY = _root._ymouse - _parent._y; // Position des Mausverfolgers an Maus annaehern _parent._x = _parent._x + deltaX / _parent.speed; _parent._y = _parent._y + deltaY / _parent.speed; }
Das Script muss durch die Erweiterung leicht angepasst werden. In den unteren beiden Zeilen steht statt einem Zahlenwert nur noch eine Variable „speed“. Damit diese Variable fortan einen Wert besitzt, wollen wir einen Parameter innerhalb unseres Symbols „Mausverfolger“ definieren. Wechseln Sie mit Strg + E auf die Hauptbühne. Klicken Sie in der Bibliothek mit der rechten Maustaste auf den Eintrag „Mausverfolger“. Im darauf erscheinenden Kontextmenü wählen Sie den Eintrag „Komponentendefinition“ aus.
Das Fenster „Komponentendefinition“:
Klicken Sie auf das Pluszeichen. Es erscheint eine neue Zeile, in der Sie mit einem Doppelklick in der Spalte „Name“ den Parameternamen „speed“ eintragen. Verlassen Sie das Fenster anschließend über die Schaltfläche „OK“. Ziehen Sie nun das Symbol „Mausverfolger“ auf die Bühne. Markieren Sie die soeben erstellte Instanz und wechseln Sie in das Bedienfeld „Eigenschaften“. Unter „Parameter“ müssen Sie einen Wert für „speed“ eintragen. Testen Sie den Mausverfolger mit verschiedenen Zahlenwerten. Bei einem höheren Wert verfolgt das Objekt die Maus langsamer. Ein kleinerer Wert hat dementsprechend eine schnellere Anpassung der Objekt- an die Mausposition zur Folge.
Beispieldatei: Einfacher Mausverfolger[Einfacher_Mausverfolger1.zip]
Beispieldatei: Erweiteter Mausverfolger[Einfacher_Mausverfolger2.zip]
