모션효과

모션 효과 적용하기

이벤트/모션 적용

• 모션 효과를 적용할 아이템을 선택한 후 이벤트 효과 패널을 이용하여 모션효과를 설정합니다.
  적용된 모션효과는 미리보기 버튼을 클릭하여 바로 확인이 가능합니다.
  
   
• 이벤트 속성
  효과/모션?

  이벤트 효과1:사용안함마우스 오버/아웃마우스 다운/업마우스 오버마우스 아웃마우스 업마우스 다운마우스 이동마우스 더블클릭페이지 로딩모션 실행 완료(1회)아이템(물체) 접촉동영상 재생 시간이벤트 조건 달성

  재생 시간:

  

  적용 대상:선택된 아이템Text156Image4Image3Image2Image1Ellipse5

  모션 효과:효과없이 바로 실행1회 실행1회 실행 / 링크 실행1회 실행 / 1초후 링크 실행1회 실행 / 2초후 링크 실행1회 실행 / 동영상 재생1회 실행 / 동영상 정지반복 실행

  Easing:defaultEasingeaseInOutBackeaseInOutBounceeaseInOutCirceaseInOutCubiceaseInOutElasticeaseInOutExpoeaseInOutQuadeaseInOutQuarteaseInOutQuinteaseInOutSineeaseOutBackeaseOutBounceeaseOutCirceaseOutCubiceaseOutElasticeaseOutExpoeaseOutQuadeaseOutQuarteaseOutQuinteaseOutSineeaseInBackeaseInBounceeaseInCirceaseInCubiceaseInElasticeaseInExpoeaseInQuadeaseInQuarteaseInQuinteaseInSine

  대기 시간:

  

  속도(ms):

  

  선두께:0123456789101112131415161718192030 적용

  전경색:

  적용

  배경색:

  적용

  글자색:

  적용

  모션 방식:변경없음상대좌표/상대값절대좌표/절대값모션 패스/상대값

  패스 대상:Text156Image4Image3Image2Image1Ellipse5

  이동 경로:기본 경로(라운드 미포함)세밀한 경로(라운드 포함)

  시작 지점:시작점10%15%20%25%30%33%35%40%45%50%55%60%65%66%70%75%80%85%90%95%99%도착점(역방향)랜덤 위치

  방향 전환:변경없음좌우 반전상하 반전상하/좌우 반전

  투명도:

  

  각도:

  

  X 좌표:

  

  ScaleX:

  

  Y 좌표:

  

  ScaleY:

  
  1) 이벤트 효과: 모션효과를 적용할 이벤트 설정 (최대 9개까지 설정 가능)

     - 마우스 오버/아웃: 아이템에 마우스 오버시 모션이 실행되고, 마우스가 벗어나면 원래의 상태로 복원

     - 마우스 다운/업: 아이템에 왼쪽 마우스 버튼을 누르면 모션이 실행되고, 버튼을 놓으면 원래의 상태로 복원

     - 마우스 이벤트: 이벤트 발생시 모션 효과 적용

     - 페이지 로딩: 페이지 로딩시 모션 효과 적용

     - 모션 실행 완료(1회): 아이템에 설정된 모션 효과를 1회 실행한 후 모션 효과 적용

     - 아이템(물체) 접촉: 모션 종료후 아이템이 서로 접촉한 상태일 경우 모션 효과 적용

     - 이벤트 조건 달성: 아이템에 설정된 조건 달성시 모션 효과 적용

  2) 적용 대상: 이벤트 발생시 모션 효과를 적용할 아이템 선택 (A에서 이벤트 발생시 B,C,D 아이템에 모션 효과 적용 가능)

  3) 모션 효과:

     - 효과없이 바로 실행: 설정된 효과를 바로 적용

     - 1회 실행: 모션 효과를 1회만 실행

     - 1회 실행 / 링크실행: 모션 1회 실행 후 링크 속성에 설정된 액션 실행

     - 1회 실행 / 동영상 재생: 모션 1회 실행 후 동영상 재생 (적용대상을 동영상으로 설정 필요)

     - 1회 실행 / 동영상 정지: 모션 1회 실행 후 동영상 정지 (적용대상을 동영상으로 설정 필요)

     - 반복실행: 모션 효과를 반복해서 실행

  4) Easing: 모션 효과 속도의 변화율 설정

     - Ease-In: 느리게 시작해서 점점 빨라짐 (아이템이 화면에서 사라질 때 주로 사용)

     - Ease-Out: 빠르게 시작해서 점점 느려짐 (아이템이 화면에 나타날 때 주로 사용)

     - Ease-InOut: 느리게 시작 → 빨라짐 → 다시 느려짐

  5) 대기시간(ms): 모션 효과가 실행되기 전 대기시간 설정 (2000 설정시 2초뒤에 모션효과 실행)

  6) 속도(ms): 모션 효과 실행 속도 (1000 설정시 1초 동안 모션효과 실행)

  7) 선두께: 모션 효과 실행시 아이템의 선두께를 변경

  8) 전경색: 모션 효과 실행시 아이템의 전경색을 변경

  9) 배경색: 모션 효과 실행시 아이템의 배경색을 변경

  10) 글자색: 모션 효과 실행시 아이템의 글자색을 변경

  11) 모션방식

     - 상대값: 현재 위치에서 설정한 값만큼 이동

     - 절대값: 현재 위치에서 고정된 좌표 위치로 이동

     - 모션 패스: 패스 대상으로 설정된 아이템의 좌표를 순차적으로 이동

  12) 패스 대상: 모션 이동시 모션 패스로 사용할 아이템 설정

  13) 이동 경로: 모션 이동 방식 설정

     - 기본 경로: 라운드가 포함되지 않은 경로로 이동

     - 세밀한 경로: 라운드가 포함된 경로로 이동 (Easing 효과 적용이 안되고, 빠른 속도로 이동 불가)

  14) 시작 지점: 모션이 시작하는 위치 설정

  15) 방향 전환: 모션 실행 후 아이템의 방향전환 설정

주의사항

• 투명한 물체(이미지,도형)에 이벤트를 설정하기 위해서는 반드시 투명도를 0.01 이상으로 설정필요 (투명도를 0으로 설정할 경우 마우스 이벤트 설정 불가, 사각형 도형 제외)
• 물체에 2개의 모션을 동시 적용 불가 (모션 패스로 이동중인 물체에 추가 모션 적용 불가, 이동이 종료된 이후에 추가 모션 적용 가능)
• 아이템(물체) 접촉 이벤트는 중복 이벤트 발생을 막기 위해 이벤트가 발생하면 3초 이후에 다시 적용 가능

모션 방식

상대값

현재 위치에서 설정한 값만큼 좌표 이동

절대값

현재 위치에서 고정된 좌표 위치로 이동

모션 패스

패스 대상에 설정된 아이템의 좌표 위치를 순차적으로 이동
폴리라인 또는 SVG 이미지의 좌표를 따라 모션 설정 가능

모션 이동 경로

기본 경로

꼭짓점을 중심으로 모션 이동
꼭짓점이 없는 아이템(원형) 또는 이동 포인트를 가지고 있는 아이템(SVG)의 경우 기본경로 방식으로 설정해도 세밀한 경로 방식으로 자동 변경

• 꼭짓점을 중심으로 이동하기 때문에 Easing 효과 적용 가능
• 꼭짓점을 중심으로 빠른 이동 가능
• 첫번째 꼭짓점을 시작점으로 설정

세밀한 경로

꼭짓점 사이에 다수의 이동 포인트를 추가하여 포인트를 중심으로 모션 이동

• 꼭짓점 사이에 세밀하게 추가된 포인트 좌표를 중심으로 이동하기 때문에 Easing 효과가 적용되지 않음
• 1개의 포인트를 이동하는 최소 시간이 존재하기 때문에 이동 속도를 너무 빠르게 설정할 경우 설정한 속도보다 느리게 동작할 수 있음
• 물체의 상단/중앙을 시작점으로 설정