As promised in the previous tutorial, in this tutorial I will show you how to add a tooltip to one of the FlashOtaku components. I will use the StackFlow component as an example but it is applicable to the other flash components as well.

Here’s how the final result will look like:

First we need an XML file that will contain the source and the title of each item. To specify the title, I will use the ‘title’ attribute but this is not a keyword. You can use any name for the extra attributes you add. The flash component will store all the attributes and then, the API will give you access to the value of those attributes.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <images>
  3.      <image source="images/image1.jpg"  title="Image 1 title"/>
  4.      <image source="images/image2.jpg"  title="Image 2 title"/>
  5.      <image source="images/image3.jpg"  title="Image 3 title"/>
  6.      <image source="images/image4.jpg"  title="Image 4 title"/>
  7.      <image source="images/image5.jpg"  title="Image 5 title"/>
  8.      <image source="images/image6.jpg"  title="Image 6 title"/>
  9.      <image source="images/image7.jpg"  title="Image 7 title"/>
  10.      <image source="images/image8.jpg"  title="Image 8 title"/>
  11.      <image source="images/image9.jpg"  title="Image 9 title"/>
  12.      <image source="images/image10.jpg" title="Image 10 title"/>
  13. </images>

As I mentioned in the previous tutorial, I can also use Actionscript to specify the data for each item. The Actionscript code should look like this:

  1. var myItems:Array = [{source:"images/image1.jpg", title:"Image 1 title"},
  2. {source:"images/image2.jpg", title:"Image 2 title"},
  3. {source:"images/image3.jpg", title:"Image 3 title"}];
  4.  
  5. myStackFlow.items = myItems;

or

  1. myStackFlow.addItem({source:"images/image1.jpg", title:"Image 1 title"});
  2. myStackFlow.addItem({source:"images/image2.jpg", title:"Image 2 title"});
  3. myStackFlow.addItem({source:"images/image3.jpg", title:"Image 3 title"});

Now, create a new symbol and inside the symbol draw a simple tooltip and add a dynamic text field that will display the title. Give the text field an instance name of tooltipText and move the tooltip so that bottom edge of the tooltip’s arrow is positioned where the registration point of the symbol is.

tooltip drawing

When you’re done creating the tooltip, right click on it in the Library, chose Linkage, select Export for Actionscript and in the Class field write Tooltip. This step is necessary in order to be able to use the tooltip in the actionscript code.

The actionscript part is pretty easy, so I’m simply going to attach the code.

  1. import com.flashotaku.events.StackFlowEvent;
  2. import flash.events.MouseEvent;
  3.  
  4. // create an instance of the Tooltip
  5. var tooltip:Tooltip = new Tooltip();
  6.  
  7. myStackFlow.addEventListener(StackFlowEvent.ITEM_MOUSE_OVER, tooltipHandler);
  8. myStackFlow.addEventListener(StackFlowEvent.ITEM_MOUSE_OUT, tooltipHandler);
  9. myStackFlow.addEventListener(StackFlowEvent.ITEM_CLICK, itemClickHandler);
  10.  
  11. function itemClickHandler(event:StackFlowEvent):void
  12. {
  13.      // event.index is the index of the clicked item
  14.      // when an item is clicked, scroll to that item
  15.      myStackFlow.select(event.index);
  16. }
  17.  
  18. function tooltipHandler(event:StackFlowEvent):void
  19. {
  20.      if (event.type == StackFlowEvent.ITEM_MOUSE_OVER)
  21.      {
  22.           // event.data.title is the value of the title attribute added in the XML file
  23.           addTooltip(event.data.title);
  24.      }
  25.      else if (event.type == StackFlowEvent.ITEM_MOUSE_OUT)
  26.      {
  27.           removeTooltip();
  28.      }
  29. }
  30.  
  31. function addTooltip(myText:String):void
  32. {
  33.      // add the tooltip to the stage
  34.      addChild(tooltip);
  35.      // set the text property of the tooltipText TextField to the value of the myText parameter
  36.      tooltip.tooltipText.text = myText;
  37.      // when the mouse moves, move the tooltip
  38.      stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
  39. }
  40.  
  41. function removeTooltip():void
  42. {
  43.      // remove the listener
  44.      stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
  45.      // remove the tooltip instance from stage
  46.      removeChild(tooltip);
  47. }
  48.  
  49. function mouseMoveHandler(event:MouseEvent):void
  50. {
  51.      tooltip.x = mouseX;
  52.      tooltip.y = mouseY;
  53. }

As you can see in this tutorial and also in the previous one, it’s very easy to add extra features using the new flash components. If you have any questions feel free to ask.