Adobe Animate CC(이전의 Flash Professional CC)와 Flex®는 Animate에서 Flex®에 사용하기 위한 사용자 정의 그래픽 및 구성 요소 만들기 등 다양한 방법으로 함께 사용할 수 있습니다. 다음 자습서에서는 Animate® 및 Flex®를 함께 사용할 수 있는 몇 가지 방법을 보여 줍니다.

참고: Animate와 Flash Builder 간의 [디자인] 뷰 작업 과정은 더 이상 사용되지 않습니다. Flash Builder 4.6에서 이 작업 과정을 시작할 때 Animate에서 예외가 발생합니다.

일부 Flash Builder 작업 과정은 최신 버전의 Animate CC(2017 이상)와 상호 운용되지 않을 수도 있습니다. 

Animate 및 Flash Builder를 사용하여 ActionScript 편집 및 디버깅

시작하기 전에

이러한 Animate/Flash Builder 작업 과정을 사용할 수 있으려면 다음과 같은 조건이 충족되었는지 확인하십시오.

  • Flash CS5와 Flash Builder 4가 모두 설치되어 있어야 합니다.

  • Flash Builder에서 FLA 파일을 실행하려면 [패키지 탐색기] 패널에서 프로젝트에 Animate 프로젝트 특성이 지정되어 있어야 합니다.

    Flash Builder에서 프로젝트 특성을 지정하는 방법에 대한 자세한 내용은 Flash Builder 도움말을 참조하십시오.

  • Flash Builder에서 FLA 파일을 실행하려면 프로젝트의 Animate CC 속성에서 테스트 및 디버깅하는 데 사용할 FLA 파일이 프로젝트에 지정되어 있어야 합니다.

Flash Builder의 파일을 Animate에서 테스트, 디버깅 및 제작

Flash Builder 4에서 편집 중인 파일을 Animate에서 테스트하거나 디버깅하려면

  • Flash Builder 개발 환경에서 [Run] > [Test Movie] 또는 [Run] > [Debug Movie]를 선택합니다. 각 메뉴 항목 옆에는 Animate 아이콘이 표시됩니다. SWF 윈도우 또는 디버그 세션이 종료되면 프로젝트와 관련된 FLA 파일 내에 있는 프레임 스크립트에 컴파일러 오류가 없는 한 포커스가 Flash Builder로 돌아갑니다. 모든 오류에 대한 정보는 Flash Builder의 [Errors] 패널로 전송됩니다.

Flash Builder에서 현재 프로젝트와 연관된 FLA 파일을 제작하려면

  • Flash Builder 개발 환경에서 [Project] > [Publish Movie]를 선택합니다. 메뉴 명령 옆에 Animate 아이콘이 표시됩니다.

Animate의 AS 파일을 Flash Builder에서 편집

새 ActionScript 3.0 클래스 또는 인터페이스를 만들고 Flash Builder를 편집기로 지정하려면

  1. [파일] > [새로 만들기]를 선택합니다.

    새 문서
    새 문서
  2. 화면 위쪽의 탭에 있는 [캐릭터 애니메이션], [소셜], [게임], [교육], [광고], [웹], 고급 등의 선택 항목 중에서 용도를 선택합니다. [새 문서] 대화 상자에서 ActionScript 3.0 클래스 또는 ActionScript 3.0 인터페이스를 선택합니다.

  3. [ActionScript 3.0 만들기] 대화 상자에서 파일을 만들려는 응용 프로그램으로 Flash Builder를 선택하고 [확인]을 클릭합니다. Flash Builder가 열립니다.

  4. Flash Builder에서 ActionScript 파일과 연관시킬 FLA 파일 또는 XFL 파일을 선택하고 [Finish]를 클릭합니다.

Animate의 AS 파일을 Flash Builder에서 열고 편집하려면

  1. [라이브러리] 패널에서 클래스 또는 인터페이스와 연관된 심볼을 마우스 오른쪽 버튼을 클릭하고 [속성]을 선택합니다.

  2. [심볼 속성] 대화 상자에서 [클래스 정의 편집]을 클릭합니다.

  3. 표시된 [ActionScript 3.0 편집] 대화 상자에서 AS 파일에 지정된 편집기가 Flash Builder인지 확인하고 [확인]을 클릭합니다.

    Flash Builder가 파일 편집기로 지정되지 않은 경우 클래스 파일을 편집하기 위한 응용 프로그램으로 Flash Builder를 선택하고 [확인]을 클릭합니다.

    파일을 편집할 수 있도록 Flash Builder가 열립니다.

Flex용 구성 요소 만들기

Adobe Animate를 통해 Adobe® Flex® 응용 프로그램에서 구성 요소로 사용할 내용을 만들 수 있습니다. 이 내용에는 시각 요소와 Adobe® ActionScript® 3.0 코드가 포함될 수 있습니다.

Animate에서 Flex에 사용할 구성 요소를 만들면 Flex의 기능을 사용하면서 동시에 Animate의 유연한 그래픽 디자인 기능을 활용할 수 있습니다.

Animate에서 Flex 구성 요소를 만들려면 Animate용 Flex Component Kit를 설치해야 합니다. Adobe Extension Manager를 사용하여 구성 요소 키트를 설치하십시오. 몇몇 구성 요소 키트 버전은 Adobe Animate의 일부 기능을 지원하지 않을 수 있으므로 www.adobe.com/go/flex_ck_kr에서 구성 요소 키트의 최신 버전을 다운로드해야 합니다.

Flex와 Animate를 함께 사용하는 방법에 대한 자세한 내용은 Adobe 웹 사이트(www.adobe.com/go/learn_flexresources)에서 Flex 설명서를 참조하십시오.

Animate에서 Flex 구성 요소를 만들려면

  1. Adobe Extension Manager가 설치되어 있어야 합니다. Extension Manager는 Extension Manager 다운로드 페이지(www.adobe.com/go/extension_manager_dl)에서 다운로드할 수 있습니다.

    기본적으로 Extension Manager는 Adobe Creative Suite 응용 프로그램을 설치할 때 함께 설치됩니다.

  2. www.adobe.com/go/flex_ck_kr에서 Flex Component Kit를 다운로드하여 설치합니다. 구성 요소 키트를 설치하기 전에 Animate를 종료해야 합니다. Adobe Extension Manager를 사용하여 확장을 설치하는 방법에 대한 자세한 내용은 www.adobe.com/go/learn_extension_manager_kr을 참조하십시오.

  3. Animate를 실행합니다. [명령] 메뉴에 두 개의 새로운 명령인 [Flex 구성 요소로 심볼 변환]과 [Flex 컨테이너로 심볼 변환]이 나타납니다.

  4. Animate에서 Flex 구성 요소에 포함시킬 아트워크 및 ActionScript 3.0 코드가 들어 있는 동영상 클립 심볼을 만듭니다. Flex 구성 요소로 변환하기 전에 동영상 클립 심볼에 내용을 포함시켜야 합니다.

  5. 동영상 클립을 Flex 구성 요소로 변환하기 전에 다음과 같은 Flex 호환성 요구 사항을 충족하는지 확인합니다.

    • FLA 파일의 프레임 속도는 24fps여야 하며 구성 요소를 사용할 Flex 프로젝트의 프레임 속도와 같아야 합니다.

    • 등록 포인트는 동영상 클립의 0, 0포인트에 위치해야 합니다.

      참고: 동영상 클립에 있는 모든 내용의 등록 포인트가 0, 0이 되도록 하려면 타임라인 아래쪽에 있는 [여러 프레임 편집] 버튼을 클릭하여 동영상 클립 타임라인에서 모든 프레임을 선택한 다음 모든 프레임에 있는 내용을 전체 선택하고 속성 관리자에서 0, 0으로 이동시키십시오.

  6. [라이브러리] 패널에서 동영상 클립을 선택하고 [명령] > [Flex 구성 요소로 심볼 변환]을 선택합니다.

    그러면 Animate는 동영상 클립을 Flex 구성 요소로 변환하고 라이브러리에서 관련 아이콘을 Flex 아이콘으로 변경한 다음 FlexComponentBase 클래스의 컴파일된 클립을 라이브러리로 가져옵니다. 그런 다음 Animate는 FlexComponentBase를 다음 단계에서 만들어지는 Flex 구성 요소 SCW 파일에 포함합니다.

    Animate가 동영상 클립을 변환하는 동안 [출력] 패널에 표시되는 진행 상황 메시지를 확인합니다.

  7. [파일] > [제작]을 선택하여 컴파일된 Flex 구성 요소를 포함하는 SWC 파일을 만듭니다. Animate는 기본 FLA 파일에서 SWF 파일도 만들지만, 선택할 경우 SWF 파일을 무시할 수 있습니다. 이제 제작된 구성 요소 SWC 파일을 Flex에서 사용할 수 있습니다.

  8. Flex에서 SWC 파일을 사용하려면 다음 중 하나를 수행합니다.

    • Animate에서 SWC 파일을 복사하여 Flex 프로젝트의 bin 폴더에 붙여넣습니다.

    • SWC 파일을 Flex 프로젝트의 라이브러리 경로에 추가합니다. 자세한 내용은 Flex Builder 설명서(www.adobe.com/go/learn_flexresources)를 참조하십시오.

Flex 메타데이터 사용

Flex에서 사용할 ActionScript 3.0 코드를 작성하는 경우 메타데이터를 ActionScript 코드에 추가하여 코드가 들어 있는 제작된 SWF에 외부 파일을 포함시킬 수 있습니다. 일반적으로 이러한 [Embed] 메타데이터 선언은 이미지 파일, 글꼴, 개별 심볼 또는 기타 SWF 파일을 SWF에 포함시키는 데 사용됩니다.

메타데이터는 "데이터에 대한 데이터"입니다. 따라서 메타데이터를 적용할 코드 행의 바로 앞 행에 있는 ActionScript에 메타데이터를 추가하십시오. 그러면 컴파일러는 뒤에 있는 코드 행을 컴파일할 때 메타데이터를 고려합니다.

예를 들어, ActionScript 파일보다 한 수준 상위 디렉토리에 저장된 button_up.png 이미지를 포함시키려면 다음 ActionScript를 사용하면 됩니다.

[Embed(“../button_up.png”)]

private var buttonUpImage:Class;

[Embed] 메타데이터 태그를 통해 컴파일러는 button_up.png 파일이 SWF 파일에 포함되며 해당 파일이 buttonUpImage 변수에 연결되어야 한다고 인식합니다.

Flex에서 메타데이터를 사용하여 에셋을 포함시키는 방법에 대한 자세한 내용은 Flex 3 개발자 안내서(www.adobe.com/go/learn_flexresources)의 에셋 포함을 참조하십시오.

Flex SDK가 필요한 기능(예: [Embed] 메타데이터)을 사용하는 경우 컴파일 시 Animate에서 Flex.SWC 파일을 FLA 파일의 라이브러리 경로에 추가해야 합니다. Flex.SWC 파일에는 Flex 메타데이터 지원에 필요한 컴파일된 클래스가 포함됩니다. Flex.SWC를 라이브러리 경로에 추가하려면 대화 상자에서 [라이브러리 경로 업데이트]를 클릭합니다. 나중에 ActionScript 제작 설정에서 Flex.SWC 파일을 라이브러리 경로에 추가할 수도 있습니다.

추가 리소스

다음 리소스에서는 Animate와 Flash Builder를 통합하는 방법에 대한 추가 정보와 예제를 제공합니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책