스킨

구성 요소의 모양은 외곽선, 채움 색상, 아이콘 등과 같은 그래픽 요소로 구성되며 심지어 다른 구성 요소로 구성되는 경우도 있습니다. 예를 들어, ComboBox는 List 구성 요소를 포함하고 List 구성 요소는 ScrollBar를 포함합니다. 이러한 그래픽 요소가 모여 ComboBox의 모양을 만듭니다. 그러나 구성 요소의 모양은 구성 요소의 현재 상태에 따라 변합니다. 예를 들어, 레이블이 없는 CheckBox는 응용 프로그램에서 다음과 비슷한 모양으로 표시됩니다.

일반적인 업 상태의 CheckBox
일반적인 업 상태의 CheckBox

CheckBox 위에서 마우스 버튼을 클릭한 채로 있으면 모양이 다음과 같이 변합니다.

다운 상태의 CheckBox
다운 상태의 CheckBox

마우스 버튼을 놓으면 CheckBox가 원래 모양으로 돌아가지만 선택되었음을 나타내는 체크 표시가 나타납니다.

선택 상태의 CheckBox
선택 상태의 CheckBox

다양한 상태의 구성 요소를 나타내는 아이콘을 통칭하여 스킨 이라고 합니다. Flash의 다른 심볼과 마찬가지로 어느 상태의 구성 요소든 Flash에서 해당 스킨을 편집하여 모양을 변경할 수 있습니다. 구성 요소 스킨은 두 가지 방법으로 액세스할 수 있습니다. 가장 쉬운 방법은 구성 요소를 스테이지로 드래그하고 두 번 클릭하는 것입니다. 그러면 구성 요소 스킨의 팔레트가 열립니다. 다음은 CheckBox의 스킨 팔레트입니다.

CheckBox의 스킨

[라이브러리] 패널에서 개별적으로 구성 요소 스킨에 액세스할 수도 있습니다. 스테이지로 구성 요소를 드래그하면 구성 요소와 함께 구성 요소의 에셋 폴더와 구성 요소에 포함된 다른 구성 요소가 라이브러리에 복사됩니다. 예를 들어, ComboBox를 스테이지로 드래그하면 [라이브러리] 패널에는 ComboBox를 구성하는 List, ScrollBar 및 TextInput 구성 요소를 비롯하여 이러한 구성 요소 각각의 스킨 폴더와 이러한 구성 요소의 공유 요소가 들어 있는 Shared Assets 폴더가 포함됩니다. 이러한 구성 요소의 스킨을 편집하려면 해당 스킨 폴더(ComboBoxSkins, ListSkins, ScrollBarSkins 또는 TextInputSkins)를 열고 편집하려는 스킨의 아이콘을 두 번 클릭합니다. 예를 들어, ComboBox_downSkin을 두 번 클릭하면 다음 그림과 같이 스킨이 심볼 편집 모드로 열립니다.

심볼 편집 모드의 ComboBox_downSkin
ComboBox_downSkin

새 스킨 만들기

문서에 있는 구성 요소의 모양을 새로 만들려면 구성 요소의 스킨을 편집하여 모양을 변경합니다. 구성 요소의 스킨에 액세스하려면 스테이지에서 구성 요소를 두 번 클릭하여 해당 스킨 팔레트를 엽니다. 그런 다음 편집하려는 스킨을 두 번 클릭하여 심볼 편집 모드로 엽니다. 예를 들어, 스테이지에서 TextArea 구성 요소를 두 번 클릭하여 에셋을 심볼 편집 모드로 엽니다. 그리고 나서 확대/축소 컨트롤을 400% 또는 원하는 경우 그 이상으로 설정하고 심볼을 편집하여 모양을 변경합니다. 작업을 완료하면 문서에 있는 구성 요소의 모든 인스턴스에 변경 내용이 적용됩니다. 다른 방법은 [라이브러리] 패널에서 특정 스킨을 두 번 클릭하여 스테이지에서 심볼 편집 모드로 여는 것입니다.

다음과 같은 방법으로 구성 요소 스킨을 수정할 수 있습니다.

  • 모든 인스턴스에 대해 새 스킨을 만듭니다.

  • 일부 인스턴스에 대해 새 스킨을 만듭니다.

모든 인스턴스에 대한 스킨 만들기

구성 요소의 스킨을 편집하면 기본적으로 문서에 있는 해당 구성 요소의 모든 인스턴스 모양이 변경됩니다. 동일한 구성 요소에 여러 가지 서로 다른 모양을 만들려면 변경하려는 스킨을 복제해서 각기 다른 이름을 지정하고 편집한 다음 적절한 스타일을 설정하여 적용해야 합니다. 자세한 내용은 일부 인스턴스에 대한 스킨 만들기 를 참조하십시오.

이 장에서는 각 UI 구성 요소마다 하나 이상의 스킨을 변경하는 방법에 대해 설명합니다. 이러한 절차 중 하나에 따라 UI 구성 요소의 스킨을 변경하면 문서에서 모든 인스턴스에 대해 스킨이 변경됩니다.

일부 인스턴스에 대한 스킨 만들기

다음과 같은 일반적인 절차에 따라 구성 요소의 일부 인스턴스에 대한 스킨을 만들 수 있습니다.

  • [라이브러리] 패널에서 구성 요소의 Assets 폴더에 있는 스킨을 선택합니다.

  • 스킨을 복제하고 고유한 클래스 이름을 지정합니다.

  • 스킨을 원하는 모양으로 편집합니다.

  • 구성 요소 인스턴스의 setStyle() 메서드를 호출하여 스킨 스타일에 새 스킨을 지정합니다.

다음 절차에서는 두 Button 인스턴스 중 하나에 새 selectedDownSkin을 만듭니다.

  1. 새 Flash 파일(ActionScript 3.0) 문서를 만듭니다.

  2. [구성 요소] 패널에서 Button 두 개를 스테이지로 드래그하고 인스턴스 이름을 aButton 및 bButton 으로 지정합니다.

  3. [라이브러리] 패널을 열고 그 안의 Component Assets 폴더와 ButtonSkins 폴더를 엽니다.

  4. selectedDownSkin 스킨을 클릭하여 선택합니다.

  5. 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열고 [복제]를 선택합니다.

  6. [심볼 복제] 대화 상자에서 새 스킨에 고유한 이름(예: Button_mySelectedDownSkin )을 지정합니다. 그런 다음 [확인]을 클릭합니다.

  7. [라이브러리] > Component Assets 폴더 > ButtonSkins 폴더에서 Button_mySelectedDownSkin을 선택하고 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 엽니다. [링크]를 선택하여 [링크 속성] 대화 상자를 엽니다.

  8. [ActionScript에 내보내기] 체크 상자를 클릭합니다. [첫 프레임으로 내보내기] 체크 상자는 선택된 상태로 두고 클래스 이름이 고유한지 확인합니다. [확인]을 클릭하고, 클래스 정의를 찾을 수 없어 새로 만든다는 경고가 나타나면 [확인]을 다시 클릭합니다.

  9. [라이브러리] 패널에서 Button_mySelectedDownSkin 스킨을 두 번 클릭하여 심볼 편집 모드로 엽니다.

  10. 스킨 중앙에 있는 파랑 채움 색상을 클릭하여 속성 관리자의 [채움 색상] 선택기에 해당 색상을 표시합니다. 색상 선택기를 클릭하고 스킨 채움 색상으로 #00CC00을 선택합니다.

  11. 스테이지 위의 편집 막대 왼쪽에 있는 [뒤로] 버튼을 클릭하여 문서 편집 모드로 돌아갑니다.

  12. 속성 관리자에서 각 버튼의 [매개 변수] 탭을 클릭하고 toggle 매개 변수를 true 로 설정합니다.

  13. 타임라인의 프레임 1에서 다음 코드를 [액션] 패널에 추가합니다. 

    bButton.setStyle("selectedDownSkin", Button_mySelectedDownSkin); 
bButton.setStyle("downSkin", Button_mySelectedDownSkin);

  14. [컨트롤] > [무비 테스트]를 선택합니다.

  15. 각 버튼을 클릭합니다. bButton 객체의 다운 스킨(selected 및 unselected)에 새 스킨 심볼이 사용되는지 확인합니다.