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