actionscript-3 - マウスオーバー時の Flex Hslider ツールチップ時間

Question

こんにちは、現在、フレックスを使用してプレーヤーを設計しています。スクラバー (つまり、HSlider) でマウスオーバーしているときに時間を表示したいです。クリックするだけで機能するスライダーの変更イベントを使用します。

これは私のコードです:

<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";
}

これは、秒を時、分、秒に変換する方法の良い例です。

この質問が投稿されてから1年以上経っていることは知っていますが、これは、同じ課題を抱えている他の人に役立つかもしれないと思うほど私を助けてくれました

Answer 3

スライダーの mouseOver イベントを確認します。