• Registered: 2009-02-20
  • Posts: 4

Topic: Tooltip Caption on Thumbnails

Hi,
just purchased SVP =) great work guys!

im wondering if it is possible to have the caption displayed as a tooltip on thumbnails instead of the usual caption that is being displayed below the thumbnails?

  • Registered: 2009-02-20
  • Posts: 4

Re: Tooltip Caption on Thumbnails

i had created a customized Tooltip for to this effect. However there seems to be a problem with my code:

private function onRollOver(){        
        var tt:Tooltip = new Tooltip(0x000000,0xCCCCCC);        
        var cap = mXMLManager.imageCaptions[index];
        if (cap == undefined) cap = "";                 
        if (mSelected ) return;            
        mFrameTwn.continueTo(Options.thumbnailRollOverFrameWidth,sFrameTweenLen);
        if (Options.showCaptionOnRollover) mStageManager.showCaption(mIndex);        
        tt.showTip(cap);
    }
    
    private function onRollOut(){
        var tt:Tooltip = new Tooltip(0x000000,0xCCCCCC);        
        if (mSelected ) return;
        mFrameTwn.continueTo(Options.thumbnailFrameWidth,sFrameTweenLen);
        if (Options.showCaptionOnRollover) mStageManager.showCaption(mImageArea.currentImageIndex);        
        tt.removeTip();        
    }

the debugger says:
There is no property with the name 'index'.

i reckon this has something to do with along the line of

var cap = mXMLManager.imageCaptions[index];

any ideas? i just need the function to read along the different captions on the XML file

  • Registered: 2009-02-20
  • Posts: 4

Re: Tooltip Caption on Thumbnails

here's my customized class Tooltip.as for the tooltip...

import com.airtightinteractive.apps.viewers.simpleViewer.ImageArea;
import com.airtightinteractive.apps.viewers.simpleViewer.Options;
import com.airtightinteractive.apps.viewers.simpleViewer.Thumb;
import com.airtightinteractive.apps.viewers.simpleViewer.ThumbArea;
import com.airtightinteractive.apps.viewers.simpleViewer.XMLManager;
import com.airtightinteractive.apps.viewers.simpleViewer.StageManager;
import flash.filters.*;


class com.airtightinteractive.apps.viewers.simpleViewer.Tooltip {

    private var theTip:MovieClip;
    private var theTipArrow:MovieClip;
    private var theTipbg:MovieClip;
    private var tFormat:TextFormat;


    function Tooltip(hex:Number, hex2:Number) {
        //watch the depth in this first call here! You want it above all other instances!
        this.theTip = _root.createEmptyMovieClip("tooltip", 201);
        this.theTipbg = theTip.createEmptyMovieClip("tooltipbg", this.theTip.getNextHighestDepth());
        //tool tip box
        this.theTipbg.beginFill(hex);
        this.theTipbg.moveTo(0,0);
        this.theTipbg.lineTo(100,0);
        this.theTipbg.lineTo(100,20);
        this.theTipbg.lineTo(0,20);
        this.theTipbg.lineTo(0,0);
        this.theTipbg.endFill();
        //arrow
        this.theTipArrow = theTip.createEmptyMovieClip("tooltipArrow", this.theTip.getNextHighestDepth());
        this.theTipArrow.beginFill(hex);
        this.theTipArrow.moveTo(0,20);
        this.theTipArrow.lineTo(0,20);
        this.theTipArrow.lineTo(5,30);
        this.theTipArrow.lineTo(10,20);
        this.theTipArrow.endFill();

        //text Field
        this.theTip.createTextField("theText",this.theTip.getNextHighestDepth(),3,3,3,20);
        this.theTip.theText.selectable = false;
        this.theTip.theText.autoSize = "left";
        //text format
        this.tFormat = new TextFormat();
        this.tFormat.font = "Verdana";
        this.tFormat.size = 11;
        this.tFormat.color = hex2;
        this.tFormat.align = "center";

        this.theTip.theText.setNewTextFormat(this.tFormat);
        
        //drop shadow filter
        var ds:DropShadowFilter = new DropShadowFilter(2, 45, 0x000000, .50, 4, 4, 1, 1.5, false, false, false);
        this.theTip.filters = [ds];

        this.theTip._visible = false;
    }
    //make a tooltip
    
    public function showTip(theText:String):Void {        
        this.theTip.theText.text = "";
        this.theTip.theText.text = theText;
        this.theTip.tooltipbg._width = Math.floor(this.theTip.theText._width+8);
        
        /*checking for mouse position and width of tooltip, if we are going to have the tooltip moving beyond the stage
        we flip the toll tip*/

        if (_root._xmouse+theTip._width>Stage.width) {
            this.theTip._x = _root._xmouse-this.theTip._width+15;
            this.theTip._y = _root._ymouse-35;
            this.theTip.tooltipArrow._x = this.theTip._width-20
        } else {

            this.theTip._x = _root._xmouse-15;
            this.theTip._y = _root._ymouse-35;
            this.theTip.tooltipArrow._x =10
        }
        
        this.theTip._visible = true;
        //make the tooltip follow the cursor
        this.theTip.onMouseMove = function() {
            if (_root._xmouse+this._width>Stage.width) {
                this._x = _root._xmouse-this._width+15;
                this._y = _root._ymouse-35;
                this.tooltipArrow._x = this._width-20
            } else {
                this._x = _root._xmouse-15;
                this._y = _root._ymouse-35;
                this.tooltipArrow._x = 10
            }

            updateAfterEvent();
        };
    }
    
    public function removeTip():Void {
        this.theTip._visible = false;
        this.theTip.theText.text = "";
    }

}

hoping for a reponse from you guys! thanks