[SWC] Button Skin 만들기 (Flex_Skins_12_05.mxp)

slrk
Templates를 이용한 초간단 SWC 스킨 만들기

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex%5Fskins 
Flex Skin Design Extension for Flash에서 Flex_Skins_12_05.mxp 다운로드 설치.

우선 일러스트로 이미지를 준비..

설치 후 File > New > Templates 들어가보면
Flex Skins 메뉴가 생겨난걸 볼 수 있다.
Flex Skins > Button 을 열어본다.

열어보면 flash화면에 버튼이 나타난다.
이제 버튼을 더블클릭해서 안으로 들어가보면

위와같은 화면이 나타난다
(플래시를 사용해본 디자이너라면 금방 알아 차릴수 있을듯 싶다...)

up, over, down, Disabled 버튼을 다 따로 만들지 않아도 되고,
모션도 넣을 수있다.

위 프레임을 선택해 보면 아래 속성창 Frame에 스크립트가 들어간걸 알 수있다.
(하나씩 눌러보자..꾹꾹..)
Flex Skin Templates 에는 이미 적용되어 있으니 다시 손볼 필요는 없다.
states레이어에는 up, over, down, Disabled 스타일을 구분해주고,
transitions레이어에는 프레임의 시작과 끝을 알려준다.

start와 end사이에 모션을 넣어주면 된다.

이제 마지막으로
art레이어에 만들어놓은 버튼 이미지를
up, over, down, Disabled 주석에 맞게 넣어주면 된다.

.
.
.

SWC를 생성해주고
SWC를 Flex로 불러온다 .
(이전글 참고)

이번 방법은 Flash에서 스크립트를 넣어줬기때문에 Flex에서 따로 정의하지 않아도 된다.
Symbol Properties에 적혀있는 Class 명을 적어준다.
(Flash 라이브러리에서 마우스 오른쪽 키를 눌러 Properties메뉴를 클릭하면 확인할 수 있다.)


실행화면