Animate에서 지원하는 문서 유형의 대부분은 인터랙티브 요소를 지원하는데 이는 코드를 통해서죠.
이 시간에는 인터랙티브 콘텐츠를 만드는 방법을 살펴볼 텐데 HTML5 Canvas에서 만들어 보겠습니다.
Animate 문서를 보면 두 개의 레이어가 있는데 하나는 배경 레이어로 Grassy라는 텍스처이고 하나는 LadyBug 레이어입니다.
LadyBug 레이어에는 LadyBug의 동영상 클립 인스턴스가 있습니다.
인터랙티브 요소를 만들 때는 먼저 LadyBug의 인스턴스 이름을 지정해야 하는데 속성 패널에서 bug로 입력해 보죠.
좋습니다.
이제 LadyBug 인스턴스는 bug라는 인스턴스 이름을 갖는데요.
JavaScript를 통해 이 인스턴스를 참조할 수 있습니다.
코드를 추가하여 인터랙티브 요소를 만들려면 액션 패널을 사용해야 합니다.
윈도우 메뉴에서 액션을 선택하여 액션 패널을 엽니다.
현재는 코드가 없습니다.
간단하게 JavaScript 문서에 코드를 추가하는 방법은 마법사를 통해 액션 추가 옵션을 클릭하는 것입니다.
문서에 추가할 수 있는 일반적인 액션이 제공됩니다.
예를 들어 객체를 회전하려면 Rotate the Object를 선택한 다음 액션을 적용할 객체를 선택합니다.
LadyBug의 동영상 클립 인스턴스 이름을 bug로 지정했으므로 선택할 수 있게 자동으로 표시됩니다.
이 옵션을 선택하고 다음을 클릭합니다.
마지막으로 트리거 이벤트를 선택해야 하는데요.
여기에 다양한 이벤트가 있는데 대부분이 마우스 기반입니다.
On Mouse Click을 선택한 다음 트리거 이벤트에 대한 객체로 bug를 선택하고 종료 및 추가를 클릭합니다.
콘텐츠에 몇 줄의 코드가 추가되고 여러 개의 주석도 추가됩니다.
주석을 선택해서 제거하려고 하는데요.
그다지 필요하지 않아서죠.
이 코드대로라면 무당벌레를 클릭할 때마다 30도씩 회전하는데요.
원하는 액션이 아닙니다.
실제로 스테이지에서 커서를 움직일 때 무당벌레가 항상 커서를 향하도록 만들어 보겠습니다.
그러려면 스테이지에서 마우스 오버를 활성화해야 하므로 1번 줄에 코드를 붙여볼 텐데요. stage.enableMouseOver를 추가하고 입력 값으로 30을 지정합니다.
스테이지에서 마우스 오버가 감지되겠죠.
그런 다음 이와 유사한 함수를 사용하여 적용할 수 있습니다.
현재의 함수를 삭제하고 새로운 함수를 붙여보겠습니다. stagemousemove 이벤트를 스테이지에 바인딩하고 라디안을 계산하는데 이벤트, 로컬 Y, 로컬 X 속성 등을 기반으로 합니다.
라디안에서 각도를 계산하고 각도를 bug.rotation 속성에 적용합니다.
이제 테스트해 보죠.
컨트롤 메뉴에서 테스트를 선택합니다.
작은 무당벌레가 조금씩 움직이고 있는데요.
스테이지 위로 마우스 커서를 놓자마자 자동으로 마우스 커서를 따릅니다.
커서를 아무 데나 놓아도 따라오는데요.
방금 작성한 코드 때문이죠.
이처럼 Animate에서 코드를 사용하는 것은 간단할 수도 또는 복잡할 수 있는데, 작업에 따라 다릅니다.
