<?xml version="1.0" encoding="utf-8"?>
<!--- The default skin class for the mute button of a Spark VideoPlayer component
in the normal skin state. The normal skin state means the component is not in
one of the <code>fullScreen</code> skin states.
@see spark.components.VideoPlayer
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<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" creationComplete="init()"
alpha.disabled="0.5">
<fx:Metadata>
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.mediaClasses.MuteButton")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.components.mediaClasses.VolumeBar;
private function init():void
{
volume = hostComponent.muted ? 0 : hostComponent.volume;
hostComponent.addEventListener(FlexEvent.VALUE_COMMIT, valueCommitHandler);
hostComponent.addEventListener(FlexEvent.MUTED_CHANGE, valueCommitHandler);
}
private function valueCommitHandler(event:Event):void
{
volume = hostComponent.muted ? 0 : hostComponent.volume;
}
private var _volume:Number = 1;
/**
* The volume of the video player, specified as a value between 0 and 1.
*/
public function get volume():Number
{
return _volume;
}
public function set volume(value:Number):void
{
if (value == _volume)
return;
_volume = value;
var bar1:Array = [bar1_1, bar1_2, bar1_3]; var bar2:Array = [bar2_1, bar2_2, bar2_3]; var bar3:Array = [bar3_1, bar3_2, bar3_3]; var bar4:Array = [bar4_1, bar4_2, bar4_3]; var bars:Array = [bar1, bar2, bar3, bar4];
var curValue:Number = 0;
for (var i:int = 0; i < bars.length; i++)
{
if (value <= curValue)
setAlphaTo(bars[i], 0);
else if (value >= (curValue + 0.25))
setAlphaTo(bars[i], 1);
else
setAlphaTo(bars[i], (value-curValue)*4);
curValue += 0.25;
}
}
private function setAlphaTo(bar:Array, alpha:Number):void
{
for (var i:int = 0; i < bar.length; i++)
{
bar[i].alpha = alpha;
}
}
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" stateGroups="overStates" />
<s:State name="down" stateGroups="downStates" />
<s:State name="disabled" stateGroups="disabledStates" />
<s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
<s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
<s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
<s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
</s:states>
<s:Rect id="fill"
left="1"
right="1"
top="1"
bottom="1"
bottomRightRadiusX="15"
topRightRadiusX="15">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
color.selectedUpStates="0xBBBDBD"
color.overStates="0xBBBDBD"
color.downStates="0xAAAAAA"
alpha="0.85"
alpha.overAndSelected="1" />
<s:GradientEntry color="0xD8D8D8"
color.selectedUpStates="0x9FA0A1"
color.over="0x9FA0A1"
color.overAndSelected="0x8E8F90"
color.downStates="0x929496"
alpha="0.85"
alpha.overAndSelected="1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!--- @private -->
<s:Rect id="highlight"
excludeFrom="down"
left="1"
right="1"
top="1"
bottom="1"
bottomRightRadiusX="15"
topRightRadiusX="15">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF"
ratio="0.0"
alpha="0.33"
alpha.selectedUpStates="0.22"
alpha.overStates="0.22"
alpha.downStates="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48"
alpha="0.33"
alpha.selectedUpStates="0.22"
alpha.overStates="0.22"
alpha.downStates="0.12"/>
<s:GradientEntry color="0xFFFFFF"
ratio="0.48001"
alpha="0" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!--- @private -->
<s:Rect id="border"
left="0"
right="0"
top="0"
bottom="0"
width="69"
height="20"
bottomRightRadiusX="15"
topRightRadiusX="15">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0x000000"
alpha="0.5625"
alpha.down="0.6375"
alpha.selectedStates="0.6375" />
<s:GradientEntry color="0x000000"
alpha="0.75"
alpha.down="0.85"
alpha.selectedStates="0.85" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<!--- Defines the volume symbol. -->
<s:Group horizontalCenter="0" verticalCenter="0" id="volumeSymbol">
<s:Path winding="evenOdd" data="M 9 13 L 9 0 L 4 4 L 4 9 L 9 13 Z">
<s:fill>
<!--- @private -->
<s:SolidColor color="0x212121" alpha=".85" id="trapezoid1"/>
</s:fill>
</s:Path>
<s:Path winding="evenOdd" data="M 3 9 L 3 4 L 0 5 L 0 8 L 3 9 Z">
<s:fill>
<!--- @private -->
<s:SolidColor color="0x212121" alpha=".75" id="trapezoid2"/>
</s:fill>
</s:Path>
<s:Line yFrom="0" yTo="12" x="16">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<!--- @private -->
<s:GradientEntry color="0x272727" ratio=".1" id="bar4_1" />
<!--- @private -->
<s:GradientEntry color="0x3D3D3D" ratio=".2" id="bar4_2" />
<!--- @private -->
<s:GradientEntry color="0x484848" ratio=".3" id="bar4_3" />
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
<s:Line yFrom="2" yTo="10" x="14">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<!--- @private -->
<s:GradientEntry color="0x272727" ratio=".1" id="bar3_1" />
<!--- @private -->
<s:GradientEntry color="0x3D3D3D" ratio=".2" id="bar3_2" />
<!--- @private -->
<s:GradientEntry color="0x484848" ratio=".3" id="bar3_3" />
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
<s:Line yFrom="3" yTo="9" x="12">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<!--- @private -->
<s:GradientEntry color="0x272727" ratio=".1" id="bar2_1" />
<!--- @private -->
<s:GradientEntry color="0x3D3D3D" ratio=".2" id="bar2_2" />
<!--- @private -->
<s:GradientEntry color="0x484848" ratio=".3" id="bar2_3" />
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
<s:Line yFrom="5" yTo="7" x="10">
<s:stroke>
<s:LinearGradientStroke rotation="90">
<!--- @private -->
<s:GradientEntry color="0x272727" ratio=".1" id="bar1_1" />
<!--- @private -->
<s:GradientEntry color="0x3D3D3D" ratio=".2" id="bar1_2" />
<!--- @private -->
<s:GradientEntry color="0x484848" ratio=".3" id="bar1_3" />
</s:LinearGradientStroke>
</s:stroke>
</s:Line>
</s:Group>
</s:SparkSkin>