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

검색
Adobe Animate 사용 안내서

이 페이지

적용 대상: Adobe Animate

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

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

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

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

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

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

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

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

시작하기 전에

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

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

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

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

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

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

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

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

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

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

  1. 스테이지의 객체 또는 타임라인의 프레임을 선택합니다.

    심볼 인스턴스가 아닌 객체를 선택하면 조각을 적용할 때 Animate에서 이 객체를 동영상 클립 심볼로 변환합니다.

    아직 인스턴스 이름이 없는 객체를 선택하면 조각을 적용할 때 Animate에서 인스턴스 이름을 추가합니다.

  2. [코드 조각] 패널([윈도우] > [코드 조각])에서 적용하려는 조각을 두 번 클릭합니다.

    스테이지의 객체를 선택한 경우 Animate에서 선택한 객체를 포함하는 프레임의 [액션] 패널에 조각을 추가합니다.

    타임라인 프레임을 선택한 경우 Animate에서 해당 프레임에 조각을 추가합니다.

  3. [액션] 패널에서 새로 추가된 코드를 확인하고 조각의 위쪽에 있는 지침에 따라 필요한 항목을 바꿉니다.

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

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

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

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

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

  1. [코드 조각] 패널의 패널 메뉴에서 [새 코드 조각 만들기]를 선택합니다.

  2. 대화 상자에서 조각에 맞는 제목, 도구 설명 텍스트 및 JavaScript 또는 ActionScript 3.0 코드를 입력합니다.

    [자동 채움] 버튼을 클릭하여 [액션] 패널에서 현재 선택된 코드를 추가할 수 있습니다.

  3. 코드에 "instance_name_here"라는 문자열이 포함되어 있고 조각이 적용될 때 Animate에서 이를 올바른 인스턴스 이름으로 바꾸길 원하는 경우에는 [코드 조각을 적용하기 전에 instance_name_here를 자동으로 바꿉니다.] 확인란을 선택합니다.

    Animate에서 새 조각을 [사용자 정의] 폴더의 [코드 조각] 패널에 추가합니다.

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

  1. [코드 조각] 패널의 패널 메뉴에서 [코드 조각 XML 가져오기]를 선택합니다.

  2. 가져오려는 XML 파일을 선택하고 [열기]를 클릭합니다.

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

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