TooltipV3

[Vampire's Party]

Viele haben nachgefragt, einige haben Tipps und Anregungen gegeben. Aus diesem Grund gibt es nun hier die dritte Version meines Tooltips. Es haben sich ein paar Sachen geändert, ein paar sind weggefallen und es sind neue dazugekommen. Ziel war es diesmal den Tooltip so flexibel wie möglich zu gestalten und die Fehler der Version 2 auszubessern. Herausgekommen sind mehrere Klassen, die leicht modifizierbar und zu verwenden sind. Dazu gesellt sich eine Dokumentation, ein Beispiel und ein Tool, um das Design der Tooltips in Echtzeit anzupassen und den Code generieren zu lassen.

Features:
- Sprachmanagement
- komplett anpassbares Design
- 6 verschiedene Positionen für den Pfeil
- Tooltip passst sich auf Wunsch der Bühne an und modifiziert sich selber. Er kann also nicht aus der Bühne geschoben werden
- mehrere Übergangseffekt
- eigene Übergänge erstellen
- anpassbarer Hintergrund: wählbar zwischen einfarbig, Farbverlauf und Bitmap
- und einiges mehr...

Ansehen:
- Beispiel
- TooltipDesigner

Download:
- Komplettpacket
- oder hier im Forum (TooltipDesigner auf Grund der Größe nicht enthalten)

Noch ein paar Anmerkungen:
1. Die Einstellungen übernimmt nun die Klasse TooltipSettings. Um Speicherplatz zu sparen, habe ich auf Getter / Setter verzichtet. Einige der Einstellungen deaktivieren sich gegenseitig. So z.B. die Hintergrundfarbe, wenn man einen Bitmaphintergrund wählt. Logisch, oder . Beachtet auch die statischen Variablen dieser Klasse, die für das setzten einiger Einstellungen verwendet werden sollten.
2. Der DropShadowFilter wurde entfernt. Dafür kann man jetzt die Filter für den Text und den Hintergrund manuell festlegen (siehe Beispiel)
3. Die Klasse TooltipManager kann gelöscht werden, wenn man diese nicht benötigt. Ebenso verhält es sich mit den Transitions.
4. Übergänge funktionieren nur korrekt bei eingebetteten Schriftarten

So dann wünsch ich euch viel Spaß mit dem Ding

[BPA]

Wow, schaut sehr schön und nützlich aus. Vielen Dank fürs Teilen...

[b.asile]

Danke auch!
Vor allem in deinen Designer hast du ne ganze Menge Arbeit gesteckt Respekt!!!

[InBayern]

ich habe mich jetzt durch alle versionen gearbeitet...(ich habe aber auch nicht den leisesten plan von AS) und ich krieg das einfach nicht hin.
dein designer und die demo...alles super, aber ...ich kanns nicht.
mein problem (und sicher das vieler anderer die so dusselig sind wie ich) ist,
ich mag keine sprachauswahl und ich habe 4 btn auf die bühne gezogen die nen tip zeigen sollen mit dem kopierten code aus dem designer...wo weise ich den btn die tips zu ???
ich habes schon mit dem original probiert, die sprache raus? und ich finde auch diese *_tt dinger nicht..
könnte das jemand anhand meines o.g. beispiels erklären? ein media_btn auf der bühne und der code aus dem designer...

danke!
p.s. das ist nichts gegen die arbeit von Vampire's Party, im gegenteil! aber das ist zu hoch für mich..danke

[~pyropete~]

//
// Code aus dem Tooltipmanager ...
//
media_btn.onRollOver = function() {
var myTooltip = new Tooltip("Ich bin ein Tooltip", tooltipSettings);
}
//
about_btn.onRollOver = function() {
var myTooltip = new Tooltip("Ich bin ein anderer Tooltip", tooltipSettings);
} 

Ich denk so, ohne es probiert zu haben. Ansonsten solltest Du die
Anmerkungen gelesen haben, und nicht vergessen die Klassen zu
_importieren_ !

Sehr schönes Teil! Respekt!

[InBayern]

erstmal danke für die schnelle hilfe. wirklich super nett. aber das funzt noch nicht.
hier mal der code den ich jetzt in dem frame habe....er gibt mir die mc schon als btn aus (also der pfeil wird zur hand) aber ein TT erscheint nicht...???
danke

import flash.filters.DropShadowFilter;
import org.tools.*

var tooltipTextFormat:TextFormat = new TextFormat();
tooltipTextFormat.size = 11;
tooltipTextFormat.font = "VerdanaEmbed";
tooltipTextFormat.bold = false;
tooltipTextFormat.italic = false;
tooltipTextFormat.color = 0x000000;

var tooltipSettings:TooltipSettings = new TooltipSettings();
tooltipSettings.textFormat = tooltipTextFormat;
tooltipSettings.textHtml = false;
tooltipSettings.textEmbed = true;
tooltipSettings.textAntialiasing = "advanced";
tooltipSettings.lineThickness = 1;
tooltipSettings.lineColor = 0xCCCCCC;
tooltipSettings.lineAlpha = 50;
tooltipSettings.backgroundType = TooltipSettings.COLOR;
tooltipSettings.backgroundColor1 = 0xFFFFFF;
tooltipSettings.backgroundColor2 = 0xCC0000;
tooltipSettings.backgroundAlpha = 75;
tooltipSettings.cornerRadius = 5;
tooltipSettings.transition = new TransitionNone();
tooltipSettings.drag = true;
tooltipSettings.timeOffset = 100;
tooltipSettings.transitionDuration = 300;
tooltipSettings.parent = this;
tooltipSettings.verticalDirection = TooltipSettings.DYNAMIC;
tooltipSettings.horizontalDirection = TooltipSettings.DYNAMIC;
tooltipSettings.arrowHeight = 15;
tooltipSettings.arrowWidth = 10;

//tooltipSettings.textFilters = null;
//tooltipSettings.backgroundFilters = null;

// Tooltips erstellen und Events zuweisen
media_btn.onRollOver = function() {
var myTooltip = new Tooltip("Ich bin ein Tooltip", tooltipSettings);
}
about_btn.onRollOver = function() {
var myTooltip = new Tooltip("Ich bin ein anderer Tooltip", tooltipSettings);
}

[Vampire's Party]

Hi,

es ist leider meistens so, dass solche Sachen immer schwerer zu bedienen werden, je mehr Features man einbaut. Der Fehler bei dir ist, dass du den Tooltip in einem Event instanzierst. Das muss aber schon vorher passieren. Im Event muss dann die entsprechende Methode aufgerufen werden, damit er angezeigt wird. In deinem Fall würde das dann so aussehen:

import flash.filters.DropShadowFilter;
import org.tools.*
 
var tooltipTextFormat:TextFormat = new TextFormat();
tooltipTextFormat.size = 11;
tooltipTextFormat.font = "VerdanaEmbed";
tooltipTextFormat.bold = false;
tooltipTextFormat.italic = false;
tooltipTextFormat.color = 0x000000;
 
var tooltipSettings:TooltipSettings = new TooltipSettings();
tooltipSettings.textFormat = tooltipTextFormat;
tooltipSettings.textHtml = false;
tooltipSettings.textEmbed = true;
tooltipSettings.textAntialiasing = "advanced";
tooltipSettings.lineThickness = 1;
tooltipSettings.lineColor = 0xCCCCCC;
tooltipSettings.lineAlpha = 50;
tooltipSettings.backgroundType = TooltipSettings.COLOR;
tooltipSettings.backgroundColor1 = 0xFFFFFF;
tooltipSettings.backgroundColor2 = 0xCC0000;
tooltipSettings.backgroundAlpha = 75;
tooltipSettings.cornerRadius = 5;
tooltipSettings.transition = new TransitionNone();
tooltipSettings.drag = true;
tooltipSettings.timeOffset = 100;
tooltipSettings.transitionDuration = 300;
tooltipSettings.parent = this;
tooltipSettings.verticalDirection = TooltipSettings.DYNAMIC;
tooltipSettings.horizontalDirection = TooltipSettings.DYNAMIC;
tooltipSettings.arrowHeight = 15;
tooltipSettings.arrowWidth = 10;
 
//tooltipSettings.textFilters = null;
//tooltipSettings.backgroundFilters = null;
 
var myTooltip1:Tooltip = new Tooltip("Ich bin ein Tooltip", tooltipSettings);
var myTooltip2:Tooltip = new Tooltip("Ich bin ein anderer Tooltip", tooltipSettings);
 
// Tooltips erstellen und Events zuweisen
media_btn.onRollOver = function() {
myTooltip1.show();
}
about_btn.onRollOver = function() {
myTooltip2.show();
}
 
// Ausblenden nicht vergessen!
media_btn.onRollOut = function() {
myTooltip1.hide();
}
about_btn.onRollOut = function() {
myTooltip2.hide();
} 

Nochmal an alle: vielen Dank für euer Lob!

[InBayern]

also vielen dank nochmal für den TT. Respekt nochmal und vielen dank.
und hier noch ein kleiner tip für alle voll-noobs wie mich --- nicht vergessen die schrift mit zu embeden...denn sonst habt ihr nun ne kleinen hübschen kreis in eurem neuen movie und das kostet dann zeit....

danke für die schnelle hilfe und wenn ich meine seite online habe, schicke ich dem verfasser und dem hilfesteller ne mail mit link. danke an alle !!!!

[jaygroove]

sieht super aus das teil! danke für die contribution :-)
werds bei zeiten mal testen...

[jaygroove]

funktioniert echt fein - respekt!!

[DonLukiano]

hat sich erledigt!!

[Elli]

Tolle Erweiterung

Eine Frage habe ich aber:
Möchte im Tooltip HTML-Text nutzen, zwecks auszeichnung und Gliederung.
Dazu habe ich die entsprechenden Parameter angepasst, resp. auf "true"
gesetzt. BRs werden auch einwandfrei erkannt, aber <b>...</b> zeigt er nicht
an, bzw. wird die ganze Schrift bold, wenn ich unter dem eingebetteten Font
hier das Häkchen setze. Wie muss ich denn hier konfigurieren, dass er mir
nur die per HTML ausgezeichneten Wörter fett schreibt?

Danke
Elli

[TeeJay]

ersteinmal Danke,

für diesen Tooltip, ist echt Klasse.
Ich habe das Ding mal ausprobiert und habe es sofort zum Laufen gebracht. Ich habe dabei mehrere Tips erstellt die auf Buttons liegen. Wenn ich mir das ganze auf einen Windoofrechner anschaue funzt alles tadellos, tu ich es aber mit einem Mac stoße ich auf ein kleines Problem. Das Ganze passiert wirklich nur auf meinem Mac (Intel und PPC). Fahre ich mit der Mouse über einen Button, dann wird der Tooltip an einer anderen Stelle angezeigt jedoch nicht am Mousezeiger (die trasischenAnimation wird ungefähr 200px rechts neben dem Mousezeiger angezeigt). Wenn ich nun mit meiner Mouse weiter über den Button fahre springt der Tip an den Mouseziger und alles funzt wie es sein soll.

kann das jemand mit Mac mal bestätigen ??

MFG Tee

UPDATE

Ich habe nochmal eine einfache Implementation vorgenommen, anscheinend liegt es daran das ich die MCs nach der Tooltip Belegung nochmal an eine andere Stelle schiebe. Ich habe die These noch nicht widerlegt, Bewiesen jedoch auch nicht weil ichs codetechnisch noch nicht getestet habe!

PS These wurde widerlegt! (siehe unten)


UPDATE2
Also ich weiß jetzt woran es liegt. Mein Flashfilm wird zentriert dargestellt, d.h. er befindet sich immer im Zentrum der Webseite. Die Transitionanimation wird immer genau um den Versatz der Bildschirmgrößenänderung nach rechts verschoben! Warum das jetzt nur auf Macsystemen der Fall ist, ist mir jedoch Schleierhaft.