이 튜토리얼에서는 휴대폰과 같은 다이얼 키패드를 만드는 방법을 설명합니다.

sf_preview_smaller.mp4

→ 이 튜토리얼에 사용된 샘플은 여기에서 다운로드할 수 있습니다.

목업 만들기 - Step 1

1. 먼저 숫자를 표시하기 위한 입력 필드가 필요합니다. 캔버스 왼쪽에 있는 QuickTool에서 Form(양식) 아이콘을 클릭하여 캔버스에 직사각형을 그립니다. 입력란에 Number box.라는 이름을 붙이고 Fill(채우기)을 0%로 설정했지만, 색상은 원하는 색을 선택할 수 있습니다.
2. 다음으로 Box를 사용하여 숫자 키패드를 만듭니다. Quick Tools에서 Box를 선택하거나 키보드의 b 를 누릅니다.
3. 첫 번째 키를 그리고 이를 복사/붙여넣어 나머지 9자리 숫자를 만듭니다.
4. 키패드 내부를 더블 클릭하여 아래 예시대로 숫자 1 - 9와 0을 각각 입력합니다.

sf1_smaller.mp4

인터랙션 추가하기 - 숫자 박스

이제 정적인 키패드가 생겼으니 이제 인터랙션을 추가합니다. 먼저 '1'번을 클릭한 다음 오른쪽 속성 패널 상단의 Interactions +를 클릭합니다.

1. Trigger에서 Click(Tap)을 선택합니다.
2. 이 인터랙션에서는 Conditions(조건)을 사용하지 않습니다.
3. Action 아래에서 More... 를 클릭하고 Set Content(콘텐츠 설정)을 선택합니다.
4. Element에서 방금 만든 숫자 박스의 입력 필드를 선택합니다.
5. Set Content(콘텐츠 설정)에서 Expression(식)을 선택합니다. 입력 필드에 concat('number box', ‘1’)을 입력합니다.
6. Add(추가)를 클릭하여 인터랙션을 저장합니다.

키패드의 각 숫자에 대해 이 단계를 반복합니다. 예를 들어, 2번의 경우 입력 필드에서 concat('number box', '2'), 3번의 경우 concat('number box', '3') 등 키 에 따라 5.단계의 숫자를 변경해야 합니다. 또한, 인터랙션을 복사하여 붙여넣기하면 그에 따라 숫자도 변경됩니다.