Flex 4: Как убрать искры громкости, чтобы она работала как HSlider? - PullRequest
Новая
       13

Flex 4: Как убрать искры громкости, чтобы она работала как HSlider?

1 голос
/ 29 апреля 2010

Может кто-нибудь направить меня в сторону скининга панели громкости видеоплеера? Мне нужна кнопка отключения звука слева и затем HSlider справа, который всегда открыт (без всплывающих окон).

Мне удалось изменить обложку, чтобы использовать настраиваемую кнопку трека и настраиваемую кнопку большого пальца, и в большинстве случаев она выглядит так, как я хочу.

Я не могу понять, как заставить большой палец скользить горизонтально по дорожке и как подключить его к видеоплееру. Большой палец немного покачивается вверх и вниз.

Я понимаю, что могу создать отдельный HSlider и кнопку, а затем прикрепить их к элементам управления видеоплеера, я просто надеялся, что функциональность уже встроена, что я могу переопределить несколько оболочек и покончить с этим.

Ответы [ 2 ]

4 голосов
/ 11 марта 2011

У меня была такая же проблема сегодня, и я обнаружил, что решение было переопределить VolumeBar extends VSlider, чтобы HVolumeBar extends HSlider затем изменило updateSkinDisplayList(), чтобы положение большого пальца работало правильно. Я попробовал подход вращения без успеха. Я тоже немного поиграл со скинами. 

override protected function updateSkinDisplayList():void
{
    if (!thumb || !track)
        return;

    var thumbRange:Number = track.getLayoutBoundsWidth() - thumb.getLayoutBoundsWidth();
    var range:Number = maximum - minimum;

    // calculate new thumb position.
    var thumbPosTrackX:Number;

    // if muted, it's 0.  otherwise, calculate it normally
    // TODO (rfrishbe): should probably use setValue(0) and listen for CHANGE on the VideoPlayer 
    // instead of VALUE_COMMIT.
    if (!muted)
        thumbPosTrackX = (range > 0) ? (((pendingValue - minimum) / range) * thumbRange) : 0;
    else
        thumbPosTrackX = thumbRange;

    // convert to parent's coordinates.
    var thumbPos:Point = track.localToGlobal(new Point(thumbPosTrackX,0));

    var thumbPosParentX:Number = thumb.parent.globalToLocal(thumbPos).x;

    thumb.setLayoutBoundsPosition(Math.round(thumbPosParentX), thumb.getLayoutBoundsY() );
}

Редактировать: Горизонтальная панель громкости кожи 

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="11" alpha.disabled=".5">
    <!-- host component -->
    <fx:Metadata>
        /** 
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        */
        [HostComponent("grammit.media.HorizontalVolumeBar")]
    </fx:Metadata>

    <fx:Script fb:purpose="styling">
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["muteButton", "track", "thumb"];

        /**
         * @private
         */
        override public function get colorizeExclusions():Array {return exclusions;}

        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>

    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>

    <!--- The PopUpAnchor control that contains the drop-down slider control. -->
    <s:PopUpAnchor id="popup"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
                   left="0" right="0" top="0" bottom="0" popUpPosition="left" itemDestructionPolicy="auto">

        <!--- @copy spark.components.mediaClasses.VolumeBar#dropDown -->
        <s:Group id="dropDown" width="84" height="28" verticalCenter="0">

            <!-- dropshadow for the dropdown -->
            <s:Rect left="0" top="0" right="0" bottom="0">
                <s:filters>
                    <s:DropShadowFilter knockout="true" blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" />   
                </s:filters>    
                <s:fill>    
                    <s:SolidColor color="0x000000" />   
                </s:fill>   
            </s:Rect>

            <!-- background for the popup -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xFFFFFF"/>
                        <s:GradientEntry color="0xDCDCDC"/>
                    </s:LinearGradient>
                </s:fill>
                <s:stroke>
                    <s:SolidColorStroke color="0x000000" />
                </s:stroke>
            </s:Rect>

            <!--- The skin pat that defines the drop-down slider track.  -->
            <s:Button id="track" verticalCenter="0" left="6" right="7"  minWidth="33" width="100" 
                      skinClass="grammit.skins.HorizontalVolumeBarTrackSkin" />

            <!--- The skin pat that defines the thumb in the drop-down slider track.  -->
            <s:Button id="thumb" verticalCenter="0" width="11" height="11"
                      skinClass="spark.skins.spark.mediaClasses.normal.VolumeBarThumbSkin" />
        </s:Group>
    </s:PopUpAnchor>

    <!--- @copy spark.components.mediaClasses.VolumeBar#muteButton -->
    <s:MuteButton id="muteButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
                  skinClass="spark.skins.spark.mediaClasses.normal.MuteButtonSkin" />
</s:SparkSkin>
1 голос
/ 08 сентября 2010

Я тоже не смог найти хорошего решения для этого, поэтому я просто использовал вращение = 90 для громкости и вращение = -90 для того, что когда-либо нужно было вращать обратно в оболочку тома.

...