Week 5. Tooltips.

This week was interesting. I did a lot of work to get the shop up to par, and I feel I've done a pretty good job at the moment. After finishing up the last parts of the shop I moved on to my next difficult task, tooltips. I wasn't quite sure how I would go about making it, but I found a tutorial of sorts that helped me come up with an idea of what I had to do.

That picture looked a lot like the image I made above.

The back has two movie clips. One called TooltipBack and one called TooltipFront.

The text is HeadingTxt and BodyTxt.

The code that I wrote looked like this:

//Code for mouse movement
mouseListener.onMouseMove = function()
{
 if (_xmouse + TooltipBox.TooltipBack._width <= 800){TooltipBox._x = _xmouse + TooltipBox.TooltipBack._width/2;}
 else {TooltipBox._x = _xmouse - TooltipBox.TooltipBack._width/2;}
 if (_ymouse + TooltipBox.TooltipBack._width <= 600){TooltipBox._y = _ymouse + TooltipBox.TooltipBack._height/2;}
 else {TooltipBox._y = _ymouse - TooltipBox.TooltipBack._height/2;}
}

//Object that the tooltip shows information on.

StorageItem7.onRollOver = function()
{
 _root.attachMovie("Tooltip", "TooltipBox", 50);
 TooltipSetup("Fire Ball", 0x0073b5, "Attack Damage = High\nAttack Speed = Low\nAttack Range = Medium", 0);
}
StorageItem7.onRollOut = function()
{
 removeMovieClip(TooltipBox);
}

//Setup function
function TooltipSetup(A:String, B, C:String, D)//(Heading text, Heading color(optional), Body text, Body color(optional))
{
 TooltipBox.HeadingTxt.autoSize = true;
 TooltipBox.BodyTxt.autoSize = true;
 TooltipBox.HeadingTxt.text = A;
 if (B == 0) {TooltipBox.HeadingTxt.textColor = 0x000000;}
 else {TooltipBox.HeadingTxt.textColor = B;}
 TooltipBox.BodyTxt.text = C;
 if (D == 0) {TooltipBox.Body.textColor = 0x000000;}
 else {TooltipBox.BodyTxt.textColor = D;}
 //Set box and word max width
 TooltipBox.HeadingTxt._width = 300;
 TooltipBox.BodyTxt._width = 300;
 TooltipBox.TooltipBack._width = 310;
 TooltipBox.TooltipFront._width = 300;
 //Adjust text to left side
 TooltipBox.HeadingTxt._x = TooltipBox.TooltipFront._x - TooltipBox.TooltipFront._width / 2;
 TooltipBox.BodyTxt._x = TooltipBox.TooltipFront._x - TooltipBox.TooltipFront._width / 2;
 //Adjust textbox y when multilined
 if (TooltipBox.BodyTxt._height > TooltipBox.HeadingTxt._height)
 {
  TooltipBox.TooltipFront._height = TooltipBox.TooltipFront._height + (TooltipBox.BodyTxt.textHeight - TooltipBox.HeadingTxt.textHeight);
  TooltipBox.TooltipFront._y = TooltipBox._y;
  TooltipBox.TooltipBack._height = TooltipBox.TooltipBack._height + (TooltipBox.BodyTxt.textHeight - TooltipBox.HeadingTxt.textHeight);
  TooltipBox.TooltipBack._y = TooltipBox._y;
  TooltipBox.HeadingTxt._y = TooltipBox._y - TooltipBox.TooltipFront._height / 2;
  TooltipBox.BodyTxt._y = TooltipBox._y - TooltipBox.TooltipFront._height / 2 + TooltipBox.HeadingTxt.textHeight;
 } 
//Adjust to distance to screen sides
 if (_xmouse + TooltipBox.TooltipBack._width <= 800){TooltipBox._x = _xmouse + TooltipBox.TooltipBack._width/2;}
 else {TooltipBox._x = _xmouse - TooltipBox.TooltipBack._width/2;}
 if (_ymouse + TooltipBox.TooltipBack._width <= 600){TooltipBox._y = _ymouse + TooltipBox.TooltipBack._height/2;}
 else {TooltipBox._y = _ymouse - TooltipBox.TooltipBack._height/2;}
}

The result of the code is what is below. This code creates a tooltip box from where the mouse is and adjusts it to deal with the screen and more text. Only the body text can expand, which means you have to have a header that can fit within the textbox. Another good thing about the code is that there is an ability to pass to the function color choices. As shown below, the TooltipBox.HeadingTxt.textColor was changed to make the header blue.