Animate에서 ActionScript를 사용하는 방법

ActionScript® 스크립팅 언어를 사용하면 애플리케이션에 복잡한 대화형 기능, 재생 컨트롤 및 데이터 표시를 추가할 수 있습니다. [액션] 패널, [스크립트] 윈도우 또는 외부 편집기를 사용하여 제작 환경 내에 ActionScript를 추가할 수 있습니다.

ActionScript에는 자체 구문 규칙 및 예약된 키워드가 있으며, 사용자는 변수를 사용하여 정보를 저장하고 검색할 수 있습니다. ActionScript에는 객체를 만들 수 있는 대규모의 클래스 라이브러리가 내장되어 있어 여러 유용한 작업을 수행할 수 있습니다. ActionScript에 대한 자세한 내용은 다음 도움말 항목을 참조하십시오.

• ActionScript 3.0 학습(www.adobe.com/go/learn_flcs5_learnas3_kr)

• Adobe Animate에서 ActionScript 2.0 학습(www.adobe.com/go/learn_cs5_learningas2_kr)

ActionScript 요소에 대해 모두 잘 알지 못해도 스크립팅을 시작할 수 있습니다. 뚜렷한 목표가 있으면 단순한 액션을 사용하여 스크립트 작성을 시작할 수 있습니다.

ActionScript 및 JavaScript는 모두 ECMAScript 스크립팅 언어에 대한 국제 표준인 ECMA-262 표준에 근거하고 있습니다. 따라서 JavaScript에 익숙한 개발자들은 ActionScript를 쉽게 이해할 수 있습니다. ECMAScript에 대한 자세한 내용을 보려면 ecma-international.org로 이동하십시오.

사용할 수 있는 ActionScript 버전

Animate에는 둘 이상의 ActionScript 버전이 포함되어 있어 다양한 개발자 및 재생 하드웨어 요구사항을 충족할 수 있습니다. ActionScript 3.0과 2.0은 서로 호환되지 않습니다.

• ActionScript 3.0은 빠르게 실행됩니다. 이 버전을 사용하려면 다른 ActionScript 버전보다 객체 지향 프로그래밍 개념에 익숙해야 합니다. ActionScript 3.0은 ECMAScript 사양과 완벽하게 호환되며 보다 우수한 XML 처리, 향상된 이벤트 모델 및 화면 요소 작업에 대한 개선된 아키텍처를 제공합니다. ActionScript 3.0을 사용하는 FLA 파일에는 이전 버전의 ActionScript가 포함될 수 없습니다.

• (Animate에서만 더 이상 사용 안 됨) ActionScript 2.0은 ActionScript 3.0보다 쉽게 배울 수 있습니다. Flash Player는 컴파일된 ActionScript 2.0 코드를 컴파일된 ActionScript 3.0 코드보다 느리게 실행하지만, ActionScript 2.0은 여전히 수많은 종류의 프로젝트에서 유용합니다. 계산이 많이 사용되지 않는 여러 종류의 프로젝트(예: 디자인 중심의 내용)에 유용합니다. ActionScript 2.0도 ECMAScript 사양에 기초하지만 ECMAScript와 완벽하게 호환되는 것은 아닙니다.

• (Animate에서 더 이상 사용 안 됨) ActionScript 1.0은 가장 단순한 형태의 ActionScript이며, 일부 Adobe Flash Lite Player 버전에서 아직 사용되고 있습니다. ActionScript 1.0 및 2.0은 동일한 FLA 파일에서 함께 사용할 수 있습니다.

• (Animate에서 더 이상 사용 안 됨) Flash Lite 2.x ActionScript는 휴대 전화 및 디바이스에서 실행되는 Flash Lite 2.x에서 지원하는 ActionScript 2.0의 하위 집합입니다.

• (Animate에서 더 이상 사용 안 됨) Flash Lite 1.x ActionScript는 휴대 전화 및 디바이스에서 실행되는 Flash Lite 1.x에서 지원하는 ActionScript 1.0의 하위 집합입니다.

ActionScript 설명서 사용

ActionScript의 버전이 여러 개(2.0 및 3.0)이고 ActionScript가 FLA 파일로 통합되는 방식도 여러 가지이므로 ActionScript를 학습하는 방법도 다양합니다.

ActionScript를 사용한 작업을 위한 그래픽 사용자 인터페이스에 관한 문서가 제공됩니다. 이 인터페이스에는 [액션] 패널, [스크립트] 윈도우, [스크립트 도우미] 모드, [비헤이비어] 패널, [출력] 패널 및 [컴파일러 오류] 패널 등이 포함됩니다. 이 항목은 모든 ActionScript 버전에 적용됩니다.

Adobe의 다른 ActionScript 설명서에서 각 버전의 ActionScript를 학습할 수 있습니다.

ActionScript를 사용하여 작업하는 방법

ActionScript를 사용하여 여러 가지 방법으로 작업할 수 있습니다.

• (Animate에서 더 이상 사용 안 됨) [스크립트 도우미] 모드를 사용하면 코드를 직접 작성하지 않고도 FLA 파일에 ActionScript를 추가할 수 있습니다. 액션을 선택하면 각 액션에 필요한 매개 변수를 입력하기 위한 사용자 인터페이스가 나타납니다. 특정 작업을 수행하는 데 사용할 함수에 대해 조금은 알고 있어야 하며 이때 구문을 배울 필요는 없습니다. 많은 디자이너 및 비프로그래머들이 이 모드를 사용합니다.

• (Animate에서 더 이상 사용 안 됨) 비헤이비어를 사용하여 코드를 직접 작성하지 않고도 파일에 코드를 추가할 수도 있습니다. 비헤이비어는 일반 작업에 대해 미리 작성된 스크립트입니다. 비헤이비어를 추가하고 나면 [비헤이비어] 패널에서 쉽게 구성할 수 있습니다. 비헤이비어는 ActionScript 2.0 이전 버전에서만 사용할 수 있습니다.

• ActionScript를 직접 작성하면 유연성을 최대화하고 문서를 제어할 수 있는데 그러기 위해서는 ActionScript 언어 및 규칙에 익숙해져야 합니다.

• 구성 요소는 복잡한 기능을 구현할 수 있게 하는 미리 작성된 동영상 클립입니다. 구성 요소는 체크 상자와 같은 간단한 사용자 인터페이스 컨트롤이거나, 스크롤 창과 같은 복잡한 컨트롤일 수 있습니다. 구성 요소 기능 및 모양을 사용자 정의할 수 있으며, 다른 개발자가 만든 구성 요소를 다운로드할 수 있습니다. 대부분의 경우 구성 요소를 트리거하거나 제어하기 위해 일부 ActionScript 코드를 직접 작성해야 합니다. 자세한 내용은 ActionScript 3.0 구성 요소 사용을 참조하십시오.

ActionScript 작성

제작 환경에서 ActionScript 코드를 작성할 경우 [액션] 패널이나 [스크립트] 윈도우를 사용합니다. 액션 패널 및 스크립트 윈도우에는 코드 힌트 지정 및 색상 표시, 코드 서식 지정, 구문 강조 표시 등 모든 기능을 제공하는 완전한 코드 편집기가 포함되어 있습니다. 디버깅, 행 번호, 자동 줄 바꿈, 유니코드 지원도 포함되어 있습니다.

• [액션] 패널에서 Animate 문서의 일부인 스크립트 즉, FLA 파일에 포함된 스크립트를 작성할 수 있습니다. 액션 패널은 핵심 ActionScript 언어 요소에 빠르게 액세스할 수 있게 해 주는 액션 툴 상자와 같은 기능을 제공합니다. 스크립트를 작성해야 하는 요소의 경우 메시지가 표시됩니다.

• 외부 스크립트 즉, 외부 파일에 저장된 스크립트나 클래스를 작성하려면 [스크립트] 윈도우를 사용합니다. 또한 텍스트 편집기를 사용하여 외부 AS 파일을 작성할 수 있습니다. [스크립트] 윈도우에는 코드 힌트 및 색상 표시, 구문 확인, 자동 서식 지정 등과 같은 코드 지원 기능이 포함됩니다.

권장되는 추가 커뮤니티 자료

• ActionScript 3.0 시작(CS3)(3:25)

• 애니메이션 및 FLA 파일 최적화(CS3)(7:24)

• ActionScript 3.0을 사용하여 문서 클래스 만들기(CS3)(2:38)

• 디자인과 개발 간 효율적인 작업 과정 만들기(CS3)(3:41)

• 구성 요소 사용(CS3)(1:47)

• ActionScript 채널의 YouTube.com 목록

다음 문서 및 자습서에서는 ActionScript를 사용한 작업에 대한 자세한 정보를 제공합니다.

• ActionScript 3 마이그레이션 테이블(Adobe.com)

출력 패널 개요

문서 유형을 실행하는 경우 [출력] 패널에 문서 변환, 제작 같은 작업과 관련된 정보 또는 경고가 표시됩니다. 이 정보를 표시하려면 trace() 문을 코드에 추가하거나 [객체 목록] 및 [변수 목록] 명령을 사용합니다.

스크립트에 trace() 문을 사용하면 SWF 파일을 실행하는 동안 [출력] 패널에 특정 정보를 전달할 수 있습니다. 이 정보에는 SWF 파일의 상태나 표현식의 값에 대한 설명이 포함됩니다. 

출력 패널은 다음과 같은 메뉴 항목으로 구성되어 있습니다.

• 복사: [출력] 패널의 전체 내용을 컴퓨터의 클립보드에 복사합니다. 출력의 일부를 선택하여 복사하려면 복사할 영역을 선택하고 [복사]를 선택합니다.
• 지우기: [출력] 패널의 내용을 지웁니다.
• 출력 표시: [출력] 패널의 내용을 표시합니다.
• 잠금: 패널을 잠급니다. 패널의 크기는 조정할 수 있지만 패널을 이동하거나 드래그할 수는 없습니다. 
• 도움말: [출력] 패널에 대한 온라인 도움말을 로드합니다.
• 닫기: [출력] 패널을 닫습니다.
• 그룹 닫기: 전체 패널 그룹을 닫습니다. 타임라인, 출력 패널, 컴파일러 오류 패널 같은 여러 패널을 동시에 잠글 수 있습니다.

[출력] 패널을 표시하거나 숨기려면 창 > 출력을 선택하거나 F2 키를 누릅니다.

액션 패널

언어 참조 설명서 확인 방법

특정 ActionScript 언어 요소에 대한 참조 설명서를 확인하려면 다음 중 하나를 수행하십시오.

• ActionScript 3.0 언어 참조 설명서를 열고 언어 요소를 검색합니다.

• [액션] 패널에 언어 요소를 입력하고 선택한 다음 F1 키를 누릅니다(F1 키를 즉시 누름).
  

ActionScript 학습

ActionScript 작성에 관한 자세한 내용은 다음 링크를 참조하십시오.

• ActionScript 3.0 학습

• ActionScript 3.0 언어 및 구성 요소 참조 설명서

• Adobe Animate에서 ActionScript 2.0 학습

• ActionScript 2.0 언어 참조 설명서

 ActionScript 3.0과 2.0은 서로 호환되지 않습니다. 만든 각 FLA 파일에 사용할 버전을 하나만 선택하십시오

액션 패널 개요

FLA 파일에 포함된 스크립트를 만들려면 ActionScript를 [액션] 패널([윈도우] > [액션] 또는 F9 키)에 직접 입력합니다.

[액션] 패널은 다음과 같은 두 개의 창으로 구성되어 있습니다.

현재 선택된 프레임과 연결되는 ActionScript 코드를 입력할 수 있습니다.

Animate 문서에 스크립트를 나열하고 스크립트 사이를 빠른 속도로 이동할 수 있도록 합니다. [스크립트] 창에서 스크립트를 보려면 스크립트 내비게이터에서 항목을 클릭합니다.

액션 패널을 통해 코드 지원 기능에 액세스하여 ActionScript에서 코딩 작업을 보다 간단하고 능률적으로 수행할 수 있습니다. 적용 가능한 비프레임 관련 전역 및 서드 파티 스크립트를 Animate 내의 전체 애니메이션에 추가할 수 있습니다. 자세한 내용은 이 페이지의 전역 및 서드 파티 스크립트 추가 섹션을 참조하십시오. 

• 스크립트 실행: 스크립트를 실행합니다.
• 스크립트 고정: [스크립트] 창에 있는 개별 스크립트의 고정 탭에 스크립트를 고정하고 그에 맞게 이동합니다. 이 기능은 FLA 파일 내에서 하나의 중앙 위치에 코드를 구성하지 않은 경우 유용합니다. 또는 여러 스크립트를 사용하는 경우 유용합니다. 스크립트를 고정하여 [액션] 패널에서 코드의 열린 위치를 유지하고 다양한 열린 스크립트 간에 전환할 수 있습니다. 이 기능은 디버깅 시 특히 유용합니다.
• 인스턴스 경로 및 이름 삽입: 스크립트에서 액션에 대한 절대 대상 경로 또는 상대 대상 경로를 설정하도록 해줍니다.
• 찾기: 스크립트 안에서 특정 텍스트를 찾아 바꿉니다.
• 코드 서식 지정: 코드의 서식을 지정하도록 해줍니다.
• 코드 조각: 샘플 코드 조각을 표시하는 [코드 조각] 패널을 엽니다.
  
• 마법사를 사용하여 추가: 코드를 작성할 필요 없이 사용하기 쉬운 마법사를 사용하여 액션을 추가하려면 이 버튼을 클릭합니다. 
• 도움말: [스크립트] 창에서 선택한 ActionScript 요소에 대한 참조 정보를 표시합니다. 예를 들어, import 문을 클릭한 다음 도움말을 클릭하면 import에 대한 참조 정보가 [도움말] 패널에 표시됩니다.

액션 코드 마법사 사용

액션 패널의 마법사를 사용하여 추가 옵션을 통해 HTML5 구성에 대화형 기능을 추가할 수 있습니다. 마법사를 사용하여 추가는 구성에 코드를 추가하는 데 사용할 수 있는 단순한 사용자 인터페이스입니다.

스테이지에서 객체를 선택하고 액션 코드 마법사를 실행할 때 메뉴에서 현재 선택 옵션을 선택할 수 있습니다. 코드에 대한 타임라인 및 구성 요소 액션을 선택할 수도 있습니다.

애니메이션의 인터랙티브한 요소 향상

인터랙티브한 요소는 애니메이션의 시각적 경험을 향상시키는 애니메이션의 핵심입니다. 코드를 추가하지 않고 비디오에 동작을 적용하는 방법을 알고 싶으세요? 이 예제의 끝에 있는 자습서를 보고 다음 단계를 따르십시오.

애니메이션에 인터랙티브한 요소를 추가하는 방법

스크립트 창 사용

[스크립트] 윈도우에서는 애플리케이션으로 가져온 외부 스크립트 파일을 작성할 수 있습니다. 이러한 스크립트는 ActionScript 또는 Animate JavaScript 파일이 될 수 있습니다.

또한 HTML5 Canvas 문서에서 전역 및 서드 파티 스크립트를 추가할 수 있습니다. 자세한 내용은 Animate에서 HTML5 Canvas 문서 만들기 및 게시에서 전역 및 서드 파티 스크립트 추가 섹션을 참조하십시오.

둘 이상의 외부 파일을 열 경우 파일 이름은 [스크립트] 윈도우의 위쪽에 있는 탭에 표시됩니다.

스크립트 창에서 스크립트 고정, 찾기와 바꾸기, 구문 색상 표시, 코드 서식 지정, 코드 힌트 표시 및 주석 달기, 코드 축소 기능을 사용할 수 있습니다. 디버그 옵션(ActionScript 파일만 해당) 및 자동 줄 바꿈도 사용할 수 있습니다. 행 번호 및 숨겨진 문자도 표시할 수 있습니다.

스크립트 윈도우에서 외부 파일 만들기

스크립트 윈도우에서 기존 파일 편집

• 기존 스크립트를 열려면 파일 > 열기를 선택한 다음 기존 AS 파일을 엽니다.

• 이미 열려 있는 스크립트를 편집하려면 스크립트의 이름이 표시된 문서 탭을 클릭합니다.

액션 패널과 스크립트 윈도우의 툴

[액션] 패널을 통해 코드 지원 기능에 액세스하여 ActionScript에서 코딩 작업을 보다 간단하고 능률적으로 수행할 수 있습니다.

찾기

스크립트 안에서 특정 텍스트를 찾아 바꿉니다.

대상 경로 삽입

([액션] 패널만 해당) 스크립트에서 특정 액션에 대한 절대 또는 상대 대상 경로를 보다 쉽게 설정할 수 있습니다.

도움말 

[스크립트] 창에서 선택한 ActionScript 요소에 대한 참조 정보를 표시합니다. 예를 들어, import 문을 클릭한 다음 도움말을 클릭하면 import에 대한 참조 정보가 도움말 패널에 표시됩니다.

코드 조각

샘플 코드 조각을 표시하는 코드 조각 패널을 엽니다.

마법사를 사용하여 추가

코드를 작성할 필요 없이 인터페이스를 사용하여 액션에 대한 코드를 추가할 수 있습니다. 

액션 패널에서 컨텍스트에 맞는 도움말에 액세스

ActionScript 환경 설정

코드를 편집할 때 [액션] 패널을 사용하든 [스크립트] 윈도우를 사용하든 하나의 환경 설정 집합을 설정하고 수정할 수 있습니다.