플렉스에서 HSlider를 사용자 정의하는 방법은 무엇입니까?

Question

내가 플렉스에 새로 온 사람, 나는 어떻게해야합니까이

처럼, HSlider 컨트롤의 이미지를 변경하려면? 나에게 간단한 예를 들어주세요.

Answer 1

사용자 정의 스킨을 만들어야합니다. 이제 HSlider는 스킨 가능 하위 구성 요소가 있다는 점에서 조금 특별합니다. 당신은 실제로 세 개의 사용자 정의 스킨을 만들어야합니다 : HSlider 컨트롤 자체에 대한

• 하나 (이 피부 툴팁 포함) 트랙
• 하나 (사진에서 노란색/갈색 영역)
• 및 하나는 엄지 손가락

트랙과 엄지 손가락은 사실 Buttons이므로이 스킨은 Button 스킨이어야합니다.

전체 프로세스를 설명하면이 답변이 너무 길고 구체적으로 작성되므로 시작하겠습니다. 거기에서 알아낼 수 있어야합니다. 또한 FlashBuilder를 IDE로 사용한다고 가정합니다.

는

가 HSlider에 skinClass 스타일을 설정하고 Alt + 스페이스를 누르 주요 피부를 만듭니다. 이렇게하면 코드 완성이 표시되지만 "Create Skin ..."을 선택할 수도 있습니다.

은을 선택하고 마법사가 나타납니다. 다음과 같이 작성하십시오. 우리는 기본 Spark HSlider 스킨의 복사본을 만들고 있습니다. 스타일러스 코드는 사용자 정의 된 스킨에서는 필요하지 않으므로 제거합니다.

는 트랙과 엄지 손가락 스킨

를 열고 새로운 피부 클래스를 생성하고 아래로 스크롤합니다. 2 개의 Button가 표시됩니다. 하나는 id가 track이고 다른 하나는 id가 thumb 인 것입니다. skinClass 스타일은이 버튼의 기본 스파크 스킨으로 설정됩니다. 내용을 삭제하고 이전 단계 (새 스킨을 만드는)의 작업을 반복 만이 시간은 이제 기본의 정확한 복사본을 가지고 HSliderTrackSkin의 복사 및 HSliderThumbSkin

편집 스킨

를 만들 HSlider 용 스킨 스킨 (스타일을 삭제 한 경우 제외). 이제 색상 변경, 모양 변경 등 Flex 그래픽에 대한 추가 정보가 필요한 경우 FXG에서 Google을 추천 해 드리겠습니다. 하지만 기본 스킨을 가지고 피들을 틀고 어디에서 벗어날 수 있는지 알아볼 수는 있습니다.

Answer 2

@RIAstar는 훌륭한 답을 제공했습니다. 그러나 약간의 문제가 있습니다 - 엄지 전에 오렌지 부분. 이처럼 스킨을 만드는 가장 쉬운 방법은 HSlider 스킨에 rect 또는 더 복잡한 그림을 추가하는 것입니다. 그러면 엄지 손가락의 x 좌표에 따라 너비가 변경됩니다.

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