Realisierung von Tooltips


Erstellen eigener Tooltips in Flash MX
Sie sind klein, gelb und gerade wegen ihrer platzsparenden Art zur Übermittlung von Zusatzinformationen sehr beliebt: Tooltips. Erstellen Sie mit uns Ihre eigenen Tooltips in Flash MX. Bestimmen Sie die Darstellung und das Verhalten der Tooltips nach Belieben.
Tooltips bieten eine platzsparende Alternative, wenn Sie den Benutzer mit zusätzlichen Informationen versorgen wollen. Zum Erstellen eigener Tooltips in Flash MX benötigen wir nur ein paar grafische Objekte und einige Zeilen ActionScript.
Bevor wir mit der Erstellung des Tooltips beginnen können, müssen wir einige Vorarbeiten erledigen. Wir benötigen zunächst einige Objekte, denen wir später einen Tooltip zuweisen können. Gehen Sie hierfür in das Bedienfeld „Komponenten“ und ziehen Sie drei Buttons auf die Bühne. Wechseln Sie in das Bedienfeld „Eigenschaften“ und geben Sie den Buttons den Instanznamen „button1“, „button2“ und „button3“. Damit sind die Vorarbeiten auch schon abgeschlossen.

Erstellen Sie eine neue Ebene „tooltip“. Wir wollen im Folgenden die Darstellung des Tooltips definieren. Sie können gerne auf eine eigene Darstellung zurückgreifen. Es wird jedoch empfohlen, vorerst die gewählte Darstellung des Artikels umzusetzen. Eine Anpassung des Aussehens ist zu einem späteren Zeitpunkt ohne großen Aufwand immer noch möglich.

Zeichnen Sie auf der Bühne ein Rechteck ohne Rahmen ein. Als Füllfarbe verwenden wir den Farbwert „#FFFFCC“, um die Darstellung eines klassischen Tooltips möglichst realistisch nachzubilden. Beachten Sie beim Einzeichnen des Rechtecks, dass dieses die Größe des späteren Tooltips besitzt. Unser Tooltip soll aber nicht nur aus einem Rechteck bestehen. Wir wollen zusätzlich an der unteren linken Seite ein Dreieck einzeichnen, um das Aussehen einer Sprechblase zu erzielen. Wir benötigen hierfür das Polysternwerkzeug. Wählen Sie das Werkzeug aus und wechseln Sie anschließend in das Bedienfeld „Eigenschaften“. Betätigen Sie die Schaltfläche „Optionen“, um zu den Werkzeugeinstellungen zu gelangen. Stellen Sie hier die Anzahl der Seiten auf 3.


Die Werkzeugeinstellungen

Verlassen Sie das Dialogfenster über die Schaltfläche „OK“. Zeichnen Sie nun das Dreieck ein. Das Dreieck muss dieselbe Füllfarbe wie das Rechteck haben und darf ebenso keinen Rahmen besitzen. 


Momentane Darstellung des Tooltips

Wenn Sie mit dem Auswahlwerkzeug an eine beliebige Stelle der Tooltip-Darstellung klicken, sollte nun das gesamte Gebilde markiert sein. Erhalten Sie die Markierung aufrecht und wählen Sie das Tintenfasswerkzeug aus. Stellen Sie eine dunkle Strichfarbe ein und klicken Sie anschließend mit dem Werkzeug auf den Rand des markierten Bereiches. Das komplette Gebilde sollte damit einen Rahmen erhalten, wie in folgender Grafik demonstriert:


Tooltip mit Rahmen

Markieren Sie anschließend erneut das gesamte Gebilde und konvertieren Sie es in ein MovieClip-Symbol. Geben Sie der Instanz den Namen „tooltip“ und wechseln Sie anschließend in den Bearbeitungsmodus des Symbols. Damit unser Tooltip einen Text aufnehmen kann, benötigen wir ein dynamisches Textfeld. Geben Sie dem Textfeld den Instanznamen „tooltiptext“. Bedenken Sie, dass der Registrierungspunkt später die Position der Mouse bestimmt. Verschieben Sie daher alle Elemente oberhalb des Registrierungspunktes, wie in der folgenden Grafik:


Die richtige Position des Tootips

Die Darstellung des Tooltips ist somit abgeschlossen. Wechseln Sie in die Hauptzeitleiste zurück. Erstellen Sie hier eine Ebene „action“. Rufen Sie anschließend das Aktionen-Fenster auf. Es folgen ein paar Zeilen ActionScript:

001:
002:
 tooltip._visible = false;
 var interval;

Zunächst blenden wir die Instanz „tooltip“ aus. Der Tooltip soll nur erscheinen, wenn der Benutzer mit der Mouse eine kurze Zeit über einen der zu Beginn erstellten Buttons verweilt. Zusätzlich initialisieren wir eine globale Variable „interval“. Der Zweck der Variable wird in den nächsten Anweisungen ersichtlich. Ein Tooltip erscheint in der Regel mit einer leichten Zeitverzögerung. Hierfür wollen wir die Funktion „setInterval“ nutzen. Zum Ein- und Ausblenden eines Tooltips müssen wir jeden Button einzeln betrachten. Konzentrieren wir uns auf die Anweisungen für den ersten Button „button1“:

001:
002:
003:
004:
005:
006:
007:
 button1.onRollOver = function() {
     interval = setInterval(showTip, 100, "Button 1");
 }
 
 button1.onRollOut = function() {
     hideTip();
 }

Sobald der „button1” von der Mouse berührt wird, beginnen wir mit dem Zählen der Zeit. Dies geschieht indirekt mit Hilfe der Funktion setInterval, die in einem von uns definierten Zeitabstand die im ersten Parameter festgelegte Funktion aufruft. Die Variable „interval“ nimmt dabei einen von „setInterval“ zurückgegebenen Bezeichner auf. Diesen benötigen wir zu einem späteren Zeitpunkt. Die noch zu erstellende Funktion „showTip“ ist für die Anzeige des Tooltips verantwortlich. Im zweiten Parameter von „setInterval“ definieren wir den besagten Zeitabstand in Millisekunden. Im dritten Parameter übergeben wir etwaige Parameter der Funktion „showTip“. In unserem Fall ist dies der Text, der später im Tooltip dargestellt werden soll. Sobald die Mouse den Button wieder verlässt, wollen wir auch den Tooltip wieder ausblenden. Dies erledigt eine Funktion „hideTip()“. Betrachten wir aber zunächst die Funktion „showTip“:

001:
002:
003:
004:
005:
006:
007:
008:
009:
010:
011:
012:
013:
014:
015:
016:
017:
018:
019:
 var count = 0;
 
 function showTip(tooltiptext) {
     if (count == 3) {
         clearInterval(interval);
         count = 0;
         tooltip.tooltiptext.text = tooltiptext;
         tooltip._x = _root._xmouse;
         tooltip._y = _root._ymouse;
         tooltip._visible = true;
         _root.onMouseMove = function() {
             tooltip._x = _root._xmouse;
             tooltip._y = _root._ymouse;
             updateAfterEvent();
         }
     } else {
         count++;
     }
 }

Vorab wird eine Zählervariable „count” mit den Wert Null initialisiert. Innerhalb der Funktion überprüfen wir den Wert von „count“. Sobald dieser gleich Drei ist, führen wir weitere Instruktionen aus. Weiterhin inkrementieren wir den Wert von „count“. Die Variable realisiert somit unsere zeitverzögerte Anzeige des Tooltips. Ein höherer Wert innerhalb der If-Bedingung hätte somit eine längere Verzögerung zur Folge. Sobald die If-Bedingung erfüllt ist, benötigen wir die Anweisung „setInterval“ und die damit verbundenen Aufrufe von „showTip“ nicht mehr. Mit „clearInterval“ setzen wir die Funktion„setInterval” mit dem Bezeichner aus „interval” zurück. Die Variable „count“ wird erneut auf Null gesetzt. Bevor wir die Instanz „tooltip“ einblenden, passen wir die Position der Instanz der Position unserer Mouse an. Damit der Tooltip auch der Position der Mouse folgt, übergeben wir innerhalb des Ereignisses „onMouseMove“ erneut die Position der Mouse an die Instanz „tooltip“.
Es fehlt die Funktion „hideTip“ zum Ausblenden des Tooltips:

001:
002:
003:
004:
005:
 function hideTip() {
     clearInterval(interval);
     tooltip._visible = false;
     delete _root.onMouseMove;
 }

Die Funktion setzt ebenso wie „showTip“ die Funktion „setInterval“ mit dem Bezeichner „interval“ zurück. Dies geschieht in der Regel schon durch die Funktion „showTip“. Wenn der Benutzer allerdings nicht lang genug über dem Objekt verweilt, so dass es zu keiner Anzeige des Tooltips kommt, würde die Anweisung „setInterval“ weiterarbeiten. Mit Hilfe von „tooltip._visible = false” blenden wir die Instanz „tooltip” wieder aus. Schließlich löschen wir das nicht mehr benötigte „onMouseMove“-Ereignis, um Performance zu sparen.

Beispieldatei: Tooltips in Flash MX [Realisierung_von_Tooltips.zip]