Felx4 Custom ToolTips

花了N久的时间终于完成了ToolTips的学习，看似简单的东西自己却弄了好久好久。

下面把经验和大家分享一下：

 

1·创建两个监听函数去监听 toolTipCreate 和 toolTipShow

 

在 toolTipCreate  把Flex原来创建好的ToolTips丢掉，换成你自己New出来的新ToolTips

 

并且在toolTipShow中将ToolTips移动到你需要的位置上面去。

 

其实这种做法是很2的行为（见Forums），不过我研究了一下Flex4目前的代码结构，发现除了这样 没有别的方法了。

 

入口文件

MXML语言:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo"
               minWidth="1024"
               minHeight="768"
               width="344"
               height="346"
               backgroundColor="#1EBFE2">
    <fx:Script>
        <![CDATA[
            import gametips.AnimationGameToolTips;

            import mx.core.UIComponent;
            import mx.events.ToolTipEvent;

            protected function button1_toolTipCreateHandler(event : ToolTipEvent) : void
            {
                var gameNormalToolTips : AnimationGameToolTips = new AnimationGameToolTips();
                event.toolTip = gameNormalToolTips;
            }

            protected function button1_toolTipShowHandler(event : ToolTipEvent) : void
            {
                (event.toolTip as AnimationGameToolTips).setToolTipsPosition(event.target as UIComponent);
            }
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Button x="133"
              y="325"
              label="TestButton"
              toolTip="{inPutText.text}"
              toolTipCreate="button1_toolTipCreateHandler(event)"
              toolTipShow="button1_toolTipShowHandler(event)"/>
    <s:Label x="0"
             y="4"
             text="Put The Tips Value in TestArae"
             width="208"
             height="15"/>
    <s:TextArea id="inPutText"
                x="-1"
                y="20"
                text="Power by Tunied&#xd;Any Issue please Leave Message at&#xd;http://tunied.cz.cc&#xd;"
                editable="true"
                enabled="true"
                contentBackgroundColor="#9679EB"
                height="101"
                width="226"/>
</s:Application>

 

ToolTips文件：

ActionScript 3语言:

package gametips
{
    import flash.geom.Point;
    import flash.text.TextField;

    import mx.core.IToolTip;
    import mx.core.UIComponent;

    public class AnimationGameToolTips extends UIComponent implements IToolTip
    {
        private var animation : GameToolTipsAnimation;

        public function AnimationGameToolTips()
        {
            animation = new GameToolTipsAnimation();
            this.addChild(animation);
            super();
        }

        public function get text() : String
        {
            return animation.mc.textMc.text;
        }

        public function set text(value : String) : void
        {
            /*
                Fist Need to set the animation to the last frame ,beacuse in current demo
                only the last frames have the normal width/height.
            */
            animation.gotoAndStop(animation.totalFrames);
            var textMc : TextField = animation.mc.textMc;
            textMc.text = value;
            textMc.width = textMc.textWidth + 10;
            textMc.height = textMc.textHeight + 10;

            animation.mc.panel.width = textMc.width + 10;
            animation.mc.panel.height = textMc.height + 30;
            /*
                in the demo res, the arrow pos have been locate to the (0,0) but the textFiled start position
                will be change after the class change the width/height .
            */
            var arrowPosition : Point = animation.mc.panel.localToGlobal(new Point(animation.mc.panel.arrowPos.x , animation.mc.panel.arrowPos.y));
            textMc.x = arrowPosition.x;
            textMc.y = arrowPosition.y;
            animation.mc.panel.arrowPos.visible = false;
            animation.gotoAndPlay(1);
        }

        public function setToolTipsPosition(_target : UIComponent) : void
        {
            this.x = _target.x + (_target.width >> 1);
            this.y = _target.y - 5;
        }
       
        /**
         * The ToolManager will use this function to move the current tooltips
         * to the the target position , but the cusstom tooltips can't move by ToolManger
         * so not need to implement this function do the extra work
         */       
        override public function move(x : Number , y : Number) : void
        {
        }

    }
}

 

其中比较讨巧的地方，一个是在SetText之前先播放到最后一帧，第二个就是localToGlobal函数的使用。

 

 

Demo