Question

有人能指出我为视频播放器音量栏设置皮肤的方向吗？我想要一个左侧的静音按钮，然后是一个始终打开的HSlider（没有弹出窗口）。

我已经设法更改皮肤以使用自定义轨道按钮和自定义拇指按钮，它主要看起来我想要的。

我似乎无法弄清楚如何让拇指在轨道上水平滑动以及如何将其挂在视频播放器中。拇指上下摆动一点点。

我意识到我可以制作一个单独的HSlider和按钮，然后将它们附加到视频播放器控件，我只是希望因为功能已经内置，我可以覆盖一些皮肤并完成它。

Answer 1

我今天遇到了同样的问题，发现解决方案是重新实现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>

Answer 2

我无法找到一个好的解决方案，所以我只使用了旋转= 90到音量栏，旋转= -90到需要在体积标准内旋转回来的东西。

Flex 4：如何设置火花音量标签以使其像HSlider一样工作？

2 个答案: