鼠标悬停时，Flex Hslider工具提示时间

Question

嗨，目前我正在使用flex设计播放器。我希望显示鼠标悬停在擦洗器上的时间（即HSlider）。我尝试过使用 Datatip 。但这只是工作当我拖动滑块并尝试使用更改事件时，该滑块也只能点击。

这是我的代码：

<mx:HSlider id="slider" x="160" y="376" width="387" height="42"
         enabled="true"
         change="movieSeek(event)"
         mouseDown="isScrubbing=true" 
         mouseUp="isScrubbing=false" 
         showTrackHighlight="true"
showDataTip="true"                                       styleName="customHSlider"
    useHandCursor="{fpsText.text}"
    trackHighlightSkin="@Embed(source='assets/images/track.png')" />





function movieSeek(event:Event):void
    {
      if (nsPlay == null) return;
      if (doPlay.styleName=="customButton")
      { 
        nsPlay.resume();
      }     
      slider.toolTip = "time ="+slider.value;
      nsPlay.seek(slider.value);            
    }

在某些博客中，我有 mx_internal 。当鼠标覆盖它时，可以得到当前位置的值。请建议我。

我希望它像这样

Answer 1

你可以创建自定义HSlider并监听mouseMove事件，我创建了一个简单的例子，你可以自己重构和优化它，参见代码：

package classes
{
    import flash.events.MouseEvent;
    import flash.geom.Point;

    import mx.controls.HSlider;
    import mx.controls.sliderClasses.SliderDataTip;
    import mx.core.mx_internal;
    import mx.formatters.NumberFormatter;

    use namespace mx_internal;

    public class HSliderCustom extends HSlider
    {

        private var _rollOver:Boolean = false;
        private var _thumbActivity:Boolean = false;

        public function HSliderCustom()
        {
            super();
        }

        //
        //  Handlers
        //

        protected function onRollOutHandler(event:MouseEvent):void
        {
            _rollOver = false;

            destroyMovieHandler();

            if (!_thumbActivity)
            {
                if (mx_internal::dataTip)
                {
                    systemManager.toolTipChildren.removeChild(mx_internal::dataTip);
                    mx_internal::dataTip = null;
                }
            }
        }

        protected function onRollOverHandler(event:MouseEvent):void
        {
            _rollOver = true;

            addMovieHandler();
        }

        protected function onMouseMoveHandler(event:MouseEvent):void
        {
            var p:Point = new Point(event.localX, event.localY);
            var p_global:Point = event.target.localToGlobal(p);
            var p_content:Point = globalToContent(p_global);

            onRollOverTooltip(p_content.x, p_content.y);
        }

        mx_internal function addMovieHandler():void
        {
            if (!hasEventListener(MouseEvent.MOUSE_MOVE))
                addEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler, false, 0, true);
        }

        mx_internal function destroyMovieHandler():void
        {
            if (hasEventListener(MouseEvent.MOUSE_MOVE))
            {
                removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMoveHandler);
            }
        }

        //
        //  Overriden methods
        //

        override protected function childrenCreated():void
        {
            super.childrenCreated();

            addEventListener(MouseEvent.ROLL_OVER, onRollOverHandler, false, 0, true);
            addEventListener(MouseEvent.ROLL_OUT, onRollOutHandler, false, 0, true);

        }

        override mx_internal function onThumbMove(thumb:Object):void
        {
            destroyMovieHandler();

            _thumbActivity = true;

            super.mx_internal::onThumbMove( thumb );
        }

        override mx_internal function onThumbRelease(thumb:Object):void
        {
            super.mx_internal::onThumbRelease( thumb );

            if (_rollOver)
            {
                addMovieHandler();
            }

            _thumbActivity = false;
        }

        //
        //  New methods
        //

        protected function onRollOverTooltip(localX:Number, localY:Number):void
        {
            if (showDataTip)
            {

                // Setup number formatter
                var dataFormatter:NumberFormatter = new NumberFormatter();
                dataFormatter.precision = getStyle("dataTipPrecision");

                if (!mx_internal::dataTip)
                {
                    mx_internal::dataTip = SliderDataTip(new sliderDataTipClass());
                    systemManager.toolTipChildren.addChild(mx_internal::dataTip);

                    var dataTipStyleName:String = getStyle("dataTipStyleName");
                    if (dataTipStyleName)
                    {
                        mx_internal::dataTip.styleName = dataTipStyleName;
                    }
                }

                var formattedVal:String;
                if (dataTipFormatFunction != null)
                {
                    formattedVal = this.dataTipFormatFunction(
                        mx_internal::getValueFromX(localX));
                }
                else
                {
                    formattedVal = dataFormatter.format(mx_internal::getValueFromX(localX));
                }

                mx_internal::dataTip.text = formattedVal;

                mx_internal::dataTip.validateNow();
                mx_internal::dataTip.setActualSize(mx_internal::dataTip.getExplicitOrMeasuredWidth(),mx_internal::dataTip.getExplicitOrMeasuredHeight());
                //mx_internal::positionDataTip(thumb);
            }
            mx_internal::keyInteraction = false;

            /*
            var event:SliderEvent = new SliderEvent(SliderEvent.THUMB_PRESS);
            event.value = getValueFromX(thumb.xPosition);;
            event.thumbIndex = thumb.thumbIndex;
            dispatchEvent(event);
            */

            var o:Point = new Point(localX, localY);
            var r:Point = localToGlobal(o);
            r = mx_internal::dataTip.parent.globalToLocal(r);

            mx_internal::dataTip.x = r.x < 0 ? 0 : r.x - mx_internal::dataTip.width/2;
            mx_internal::dataTip.y = y - mx_internal::dataTip.height;
        }
    }
}

Answer 2

检查滑块上的mouseOver事件。

Answer 3

检查dataTipFormatFunction

mySlider.dataTipFormatFunction = function(value:Number):String { 
    return formatTime(value); 
}

private function formatTime(value:Number) {
    return "00:00";
}

Here is a great example如何将秒数转换为小时，分钟和秒。

我知道自这个问题发布以来已经过了一年多了，但这对我有所帮助，我认为这可能对那些有同样挑战的人有所帮助 < / p>