ThisIsLeon.co.uk

This applies to AS2.0, but the logic should also work with AS3.0

I was working on a project recently in which I needed to create a dynamic tooltip that would display when a user rolled over an object (in this case a button). I will add a tutorial on how to achieve this at a later date, as it uses some techniques beyond the scope of this tutorial (loops, arrays and timers).

The idea was for a user to roll over a button and a description appear. The tooltip needed to be:

• Dynamic so that one function could work for all buttons.
• Dynamic in terms of changing size. The text was never the same length so the tooltip needed to re-size accordingly
• Unobstrusive and customisable.

My first attempt worked fairly well, but I had issues when it came to resizing the tooltip to accomodate the text. This was because I used a movie clip, which looked like a speech bubble and embedded a textbox inside. I was dynamically changing the width of the speech bubble to fit the text box. This failed as the behaviour was quite erratic.

I instead decided to only use a textbox, and style it to look like a tooltip by modifying its propeties. This no longer looked like a speech bubble but it was a comprimise I was willing to make. The code below shows how to modify a simple textbox in order to create the effect above.

tooltip.tiptext.text = “myText”;
tooltip.tiptext.autoSize = “left”;
tooltip.tiptext.textColor = 0×000000;
tooltip.tiptext.border = true;
tooltip.tiptext.borderColor = 0×000000;
tooltip.tiptext.background = true;
tooltip.tiptext.backgroundColor = 0xFFFFCC;

The property names are pretty self explanatory, but these were omitted from the Flash Online Documentation. It was by pure chance (and the help of the code colour support in Flash) that I realised they would work.

You could even dynamically generate the colours from an XML file, so you could change the colour of elements externally without needing to modify the FLA file (this was also implemented in this project).