首先自定义一个Vslider类继承spark.components.VSlider，代码如下：
<span style="font-size:18px;">package com.dtsola.base
{
import com.dtsola.log.DtsolaLogger;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.core.InteractionMode;
import mx.events.ResizeEvent;
import spark.components.Button;
import spark.components.VSlider;
[Style(name="accentColor", type="uint", format="Color", inherit="yes", theme="spark")]
[Style(name="showTrackHighlight", type="Boolean", inherit="no")]
public class VSlider extends spark.components.VSlider{
[SkinPart(required="false")]
public var trackHighLight:Button;
[Bindable]
private var _accentColor:uint;
private var accentColorChanged:Boolean;
[Bindable]
private var _showTrackHighlight:Boolean = true;
private var showTrackHighlightChanged:Boolean;
public function VSlider(){
super();
}
override protected function updateSkinDisplayList():void
{
super.updateSkinDisplayList();
if (!thumb || !track || !trackHighLight)
return;
var thumbRange:Number = track.getLayoutBoundsHeight() - thumb.getLayoutBoundsHeight();
var range:Number = maximum - minimum;
// calculate new thumb position.
var thumbPosTrackY:Number = (range > 0) ? thumbRange - (((pendingValue - minimum) / range) * thumbRange) : 0;
// convert to parent's coordinates.
var thumbPos:Point = track.localToGlobal(new Point(0, thumbPosTrackY));
var thumbPosParentY:Number = thumb.parent.globalToLocal(thumbPos).y+thumb.getLayoutBoundsHeight()/2;
trackHighLight.setLayoutBoundsPosition(trackHighLight.getLayoutBoundsX(), thumbPosParentY);
trackHighLight.setLayoutBoundsSize( trackHighLight.getLayoutBoundsWidth(), track.getLayoutBoundsHeight()-thumbPosParentY);
}
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (instance == trackHighLight)
{
trackHighLight.focusEnabled = false;
trackHighLight.addEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
// track is only clickable if in mouse interactionMode
if (getStyle("interactionMode") == InteractionMode.MOUSE){
trackHighLight.addEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
}
}
}
/**
* @private
*/
override protected function partRemoved(partName:String, instance:Object):void
{
super.partRemoved(partName, instance);
if (instance == trackHighLight)
{
trackHighLight.removeEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
trackHighLight.removeEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
}
}
/**
* @private
* Handle mouse-down events for the slider track hightlight. We
* calculate the value based on the new position and then
* move the thumb to the correct location as well as
* commit the value.
*/
protected function trackHighLight_mouseDownHandler(event:MouseEvent):void
{
this.track_mouseDownHandler(event);
}
/**
* @private
*/
private function trackHighLight_resizeHandler(event:Event):void
{
updateSkinDisplayList();
}
/**
* @private
*/
override public function styleChanged(styleProp:String):void
{
var anyStyle:Boolean = styleProp == null || styleProp == "styleName";
super.styleChanged(styleProp);
if (styleProp == "showTrackHighlight" || anyStyle)
{
showTrackHighlightChanged = true;
invalidateProperties();
}
if (styleProp == "accentColor" || anyStyle)
{
accentColorChanged = true;
invalidateProperties();
}
invalidateDisplayList();
}
override protected function commitProperties():void
{
super.commitProperties();
if (showTrackHighlightChanged)
{
this.trackHighLight.visible = this._showTrackHighlight;
showTrackHighlightChanged = false;
}
if(accentColorChanged){
this.trackHighLight.setStyle("themeColor", this.accentColor);
accentColorChanged = false;
}
}
public function set accentColor(color:uint):void
{
this._accentColor = color;
this.accentColorChanged = true;
this.invalidateProperties();
}
public function get accentColor():uint
{
return this._accentColor;
}
public function set showTrackHighlight(show:Boolean):void
{
this._showTrackHighlight = show;</span><pre name="code" class="plain"><span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!--- The default skin class for the Spark VSlider component. The thumb and track skins are defined by the
VSliderThumbSkin and VSliderTrackSkin classes, respectively.
@see spark.components.VSlider
@see spark.skins.spark.VSliderThumbSkin
@see spark.skins.spark.VSliderTrackSkin
@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" minWidth="11" alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.skins.spark.VSliderSkin")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.skins.spark.VSliderSkin;
/* Define the skin elements that should not be colorized.
For slider, the skin itself is colorized but the individual parts are not. */
static private const exclusions:Array = ["track", "thumb", "trackHighLight"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function measure() : void
{
// Temporarily move the thumb to the top of the Slider so measurement
// doesn't factor in its y position. This allows resizing the
// VSlider to less than 100px in height.
var thumbPos:Number = thumb.getLayoutBoundsY();
thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), 0);
super.measure();
thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), thumbPos);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Declarations>
<!--- The tooltip used in the mx.controls.Slider control.
To customize the DataTip's appearance, create a custom VSliderSkin class. -->
<!--<fx:Component id="dataTip">
<s:DataRenderer minHeight="24" minWidth="24" x="20">
<s:Rect top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.8"/>
</s:fill>
</s:Rect>
<s:Label id="labelDisplay" text="{data}"
horizontalCenter="0" verticalCenter="1"
left="5" right="5" top="5" bottom="5"
textAlign="center" verticalAlign="middle"
fontWeight="normal" color="white" fontSize="11">
</s:Label>
</s:DataRenderer>
</fx:Component>-->
</fx:Declarations>
<!--- The default skin class is VSliderTrackSkin.
@copy spark.components.supportClasses.TrackBase#track
@see spark.skins.spark.VSliderTrackSkin -->
<s:Button id="track" left="0" right="0" top="0" bottom="0"
width="2"
minHeight="2"
tabEnabled="false"
buttonMode="true"
skinClass="com.dtsola.component.skin.scroll.normal.VSliderTrackSkin" />
<!--- The default skin class is VSliderThumbSkin.
@copy spark.components.supportClasses.TrackBase#thumb
@see spark.skins.spark.VSliderThumbSkin -->
<s:Button id="thumb" left="-3" right="0" width="8" height="8"
tabEnabled="false"
buttonMode="true"
skinClass="com.dtsola.component.skin.scroll.normal.VSliderThumbSkin" />
<s:Button id="trackHighLight" left="0" right="0" top="0" bottom="0"
width="2"
minHeight="2"
tabEnabled="false"
buttonMode="true"
skinClass="com.dtsola.component.skin.scroll.normal.VSliderTrackHighLightSkin" />
</s:SparkSkin>
</span>showTrackHighlightChanged = true;this.invalidateProperties();}public function get showTrackHighlight():Boolean{return this._showTrackHighlight;}}}
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!--- The default skin class for the Spark VSlider component. The thumb and track skins are defined by the
VSliderThumbSkin and VSliderTrackSkin classes, respectively.
@see spark.components.VSlider
@see spark.skins.spark.VSliderThumbSkin
@see spark.skins.spark.VSliderTrackSkin
@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" minWidth="11" alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.skins.spark.VSliderSkin")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import spark.skins.spark.VSliderSkin;
/* Define the skin elements that should not be colorized.
For slider, the skin itself is colorized but the individual parts are not. */
static private const exclusions:Array = ["track", "thumb", "trackHighLight"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
/**
* @private
*/
override protected function measure() : void
{
// Temporarily move the thumb to the top of the Slider so measurement
// doesn't factor in its y position. This allows resizing the
// VSlider to less than 100px in height.
var thumbPos:Number = thumb.getLayoutBoundsY();
thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), 0);
super.measure();
thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), thumbPos);
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Declarations>
<!--- The tooltip used in the mx.controls.Slider control.
To customize the DataTip's appearance, create a custom VSliderSkin class. -->
<!--<fx:Component id="dataTip">
<s:DataRenderer minHeight="24" minWidth="24" x="20">
<s:Rect top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor color="0x000000" alpha="0.8"/>
</s:fill>
</s:Rect>
<s:Label id="labelDisplay" text="{data}"
horizontalCenter="0" verticalCenter="1"
left="5" right="5" top="5" bottom="5"
textAlign="center" verticalAlign="middle"
fontWeight="normal" color="white" fontSize="11">
</s:Label>
</s:DataRenderer>
</fx:Component>-->
</fx:Declarations>
<!--- The default skin class is VSliderTrackSkin.
@copy spark.components.supportClasses.TrackBase#track
@see spark.skins.spark.VSliderTrackSkin -->
<s:Button id="track" left="0" right="0" top="0" bottom="0"
width="2"
minHeight="2"
tabEnabled="false"
buttonMode="true"
skinClass="com.dtsola.component.skin.scroll.normal.VSliderTrackSkin" />
<!--- The default skin class is VSliderThumbSkin.
@copy spark.components.supportClasses.TrackBase#thumb
@see spark.skins.spark.VSliderThumbSkin -->
<s:Button id="thumb" left="-3" right="0" width="8" height="8"
tabEnabled="false"
buttonMode="true"
skinClass="com.dtsola.component.skin.scroll.normal.VSliderThumbSkin" />
<s:Button id="trackHighLight" left="0" right="0" top="0" bottom="0"
width="2"
minHeight="2"
tabEnabled="false"
buttonMode="true"
skinClass="com.dtsola.component.skin.scroll.normal.VSliderTrackHighLightSkin" />
</s:SparkSkin>
</span><span style="font-size:18px;">
</span>com.dtsola.component.skin.scroll.normal.VSliderTrackSkin.mxml
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!--- The default skin class for the track of a Spark VSlider component.
@see spark.components.VSlider
@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">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="down" />
<s:State name="over" />
<s:State name="disabled" />
</s:states>
<!-- fill -->
<s:Rect width="2" left="0" right="0" top="1" bottom="1" radiusX="2" radiusY="2">
<s:fill>
<s:SolidColor color="0x9196a3" alpha="1" />
</s:fill>
</s:Rect>
</s:SparkSkin>
</span>com.dtsola.component.skin.scroll.normal.VSliderThumbSkin.mxml
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!--- The default skin class for the thumb of a Spark VSlider component.
@see spark.components.VSlider
@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">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>
<s:Image width="8" height="8" source="@Embed(source='asset/imgs/room/tools/micthumb.png')" />
</s:SparkSkin>
</span>com.dtsola.component.skin.scroll.normal.VSliderTrackHighLightSkin.mxml
<span style="font-size:18px;"><?xml version="1.0" encoding="utf-8"?>
<!--
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The default skin class for the track of a Spark VSlider component.
@see spark.components.VSlider
@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">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Button")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
import com.dtsola.log.DtsolaLogger;
[Bindable]
private var highlightColor:uint;
/**
* @private
*/
override protected function initializationComplete():void{
highlightColor = this.getStyle("themeColor");
super.initializationComplete();
}
override public function styleChanged(styleProp:String):void{
super.styleChanged(styleProp);
if(styleProp == "themeColor"){
var trackHighlightColor:uint = this.getStyle("themeColor");
highlightColor = trackHighlightColor;
}
}
]]>
</fx:Script>
<s:states>
<s:State name="up" />
<s:State name="down" />
<s:State name="over" />
<s:State name="disabled" />
</s:states>
<!-- fill -->
<s:Rect width="2" left="0" right="0" top="1" bottom="1" radiusX="2" radiusY="2">
<s:fill>
<s:SolidColor color="{highlightColor}" alpha="1" />
</s:fill>
</s:Rect>
<!-- hit area -->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:fill>
<s:SolidColor alpha="0"/>
</s:fill>
</s:Rect>
</s:SparkSkin>
</span>
<span style="font-size:18px;"><base:VSlider id="micVolume"
width="2"
height="90"
x="15"
y="15"
minimum="0"
maximum="100"
snapInterval="1"
liveDragging="true"
dataTipPrecision="0"
change="onChange(event)"
value="{settingInfo.micVolume}"
accentColor="0xff9771"
showTrackHighlight="true"
skinClass="com.dtsola.component.skin.scroll.normal.VSliderSkin" /></span>
864
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
