Adobe Edge Mobile 이미지 갤러리

Question

Adobe Edge Animate를 사용하여 웹 사이트의 상당 부분을 만들었지 만 모바일 버전도 만들고 싶습니다. 따라서 onClick 이벤트 대신 분명히 onTouch 이벤트를 사용하고 싶습니다. 터치 이벤트를 사용 해본 적이 없기 때문에 터치 이벤트를 사용하는 방법에 대한 좋은 정보를 찾을 수없는 것 같습니다.

왼쪽으로 스 와이프하면 앞으로 재생되는 간단한 이미지 갤러리를 만들고 싶습니다. 오른쪽으로 스 와이프하면 뒤로 움직입니다.

큰 문제는 터치 이벤트가 스 와이프 방향에 따라 다른 작업을 수행하도록 어떻게 말합니까? touchstart,하는 TouchMove, touchend 당신이 걸릴 수 있습니다

한 가지 방법은에 사용자의 손가락 (들)의 시작 위치를 비교하는 것입니다 : 우선

Answer 1

, 당신은, 당신은 세 가지 이벤트 핸들러를 사용하여 바로 원하는 것 종료 위치. 코드는 탐지하려는 손가락 수에 따라 달라 지지만 적응할 수있는 기본 방법을 간략하게 설명합니다. 손가락 하나를 검출하기 위해, "touchstart"의 이벤트 핸들러의 다음 입력

변수에 상기 제 1 핑거의 시작 X- 위치를 저장하고 다른 이벤트 핸들러가 전역 적으로 액세스 할 것이다

var xStart = e.originalEvent.touches[0].pageX; 
sym.setVariable('xStart', xStart); 

. 그러면 "touchend"이벤트 핸들러에서 동일한 작업을 수행 할 수 있습니다. 일부 논리를 사용하여 두 값을 비교하십시오.

xStart = sym.getVariable('xStart'); 
var xEnd = e.originalEvent.touches[0].pageX; 

if (xEnd > xStart) 
{ 
    sym.playReverse(); 
} 
else if (xEnd < xStart) 
{ 
    sym.play(); 
} 

그런 다음 이미지에 고정 할 일부 정지 프레임이 있습니다.

그 예일 뿐이지 만 잘하면 도움이 될 것입니다. 행운을 빈다!