Apache flex Flex 4：如何对spark volumebar进行蒙皮，使其像滑翔机一样工作？

有人能给我指一下给视频播放器volumebar剥皮的方向吗？我希望在左侧有一个静音按钮，然后在右侧有一个始终打开的滑动按钮（没有弹出窗口）

我已经设法改变了皮肤使用自定义轨迹按钮和自定义拇指按钮，它主要看起来像我想要的

我似乎不知道如何让拇指水平滑过轨道，以及如何将其挂在视频播放器上。拇指只是上下摆动了一下

---

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

我也找不到一个很好的解决方案，所以我只使用旋转=90到volumebar，旋转=-90到需要在volumebarskin内部旋转的位置

我今天也遇到了同样的问题，发现解决方案是重新实现

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>

/** 
*@copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent（“grammit.media.HorizontalVolumeBar”）]
/*定义不应着色的蒙皮元素*/
静态私有常量排除：数组=[“muteButton”、“track”、“thumb”]；
/**
*@私人
*/
重写公共函数get colorizeExclusions（）：数组{return exclusions；}
/**
*@私人
*/
重写受保护的函数initializationComplete（）：void
{
useChromeColor=true；
super.initializationComplete（）；
}

我也一直在尝试这样做。当我这样做的时候，我会得到很多覆盖错误。你最终是怎么做到的？