만들어진 키패드의 버튼에 들어갈 인터랙션에 대한 설명은 다음과 같습니다.


State 1 : Hour 버튼의 경우를 예를 들면,


먼저 키패드 입력을 통해 만들어진 문자는 replace 함수를 통해 "{keypad_hour}"에 문자로 저장됩니다.

이렇게 만들어진 "{keypad_hour}"를 가지고 "substr" 함수를 통해 "{length_hour}"에 2자리 문자로 저장됩니다.

2자리 문자인 "{length_hour}"는 "parseInt" 함수를 통해 숫자 형식으로 변환되어 {integer_hour}에 저장됩니다.

이렇게 생성된 {length_hour}는 조건문 필터링을 통해 값이 23이하인 경우에만 입력 값을 그대로 저장하고 그 이상인 경우는 문자열 "00"을 저장합니다.

그리고 {integer_hour}는 slice 함수를 통해 1자리 숫자인 경우 앞에 "0"이 붙은 후 {zero_hour}에 저장됩니다.

최종적으로는 {zero_hour}의 값이 텍스트 필드 "Hour"로 보내집니다.


<Hour 버튼 중 ①번에 적용될 인터랙션>


  • Trigger : Tap
  • Action : Set variable
  • Variable Name : keypad_hour (default: empty)
  • Value type : Custom value
  • New Value : "{keypad_hour}".replace("undefined", "") + 1
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : length_hour (default: empty)
  • Value type : Custom value
  • New Value : "{length_hour}".substr(0,2)
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : integer_hour (default: empty)
  • Value type : Custom value
  • New Value : parseInt("{keypad_hour}")
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : integer_hour (default: empty)
  • Value type : Custom value
  • New Value : {integer_hour} > 23 ? "00" : {integer_hour}
  • Delay : 0

>>>콜백

  • Action : Set variable
  • Variable Name : zero_hour (default: empty)
  • Value type : Custom value
  • New Value : "0{integer_hour}".slice(-2)
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Read from variable
  • Variable name : zero_hour (default: empty)
  • Delay : 0


작성된 인터랙션을 복사하여 나머지 버튼에도 붙여 넣은 후 첫 번째 인터랙션의 뒷 부분 숫자만 각각 2에서 0까지 수정합니다.


<Minute 버튼 중 ①번에 적용될 인터랙션>

변수 이름만 다르고 위에 작성한 Hour와 같은 방법으로 인터랙션이 적용되며, 단지 다른 점은 integer_minute 값의 범위를 설정하는 부분에서의 자바스크립트만 다음과 같이 바뀐다는 점입니다.


{integer_minute} < 60 ? {integer_minute} : "00"


적용된 인터랙션을 복사하여 나머지 Minute 용 버튼에 붙여 넣고 첫 번째 인터랙션의 뒷 부분 숫자를 2에서 0까지 수정합니다.


<텍스트 필드 인터랙션>

시와 분이 표시되는 텍스트 필드를 각각 탭 했을 때 해당하는 스크린 상태로 이동하여 변수를 리셋하고, keypad 컨테이너 내부의 상태를 바꿔 해당하는 키패드로 바꿔야 합니다.


- Hour 텍스트 필드 인터랙션

  • Trigger : Tap
  • Action : Change Screen State
  • Screen : Setting Time
  • State : hour reset State
  • Delay : 0

>>>콜백

  • Action : Change Container State
  • Screen : Setting Time
  • Container : keypad
  • State : State 1
  • Delay : 0


- Minute 텍스트 필드 인터랙션

  • Trigger : Tap
  • Action : Change Screen State
  • Screen : Setting Time
  • State : minute reset State
  • Delay : 0

>>>콜백

  • Action : Change Container State
  • Screen : Setting Time
  • Container : keypad
  • State : State 2
  • Delay : 0


- reset all time 리셋 버튼 인터랙션

  • Trigger : Tap
  • Action : Change Screen State
  • Screen : Setting Time
  • State : all reset State
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Custom value
  • New Value : 0
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Minute
  • Property : Value
  • Value type : Custom value
  • New Value : 0
  • Delay : 0


<텍스트 필드 초기화 인터랙션>

첫 화면에 빈 칸으로 보이는 텍스트 필드에 초기값으로 "00" 을 넣기 위해서 스크린에 인터랙션을 추가합니다.


- 인터랙션 1 Hour 초기값

  • Trigger : Screen show
  • Action : Set variable
  • Variable Name : zero_hour (default: empty)
  • Value type : Custom value
  • New Value : "00"
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Read from variable
  • Variable name : zero_hour (default: empty)
  • Delay : 0


- 인터랙션 2 : Minute 초기값

  • Trigger : Screen show
  • Action : Set variable
  • Variable Name : zero_hour (default: empty)
  • Value type : Custom value
  • New Value : "00"
  • Delay : 0

>>>콜백

  • Action : Change property
  • Screen : Setting Time
  • Item : Hour
  • Property : Value
  • Value type : Read from variable
  • Variable name : zero_hour (default: empty)
  • Delay : 0

두 인터랙션 모두 변수의 New Value 값으로 0이 아닌 "00" 을 넣는 것에 주의합니다(문자형).


프로젝트를 저정하고 미리보기로 확인합니다.

기본기본

한자리 숫자 입력값한자리 숫자 입력값 - 앞에 0 붙임

잘못된 입력값잘못된 입력값 - 00 으로 초기화





블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

전에 포스팅한 "다이얼 패드" 이용하여 텍스트필드에 시간을 넣는 인터페이스를 만들어보려고 합니다.

다이얼 패드에서는 특별히 값에 대한 범위가 적용이 되어 있지 않지만, 시간을 넣기 위해서는 시와 분에 각각 범위가 정해져 있어서 최소값으로 "00:00" 최대값으로 "23:59"가 입력이 되어야 하기 때문에 변수의 설정이 조금 복잡해 집니다.




<인터페이스 제작>

라이브러리의 버튼, 텍스트 필드 등을 사용하여 다음과 같이 인터페이스를 디자인합니다. 키패드는 위치만 선정하고 제작은 나중에 할 것입니다.

  • 스크린 이름 : Setting Time
  • 시 텍스트 필드 : Hour
  • 분 텍스트 필드 : Minute
  • 리셋 버튼 : reset all time


주의할 점으로 텍스트 필드의 속성 중 Placeholder Texts 항목은 반드시 빈 칸으로 설정합니다.



<변수의 생성>

변수는 시, 분 각각 다음과 같이 최소 4개씩이 필요합니다. 메인 메뉴에서 "Variables(X)" 클릭하고 시, 분에 사용될 변수를 생성합니다. 기본적으로 값은 비워 놓고 Evaluate는 체크합니다.


- 시

  • keypad_hour : Text, Evaluate (default: empty) : 탭
  • length_hour : Text, Evaluate (default: empty) : 문자열 자르기
  • integer_hour : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
  • zero_hour : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기


- 분

  • keypad_minute : Text, Evaluate (default: empty) : 탭
  • length_minute : Text, Evaluate (default: empty) : 문자열 자르기
  • integer_minute : Numeric, Evaluate (default: empty) : 문자값을 정수값으로
  • zero_minute : Numeric, Evaluate (default: empty) : 한자리 숫자에 0 붙이기



<변수 리셋 스크린 생성>

Setting Time 스크린에서 하단의 "+ NEW SCREEN STATE"를 클릭하여 기본상태인 "State 1"이외에 변수를 리셋하는 상태인 "hour reset State", "minute reset State", "all reset State"를 각각 생성합니다.


State 1을 제외한 각각의 상태에 인터랙션을 추가하여 각각의 변수를 모두 0 으로 초기화 합니다. 다음의 이미지는 hour reset State 의 인터랙션입니다. 나머지 인터랙션도 같은 방법으로 넣습니다.

  • Trigger : State enter
  • Action : Set variable
  • Variable Name : keypad_hour (default: empty)
  • Value type : Custom value
  • New Value : 0
  • Delay : 0

>>>콜백

...

위와 같이 length_hour, integer_hour, zero_hour 값을 0로 설정

...

>>>콜백

  • Action : Change Screen State
  • Screen : Setting Time (스크린 이름)
  • State : State 1
  • Delay : 0


<키패드 제작>

키패드는 Hour 용과 Minute 용이 별도로 있어야 합니다. 그렇기 때문에 반드시 컨테이너로 만들어져야 하고 그 내부에는 두 개의 상태가 있어야 합니다(여기에서는 기본값인 State 1, State 2 로 생성하였습니다).

State 1 : Hour 입력용 키패드State 1 : Hour 입력용 키패드

State 2 : Minute 입력용 키패드State 2 : Minute 입력용 키패드

다음 포스트에는 버튼에 들어갈 인터랙션을 다룹니다.

블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

상태 트랜지션은 적용이 되었지만 트랜지션을 동작하게 하는 트리거(Trigger)가 없기 때문에 현재로서는 그 어떤 동작도 일어나지 않습니다.


스크린이 출력되면 상태 트랜지션이 동작하도록 인터랙션을 스크린에 추가합니다. 좌측 패인(Left Pane)에서 스크린 트랜지션 아이콘을 클릭합니다.


아래와 같이 트랜지션을 적용합니다.

- Title : auto fade start

- Trigger : Screen show

- Action : Change Container State

- Screen : HOME

- Container : photo auto fade

- State : photo 2

- Delay : 3000


이 인터랙션을 통해 스크린이 출력되고 3초 후 ‘photo 2’ 상태로 이동합니다. 프로젝트를 저장하고 미리보기로 동작을 확인합니다.



스크린 인터랙션을 통해 이미지가 페이드인 되는 것은 시작이 되었지만 다른 상태 트랜지션으로는 바뀌지 않는 것을 볼 수 있습니다. 그 이유 역시 해당하는 인터랙션이 없기 때문입니다.


이를 구현하기 위해 이번에는 각 상태 트랜지션의 마지막 프레임에 인터랙션을 추가하겠습니다. 먼저 ‘photo 1 → photo 2’ 트랜지션을 선택하고 타임라인의 마지막 프레임에 있는 인터랙션 추가 아이콘을 클릭합니다.


프레임 인터랙션을 아래와 같이 설정합니다.

- Title : next state 1

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 3

- Delay : 3000(ms)


인터랙션을 저장할 때 아래와 같이 트랜지션 자동 생성 여부를 묻는 창이 나오기도 하는데 이미 생성되어 있는 상태이므로 ‘Don’t ask me again’을 체크한 후 ‘CANCEL’을 클릭합니다.



같은 방법으로 각 트랜지션의 마지막 프레임에 인터랙션을 아래와 같이 추가합니다.


‘photo 2 → photo 3’ 트랜지션 프레임 인터랙션

- Title : next state 2

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 1

- Delay : 3000(ms)


‘photo 3 → photo 1’ 트랜지션 프레임 인터랙션

- Title : next state 3

- Trigger : State transition end

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : photo 2

- Delay : 3000(ms)



프로젝트를 저장하고 미리보기를 통해 자동으로 페이드인 되는 이미지를 확인합니다.



블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

웹 혹은 앱에서 많이 사용되는 이미지 슬라이더 (캐러셀 : Carousel) 방식 중에 페이드-인(fade-in)이 있는데, 이는 이미지가 다음 이미지로 자연스럽게 섞이면서 넘어가는 것입니다.


'Proto.io'에서는 'State Transition(상태 전환)'을 사용해서 이를 구현할 수 있습니다.


먼저 새로운 프로젝트를 생성하고, 기본 스크린의 제목을 ‘HOME’으로 수정합니다.


상단 메뉴바의 ‘Assets’을 클릭하고 ‘Proto.io’에서 제공하는 스톡 이미지 중에서 중간 크기의 이미지 3개를 캔버스로 가져옵니다. 여러 개를 동시에 선택할 수 없기 때문에 하나씩 가져와야 합니다.


가져온 이미지들을 캔버스 크기에 맞게 크기를 조정하고, 위치 또한 동일하게 맞춥니다.


이미지들을 모두 선택한 후 마우스 오른 클릭으로 나타나는 메뉴 중에서 ‘Convert to container’를 선택하여 컨테이너로 만듭니다.


컨테이너의 이름은 ‘photo auto fade’로 설정합니다.


만들어진 컨테이너를 더블 클릭하여 컨테이너 편집 창으로 들어간 후 “+ NEW CONTAINER STATE”를 클릭하여 컨테이너의 상태(State)를 3개 만듭니다(State 1, State 2, State 3)


각 상태의 이름을 알아보기 쉽게 ‘photo 1’, ‘photo 2’, ‘photo 3’로 수정합니다.


현재 모든 상태(state)에는 3개의 이미지가 함께 들어있기 때문에 각각의 상태에서 이미지를 겹치지 않게 하나씩만 남기고 나머지는 삭제합니다.


상태에서 삭제해도 실제로 삭제가 되는 것이 아니고 일종의 비활성화 상태가 되는 것이기 때문에 다시 아이템을 복구할 수도 있습니다(Add from...).


상태 사이에 전환 효과를 넣기 위해 STATE TRANSITIONS 탭에서 “+ NEW STATE TRANSITION”을 클릭합니다.


첫 번째 트랜지션은 ‘photo 1’에서 ‘photo 2’로 이동할 때 적용됩니다.


적용된 트랜지션의 속성을 수정합니다.

- Delay : 0.00

- Duration : 1(sec)

- Easing : Linear


마찬가지 방법으로 ‘photo 2’에서 ‘photo 3’ 그리고 ‘photo 3’에서 ‘photo 1’로 이동할 때의 트랜지션을 추가하고 속성을 수정합니다.



여기까지의 작업으로 기본 레이아웃과 상태 트랜지션까지 적용되었습니다.


블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

<다운로드 진행도를 숫자로 출력하기>


프로그레스 바 제작의 마지막으로 할 작업은 다운로드 진행도를 0~100까지 증가하는 숫자 애니메이션으로 구현하는 것입니다.


Proto.io에서 대부분의 상태 값 변화는 트리거에 의해 발생한다고 보면 됩니다. 예를 들어 ‘Slider bar’의 경우는 인디케이터가 사용자에 의해 위치가 변화되므로 그 중간 값의 변화를 변수에 저장할 수 있지만, ‘Progress bar’의 경우는 그 중간 값의 변화가 사용자의 행동과는 관계가 없기 때문에 그 값을 변수에 넣을 수 없습니다.


마찬가지로 현재 제작된 ‘Progress bar’도 계속 변화하는 위치 값을 변수로 보낼 수가 없기 때문에 이를 텍스트로 출력할 수 없습니다. 그렇기 때문에 일종의 편법으로, 애니메이션의 재생 시간인 (여기에서는 9000ms = 9초) 동안 순차적으로 증가되는 변수를 넣는 방법을 쓸 수 밖에 없습니다.


인터페이스에 숫자가 표시될 부분을 추가합니다. 모두 라이브러리의 Text를 사용했으며, 변화하는 텍스트의 이름은 ‘increase text’로 합니다. 


“download button” Container를 더블 클릭하여 컨테이너 내부로 들어간 후 ‘download button’을 선택하고 “+ ADD INTERACTIONS”를 클릭하여 새로운 인터랙션을 추가합니다.


아래의 인터랙션을 추가합니다.

- Title : Increase loop

- Trigger : Tap

- Action : Animate item

- Screen : HOME

- Item : increase text

- Animation type : Move item

- Move type : Move to (x,y) coordinates

- Move X to (px) : * (변화 없음)

- Move Y to (px) : * (변화 없음)

- Duration : 50

- Easing : Linear

- Delay : 0

- Loop animation : check

- Loop iterations : 100


Callback을 체크하고 이어서 인터랙션을 추가합니다.

- Action : Set variable

- Variable Name : downloader (default: empty)

- Value type : Custom value

- New Value : {downloader}+1

- Delay : 0


Callback을 체크하고 다시 인터랙션을 추가합니다.

- Action : Change property

- Screen : HOME

- Item : increase text

- Property : Text

- Value type : Read from variable

- Variable name : downloader (default: empty)

- Delay : 0


인터랙션을 저장하고, 지금 새롭게 만든 인터랙션의 위치를 위로 옮깁니다.


프로젝트를 저장하고 지금까지 작업한 결과물을 미리보기로 확인해봅니다.


지금까지의 작업을 한 장의 이미지로 정리하면 다음과 같습니다.


블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

진행 막대의 상태 트랜지션까지 적용되었다면 기본 애니메이션 부분은 끝마친 것이라 볼 수 있으며, 이제는 인터랙션을 적용하여 실제 동작을 구현해야 합니다.


<다운로드 버튼 제작 - 1>


애니메이션(트랜지션)이 동작(액션)하기 위해서는 이를 명령해야 하는 이벤트(트리거)가 있어야 합니다.


스크린 ‘HOME“으로 돌아와서 캔버스에 라이브러리의 ‘Button with background’ 컨테이너를 가져옵니다. 라벨도 ‘Download’로 수정하고, 이름도 ‘download button’으로 수정합니다. 그리고 마우스 오른 클릭 후 ‘Convert to container’를 선택하여 새로운 컨테이너로 만듭니다.


이렇게 만들어진 ‘“download button” Container’에 인터랙션을 추가하고 저장합니다.

- Title : Progress animation start

- Trigger : Tap

- Action : Change Container State

- Screen : HOME

- Container : “progress bar” Container

- State : Progress end



프로젝트를 저장하고 미리보기에서 동작을 확인합니다.



<다운로드 버튼 제작 – 2>


현재 다운로드 버튼은 컨테이너로 되어 있습니다. 컨테이너 내부로 들어가서 인터랙션 및 다운로드가 끝난 상태도 추가해야 합니다.

먼저 ‘State 1’ 상태 이름을 ‘Download’로 수정하고, 새로운 상태를 추가한 후 새로운 상태의 이름을 ‘State 2’에서 ‘Complete’로 수정합니다.


‘Complete’ 상태의 아이템을 배경색을 회색으로, 라벨을 ‘Complete’로 수정합니다.


‘Download’ 상태의 아이템을 선택하고, 인터랙션을 추가합니다.

- Title : Go complete

- Trigger : Tap

- Action : Change Container State

- Screen : Current container

- Container : Current container

- State : Complete

- Delay : 9000(ms)


인터랙션을 저장할 때 아래와 같은 메시지 박스가 나타나면 “Don’t ask me again”을 체크하고 “CANCEL”을 선택합니다(트랜지션 자동 생성 기능 비활성화).


이 인터랙션을 통해 ‘Download’ 버튼을 탭하고 9초가 흐르면 상태가 바뀌어서 ‘Complete’ 버튼으로 바뀌는 동작이 이루어집니다.


프로젝트를 저장하고 미리보기로 확인해 봅니다.



<리셋 버튼 제작>


트랜지션 및 버튼 상태 변화가 모두 끝난 후 처음 상태로 되돌리기 위한 리셋 버튼을 만듭니다.


스크린 ‘HOME’으로 돌아와서 리셋을 위한 버튼을 만듭니다.


리셋 버튼에 다음의 인터랙션을 추가합니다.

- Title : Go reset state

- Trigger : Tap

- Action : Change Screen State

- Screen : HOME

- State : Reset

- Delay : 0


Callback을 체크하고 이어서 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Default

- Delay : 0


Callback을 체크하고 다시 이어서 인터랙션을 추가하고 저장합니다.

- Action : Set variable

- Variable Name : download (default: empty)

- Value type : Custom value

- New Value : 0

- Delay : 0


프로젝트를 저장하고 미리보기로 확인합니다.



<리셋 버튼 감추기 / 보이기>


리셋 버튼은 처음에는 보이지 않다가 다운로드가 끝나면 나타나고, 리셋 버튼을 누르면 사라지는 동작을 해야 합니다. 이를 위해서 ‘Download’ 버튼과 ‘Reset’ 버튼에 각각 인터랙션을 추가해야 합니다.


먼저 스크린 ‘HOME’에서 ‘reset button’의 레어어에서 ‘레이어 감추기’ 버튼을 클릭합니다.



“download button” Container를 더블 클릭하여 컨테이너 창으로 이동한 후 상태 ‘Download’에 있는 ‘download button’을 선택하고, ‘Go complate’ 인터랙션에 콜백 인터랙션을 추가합니다.

- Action : Change property

- Screen : HOME

- Item : reset button

- Property : Visibility

- Value type : Custom value

- New Value : check

- Duration : 400

- Easing : Linear

- Delay : 0


스크린 ‘HOME’으로 돌아와서 ‘reset button’을 선택하고, “+ ADD INTERACTIONS”를 클릭하여 두 번째 인터랙션을 추가합니다.

- Title : Reset button show

- Trigger : Tap

- Action : Animate item

- Screen : HOME

- Item : reset button

- Animation type : Fade item

- Fade to : 0

- Duration : 400

- Easing : Linear

- Delay : 0

- Loop animation : uncheck


프로젝트를 저장하고 미리보기로 확인합니다.


다운로드 바가 올라가는 모습


다운로드가 끝나고 버튼이 'Complete'로 상태가 변화한 후 'Reset' 버튼이 나타난 모습.


리셋 버튼을 클릭하여 초기 화면으로 돌아온 모습.


블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

Proto.io에서 제공하는 라이브러리에는 ‘Progress bar’가 있어서 간단한 방법으로 진행도를 그래프로 보여주는 것을 애니메이션으로 쉽게 표현할 수 있습니다. 다만 이 진행도를 수치로 나타내는 기능은 없는데 약간의 편법을 통해 이를 구현할 수 있습니다.



<초기화 세팅 작업>


먼저 아래와 같이 작업을 진행하는 스크린과 상태의 이름을 수정합니다.

- 스크린 제목 : HOME

- 스크린 상태 1 : Default

- 스크린 상태 2 : Reset



진행도가 저장될 변수를 작성합니다. 상단의 (X) Variables를 클릭하고 아래와 같이 변수를 작성합니다.

- Name : downloader

- Type : Numeric

- Value : 빈칸

- Evaluate : check



스크린의 상태가 Default 인 것을 확인하고 스크린에 인터랙션을 추가합니다. Proto.io는 이벤트(트리거)가 발생할 수 있는 거의 모든 곳에는 인터랙션을 적용할 수 있습니다.


인터랙션을 아래와 같이 설정합니다.

- Title : Reset

- Trigger : Screen before show

- Action : Set variable

- Variable Name : downloader (default: empty)

- Value type : Custom value

- New Value : 0

- Delay : 0


Callback을 체크하고 첫 번째 콜백 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Reset

- Delay : 0


Callback을 체크하고 두 번째 콜백 인터랙션을 추가합니다.

- Action : Change Screen State

- Screen : HOME

- State : Default

- Delay : 0


이는 HOME 스크린이 보이기(show) 전에 동작하는 인터랙션으로 변수와 상태를 초기값으로 돌리는 역할을 합니다.



<인터페이스 제작>


라이브러리에서 Text, Rectangle, Button with background 등의 컴포넌트를 캔버스로 가져와서 실제로 동작을 시키기 위한 인터페이스를 만듭니다.


(1) 진행 막대 (Progress bar) 제작

Rectangle로 적당한 길이의 진행 막대를 만듭니다. 이름은 ‘progress bar’로 합니다.


진행 막대를 마우스 오른 클릭하고, ‘Convert to container’를 선택하여 컨테이너로 변환합니다.


“progress bar” Container를 더블 클릭하거나 좌측 상단의 CONTAINERS 탭을 통해 컨테이너 편집 창으로 들어갑니다.


아이템 ‘progress bar’를 왼쪽으로 이동시켜서 컨테이너 영역 밖으로 옮깁니다(X : -200).


옮겨진 아이템 ‘progress bar’를 마우스 우측 클릭한 후 Duplicate를 선택, 복제하고 이를 콘테이너 영역 안으로 옮깁니다(X : 0).


왼쪽의 ‘progress bar’의 배경색을 눈에 띄는 색으로 수정하고, 레이어의 위치도 복제본 ‘progress bar 2’의 위로 옮깁니다. 마찬가지로 ‘progress bar 2’ 역시 적당한 배경색으로 수정합니다.


(2) 진행 막대 트랜지션 적용

진행 막대가 오른쪽으로 이동하는 애니메이션을 만들기 위해 트랜지션을 추가해야 합니다. 그 전에 먼저 상태의 제목을 알기 쉽게 ‘Progress start’로 바꿉니다.


“+ NEW CONTAINER STATE”를 클릭하여 현재 상태가 복제된 새로운 상태를 만듭니다. 그리고 이름도 ‘Progress end’로 바꿉니다.


새롭게 만들어진 상태 ‘Progress end’에서 아이템 ‘progress bar’의 위치를 컨테이너 영역 안쪽 원래의 위치로 옮깁니다(X : 0).


상태 ‘Progress start’와 ‘Progress end’ 사이에 애니메이션을 넣기 위해서 “STATE TRANSITIONS (0)” 탭을 클릭합니다.


“+ NEW STATE TRANSITION”을 클릭하고 새로운 트랜지션을 생성합니다.


애니메이션 레이어의 우측에 있는 애니메이션 종류 아이콘을 클릭하고, 아래와 같이 설정합니다.

- Delay : 0

- Duration : 9

- Easing : Linear

(수정한 후 다시 확인해보면 Duration 값에 약간의 변동이 생기지만 그대로 둡니다)


재생 버튼을 클릭하여 애니메이션을 확인해봅니다.


블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

2016년 10월 14일 삼성전자 R&D 캠퍼스 강의에서의 질문에 대한 답변입니다.

이 포스트의 내용은 수정될 수도 있습니다.


<Q1> Screen을 분리하였을 때라도, 공통적으로 같은 배경을 사용할 수는 없는지?

- 세트(기기) 의 프로토타입을 했을 때, 배경(기기 부분) 분리가 안되어 화면 부분에만 애니메이션을 보여줄 수 없었습니다.


<A> 스크린은 각각 개별적이므로 공통의 배경을 사용할 수 없습니다. 하나의 스크린만을 사용하고 그 위에 컨테이너 여러 개를 사용해서 구현하는 수밖에 없을 듯합니다.



<Q2> 마스킹 기능이 있는지?

- 마찬가지로 마스킹 기능이 있으면 세트 프로토타이핑을 할 때 좀더 유용하지 않을까 하여 여쭙니다.


<A> 마스킹 기능은 없지만 컨테이너 기능을 응용하여 사각형 형태로 아이템의 일부만을 보여 줄 수는 있습니다. 

배경이 투명한 PNG 이미지를 외부에서 만들어 Assets으로 가져와서 사용하는 것이 가장 좋은 방법입니다.



<Q3> 타이머 기능 구현여부

- 액션을 입력하지 않고 일정 시간이 지나면 메인화면으로 복귀되어야 하는데, 지난 번 사용하였을 때는 찾지 못했습니다.


<A> 간단한 방법으로는 트랜지션 항목에 타임라인의 지작과 끝 부분에 인터랙션을 줄 수가 있습니다. 적당한 시간의 트랜지션을 만들고 끝 부분에 Go to screen 액션을 주어서 메인화면으로 복귀하면 됩니다.



<Q4> 인디케이터 구현이 가능한가요?

- 인디케이터는 screen이나 states와 관계없이 항상 같은 위치에 뜨면서, 사용자 조작에 따라 상태가 변화됩니다.

+ 혹시 container를 활용하여 구현할 수 있지 않은가요?


<A> 인터랙션의 Overlay screen 으로 다른 스크린을 가져올 수는 있습니다. 하지만 상태, 스크린의 변동 후에도 그대로 유지되는지는 컨트롤은 제대로 동작하는지는 좀 더 확인해봐야 합니다.



<Q5>. long press 액션이 있나요?


<A> Trigger 중에 Tap Hold 가 long press 와 비슷한 액션으로 보입니다(탭하고 그대로 일정 시간 유지하고 있으면 액션 발생).



<Q6> 플래시처럼 간단한 코딩이 가능한가요? 가능하다면 언어는 어떤 것이 지원되나요?


<A> Variable을 사용하는 경우 약간의 자바스크립트를 입력할 수 있으며 간단한 조건문, 문자열 합치기, 자르기, 사칙연산 정도의 구현이 가능합니다.



<Q7> 애니메이션 선택시에 ease 종류에 따라 그래픽을 보여주던데, 그것 말고 애프터이펙트처럼 frame이나 graph 등의 가시적인 요소는 없나요?


<A> 간단한 직선 이동, 회전 애니메이션 정도는 상태 트랜지션 혹은 인터랙션으로 만들 수 있지만 키프레임 이나 이펙트를 사용하는 화려한 움직음의 애니메이션은 만들 수 없습니다. 각 트랜지션 마지막에 인터랙션으로 다음 상태로 넘어가게 하는 방법으로 어느 정도는 구현할 수 있지만 딜레이 등이 있기 때문에 썩 만족스러운 결과는 아니었습니다.



<Q8> 라이브러리를 이용 하지 않은 버튼 온/오프 구현 방법


<A> 버튼을 컨테이너로 변환하고 컨테이너의 상태(State)를 온/오프 두 개로 만든 후 인터랙션을 통해 구현할 수 있습니다.



<Q9> 오븐에 knob 을 돌리듯이 동그라미를 axis 중간으로 맞춰 돌리는 법


<A> 아이템을 컨테이너로 변환하고 옵션의 Draggable를 체크하여 Rotation을 선택하는 방법으로 구현할 수 있습니다.



<Q10> state 를 이용한 animation 을 전반적으로 알려주세요.


<A> 상태 A와 상태 B에 동일한 아이템들이 있으면 이 각각의 아이템들의 위치 값, 투명도 등의 속성 사이에 애니메이션이 발생하는 것입니다. 일반적으로 트랜지션은 2개의 state 사이에서 이루어집니다.



<Q11> 전체 로테이트 : 파일 만든 후 전체적으로 로테이트 가능 여부 (90도,180도,270도..)


<A> 스크린은 고정되어 있는 것으로 로테이트가 불가능하기 때문에, 각 방향 마다 별도의 스크린을 제작해야 합니다. Animate 인터랙션이나 상태 트랜지션으로 회전을 한다고 하더라도 스크린의 가로, 세로 값이 서로 바뀌기 때문에 이에 대한 위치를 별도로 변경하는 작업이 필요할 것입니다.



<Q12> 사운드 넣는 부분 : 우측 사운드바를 통해 사운드를 넣었으나, disable(사운드바 보이지 않음)을 한 경우, 사운드 재생(클릭)이 되지 않음. 특정한 버튼을 탭했을 때 사운드가 플레이 되는 인터랙션 제작법.


<A> 사운드 아이템을 invisible 한 후, 재생(일시정지, 정지) 버튼을 만들고 인터랙션을 추가하면 됩니다. 인터랙션의 Audio 항목에서 찾을 수 있습니다.



<Q13> 떳다가 사라지는 애니메이션(토스트팝업): 토스트팝업과 같이, 떳다가 몇초 후 자동으로 사라지는 애니메이션. proto에서도 에펙이나 ppt와 같이 특정 시간 경과 뒤 변화하는 애니메이션을 줄 수 있는지 여부


<A> 대부분의 애니메이션은 컨테이너의 상태 변화를 사용하여 구현을 할 수 있습니다.


 

<Q13> html → apk변환방법


<A> Proto.io와 관계가 없지만... 구글링을 하면 관련 내용을 찾으실 수 있습니다. (검색어 예 : html to apk)

https://github.com/praveshagrawal/HTML-to-APK



<Q14> 애니메이션 가능 여부: 탭하면 해당 버튼이 커지는 등, VI사안들 구현 가능 여부


<A> 대부분의 애니메이션은 컨테이너의 상태 변화를 사용하여 구현을 할 수 있습니다.



<Q15> 외부 폰트를 등록하여 사용할 수 있나요?


<A> 아직까지는 불가능합니다.

https://support.proto.io/hc/en-us/community/posts/207859598-Loading-external-fontello-font

https://support.proto.io/hc/en-us/community/posts/207860738-How-do-i-use-custom-fonts-that-are-not-hosted-on-Google-Fonts

블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

0~9까지의 숫자 버튼을 탭하면 해당 숫자가 추가되어 출력되는 '다이얼 패드'를 구현해봅니다.


먼저 아래와 같이 Rectangle, Text, Button with Background 등의 라이브러리 아이템을 사용하여 아래와 같은 인터페이스를 만듭니다. 숫자 버튼은 우선 (1) 버튼과 (←) 버튼만 넣습니다. 나머지 숫자 버튼은 (1) 버튼을 복사하여 사용할 것입니다.



<숫자 버튼 제작>

버튼의 문자가 저장될 빈 변수를 작성하기 위해서 상단 메뉴의 (X) Variables를 클릭하여 변수 {passcode}를 생성합니다.

- Name : passcode

- Type : Text

- Value : 빈칸 그대로 둠

- Evaluate : check


(1) 버튼 (dial button 1)을 클릭하고 인터랙션을 다음과 같이 추가합니다.


- Title : 임의

- Trigger : Tap

- Action : Set variable

- Variable Name : passcode (default: empty)

- Value type : Custom value

- New Value : 아래의 자바스크립트 코드 입력 


"{passcode}".replace("undefined", "") + 1


이 코드는 문자형 변수 {passcode}에 + 뒤의 숫자를 붙이는 코드로, 변수가 문자형(Text)인 경우 "{변수}"처럼 쌍따옴표(더블 쿼테이션:double quotation)로 감싸는 것을 잊지 말아야 합니다. replace는 처음에 정의되지 않은 값(default : empty)이 출력되기 때문에 그 부분을 삭제하는 역할을 합니다.


콜백 인터랙션을 추가하여 실제로 Dial Number 의 내용이 변하도록 합니다.

- Action : Change property

- Screen : 현재 스크린

- Item : Dial Number

- Property : Text

- Value type : Read from variable

- Variable name : passcode (default: empty)


프로젝트를 저장하고 프리뷰 화면에서 (1) 버튼을 클릭해봅니다. 여러 번 클릭해보고 숫자가 뒤에 계속해서 붙는지 확인해 봅니다.



<삭제 버튼 제작>


이번에는 삭제 버튼 (←)을 클릭하고 인터랙션을 추가합니다.

기본적인 코드는 숫자 버튼과 다르지 않고 New Value에 들어갈 자바스크립트 코드만 다르기 때문에 (1) 버튼의 인터랙션을 복사해 와서 붙여넣기로 적용한 후 수정합니다.


- Title : delete dial number

- Trigger : Tap

- Action : Set variable

- Variable Name : passcode (default: empty)

- Value type : Custom value

- New Value : 아래의 자바스크립트 코드 입력


"{passcode}".length == 0 || "{passcode}" == "undefined" ? "" : "{passcode}".replace("undefined", "").substr(0, "{passcode}".length-1)


이 코드는 변수 {passcode}의 길이가 0 이거나 비어 있으면, 빈 칸 그대로 두고 그렇지 않으면 {passcode}의 길이를 하나씩 제거하는 코드라고 할 수 있습니다.


프로젝트를 저장하고, 프리뷰를 통해 숫자의 입려과 삭제를 테스트합니다. 아래에서는 (1) 버튼을 8번 누르고(Tap), 그 다음에 (←)버튼을 4번 눌렀습니다.



<나머지 버튼 제작>


(1)버튼을 복사(duplicate)해서 (2)~(0)까지의 버튼을 보기 좋게 배열합니다. 버튼을 복사할 때 마다 인터랙션에 들어가서 자바스크립트 코드 “+ 뒤의 숫자”를 해당 버튼에 맞게 수정하는 것을 잊지 않습니다.


마지막 버튼은 (0)번이므로 10으로 잘못 넣지 않도록 주의합니다.


프로젝트를 저장하고 미리보기로 테스트해 봅니다.



실제로 동작을 시켜보면 어떤 이유에서인지 첫 자리에 “0”이 들어가는 경우, 세 번째 숫자입력과 동시에 “0”이 사라지는 것을 볼 수 있습니다. 정확한 이유는 모르겠지만 아마도 외국의 경우 전화번호를 입력할 때 첫 자리 “0”이 생략되기 때문이 아닌가하고 예상해봅니다...;

블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

텍스트 필드에 입력한 내용을 특정한 곳에 출력하는 것을 구현해 봅니다.


먼저 Text Field, Button, Rectangle, Text 등을 사용하여 아래의 인터페이스를 만듭니다.


인터페이스의 모습을 보면 바로 알겠지만 Input Text에 입력된 텍스트가 Add 버튼을 누르면 Type something에 나타나는 동작이 이루어질 것입니다.

인터랙션은 동작이 이루어지는 곳에 적용되기 때문에 여기에서는 Add 버튼을 클릭하고 인터랙션 패널로 이동합니다.


외부 입력폼인 Input Text에서 데이터를 가져와서 변수에 넣어야 하기 때문에 변수 설정을 먼저 합니다.
- Title : input text read
- Trigger : Tab
- Action : Set variable을 선택하고, New variable을 통해 텍스트가 저장되는 새로운 변수 “spending_input”를 만듭니다.


- Value type : Text
- Evaluate variable : check
로 설정하고

- Value type : Set value from item property
를 통해 특정 아이템에서 값을 가져옵니다. 특정 아이템이 바로 Input Text이기 때문에


- Screen : Screen 1 (현재 스크린)
- Item : input text
- Property : value
로 설정합니다.
이 과정을 통해 {spending_input}이라는 변수가 생성됩니다.


생성된 변수를 Type something에 넣기 위해서 Callback을 체크하여 콜백 인터랙션을 추가하여, 다음과 같이 설정합니다.


- Action : Change property
- Screen : Screen 1
- Item : change text
- Property : Text
- Value type : Read from variable
- Variable name : spending_input (default: empty)


프로젝트를 저장하고 프리뷰를 통해 텍스트를 입력하고 Add 버튼을 누르면 아래의 텍스트가 제대로 변경되는지 확인합니다.



블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

<숫자 증가 버튼>


먼저 UI Button과 Text 등의 컴포넌트를 사용하여 아래와 같은 인터페이스를 만듭니다.

이 인터페이스에서는 (+)버튼을 누르면 아래의 숫자가 1씩 증가하고, (-)버튼을 누르면 1씩 감소할 것입니다.


이를 구현하기 위해서는 먼저 증감할 값이 저장될 변수가 필요합니다. 현재 프로젝트에는 그 어떤 변수도 지정되어 있지 않습니다.

먼저 상단 메뉴에서 “(X) Variables”를 클릭합니다.

“+ NEW VARIABLE”을 클릭하고 다음과 같이 새로운 변수를 만듭니다(선언).
- Name : range_var
- Type : Numeric
- Value : 0
- Evaluate : check


Variables 창을 닫고 에디트 화면으로 돌아온 후, (+) 버튼을 클릭하고 인터랙션을 추가합니다.


- Title : inc num
- Trigger : Tap
- Action : Set variable
로 설정한 후 Variable Name을 클릭하면, 미리 만들어 놓은 “range_var (default: 0)” 변수가 풀다운 리스트에 나타납니다.


Variable Name : range_var (default: 0)로 설정한 후 그 아래의 항목들을 설정합니다.
- Value type : Custom value
- New Value : {range_var}+1


즉, 기본 변수 {range_var}에 +1을 더하는 {range_var}+1을 새로운 값으로 한다는 것입니다.


이제 이 새롭게 만들어진 값을 텍스트에 적용하는 인터랙션을 추가하기 위해 Callback을 체크합니다.
그리고 아래와 같이 텍스트를 수정하는 설정을 합니다. 슬라이더를 통해 값을 수정하는 방법((Change property)과 거의 같으며 마지막 Variable name만 이번에 만들어 놓은 “range_var (default: 0)”로 설정하면 됩니다.


프로젝트를 저장하고 프리뷰를 통해 (+) 버튼을 클릭할 때 숫자가 하나씩 늘어나는 것을 확인해봅니다.


<숫자 감소 버튼>


증가하는 기능을 이미 구현하였기 때문에 변수의 계산식만 바꿔주면 손 쉽게 구현할 수 있습니다.
(+) 버튼을 클릭하고, 현재 적용되어 있는 인터랙션 위치에서 마우스 오른 클릭을 하여, Copy interaction을 선택합니다.


(-) 버튼을 클릭하고, 인터랙션을 넣을 위치에서 마우스 오른 클릭을 하여 Paste in Interactions를 선택합니다.


(+) 버튼에 있던 인터랙션이 (-) 버튼에도 적용이 되었습니다.


인터랙션 편집 모드로 들어가서 Title을 “dec num”으로 수정하고 계산식의 “+”를 “-”로 고친 후 인터랙션을 저장합니다.

프로젝트를 저장하고 프리뷰를 통해 숫자의 증감을 테스트합니다.



<숫자의 범위 지정>


현재 증감되는 값은 양수, 음수 무한대라고 볼 수 있습니다. 이 변화하는 값의 범위를 지정해야 할 필요가 있기 때문에 인터랙션을 추가하여 {range_var}의 값의 범위를 정합니다.
먼저 (+)버튼을 클릭하고 인터랙션 편집 모드로 들어갑니다.


두 번째 인터랙션을 활성화하고 하단의 Callback을 체크하여 새로운 콜백 인터랙션을 추가합니다.


변수의 값이 새롭게 정의되기 때문에 Action을 “Set variable”으로 선택합니다.
그리고 먼저 이하의 속성들을 다음과 같이 설정합니다.
- Variable Name : range_var (default: 0)
- Value type : Custom value


이제 가장 중요한 New Value 값을 지정해야 하는데, 변수의 범위를 지정하는 조건문인 “If문”을 돌려야 합니다. 이 부분은 약간의 프로그래밍(자바스크립트) 지식이 있어야 하는 부분입니다.

New Value 란에 아래의 코드를 입력합니다. 입력란이 짧기 때문에 되도록이면 '메모장' 등의 텍스트 편집기에서 타이핑 한 후 복사해서 붙여넣는 것이 안전합니다(한글, 워드 등의 워드프로세서는 사용하지 않습니다).

{range_var}<0 ? 0 : {range_var}>9 ? 9 : {range_var}

이 코드는 {range_var} 변수가 0 보다 작으면 0으로, 9보다 크면 9로 고정한다는 뜻입니다.


값의 범위를 지정하는 인터랙션은 값이 출력되기 전에 동작이 되어야 하기 때문에 인터랙션의 위치를 드래그 & 드롭으로 두 번째 위치로 옮깁니다. 콜백 체크는 자동으로 수정됩니다.


프로젝트를 저장하고 (+) 버튼의 동작과 숫자의 변화를 테스트해 봅니다. 9 이상 숫자가 올라가지 않는 것을 확인할 수 있습니다.

같은 방법으로 (-) 버튼에도 인터랙션을 추가하고 0 이하로 숫자가 내려가지 않는 것을 확인해 봅니다.


블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,

<스크린 디자인>


먼저 적당한 크기의 스크린을 만듭니다. 여기에서는 iPhone6/6s 사이즈에 맞추겠습니다.


라이브러리에서 IOS9에 있는 슬라이더를 가져옵니다. 가져온 후 슬라이더의 이름을 “Slider text”로 수정합니다. 이름은 한 눈에 알아보기 쉽게 짓는 편이 좋습니다. 그리고 두께 등을 수정해봅니다.


라이브러리 BASIC에 있는 텍스트를 넣어봅니다. 그리고 이름을 “Text by slider”로 기본 글자도 이와 같게 “Text by slider”로 고쳐봅니다.


<기본 인터랙션 추가>


먼저 사용자에 의한 동작(Trigger)이 발생하는 곳인 슬라이더에 인터랙션을 부여합니다.
Slider text를 클릭하고, 인터랙션 탭을 선택한 후 “+ ADD INTERACTIONS”를 클릭합니다.


제목은 “change text”로 하고, 트리거는 “Slider drag”를 선택합니다.


이제 트리거에 의해 발생할 액션을 추가합니다.
슬라이더 인디케이터의 위치가 변하면 내부적으로 0~100까지의 값이 변화합니다. 이 값이 텍스트로 보내져야하기 때문에 값을 저장할 공간이 필요한데 그 저장 공간이 바로 “Variables(변수)”입니다. 즉 여기에서는 트리거에 의해 변수가 생성(세팅)되야 하기 때문에 “Set Variables”를 선택해야 합니다.


Variables 항목을 클릭하여 “New variables”를 통해 새로운 변수명을 “sliderposition” (만일 빈칸을 띄운다면 “slider_position” - 이유 : 변수명이나 함수명에는 공백이 들어갈 수 없습니다)으로 설정하고, Variables type(변수형)를 “Numeric(숫자형)”으로 선택합니다.


Value type(값의 형태)는 “Callback value from event”를 선택하는데 이 뜻은 “이벤트로 발생한 값을 되돌려 받은 것“이라고 생각하면 됩니다. 여기서는 트리거로 인해 발생한 인디케이터의 위치 값이라고 할 수 있습니다.
Callback value(되돌려 받은 값의 양)은 “%”를 선택하게 자동으로 정해져 있습니다.



<콜백 인터랙션 추가>


Callback”은 액션이 발생한 후 새롭게 발생하는 것을 말하며 이것은 값(변수)이 될 수도 있고 또다른 행동(액션)이 될 수도 있습니다.
여기서는 슬라이더의 인디케이터 위치가 변하고 그에 설정된 값이 변수 “sliderposition”에 “숫자형”, “%”값으로 저장된 후에 (순차적으로) 발생하는 또 다른 인터랙션이라 생각하면 됩니다.


인터랙션 설정창 하단의 “Callback”의 체크를 활성화합니다. 그리고 Action 항목 중에서 “Change property”를 선택합니다.



현재 스크린에 있는 아이템 속성이 변할 것이므로 스크린 항목은 그대로 두고, Item은 “Text by slider”를 선택하고 Property는 “Text”를 선택합니다.


이제 불러올 값을 지정하기 위해 Variable type에서 “Read from variable”을 선택하여 특정 변수에서 값을 가져올 수 있게 설정한 후 Variable name에서 “slidterposition”변수를 특정하여 가져옵니다.


설정이 끝났으니 “SAVE INTERACTION”을 클릭하여 인터랙션을 저장합니다. 저장과 동시에 인터랙션의 구조가 트리형식으로 나타나는 것을 확인할 수 있습니다.


저장한 후 미리보기를 통해 동작을 확인해봅니다. 인디케이터 위치가 변할 때마다 텍스트의 값이 0~100까지 변하는 것을 볼 수 있습니다.





블로그 이미지

환타73

디지털 콘텐츠 제작 및 연구 & 개발. 온오프라인 강의.

,