Diesen Tipp in Originalversion zeigen.
ToolTip-Prototype
In diesem Artikel werden wir einen MovieClip-Prototype erstellen, mit dem für jeden MovieClip individuelle ToolTips angelegt werden können.
Wir verwenden hier (fast) ausschließlich ActionScript mit Zeichnungsmethoden - ich werde versuchen, den Code Schritt für Schritt zu erklären.
Damit unser ToolTip mit einer eingebetteten Schrift, die auf Alphafading reagiert, angezeigt wird, legen wir in der Bibliothek zunächst eine neue Schriftart an (z.B. Verdana, 10pt, Alias-Text) und geben es unter seinem Bezeichner zum Export für ActionScript frei (wichtig: die im Schriftart-Objekt angegebene Schriftgröße muss der später im Prototype angegebenen Schriftgröße entsprechen).
Nun legen wir eine neue Ebene (ToolTip) an, um die Funktion zu definieren. Wir beginnen mit der Definition der Prototype-Funktion:
MovieClip.prototype.setToolTip = function(msg:String, opac:Number, cl:Number, maxw:Number) {
Die Funktion "setToolTip" erwartet bis zu vier Parameter:
- msg: Der angezeigte Text
- opac: Transparenz der Box in Prozent
- cl: Farbwert (hexadezimal) der Box
- maxw (optional): maximale Breite der Box bei mehrzeiligen Textfeldern (wird der Parameter weggelassen, so wird ein einzeiliges Textfeld mit der nötigen Breite erstellt)
Nun legen wir einen neuen MovieClip für die Box an:
var depth = this._parent.getNextHighestDepth();
if (this.DCToolTip) depth = this.DCToolTip.getDepth();
this.DCToolTip = this._parent.createEmptyMovieClip(„dctooltip“ + int(Math.random() * 10000), depth);
this.DCToolTip._x = this._xmouse + this._x;
this.DCToolTip._y = this._ymouse + this._y;
this.DCToolTip.owner = this;
In der ersten Zeile erfragen wir die nächsthöhere Stufe des dem MovieClip übergeordneten Clip ab. Wenn der Clip schon eine Membervariable namens "DCToolTip" besitzt (sprich: schon ein ToolTip existiert), wird diese Variable (depth) auf die Stufe des ToolTips gesetzt, um den aktuellen ToolTip zu überschreiben.
Dann legen wir mit "createEmptyMovieClip" einen neuen Clip an und geben ihm zunächst die Position des Mauszeigers auf dem MovieClip, der den ToolTip erhalten soll. Damit unser ToolTip weiß, zu welchem Clip er gehört, verpassen wir ihm noch eine Membervariable (owner) mit Referenz auf den Ziel-Clip.
with(this.DCToolTip) {
createTextField(„tiptxt“, 1, 1, 1, 10, 10);
tiptxt.autoSize = true;
if (maxw != undefined) {
tiptxt._width = maxw;
tiptxt.multiline = true;
tiptxt.wordWrap = true;
} else {
tiptxt.multiline = false;
tiptxt.wordWrap = false;
}
tiptxt.selectable = false;
tiptxt.embedFonts = true;
var tf:TextFormat = new TextFormat();
tf.font = „ToolTipFont“;
tf.size = 10;
tiptxt.text = msg;
tiptxt.setTextFormat(tf);
var w = tiptxt.textWidth + 5;
var h = tiptxt.textHeight + 7;
lineStyle(1, 0, 100);
beginFill(cl, opac);
moveTo(0, 0);
lineTo(w, 0);
lineTo(w, h);
lineTo(0, h);
lineTo(0, 0);
_visible = false;
_alpha = 0;
adest = 0;
}
Nun wird das Textfeld und die Rahmenbox in dem MovieClip "DCToolTip" erstellt. Dazu verwenden wir einen with-Block, um sich wiederholende Adressierung zu sparen.
Zunächst wird ein leeres Textfeld (tiptxt) mit den Mindestmaßen 10x10 Pixel erstellt. Die Eigenschaft "autosize" wird auf true gesetzt, um die automatische Größenanpassung des Textfeldes (abhängig vom Inhalt) zu ermöglichen.
Nun prüfen wir, ob der Parameter "maxw" gesetzt ist. Wenn ja, legen wir die Breite des Textfeldes mit "textWidth" auf diesen Wert fest und setzen die Parameter "multiline" (Mehrzeilig) und "wordWrap" (automatischer Zeilenumbruch) auf true. Andernfalls bleibt die Größe dynamisch und "multiline" sowie wordWrap werden auf false gesetzt. Die Eigenschaften "selectable" und "embedFonts" bestimmen, dass über dem Text kein Textauswahlcursor angezeigt wird und eingebettete Schriftarten verwendet werden.
Um Schriftart und Größe festzulegen, erstellen wir ein neues TextFormat-Objekt (tf), dem wir unseren Font „ToolTipFont“ und die gewünschte Textgröße (10 Pixel) zuweisen. Wie schon erwähnt, sollte die hier angegebene Textgröße mit der Textgröße im Font-Objekt übereinstimmen, um unerwünschte Verzerrungen zu vermeiden.
Nun weisen wir dem Textfeld (tiptxt) den Text zu und danach erst unser TextFormat-Objekt.
Als nächstes zeichnen wir eine gefüllte Box um unser Textfeld:
in den Variablen "w" und "h" speichern wir die Breite und Höhe des Textfeldes, die wir mit den Parametern "textWidth" und "textHeight" bestimmen. Wir geben jeweils ein paar Pixel hinzu, um einen gewissen Abstand der Begrenzungsbox zum Text zu gewährleisten.
Mit lineStyle(1, 0, 100) setzen wir den Linienstil auf eine ein-Pixel breite Linie in Schwarz mit 100% Deckkraft und mit beginFill(cl, opac) legen wir Füllfarbe und -transparenz fest ("cl" und "opac" sind die Parameter, die an unsere Funktion übergeben werden. Werden diese Parameter beim Aufruf weggelassen, so wird nur der Rahmen gezeichnet; die Box selbst bleibt transparent.
Danach wird der neue Clip unsichtbar geschaltet (_visible = false), ein Alphawert von 0% festgelegt und eine letzte Membervariable angelegt: „adest“. Da unser ToolTip langsam ein- und ausgeblendet werden soll, speichern wir in dieser Variable den Zielwert für die Alphatransparenz (zunächst 0). Verändern wir diesen Wert, so wird (siehe nächster Codeblock) die Transparenz diesem Wert angenähert.
Zuletzt brauchen wir eine Überprüfung, ob sich die Maus über dem Ziel-MovieClip befindet sowie die Funktionen zum Ein-/Ausblenden und die Positionierung:
this.DCToolTip.onEnterFrame = function() {
var w = this.owner._width;
var h = this.owner._height;
if (this.owner._xmouse > 0 && this.owner._xmouse < w && this.owner._ymouse > 0 && this.owner._ymouse < h) {
this.adest = 100;
this._visible = true;
} else {
this.adest = 0;
}
this._alpha += (this.adest - this._alpha) / 3;
if (this.adest == 0 && this._alpha < 1) {
this._alpha = 0;
this._visible = false;
} else {
var dx = this.owner._x + this.owner._xmouse;
var dy = this.owner._y + this.owner._ymouse - this._height;
var x = this._x;
var y = this._y;
x += (dx - x) / 2;
y += (dy - y) / 2;
this._x = Math.round(x);
this._y = Math.round(y);
}
}
Wir verpassen unserem ToolTip-Clip eine onEnterFrame-Methode, die mit jedem Frameaufruf auasgeführt wird. Nun benötigen wir auch unsere Membervariable „owner“, über die wor Zugriff auf Position und Maße des Zielclips erhalten (denn auch der Zielclip kann sich ja bewegen oder seine Maße ändern, in sofern hätte ein einfaches Speichern seiner Maße nicht genügt).
Wir testen, ob sich der Mauszeiger über dem Zielclip befindet (this.owner._xmouse gibt beispielsweise die horizontale Mausposition relativ zum Zielclip zurück) und setzen abhängig von dieser Bedingung die Membervariable "adest" entweder auf 100 oder 0% Opazität.
Mit der Zeile "this._alpha += (this.adest - this._alpha) / 3;" lassen wir die Transparenz des ToolTips sich gleitend an den Zielwert "adest" annähern. Niedrigere Teiler als 3 führen zu einer Erhöhung der Geschwindigkeit, höhere zu einer Veringerung.
Wenn der Alphawert unter 1% gesunken ist und der Zielwert gleich 0 ist, setzen wir den Alphawert auf 0 und die _visible-Eigenschaft auf false. Dann können wir uns das dauernde Angleichen von Position und Transparenz sparen, solange sich die Maus nicht über dem Zielclip befindet. Sind diese Bedingungen nicht erfüllt, speichern wir zunächst die Zielposition des ToolTips in den Variablen "dx" und "dy" (damit sparen wir uns lediglich etwas Schreibarbeit in den nächsten Zeilen) und die aktuelle Position in den Variablen "x" und "y".
Mit einer ähnlichen Annährung wie bei der Transparenz (x += (dx - x) / 2; ) lassen wir den ToolTip an eine Position in der Nähe des Mauszeigers gleiten. Damit der Clip auf ganzhalige Pixelwerte gesetzt wird, werden die Variablen "x" und "y" mit Math.round() gerundet.
Zuletzt schreiben wir auch eine kurze Funktion, um einen existieren ToolTip wieder zu entfernen:
MovieClip.prototype.removeToolTip = function() {
if (this.DCToolTip) this.DCToolTip.removeMovieClip();
}
Hier das Ganze noch mal als Klasse (zweiter Anhang: ToolTip_Class.zip).
Die Klasse wird beispielsweise folgendermaßen aufgerufen:
var tooltip1 = new ToolTip(movieClip1, "Bla Blubb und so weiter", 80, 0xFFFFAA);
Entfernt wird das Ganze mit remove:
tooltip1.remove();
Autor: Datic
Website: Ekto.net ()
Copyright (c) 2002-2005 by Andreas Schroth
URL: www.computer-tipps.net/webdesign182.html