Animate에서 코드 조각을 사용하여 대화형 기능 추가

[코드 조각] 패널은 프로그래머가 아닌 사용자가 간단한 JavaScript 및 ActionScript 3.0을 사용하여 빠르게 시작할 수 있도록 만들어졌습니다. 코드 조각을 사용하면 코드를 FLA 파일에 추가하여 일반적인 기능을 설정할 수 있습니다. [코드 조각] 패널은 JavaScript 또는 ActionScript 3.0에 대한 지식이 없어도 사용할 수 있습니다.

[코드 조각] 패널에서는 다음과 같은 작업을 수행할 수 있습니다.

• 스테이지에 있는 객체의 비헤이비어에 영향을 주는 코드 추가

• 타임라인에 있는 재생 헤드의 이동을 제어하는 코드 추가

• (CS5.5만 해당) - 터치스크린 사용자 상호 작용을 허용하는 코드 추가

• 만든 새 코드 조각을 패널에 추가

Animate에 포함된 코드 조각을 사용하는 것도 JavaScript 또는 ActionScript 3.0을 배우기 시작하는 좋은 방법이 됩니다. 조각의 코드를 살펴보고 조각 지침을 따르다 보면 코드 구조 및 용어에 대해 이해할 수 있습니다.

[코드 조각] 패널을 사용하여 작업하는 경우 다음과 같은 Animate 기본 사항을 이해하는 것이 중요합니다.

• 많은 코드 조각에서 사용자가 코드에서 소수의 항목을 사용자 정의하도록 합니다. Animate에서는 [액션] 패널에서 이 작업을 수행할 수 있습니다. 각 조각에는 이러한 작업을 위한 특정 지침이 포함되어 있습니다.

• 포함된 모든 코드 조각은 JavaScript 또는 ActionScript 3.0입니다.

• 일부 조각은 객체의 비헤이비어에 영향을 줘 객체를 클릭할 수 있도록 허용하거나 객체를 이동 또는 사라지도록 합니다. 이러한 조각은 스테이지의 객체에 적용합니다.

• 일부 조각은 조각이 포함된 프레임에 재생 헤드가 진입하는 즉시 액션이 발생하도록 합니다. 이러한 조각은 타임라인 프레임에 적용합니다.

• 코드 조각을 적용하면 코드가 타임라인에서 [액션] 레이어의 현재 프레임에 추가됩니다. 사용자가 직접 [액션] 레이어를 만들지 않은 경우 Animate에서 타임라인의 다른 모든 레이어 위에 [액션] 레이어가 추가됩니다.

• ActionScript로 스테이지의 객체를 제어하려면 객체의 인스턴스 이름이 속성 관리자에 지정되어 있어야 합니다.

• 패널에서 코드 조각을 선택할 때 나타나는 [설명 표시] 및 [코드 표시] 버튼을 클릭하면 됩니다.

객체 또는 타임라인 프레임에 코드 조각 추가

객체나 재생 헤드에 영향을 주는 액션을 추가하려면

코드 조각 패널에 새 조각 추가

다음 두 가지 방법으로 [코드 조각] 패널에 코드 조각을 새로 추가할 수 있습니다.

• 새 코드 조각 만들기 대화 상자에서 조각을 입력합니다.

• 코드 조각 XML 파일을 가져옵니다.

[새 코드 조각 만들기] 대화 상자를 사용하려면

코드 조각을 XML 형식으로 가져오려면

코드 조각에 맞는 XML 형식을 확인하려면 패널 메뉴에서 [코드 조각 XML 편집]을 선택합니다.

코드 조각을 삭제하려면 패널에서 해당 조각을 마우스 오른쪽 버튼으로 클릭하고 컨텍스트 메뉴에서 [코드 조각 삭제]를 선택합니다.

HTML5를 사용한 인터랙티브 애니메이션

특정 애니메이션에는 다양한 게시 플랫폼을 지원하는 코드 조각이 필요합니다. 코드 조각을 사용하여 애니메이션을 인터랙티브 코드로 만드는 방법을 배우고 싶으세요? 이 예제의 끝에 있는 자습서를 보고 다음 단계를 따르십시오.

HTML5 인터랙티브 애니메이션을 향상시키는 방법