UI(11) Slider

안녕하세요.

애니메이터가 들려주는 맥스 스크립트의 스크립팅하는 애님입니다.

오늘 이야기할 UI는 slider입니다.

이전에 배운 spinner와 비슷하게 상하 혹은 좌우로 이동시켜서 조절을 하는 UI입니다.

spinner보다 정교하게 조작을 할 수 없지만 캐릭터의 얼굴 표정을 섞는 것과 같이 정확한 수치보다 느낌을 중요시할 때 사용합니다. (저는 그다지 사용한 적이 없네요. ㅎㅎㅎ)

 

문법

 

slider <name> [<caption>] [range:[min,max,val]] [type:<#float | #integer>] [ticks:10][orient:<#horizontal | #vertical>][controller:(<controller>)] [toolTip:<string>]

 

[range:[min,max,val]]는 Point3로 구성되어 있으면 최소, 최대, 기본 순으로 입력됩니다.

[type:<#float | #integer>]은 사용되는 수치를 소수 형태를 사용할지 정수 형태를 사용할지를 정합니다.

[ticks:10]는 슬라이더의 눈금의 수를 정합니다. 기본으로 10이 정해 집니다. 아주 자세히 봐야 보이는 흰색의 눈금입니다.

[orient:<#horizontal | #vertical>]는 슬라이더의 모양이 가로인지 세로인지를 정합니다.

[controller:(<controller>)]는 슬라이더와 애니메이션이 가능한 controller와 연결을 시켜주는 역할을 합니다. 상호 간에 업데이트를 자동으로 해줍니다. 사용해 본 적이 없지만 wire Parameters와 비슷한 역할을 하는 것 같습니다.

 

문법에 대해서 알아봤으니 실제로 입력하여 어떻게 나오는지 실행해 봅시다.

 

rollout testRoll "Test!"
(
    slider test1_sld "슬라이더1" range:[0, 10, 5] type:#float ticks:10 orient:#horizontal
    slider test2_sld "슬라이더2" range:[0, 10, 0] type:#integer ticks:10 orient:#vertical
)
createdialog testRoll

 

흰색 눈금이 보이나요? 아주 자세히 봐야 보이는데....

실제 마우스로 움직여 보면서 어떻게 작동하는지 확인해 보세요.

그럼 어떤 원리로 만들어졌는지 확인해 봅시다.

 

slider test1_sld "슬라이더1" range:[0, 10, 5] type:#float ticks:10 orient:#horizontal

 

test1_sld라는 슬라이더를 생성하는데,

제목은 슬라이더1로 했고,

최소 0 최대 10 기본 5로 슬라이더의 값을 정했고,

소수 형태를 가지며, (소수가 되면 단계가 부드러워집니다.)

슬라이더의 눈금은 10칸으로 정했고,

가로형태로 만들었습니다.

 

다음은

slider test2_sld "슬라이더2" range:[0, 10, 0] type:#integer ticks:10 orient:#vertical

 

test2_sld라는 슬라이더를 생성하는데,

제목은 슬라이더2로 했고,

최소 0 최대 10 기본 0으로 슬라이더의 값을 정했고,

정수 형태를 가지며, (정수가 되면 단계가 스냅이 작동하는 것 같이 딱딱 끊어집니다.)

슬라이더의 눈금은 10칸으로 정했고,

세로 형태로 만들었습니다.

 

 

이벤트

 

on <slider> changed <arg> do <expr>

slider의 값이 변경되면 발생하는 이벤트입니다.

 

on <slider> rightClick do <expr>

slider에서 마우스 오른쪽 버튼이 눌리면 발생하는 이벤트입니다.

 

on <slider> buttondown do <expr>

slider에서 마우스 왼쪽 버튼이 눌리면 발생하는 이벤트입니다.

 

on <slider> buttonup do <expr>

slider에서 마우스 왼쪽 버튼이 눌렸다 올라오면 발생하는 이벤트입니다.

 

알 수 없는(?) 소리가 나열됐으니 알 수 있도록 어떻게 작동하는지 확인해 봅시다.

다음과 같이 수정하고 실행해 봅시다.

 

rollout testRoll "Test!"
(
    slider test1_sld "슬라이더1" range:[0, 10, 5] type:#float ticks:10 orient:#horizontal
    
    on test1_sld changed val do
    (
        format "값 = %\n" val
    )
    
    on test1_sld rightClick do
    (
        test1_sld.value = 5.0
    )
    
    on test1_sld buttondown do
    (
        format "버튼이 눌렸습니다.!!\n"
    )
    
    on test1_sld buttonup do
    (
        format "버튼이 올라왔습니다.!!\n"
    )
)
createdialog testRoll

 

 

겉 보기로는 간단해졌지만 내용은 길어졌습니다.

구성된 내용을 확인하기 전에 작동되는 것을 확인해 봅시다.

저는 우선 슬라이더의 임의의 부분에 마우스 클릭을 하고,

슬라이더 표시점(?)을 드래그한 후,

마우스 오른쪽 버튼을 눌렀습니다.

그랬더니 결과가 다음과 같이 나왔습니다.

 

 

어떤 원리로 작동하는지 알아봅시다.

 

on test1_sld changed val do
(
    format "값 = %\n" val
)

슬라이더의 값이 변경이 되면 바뀐 값을 MAXScript Listener에 출력하게 했습니다.

 

on test1_sld rightClick do
(
    test1_sld.value = 5.0
)

슬라이더를 오른쪽 클릭하면 슬라이더의 값을 기본값인 5.0으로 바뀌게 했습니다. (원래 상태로 복귀)

 

on test1_sld buttondown do
(
    format "버튼이 눌렸습니다.!!\n"
)

마우스 왼쪽 버튼이 눌리면 버튼이 눌렸다고 출력하게 했습니다.

 

on test1_sld buttonup do
(
    format "버튼이 올라왔습니다.!!\n"
)

마우스 버튼이 눌렸다 떼면 버튼이 올라왔다고 출력하게 했습니다.

 

여기서 기존과는 다른 형식이 나왔습니다.

 

test1_sld.value = 5.0

 

vlaue는  [range:[min,max,val]]에서 val을 말하는 것입니다.

즉 UI의 상태는 UI에서만 변경할 수 있는 것이 아니라, 스크립트 동작중에 스크립트 내부에서도 UI의 상태를 변경할 수 있습니다.

맥스 헬프에서 각각의 UI와 관련된 내용을 확인하시면 자세한 사용법을 알 수 있습니다.

 

Rollout User-Interface Controls Types를 검색하세요.

 

지금 여기에서 자세히 다루지는 않겠습니다.

나중에 기회가 생긴다면 필요한 부분을 설명하도록 하겠습니다.

 

오늘은 맥스 스크립트의 UI 중 slider에 대해서 이야기를 하였습니다.

다음으로는 Listbox에 대해서 이야기하도록 하겠습니다.