[Day 13] 탭 이벤트
30일간의 Framer 스터디
탭,터치,클릭?
탭,터치,클릭은 약간의 차이는 있지만 화면이나 버튼을 ‘한번 눌렀다 뗀다’라고 보면 됩니다. 또한 이 동작을 ‘누른다’ - ‘누른상태 유지’ - ‘뗀다’라고 나눠서 생각하시는게 좋습니다. 왜냐하면 프레이머에서는 이 나뉜 동작을 모두 감지할 수 있고 이 나뉜 동작들 중간중간에 여러 가지 기능을 만들어서 넣을수도 있기 때문입니다.
연습준비
<그림. 연습준비>
이번에도 ’Insert’ - ‘Image’ 메뉴를 이용하거나 화면에 드래그 해서 이미지가 담긴 레이어를 하나 만들어줍니다. 그리고 레이어의 이름은 ‘image1’으로 변경하면 연습준비가 완료됩니다.
탭(Tap)
탭은 말그대로 가볍게 두드리는 것입니다. ‘스마트폰 화면을 탭한다’ 할때 바로 그 탭 동작을 수행하는 이벤트 입니다. 탭 이벤트를 추가하기 위해 ‘Insert’ - ‘Events’ 메뉴를 열고 ‘layer1’ 레이어이름을 찾아서 ‘Tap’메뉴로 들어갑니다.
<그림. 탭 이벤트들>
그러면 4개의 이벤트가 또 나오게 됩니다. 여기서는 우선 ‘Tap’ 이벤트명을 눌러 추가해줍니다.
<그림. ‘tap’ 이벤트 추가>
그럼 소스코드에 image1.onTap 이라는 이벤트가 추가됩니다. 테스트를 위해 print(‘tap’)이라는 소스코드를 바로 아랫줄에 추가합니다.
image1.onTap (event, layer) ->
print('tap')
이제 이미지를 클릭해보겠습니다. 원래는 스마트폰에서 일어나는 행동이지만 지금은 컴퓨터로 작업중이기 때문에 마우스로 탭을 대신합니다.
<그림. 탭을 했을때 출력>
이렇게 프린트된 내용을 통해 정상적으로 탭이 수행되는 것을 볼 수 있습니다. 그럼 탭의 다른 이벤트들도 추가해 보겠습니다.
탭 - ‘TapStart’ 와 ‘TapEnd’
이어서 ‘TapStart’ 이벤트를 추가해 보겠습니다. ‘Insert’ - ‘Events’ - ‘image1’ - ‘Tap’ - ‘TapStart’ 메뉴를 클릭합니다. 그리고 ‘Tap’ 이벤트를 추가할 때와 마찬가지로 print(‘tap start’)라고 구문을 넣어줍니다. 또한 ‘TapEnd’도 같은 방법으로 추가해주고 print(‘tap end’)라고 입력해 줍니다. 그러면 소스코드에 아래처럼 코드가 생성됩니다.
image1.onTapStart (event, layer) ->
print('tap start')
image1.onTapEnd (event, layer) ->
print('tap end')
이제 다시 이미지를 탭 해보겠습니다. 탭할때와 비슷하게 “tap start” 와 “tap end”가 표시되는걸 알수 있습니다.
그러면 이 두 구문은 왜 쓰는걸까요? 이것을 알아보기 위해 이미지를 클릭하고 그 상태로 있어보시기 바랍니다. 그럼 “tap start”만 먼저 찍히고 “tap end”는 안찍히는걸 확인할 수 있습니다. 그리고 다시 마우스 버튼에서 손을 떼면 이제야 “tap end”값이 화면에 출력됩니다.
이렇게 어떤 이벤트를 시작할때는 보통 이벤트명에 ‘Start’라고 명시하고 이벤트가 끝나자마자를 감지하기 위해서는 ‘End’값을 붙여줍니다.
예를들어 버튼이 눌렸을 때 확대하고 떼었을때 정상으로 돌아오는 갤러리 효과나 버튼을 눌렀을때 컬러를 바꾸고 뗐을때 정상으로 돌아오는 효과를 많이 보셨을 겁니다. 그런 것들을 만들때 시작하는 지점과 끝나는 지점을 감지하기 위해 사용하게 됩니다.
탭 - 더블탭(Double Tap)
탭 이벤트에 있는 더블탭에 대해서 알아보겠습니다. 더블탭은 화면을 연속으로 두번 두드리는 행위를 말합니다. 더블 클릭과 같습니다.
더블탭 이벤트를 추가하기 위해 ‘Insert’ - ‘Events’ - ‘image1’ - ‘Tap’ - ‘DoubleTap’ 메뉴를 클릭합니다. 그리고 print(“double tap”) 구문을 추가합니다.
image1.onDoubleTap (event, layer) ->
print('double tap')
이제 테스트를 위해 이미지를 더블클릭 해보면 아래 이미지와 같이 “double tap” 구문이 표시됩니다.
<그림. 더블탭 이벤트 테스트>
