ActionScript 예제 사용 방법

특정 클래스 및 메서드의 작동 방법을 익히는 가장 효과적인 방법 중 한 가지는 ActionScript 3.0 코드 예제를 실행하는 것입니다. 예제는 사용 중이거나 대상으로 지정한 장치에 따라 다양한 방법으로 사용할 수 있습니다.

Flash Professional 또는 Flash Builder를 실행하는 컴퓨터
이러한 개발 환경에서 ActionScript 3.0 예제를 실행하는 방법에 대한 자세한 내용은 Flash Professional에서 ActionScript 3.0 예제 실행 또는 Flash Builder에서 ActionScript 3.0 예제 실행 을 참조하십시오. 코드 예제의 작동 방식을 보다 확실하게 이해하려면 추적 명령문 및 기타 디버깅 도구를 사용하십시오.

모바일 장치
Flash Player 10.1 이상 버전을 지원하는 모바일 장치에서 ActionScript 3.0 코드 예제를 실행할 수 있습니다. 자세한 내용은 모바일 장치에서 ActionScript 3.0 예제 실행 을 참조하십시오. 또한 Flash Professional 또는 Flash Builder를 사용하는 컴퓨터에서도 이러한 예제를 실행할 수 있습니다.

TV 장치
TV 장치에서는 이러한 예제를 실행할 수 없지만 이를 컴퓨터에서 실행하는 방식으로 여전히 예제를 통해 학습할 수 있습니다. TV 장치용 응용 프로그램을 개발하는 방법에 대한 자세한 내용은 Adobe Developer Connection 웹 사이트에서 Flash Platform for TV 를 참조하십시오.

예제 유형

ActionScript 3.0 코드 예제의 유형은 다음과 같습니다.

코드 조각 예제

코드 조각 예제는 다음과 같은 형식으로 되어 있습니다.

var x:int = 5; 
trace(x); // 5

코드 조각에는 단일 개념을 표현하는 데 필요한 코드만 포함됩니다. 패키지 또는 클래스 문은 일반적으로 포함되지 않습니다.

클래스 기반 예제

많은 예제에서 완전한 ActionScript 클래스의 소스 코드를 보여 줍니다. 클래스 기반 예제는 다음과 같은 형식으로 되어 있습니다.

package { 
    public class Example1 { 
        public function Example1():void { 
            var x:int = 5; 
            trace(x); //5 
        } 
    } 
}

클래스 기반 예제의 코드에는 패키지 문, 클래스 선언 및 생성자 함수가 포함됩니다.

여러 소스 파일을 포함하는 실습 예제

ActionScript 3.0 개발자 안내서의 많은 항목에서는 마지막 부분에 실제 환경에서 특정 ActionScript 기능들을 사용하는 방법을 보여 주는 실습 예제를 싣고 있습니다. 이러한 예제에는 일반적으로 다음을 비롯한 여러 파일이 포함됩니다.

  • 하나 이상의 ActionScript 소스 파일

  • Flash Professional에 사용하기 위한 .FLA 파일

  • Flash Builder에 사용하기 위한 하나 이상의 MXML 파일

  • 데이터 파일, 이미지 파일, 사운드 파일 또는 예제 응용 프로그램에서 사용되는 기타 에셋(선택 사항)

실습 예제는 일반적으로 ZIP 아카이브 파일로 제공됩니다.

ZIP 파일로 제공되는 개발자 안내서 예제 목록

Flash Professional CS5 및 Flex 4용 ZIP 파일( www.adobe.com/go/learn_programmingAS3samples_flash_kr 에서 다운로드)에는 다음 예제가 포함되어 있습니다.

실습 예제는 Flash 개발자 센터 및 Flex 개발자 센터의 여러 퀵 스타트 문서에서도 찾아볼 수 있습니다.

Flash Professional에서 ActionScript 3.0 예제 실행

예제 유형에 따라 다음 절차 중 하나를 사용하여 Flash Professional을 통해 예제를 실행합니다.

Flash Professional에서 코드 조각 예제 실행

Flash Professional에서 코드 조각 예제를 실행하려면

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

  2. [새 문서] 대화 상자에서 [Flash 문서]를 선택하고 [확인]을 클릭합니다.

    새 Flash 윈도우가 나타납니다.

  3. [타임라인] 패널의 첫 번째 레이어에서 첫 번째 프레임을 클릭합니다.

  4. [액션] 패널에서 코드 조각 예제를 입력하거나 붙여 넣습니다.

  5. [파일] > [저장]을 선택합니다. 파일에 이름을 지정한 다음 [확인]을 클릭합니다.

  6. 예제를 테스트하려면 [컨트롤] > [동영상 테스트]를 선택합니다.

Flash Professional에서 클래스 기반 예제 실행

Flash Professional에서 클래스 기반 예제를 실행하려면

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

  2. [새 문서] 대화 상자에서 [ActionScript 파일]을 선택하고 [확인]을 클릭합니다. 새 편집기 윈도우가 나타납니다.

  3. 클래스 기반 예제 코드를 복사하여 편집기 윈도우에 붙여 넣습니다.

    해당 클래스가 프로그램의 기본 문서 클래스인 경우 다음과 같이 MovieClip 클래스를 확장해야 합니다.

    import flash.display.MovieClip; 
    public class Example1 extends MovieClip{ 
    //... 
    }

    또한 예제에서 참조되는 모든 클래스는 import 문을 사용하여 선언해야 합니다.

  4. [파일] > [저장]을 선택합니다. 파일 이름을 예제의 클래스 이름과 동일하게 지정합니다(예: ContextMenuExample.as).
    참고: flashx.textLayout.container.ContainerController 클래스 예제 와 같은 일부 클래스 기반 예제는 패키지 선언( package flashx.textLayout.container.examples { )에 여러 수준을 포함합니다. 이러한 예제의 경우 파일을 패키지 선언과 일치하는 하위 폴더(flashx/textLayout/container/examples)에 저장하거나, 패키지 이름을 제거하여 ActionScript가 package { 만으로 시작하도록 하면 모든 위치에서 파일을 테스트할 수 있습니다.
  5. [파일] > [새로 만들기]를 선택합니다.

  6. [새 문서] 대화 상자에서 [Flash 문서(ActionScript 3.0)]를 선택하고 [확인]을 클릭합니다. 새 Flash 윈도우가 나타납니다.

  7. [속성] 패널에서 [문서 클래스] 필드에 예제 클래스의 이름을 입력합니다. 이 이름은 바로 전에 저장한 ActionScript 소스 파일의 이름(예: ContextMenuExample)과 일치해야 합니다.

  8. [파일] > [저장]을 선택합니다. FLA 파일 이름을 예제의 클래스 이름과 동일하게 지정합니다(예: ContextMenuExample.fla).

  9. 예제를 테스트하려면 [컨트롤] > [동영상 테스트]를 선택합니다.

Flash Professional에서 실습 예제 실행

실습 예제는 일반적으로 ZIP 아카이브 파일로 제공됩니다. Flash Professional에서 실습 예제를 실행하려면

  1. 원하는 폴더에 아카이브 파일의 압축을 풉니다.

  2. Flash Professional에서 [파일] > [열기]를 선택합니다.

  3. 아카이브 파일의 압축을 푼 폴더로 이동합니다. 폴더에서 FLA 파일을 선택하고 [열기]를 클릭합니다.

  4. 예제를 테스트하려면 [컨트롤] > [동영상 테스트]를 선택합니다.

Flash Builder에서 ActionScript 3.0 예제 실행

예제 유형에 따라 다음 절차 중 하나를 사용하여 Flash Builder를 통해 예제를 실행합니다.

Flash Builder에서 코드 조각 예제 실행

Flash Builder에서 코드 조각 예제를 실행하려면

  1. [File] > [New] > [Flex Project]를 선택하여 새 Flex 프로젝트를 만들거나, [File] > [New] > [MXML Application]을 선택하여 기존 Flex 프로젝트 내에서 새 MXML 응용 프로그램을 만듭니다. 프로젝트 또는 응용 프로그램의 이름을 알기 쉽게(예: ContextMenuExample) 지정합니다.

  2. 생성된 MXML 파일 내에 <mx:Script> 태그를 추가합니다.

  3. <mx:Script> </mx:Script> 태그 사이에 코드 조각 예제의 내용을 붙여 넣습니다. MXML 파일을 저장합니다.

  4. 예제를 실행하려면 [Run] > 기본 MXML 파일의 메뉴 옵션 실행(예: [Run] > [Run ContextMenuExample])을 선택합니다.

Flash Builder에서 클래스 기반 예제 실행

Flash Builder에서 클래스 기반 예제를 실행하려면

  1. [File] > [New] > [ActionScript Project]를 선택합니다.

  2. 기본 클래스의 이름(예: ContextMenuExample)을 [Project Name] 필드에 입력합니다. 다른 필드는 기본값을 그대로 사용합니다. 아니면, 특정 환경에 맞게 변경할 수도 있습니다. [Finish]를 클릭하여 프로젝트와 기본 ActionScript 파일을 만듭니다.

  3. ActionScript 파일에서 생성된 내용을 지웁니다. 패키지 및 가져오기 설명을 포함하여 예제 코드를 ActionScript 파일에 붙여 넣고 파일을 저장합니다.

    참고: flashx.textLayout.container.ContainerController 클래스 예제 와 같은 일부 클래스 기반 예제는 패키지 선언( package flashx.textLayout.container.examples { )에 여러 수준을 포함합니다. 이러한 예제의 경우 파일을 패키지 선언과 일치하는 하위 폴더(flashx/textLayout/container/examples)에 저장하거나, 패키지 이름을 제거하여 ActionScript가 package { 만으로 시작하도록 하면 모든 위치에서 파일을 테스트할 수 있습니다.
  4. 예제를 실행하려면 [Run] > 기본 ActionScript 클래스 이름의 메뉴 옵션 실행(예: [Run] > [Run ContextMenuExample])을 선택합니다.

Flash Builder에서 실습 예제 실행

실습 예제는 일반적으로 ZIP 아카이브 파일로 제공됩니다. Flash Builder에서 실습 예제를 실행하려면

  1. 원하는 폴더에 아카이브 파일의 압축을 풉니다. 폴더의 이름을 알기 쉽게(예: ContextMenuExample) 지정합니다.

  2. Flash Builder에서 [File] > [New] > [Flex Project]를 선택합니다. [Project Location] 섹션에서 [Browse]를 클릭하고 예제 파일이 포함된 폴더를 선택합니다. [Project Name] 필드에서 폴더 이름(예: ContextMenuExample)을 입력합니다. 다른 필드는 기본값을 그대로 사용합니다. 아니면, 특정 환경에 맞게 변경할 수도 있습니다. [Next]를 클릭하여 계속합니다.

  3. [Output] 패널에서 [Next]를 클릭하여 기본값을 그대로 사용합니다.

  4. [Source Paths] 패널에서 [Main Application File] 필드 옆에 있는 [Browse] 버튼을 클릭합니다. 예제 폴더에서 기본 MXML 예제 파일을 선택합니다. [Finish]를 클릭하여 프로젝트 파일을 만듭니다.

  5. 예제를 실행하려면 [Run] > 기본 MXML 파일의 메뉴 옵션 실행(예: [Run] > [Run ContextMenuExample])을 선택합니다.

모바일 장치에서 ActionScript 3.0 예제 실행

Flash Player 10.1을 지원하는 모바일 장치에서 ActionScript 3.0 코드 예제를 실행할 수도 있지만 일반적으로 코드 예제는 특정 클래스 및 메서드의 작동 방식을 학습하기 위해 실행됩니다. 그러한 경우 데스크톱 컴퓨터와 같은 비모바일 장치에서 예제를 실행하십시오. 데스크톱 컴퓨터에서는 추적 명령문 및 Flash Professional 또는 Flash Builder의 기타 디버깅 도구를 사용하여 코드 예제에 대한 이해도를 높일 수 있습니다.

모바일 장치에서 예제를 실행하려는 경우 파일을 장치 또는 웹 서버에 복사할 수 있습니다. 파일을 장치에 복사하고 브라우저에서 예제를 실행하려면 다음을 수행합니다.

  1. Flash Professional에서 ActionScript 3.0 예제 실행 또는 Flash Builder에서 ActionScript 3.0 예제 실행 의 지침에 따라 SWF 파일을 만듭니다. Flash Professional에서는 [컨트롤] > [동영상 테스트]를 선택하면 SWF 파일이 만들어집니다. Flash Builder에서는 Flash Builder 프로젝트를 실행, 디버깅 또는 작성하면 SWF 파일이 만들어집니다.

  2. SWF 파일을 모바일 장치의 디렉토리에 복사합니다. 장치에 제공된 소프트웨어를 사용하여 파일을 복사합니다.

  3. 모바일 장치의 브라우저에 있는 주소 표시줄에 file://SWF 파일의 URL을 입력합니다. 예를 들어 file:://applications/myExample.swf 를 입력합니다.

파일을 웹 서버에 복사하고 장치의 브라우저에서 예제를 실행하려면 다음을 수행합니다.

  1. SWF 파일과 HTML 파일을 만듭니다. 먼저 Flash Professional에서 ActionScript 3.0 예제 실행 또는 Flash Builder에서 ActionScript 3.0 예제 실행 의 지침을 따릅니다. Flash Professional에서는 [컨트롤] > [동영상 테스트]를 선택하면 SWF 파일만 만들어집니다. 두 파일을 모두 만들려면 먼저 [제작 설정] 대화 상자의 [형식] 탭에서 Flash와 HTML을 모두 선택해야 합니다. 그런 다음 [파일] > [제작]을 선택하여 HTML과 SWF 파일을 모두 만듭니다. Flash Builder에서는 Flash Builder 프로젝트를 실행, 디버깅 또는 작성할 때 SWF 파일과 HTML 파일이 모두 만들어집니다.

  2. SWF 파일과 HTML 파일을 웹 서버에 있는 디렉토리에 복사합니다.

  3. 모바일 장치의 브라우저에 있는 주소 표시줄에 HTML 파일의 HTTP 주소를 입력합니다. 예를 들어 http://www.myWebServer/examples/myExample.html 을 입력합니다.

모바일 장치에서 예제를 실행할 때는 먼저 다음과 같은 문제들을 고려해보십시오.

스테이지 크기

모바일 장치에서 예제를 실행할 때 사용하는 스테이지 크기는 비모바일 장치를 사용할 때보다 매우 작습니다. 많은 예제의 경우 특정한 스테이지 크기를 요구하지 않습니다. 그러나 SWF 파일을 만들 때는 장치에 적합한 스테이지 크기를 지정하십시오. 예를 들어 176 x 208 픽셀로 지정하십시오.

ActionScript 3.0 개발자 안내서에 있는 실습 예제의 목적은 여러 가지 ActionScript 3.0의 개념과 클래스를 설명하는 것입니다. 이러한 실습 예제의 사용자 인터페이스는 데스크톱 또는 랩톱 컴퓨터에서 올바르게 표시되고 작동할 수 있도록 설계되었습니다. 예제가 모바일 장치에서 작동하더라도 스테이지 크기 및 사용자 인터페이스 설계는 작은 화면에 적합하지 않습니다. Adobe에서는 컴퓨터에서 실습 예제를 실행하여 ActionScript를 학습한 후에 모바일 응용 프로그램에서 적절한 코드 조각을 사용할 것을 권장합니다.

추적 명령문 대신 텍스트 필드

모바일 장치에서 예제를 실행할 때는 예제의 추적 명령문에서 출력을 확인할 수 없습니다. 출력을 보려면 TextField 클래스의 인스턴스를 만듭니다. 그런 다음 추적 명령문에서 텍스트를 텍스트 필드의 text 속성에 추가합니다.

다음 함수를 사용하여 추적에 사용할 텍스트 필드를 설정할 수 있습니다.

function createTracingTextField(x:Number, y:Number, 
                                width:Number, height:Number):TextField { 
           
    var tracingTF:TextField = new TextField(); 
    tracingTF.x = x; 
    tracingTF.y = y; 
    tracingTF.width = width; 
    tracingTF.height = height; 
     
    // A border lets you more easily see the area the text field covers. 
    tracingTF.border = true; 
    // Left justifying means that the right side of the text field is automatically 
    // resized if a line of text is wider than the width of the text field. 
    // The bottom is also automatically resized if the number of lines of text 
    // exceed the length of the text field. 
    tracingTF.autoSize = TextFieldAutoSize.LEFT; 
     
    // Use a text size that works well on the device. 
    var myFormat:TextFormat = new TextFormat(); 
    myFormat.size = 18; 
    tracingTF.defaultTextFormat = myFormat; 
     
    addChild(tracingTF); 
    return tracingTF; 
}

예를 들어 이 함수를 문서 클래스에 전용 함수로 추가합니다. 그런 다음 문서 클래스의 다른 메서드에서 다음과 같이 코드를 사용하여 데이터를 추적합니다.

var traceField:TextField = createTracingTextField(10, 10, 150, 150); 
// Use the newline character "\n" to force the text to the next line. 
traceField.appendText("data to trace\n"); 
traceField.appendText("more data to trace\n"); 
// Use the following line to clear the text field. 
traceField.appendText("");

appendText() 메서드에서는 매개 변수로 하나의 값만 사용합니다. 이 값은 문자열입니다(문자열 인스턴스 또는 문자열 리터럴). 문자열이 아닌 변수 값을 출력하려면 먼저 값을 문자열로 변환합니다. 가장 쉬운 변환 방법은 객체의 toString() 메서드를 호출하는 것입니다.

var albumYear:int = 1999; 
traceField.appendText("albumYear = "); 
traceField.appendText(albumYear.toString());

텍스트 크기

많은 예제에서 개념 설명을 돕기 위해 텍스트 필드가 사용됩니다. 때때로 텍스트 필드에서 텍스트 크기를 조정할 경우 모바일 장치에서의 가독성을 향상시키는 데 도움이 될 수 있습니다. 예를 들어 예제에 myTextField 라는 텍스트 필드 인스턴스가 사용될 경우 다음과 같은 코드로 텍스트의 크기를 변경합니다.

// Use a text size that works well on the device. 
var myFormat:TextFormat = new TextFormat(); 
myFormat.size = 18; 
myTextField.defaultTextFormat = myFormat

사용자 입력 캡처

모바일 운영 체제 및 브라우저에서는 SWF 내용에서 수신되지 않는 일부 사용자 입력 이벤트가 캡처됩니다. 특정 동작은 운영 체제 및 브라우저에 따라 다르지만, 예제를 모바일 장치에서 실행할 때 예기치 못한 동작이 발생할 수도 있습니다. 자세한 내용은 KeyboardEvent 우선 순위 를 참조하십시오.

또한 많은 예제의 사용자 인터페이스가 데스크톱 또는 랩톱 컴퓨터용으로 설계됩니다. 예를 들어 ActionScript 3.0 개발자 안내서에 있는 대부분의 실습 예제는 데스크톱에서 표시하는 데 적합합니다. 따라서 모바일 장치의 화면에서는 전체 스테이지가 표시되지 않는 경우가 있습니다. 브라우저에 따라 브라우저 내용에 대한 패닝 기능이 지원되지 않을 수 있습니다. 또한 스크롤 또는 패닝 이벤트를 포착 및 처리하도록 예제가 설계되지 않습니다. 따라서 일부 예제의 사용자 인터페이스는 작은 화면에서 실행하는 데 적합하지 않을 수 있습니다. Adobe에서는 컴퓨터에서 예제를 실행하여 ActionScript를 학습한 후에 모바일 응용 프로그램에서 적절한 코드 조각을 사용할 것을 권장합니다.

자세한 내용은 표시 객체 패닝 및 스크롤 을 참조하십시오.

포커스 처리

일부 예제에서는 사용자가 필드에 포커스를 두어야 합니다. 예를 들어 필드에 포커스를 두어야 텍스트를 입력하거나 버튼을 선택할 수 있습니다. 필드에 포커스를 두려면 스타일러스 또는 손가락과 같이 모바일 장치의 포인터 장치를 사용하십시오. 또는 모바일 장치의 탐색 키를 사용하여 필드에 포커스를 둡니다. 포커스가 있는 버튼을 선택하려면 컴퓨터에서 Enter 키를 사용하는 것처럼 모바일 장치의 Select 키를 사용합니다. 일부 장치에서는 버튼을 두 번 두드리면 버튼이 선택됩니다.

포커스에 대한 자세한 내용은 포커스 관리 를 참조하십시오.

마우스 이벤트 처리

많은 예제에서 마우스 이벤트가 수신됩니다. 예를 들어 컴퓨터에서 이러한 마우스 이벤트는 사용자가 마우스를 표시 객체 위로 이동하거나 표시 객체에서 마우스 버튼을 클릭할 때 발생할 수 있습니다. 모바일 장치에서는 스타일러스 또는 손가락과 같은 포인터 장치를 사용하여 발생하는 이벤트를 터치 이벤트라고 부릅니다. Flash Player 10.1은 이러한 터치 이벤트를 마우스 이벤트로 매핑합니다. 이러한 매핑을 통해 Flash Player 10.1 이전에 개발된 SWF 내용도 계속해서 작동할 수 있습니다. 따라서 포인터 장치를 사용하여 표시 객체를 선택하거나 드래그할 때에도 예제가 작동합니다.

성능

모바일 장치는 데스크톱 장치보다 처리 능력이 낮습니다. 일부 CPU 사용량이 높은 예제는 모바일 장치에서 성능이 느려질 수 있습니다. 예를 들어 드로잉 API 예제: Algorithmic Visual Generator 의 예제는 계산 작업이 많고 모든 프레임에 들어갈 때마다 그리기를 수행합니다. 이 예제를 컴퓨터에서 실행하면 다양한 그리기 API가 표시됩니다. 하지만 이 예제는 성능상의 제한으로 인해 일부 모바일 장치에 적합하지 않습니다.

휴대 장치의 성능에 대한 자세한 내용은 Flash Platform의 성능 최적화 를 참조하십시오.

유용한 방법

예제에서는 모바일 장치에 맞는 응용 프로그램 개발에 대한 유용한 방법들이 고려되지 않습니다. 모바일 장치는 메모리 및 처리 능력에 대한 제한으로 인해 특별한 주의가 필요합니다. 마찬가지로, 작은 화면용 사용자 인터페이스는 데스크톱 디스플레이와 그 요구 사항이 다릅니다. 휴대 장치용 응용 프로그램 개발에 대한 자세한 내용은 Flash Platform의 성능 최적화 를 참조하십시오.