Flex/AIR/AS3/Skin2009.10.30 22:57
어제 "Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자!" 라는 글을 썼었는데 오늘은 그 2탄으로 이번엔
일러스트로 Spark Skin을 만드는 법에 대해 알아보겠습니다.

Flash로 스킨을 만드는 것 보다 훨~~씬 간단하니 긴장하진 마세요 ^^;

우선 일러스트로 up, over, down, disabled 에 쓰일 버튼을 제작해 보겠습니다.
사이즈는 간단하게 100x100으로 잡고 버튼에 쓰일 스킨을 만들어 보겠습니다.

 UP  OVER  DOWN  DISABLED
 
 
 
 

위와 같이 up, over, down, disabled에 쓸 스킨을 일러스트로 그립니다.

일러스트로 해당 스킨을 그렸으면 이제 중요한 작업이 바로 만든 스킨을 FXG 파일로 저장을 해야하는데
File → Save As... 를 선택하여 파일 형식을 FXG로 선택하신 후 저장만 하시면 아주 간단하게 만드실 수 있습니다.




자 이제 스킨에 쓰일 FXG 파일들을 다 만드셨다면 Flash Builder에서 작업을 해주어야 합니다.

우선 새 프로젝트를 생성한 후 스킨을 적용할 버튼을 하나 가져다 놓습니다.


그럼 이전에 2009/10/29 - [프로그래밍/Flex / ActionScript] - Flash Builder 4 Beta2 에서 Spark Skin을 Flsah로 제작해보자! 글에서도 했던것 처럼 버튼의 Properties에서 Style 부분에 Skin 옆 연필 모양을 클릭하여 Create New Copy of Skin을 선택하여
스킨에 쓰일 ButtonSkin1.mxml 파일을 생성합니다.


ButtonSkin1.mxml 의 소스를 다음과 같이 수정합니다.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             minWidth="100" minHeight="100">

    <!-- host component -->
    <fx:Metadata>
        <![CDATA
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
     
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    
    
</s:SparkSkin>


(이 수정을 하는 이유는 연필 모양을 클릭하여 새로운 스킨을 만들기를 하면 기본 스킨의 코드가 복사되어 만들어지기 때문에 기존 Default 스킨을 사용하지 않고 저희가 제작한 FXG를 스킨으로 사용하기 위한 것입니다. 만약 초보가 아니시고 어느 정도 하시는 분이시라면 굳이 연필 모양을 클릭하시지 않고 MXML Component로 SparkSkin을 상속받아 만드셔도 상관 없습니다. 이글은 단지 아직 코드가 익숙하지 않으신 분들을 기준으로 좀 더 쉽게 만드는법을 설명드리고자 이렇게 설명드리는 것이니 양해 부탁드립니다 ^^;)

일러스트로 만든 FXG 파일들은 프로젝트의 src 폴더 밑에 skin이라는 폴더를 만들어 그곳에 넣어 둡시다.


이제 ButtonSkin1.mxml 파일에서 Design 모드로 선택합니다.


그 다음 State를 up 부분을 선택하시고


아까 만들어 놓은 스킨중 up에 해당하는 스킨을 끄집어다 가운데에 배치 시킵니다.


이런식으로 각 스킨을 up, over, down, disabled 에 해당하는 스킨들을 각 state에 배치하여 줍니다.

소스로 보신다면 아래와 같이 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             minWidth="21" minHeight="21" width="100" height="100" xmlns:skin="skin.*">

    <!-- host component -->
    <fx:Metadata>
        <![CDATA
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <skin:buttonSkinA_UP includeIn="up" x="0" y="0"/>
    <skin:buttonSkinA_OVER includeIn="over" x="0" y="0"/>
    <skin:buttonSkinA_DOWN includeIn="down" x="0" y="0"/>
    <skin:buttonSkinA_DISABLED includeIn="disabled" x="0" y="0"/>
    
</s:SparkSkin>

이제 저장을 하시고 아까 스킨을 적용시킬 버튼으로 돌아가겠습니다.


그럼 Style부분에 방금 스킨으로 만든 ButtonSkin1이라는 이름이 들어간걸 확인하실 수 있습니다.
(만약 안들어가 있다면 직접 적어줍시다;)

이제 실행 시켜서 스킨이 작 적용되나 확인해 봅시다~!

 

음~ ^ㅡ^ 잘 적용 되는 군요~ 이로써 일러스트를 이용한 Spark Skin용 FXG 만들기 완성~~
(※ 주의 사항으로 만약 일러스트에서 폰트를 사용할 경우 기본 폰트가 아닐 경우 제대로 표현되지 않을 수 있으니 Expend 시켜 사용하셔야 합니다.)

관련글
저작자 표시 비영리
신고
Posted by 코멧'★

티스토리 툴바