본문 바로가기

2016년 이전글

나만의 KMP 스킨을 만들어보자 3 - 버튼의 추가


이 강좌는 지난 번 강좌에서 연결됩니다. 패널을 추가하여 밑 바탕을 구성해 보았으니 이제 버튼 등을 추가해 보겠습니다.

 

 

1. 이미지 작업 방식

버튼은 다음 그림과 같이 4개의 이미지가 한 묶음이 되어 동작합니다. KMP 자체에서 가로로 4등분하기 때문에, 버튼은 반드시 다음과 같은 형식을 취해야 됩니다.


실제로 보여야 되는 버튼의 크기가 20*10 사이즈라면, 실제 작업시에는 20*10의 버튼을 4개 연달아 붙여야 됩니다. 그럼 80*10 사이즈가 되겠지요.

버튼은 차례대로  일반적일 때 모습, 마우스가 다른 프로그램에 포커스가 가 있는 경우,  버튼에 마우스를 올렸을 때, 버튼을 누른 상태로 구성됩니다.





2. Skin.ini 편집

버튼은 이전 강좌에서 만들었던 패널 위에 놓여집니다. 따라서 버튼이 놓일 패널을 미리 선택할 필요가 있지요. 이 옵션이 parent 입니다. 

그리고 버튼의 가장 중요한 것은 Command 부분인데, 이것은 종류가 상당히 많으므로 스킨 가이드 문서를 참조하십시오. 버튼을 눌렀을 때 실질적으로 취하게 되는 동작이 됩니다. 버튼을 눌러 재생을 하고 싶으면 재생에 관련된 내부 명령어를 입력해야 되는 것이죠.


다음은 닫기 버튼의 예제입니다.

[Exit]
type=button
left=-26  --- 수치를 음수 값으로 주게 되면 우측 정렬이 됩니다.
top=5
width=22
height=15
parent=TopPanel  --- Skin.ini 파일에서 TopPannel로 정의된 상단 패널이 부모 속성이 됩니다. Transparent=1000
image=Exit.png
Command=ExitCmd  --- 버튼을 눌렀을 때 동작하게 될 명령을 정의. 여기서는 프로그램을 닫습니다.
hint=프로그램 끝내기
DownOffsetX=0
DownOffsetY=0
UseInactiveMode=1  --- 이 옵션이 있을 경우, 다른 윈도우 선택시 버튼의 두번째 이미지가 표시됩니다.

위의 종료 버튼을 적용한 모습입니다.





3. 버튼추가

위와 같은 식으로 재생 버튼 등을 추가해보겠습니다. 자세한 것은 첨부된  Skin.ini 파일을 참조하세요.

아래 파일은 하단 패널에 위치하게 되므로, 하단 패널의 최상단 좌측이 기준 좌표가 됩니다.
parent=BottomPanel 


<이전 파일 재생>


Command=PlayPrevFileCmd

<재생>


Command=PlayPlayPauseCmd

<일시정지>


Command=PlayPausePlayCmd
일시정지 버튼은 재생 버튼과 토글이 되도록 같은 위치에 둡니다.

<정지>


Command=PlayStopCmd

 <다음 파일 재생>


Command=PlayNextFileCmd

 

다음은 완성된 모습입니다.



아래 첨부된 파일은 현재까지 적용된 스킨입니다. 확장자를 zip으로 바꾸어 내용물도 확인해보시기 바랍니다.
이어서 탐색 슬라이더 및 볼륨 슬라이더를 추가해 보겠습니다.