RSS Feed

Peter Goodman's blog about PHP, Parsing Theory, C++, Functional Programming, Applications,

Flash Tooltips

A more recent version, cross-browser compatible version of this code can be found in my flash tooltips using jquery article.

Now I'm 100 per cent sure that this has been done, but I haven't seen it so here goes... The other night I was thinking, "how can I get that cool OSX min/maximizing animation into tooltips?" Well, the obvious answer is with Flash.
Note: this does not work across all browsers and has not been extensively tested.

Before going about making this work, I needed to find out how all sorts of websites I've seen managed to make the background of the flash animations transparent. It turned out to be a very simple task; all that needed to be done was set the wmode parameter to "transparent" in the <param> and <embed> tags. Problem one solved.

Then I needed to make it so that I could have one flash animation deal with all of the tooltips. I would need to be able to send information from javascript to actionscript, and if you remember on one of my previous articles about usable flash, I did this with ExternalInterface. Problem two solved.

Finally, I needed to make some sort of animation. This I'm not so great at so I just did a small stupid thing. Oh well, problem three solved.

So, at the time of writing this the javascript isn't sending the info to actionscript properly, but I assure you is *was* working.. I will probably update once I get everything working nicely. So, onto some code...

//--------------------------
// The javascript
//--------------------------

// set a variable for our flash tooltip object
// and do some IE browser sniffing
var flash_tooltip, tt, ie/*@cc_on =1@*/;

// get the flash tooltip
if(ie)
{
    flash_tooltip = window['flashTooltip'];
    tt = document.all['flash_tooltip'];
}
else
{
    flash_tooltip = document['flashTooltip'];
    tt = document.getElementById('flash_tooltip');
}

// show a tooltip
var fTooltipShow = function(o)
{
    // if we have our flash tooltip
    if(flash_tooltip)
    {
        // show and position the div. This is rudimentary
        // position cause I'm lazy. More elaborate code would
        // need to be used in production code
        tt.style.display = 'block';
        tt.style.top = parseInt(o.offsetTop - 280) + 'px';
        tt.style.left = parseInt(o.offsetLeft + o.offsetWidth) + 'px';

        try
        {
            // toggle the motion tween in flash
            flash_tooltip.showTooltip('Hello this is text is from javascript.');
        }
        catch(e) { }
    }
};

// hide the tooltip
var fTooltipHide = function()
{
    // hide the div
    tt.style.display = 'none';
};
//--------------------------
// Part of the actionscript
//--------------------------

import flash.external.*;

var tt_text = '';

function showTooltip(str) 
{
    trace('Showing tooltip...');

    _root.tt_text = str;

    gotoAndPlay(2);
}

// let javascript call this func
ExternalInterface.addCallback("showTooltip", null, showTooltip);
//--------------------------
// The last part of the actionscript
//--------------------------

with(_root)
{
    if(tt_text && tt_text != '')
    {
        tooltip.tooltip_text.type = 'static';
        tooltip.tooltip_text.text = tt_text;

        trace('Set tooltip text to: '+ tt_text);
    }
}
stop();

So, if you want to go check the flash tooltips in action, click here.

Also, one problem I've been having with doing this is that when the javascript call actually works, it doesn't set the text of the tooltip until the tooltip is opened a second time. Hopefully someone can enlighten me with an answer to this in the comments... That or I will eventually find a hack that will work :P


Comments

There are no comments, but you look like you have something on your mind.


Comment