Monday, March 3, 2008

Flash Tooltips

I wanted to create Flash tooltips for this website I'm working on. They can look nice and serve a purpose if done correctly. Most of my research led me to Flash components that people were selling. I'm not paying $30 for some tooltips. I'd rather do without, they really aren't that important to me (plus I'm cheap).

I came across a few Flash tooltip generators, but they were pretty ugly and their aesthetic won't match my site at all.

Knowing that I've created custom cursors in the past, I figured that's all a tooltip really is. It's a custom cursor that follows your mouse in a very specific place. It turns on when you rollover your object, and turns off when you roll off. Only difference is, you're not hiding your mouse cursor in the process.

I created my tooltip graphic and made it a movieClip. I made sure that when inside the clip, the tip itself was aligned top right of center, this way when I set the clip back when I was done with it (0,0), none of it was hanging over the screen. Plus, this is where I wanted it aligned in relation to the mouse. I also made sure I wasn't touching the center either, this way my tooltip wasn't sitting right on top of or touching the cursor arrow/hand.

I gave my movieClip an instance name. Here's my code that I added to the frame:

myMCButton.onRollOver = function () {
tooltipMC._x = _root._xmouse;
tooltipMC._y = _root._ymouse;
tooltipMC.startDrag();

tooltipMC.gotoAndPlay(2); // Mine animates
}

myMCButton.onRollOut = function () {
tooltipMC._x = 0;
tooltipMC._y = 0;
tooltipMC.stopDrag();
tooltipMC.gotoAndStop(1); //Send my animation back to frame 1
}

That's it. I could have turned visibility on and off instead of resetting it's 0,0 position, but I didn't. Maybe that would had some jumpiness, who knows. All I know is that I saved $30. And I'm sharing this info, for a low low price of only $5.

No comments: