Inconsistent "Tooltip"

programming flash
1

Hey, I wrote this code that is inconsistent in whether or not the box that is drawn around the text is extended to the full length of the text. Upon rollover, the title of the thumbnail, which is loaded from xml, is inserted into a dynamic text box which follows the mouse, and also, a sprite is created and a box is drawn with an outline around it using the .graphics.lineTo and beginFill methods of the sprite. Most of the time, the box is drawn correctly and is the full length of the text box, however, occassionally, the box is not the full-length. It happens a lot if you roll on and off the same thumbnail several times. Could anyone look at this and tell me if you can understand what is causing the problem? The lineTo method is using the textLength property of the text field to know where to draw the line that makes up the box, so maybe that property does not get updated soon enough upon rollover? If anyone has any insight, please let me know. I’ve attached a zip file that contains an fla, an swf of that fla, the xml file, and the images used to populate the thumbnails. Please let me know if anyone can help me with this.

thanks,

tyler jones

2

Okay, maybe it would help if I included the code that’s giving me problems. Bear in mind, this code is referencing data loaded through an external XML document. Here is my rollover script:

function thumbMouseOver(evt:MouseEvent):void {
    sMovRO.play(0,0,soundFX);
    if(currentThumb != evt.target.videoTitle) {
        currentThumb = evt.target.videoTitle;
        titleBG.graphics.clear()
        titleRollOver.autoSize = TextFieldAutoSize.LEFT;
        titleRollOver.text = evt.target.videoTitle;
        var widthExtend:Number = titleRollOver.textWidth + 5;
    }
    titleBG.graphics.beginFill(0x000000, .6);
    titleBG.graphics.lineStyle(2, 0xFFFFFF);
    titleBG.graphics.moveTo(0, 2)
    titleBG.graphics.lineTo(widthExtend, 2);
    titleBG.graphics.lineTo(widthExtend, -23);
    titleBG.graphics.lineTo(0, -23);
    titleBG.graphics.lineTo(0, 2);
    titleBG.graphics.endFill();
    titleRollOver.x = 0;
    titleRollOver.y = - 22;
    titleBG.addChild(titleRollOver);
    titleBG.scaleX = .3;
    titleBG.scaleY = .3;
    titleBG.visible = false;
    titleBG.x = mouseX + 15;
    titleBG.y = mouseY - 25;
    addChild(titleBG);
    titleBG.visible = true;
    evt.target.addEventListener(MouseEvent.MOUSE_MOVE, titleFollowMouse);
}
function titleFollowMouse(evt:MouseEvent):void {
    titleBG.x = mouseX + 15;
    titleBG.y = mouseY - 25;
}
function thumbMouseOut(evt:MouseEvent):void {
    removeChild(titleBG);
}
3

also, here is a link to the same code exported as an SWF, so you can see what I’m talking about with the box not extending all the way over the text…

http://www.mediajuicefilms.com/rolloverExample/

4

try this

var widthExtend:Number = titleRollOver.width + 5;

. U can also look at mine class which still needs some work

5

Wow! Thank you so much for that… Unfortunately, however, I already had originally written it to say titleRollOver.width, but that had even worse results than .textWidth. If you have any other suggestions or anyone has any idea what is causing this or a better approach to this tooltip, then please let me know… That class you wrote is crazy amazing, though…