Wie gestalte ich einen HSlider im Flex?

Sie müssen eine benutzerdefinierte Skin erstellen. Nun, HSlider ist ein bisschen etwas Besonderes, da es einige Unterkomponenten hat, die auch skinfähig sind. Sie müssen tatsächlich drei benutzerdefinierte Skins erstellen:

• eine für den HSlider selbst (diese Skin enthält den Tooltip)
• eine für die Spur (die gelbe / braune Zone in Ihrem Bild)
• und eins für den Daumen

Der Track und der Daumen sind beide Buttons, also müssen diese Skins Button-Skins sein.

Wenn Sie den gesamten Prozess erklären, wird diese Antwort zu langwierig und spezifisch sein, also werde ich Sie einfach weitermachen. Sie sollten in der Lage sein, es von dort herauszufinden. Ich nehme auch an, dass Sie FlashBuilder als IDE verwenden.

Erstellen Sie Haupt-Skin

Setzen Sie den skinClass Stil auf ein HSlider und drücken Sie Alt + Leertaste. Dadurch wird die Code-Vervollständigung angezeigt, aber Sie können auch "Create Skin ..." auswählen.

Wählen Sie das aus, und ein Assistent wird angezeigt. Füllen Sie etwas wie folgt aus. Beachten Sie, dass wir eine Kopie der standardmäßigen Spark HSlider-Skin erstellen. Wir entfernen den Styling-Code, da dies in einer solchen angepassten Skin nicht notwendig ist.

Erstellen Sie Track- und Thumb-Skins

Öffnen Sie diese neue Skinklasse und scrollen Sie nach unten. Sie sehen zwei Button s; eine mit der ID track und eine mit der ID thumb . Ihr skinClass-Stil ist auf die Standard-Spark-Skins für diese Schaltflächen eingestellt. Löschen Sie den Inhalt und wiederholen Sie den Vorgang des vorherigen Schritts (Erstellen eines neuen Skins), erstellen Sie nur eine Kopie von HSliderTrackSkin und HSliderThumbSkin

Bearbeiten Sie die Skins

Sie haben jetzt eine exakte Kopie der Standard-Spark-Skins für HSlider (außer Sie haben das Styling entfernt). Jetzt können Sie mit der Bearbeitung beginnen: Farben ändern, Formen ändern usw. Wenn Sie weitere Informationen zu Flex-Grafiken benötigen, empfehle ich Ihnen, Google auf FXG zu nutzen. Aber Sie können einfach versuchen, sich mit den Standard-Skins herumzuärgern und sehen, wo Sie auch hinkommen.

@RIAstar hatte eine großartige Antwort. Aber es gibt ein kleines Problem - dieser orange Teil vor dem Daumen. AFAIK Der einfachste Weg, um eine Haut wie diese zu erstellen, ist das Hinzufügen einer reellen oder komplizierteren Figur in der HSlider-Haut, die ihre Breite entsprechend der x-Koordinate des Daumens ändert, d. H.