¿Cómo personalizar un HSlider en flex?

Question

Soy nuevo a la flexión, y quiero cambiar la imagen de HSlider, como este

¿Qué debo hacer? Por favor, dame un ejemplo sencillo.

Answer 1

Deberá crear una máscara personalizada. Ahora, HSlider es un poco especial ya que tiene algunos subcomponentes que también son personalizables. Usted realmente tiene que crear tres skins personalizados:

• uno para el propio HSlider (esto incluye la descripción de la piel)
• uno para la pista (la zona amarilla/marrón en la imagen)
• y uno para el pulgar

La pista y el pulgar son, de hecho, botones, por lo que esas máscaras tendrán que ser máscaras de botones.

Explicar todo el proceso hará que esta respuesta sea demasiado larga y específica, así que solo voy a comenzar. Deberías ser capaz de resolverlo desde allí. También asumiré que estás usando FlashBuilder como un IDE.

crear una piel principal

establecer el estilo skinClass en una HSlider y pulsar Alt + Espacio. Esto mostrará la finalización del código, pero también puede seleccionar "Crear máscara ...".

Seleccione eso y aparecerá un asistente. Complete algo como lo siguiente. Tenga en cuenta que estamos haciendo una copia de la máscara Spark HSlider predeterminada. Eliminamos el código de estilo porque no será necesario en un diseño personalizado.

Crear pista y el pulgar pieles

Abrir esta nueva clase de piel y baje hasta la parte inferior. Verá dos Button s; uno con id track y otro con id thumb. Su estilo skinClass está configurado en las máscaras de chispa predeterminadas para estos botones. Eliminar el contenido y repetir la operación del paso anterior (la creación de una nueva piel), sólo que esta vez crear una copia de HSliderTrackSkin y HSliderThumbSkin

editar los aspectos

Ahora tiene una copia exacta del defecto Motos de chispa para HSlider (excepto que eliminaste el estilo). Ahora puede comenzar a editar: cambiar colores, cambiar formas, etc. Si necesita más información acerca de los gráficos Flex, le sugiero que busque Google en FXG. Pero puedes tratar de jugar con las máscaras predeterminadas y ver dónde puedes obtenerlas también.

Answer 2

@RIAstar tuvo una gran respuesta. Pero hay un pequeño problema: esta parte naranja antes del pulgar. AFAIK la forma más fácil de crear una máscara como esta es agregar una figura recta o más complicada en la piel de HSlider, que cambiará su ancho de acuerdo con la coordenada x del pulgar, es decir

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100" 
      tabEnabled="false" 
      skinClass="spark.skins.spark.HSliderTrackSkin" /> 

<s:Rect width="{thumb.x + thumb.width/2}" height="{track.height}"> 
    <s:fill> 
     <s:SolidColor color="0x00FF00" /> 
    </s:fill> 
</s:Rect> 

<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
      tabEnabled="false" 
      skinClass="spark.skins.spark.HSliderThumbSkin" />