[SWC] Button Skin 만들기

간단하게 Skin을 SWC로 만들기!!

Adobe Illustrator를 이용해 버튼을 그린 다음 Adobe Flash로 불러온다.
(간단하게 Ctrl+C, Ctrl+V해도 된다.)

*** Skin을 만들때 가장 중요한 부분..!!
스킨으로 만들 오브젝트를 선택해서 무비클립(단축키 F8)으로 만든다.

1. Name을 적는다.
2. 중심점은(Registration) 반드시 왼쪽상단으로 0,0 맞춰준다.
3. Export for ActionScript 체크
4. Class에 위에 적은 Name과 동일하게 적어준다.
Flex에서 Class에 써놓은 이름으로 불러오기 때문에 아주 중요함.
5. Enable guides for 9-slice scaling 체크

다됐다 이제 OK!

Enable guides for 9-slice scaling 체크를 하면 저런 그리드가 생기는데
버튼 모서리의 라운드된 부분이 늘어나지 않게 하기위함이다.

Publish Settings 에서 Export SWC 체크

Flash 상단에 Commands > Convert Symbol to Flex Compont
(Convert Symbol to Flex Compont 메뉴가 없다면Adobe에서 FlexComponentKit.mxp을 다운받아야함.)

위에 까지 하고나면 라이브러리에 FlexComponentBase 라는게 나타난다.
이제 저장 하면 test_btn.fla, test_btn.swf, test_btn.swc 파일 세개가 생겼다.



Flex Builder를 켠다.

프로젝트를 생성하고 난후
File > Import 한다.

Artwork 선택하고
Next

SWC or SWF file에서 아까만든 SWC파일을 불러온다.
Create skin style rules in에선 css이름을 써넣어준다.
(css파일이 이미 만들어져 있다면 불러오면되고, 없으면 새로만들어진다.)

Finish

잘 불러와 졌다.ㅎㅎ

css파일을 확인해보면 저절로 코드가 만들어져 있는걸 볼 수 있다.
일일이 써넣어 주지 않아도 되서 편하다.

 <mx:Style source="style.css"/>
 style.css불러오기

 <mx:Button label="Click!" styleName="button"/>
Button에 label적고 styleName적어주면 완성!



실행화면