actionscript-3 - 鼠标悬停时的 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

检查dataTipFormatFunction

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

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

这是一个很好的例子，说明如何将秒转换为小时、分钟和秒。

我知道这个问题发布已经一年多了，但这对我有所帮助，我认为这可能对面临同样挑战的其他人有所帮助

Answer 3

检查滑块上的 mouseOver 事件。