Come personalizzare un HSlider in flex?

Question

Sono nuovo a flettere, e voglio cambiare l'immagine di HSlider, come questo

Cosa devo fare? Per favore mi dia un semplice esempio.

Answer 1

Dovrete creare una skin personalizzata. Ora, HSlider è un po 'speciale in quanto ha alcuni sottocomponenti che sono anche personalizzabili. Ci troveremo necessario creare tre skin personalizzate:

• uno per il HSlider sé (questa pelle include il tooltip)
• uno per la traccia (il/zona marrone giallo nella foto)
• e uno per il pollice

La traccia e il pollice sono entrambi pulsanti in modo che quelle skin debbano essere skin di Button.

Spiegando l'intero processo renderà questa risposta troppo lungo e specifico, quindi mi limiterò a iniziare. Dovresti essere in grado di capirlo da lì. Immagino anche che tu stia utilizzando FlashBuilder come IDE.

creare skin principale

impostare lo stile skinClass su un HSlider e premere Alt + Spazio. Questo porterà al completamento del codice, ma puoi anche selezionare "Crea skin ...".

SELECT che e apparirà una procedura guidata. Compila qualcosa come il seguente. Tieni presente che stiamo creando una copia della skin di Spark HSlider predefinita. Rimuoviamo il codice di stile perché non sarà necessario in uno skin personalizzato.

Creare pista e pollice pelli

aprire questa nuova classe pelle e scorrere verso il basso. Vedrai due Button s; uno con id track e uno con id thumb. Il loro stile skinClass è impostato sulle skin spark predefinite per questi pulsanti. Eliminare il contenuto e ripetere l'operazione del passo precedente (la creazione di una nuova pelle), solo che questa volta creare una copia di HSliderTrackSkin e HSliderThumbSkin

Modifica le bucce

Ora avete una copia esatta di quello predefinito Spark pelli per HSlider (tranne che hai rimosso lo styling). Ora si può iniziare la modifica: colori cangianti, le forme mutevoli, ecc Se avete bisogno di più informazioni sulla grafica Flex, vi suggerisco di google su FXG. Ma puoi semplicemente provare a giocherellare con le skin predefinite e vedere dove puoi ottenere anche tu.

Answer 2

@RIAstar ha avuto una grande risposta. Ma c'è un piccolo problema: questa parte arancione prima del pollice. AFAIK il modo più semplice per creare pelle come questo è di aggiungere figura rect o più complicata pelle HSlider, che cambierà la sua larghezza secondo x pollice coordinata, cioè

<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" />