타이밍은 애니메이션의 핵심 요소이다. Blink를 제외한 모든 애니메이션 효과는 동일한 옵션을 가지고 있다.

​

 ● Start: 애니메이션 시작 타이밍을 결정한다.

   ■ Begin:

태그에 붙은 애니메이션 중 제일 처음으로 붙은 애니메이션의 고정값이다. 태그 값이 애니메이션 조건을 만족하는 순간 실행된다.

   ■ With Previous

이전 효과와 함께 시작한다. 애니메이션 순서에 영향을 주지 않는다.

   ■ After Previous

이전 효과 뒤에 실행된다. 애니메이션 순서를 늘린다.

​

 ● Delay:

효과를 시작하기 전에 기다릴 지연 시간을 설정한다.

​

 ● Speed:

효과 지속 시간을 설정한다. 효과는 반드시 그 시간에 걸쳐서 진행된다.

​

 ● Repeat:

반복 횟수를 설정한다.

​

 ● Auto Reverse : 자동 역변환. 애니메이션이 종료되면 애니메이션이 반대로 실행된다. 효과 지속 시간(Speed)에 영향을 미치지 않아 실행시간을 반으로(효과 진행 -> 역변환 진행) 쪼개서 사용한다. ex) 0ff -> 5초, On -> Forward 2.5초 Reverse 2.5초

​

 ● Auto Rewind : 자동 되감기. 애니메이션이 종료되면 초기 위치로 복귀한다.

​

2. 타이밍 샘플 만들어보기

(객체를 생성할 때는 도구를 클릭하고 마우스 커서를 Design 영역으로 옮겼을 때 커서가 십자 표시로 되면 생성할 위치에 클릭한 상태로 드래그하면 된다.)

​

 1) 배경을 설정한다.

​

   (1) 페이지를 클릭하고 속성 편집을 아래와 같이 설정한다.

​

  (2) 이미지를 클릭하고 작화 화면 전체를 드래그한다.

​

  (3) 배경으로 사용하고 싶은 이미지를 선택하고 열기를 누른다.

​

   (4) 생성한 이미지 객체를 객체 탐색기에서 잠근다.

​

​

 2) 심볼 라이브러리에서 이미지를 다섯 개 가져온다.

​

 3) 태그 탐색기에서 디지털 태그를 하나 추가한다.

​

 4) 레이블 객체를 하나 생성한다.

​

​

​

 5) 생성한 레이블 객체를 더블클릭해 객체 설정 창을 연다.

​

 6) 아래와 같이 설정한다.

​

 7) 레이블 객체의 속성을 아래와 같이 바꾼다.

​

 8) 보기 메뉴에서 애니메이션 편집을 클릭한다.

​

​

 9) 애니메이션 편집에서 조건을 추가한다.

​

 10) 온도계에 애니메이션을 줄 직사각형 객체를 생성한 뒤 속성을 아래와 같이 설정한다.

​

​

 11) 생성한 직사각형 객체를 선택하고 애니메이션 편집에서 이동 효과와 크기 변화 효과를 준다.

​

 12) 중간에 위치한 램프 이미지 객체를 선택하고 애니메이션 편집에서 점멸 효과를 준다.

​

 13) 마지막에 위치한 바늘 이미지 객체를 선택하고 애니메이션 편집에서 각도 변화 효과를 준다. (효과 탭은 조작하지 않는다.)

​

​

 14) 실행이나 F5를 눌러 뷰어를 연다.

​

 15) 보기 메뉴를 눌러 태그 상태를 클릭한다.

​

레이블을 클릭함으로써 digital 태그가 바뀌는 걸 볼 수 있다. 또한 애니메이션 조건인 digital_1 태그의 값에 맞춰 애니메이션 효과가 실행되는 걸 알 수 있다.