객체 다루기

ActionScript는 객체 지향 프로그래밍 언어입니다. 객체 지향 프로그래밍은 프로그래밍에 대한 접근 방식 중 하나로서, 프로그램에서 코드를 구성할 때 객체를 사용합니다.

앞에서 "컴퓨터 프로그램"이라는 용어에 대해 컴퓨터가 수행하는 일련의 단계 또는 명령이라고 정의한 바 있습니다. 개념적인 면에서 컴퓨터 프로그램은 명령으로 구성된 하나의 긴 목록이라고 가정할 수 있습니다. 그러나 객체 지향 프로그래밍에서는 프로그램 명령이 여러 객체에 분배됩니다. 코드가 기능별로 그룹화되고 관련된 유형의 기능 또는 관련된 정보가 컨테이너 하나에 그룹화됩니다.

Adobe Flash Professional

Flash Professional에서 심볼을 사용하여 작업해 본 경험이 있으면 객체를 사용하여 작업을 수행할 준비가 되어 있는 것입니다. 사각형 드로잉 같은 동영상 클립 심볼을 정의하고 스테이지에 복사본을 배치했다고 가정해 봅니다. ActionScript에서는 동영상 클립 심볼도 객체이며 MovieClip 클래스의 인스턴스입니다.

동영상 클립의 다양한 특징을 수정할 수 있습니다. 동영상 클립을 선택하고 속성 관리자에서 x 좌표 또는 폭 등의 값을 변경할 수 있습니다. 또한 알파 또는 투명도를 변경하거나 그림자 필터를 적용하는 등 색을 다양하게 조정할 수 있습니다. [자유 변형 도구]를 사용하여 사각형을 회전하는 것과 같이 다른 Flash Professional 도구를 사용하면 보다 많은 사항을 변경할 수 있습니다. Flash Professional에서 동영상 클립 심볼을 수정할 수 있는 이러한 방법을 ActionScript에서도 모두 사용할 수 있습니다. ActionScript에서는 MovieClip 객체라는 단일 묶음에 함께 포함된 여러 데이터를 변경하여 동영상 클립을 수정할 수 있습니다.

ActionScript 객체 지향 프로그래밍에는 모든 클래스에 포함될 수 있는 다음과 같은 세 가지 특성이 있습니다.

  • 속성

  • 메서드

  • 이벤트

이러한 요소는 프로그램에서 사용하는 데이터를 관리하고 수행할 작업과 순서를 결정하는 데 사용됩니다.

속성

속성은 객체에 함께 묶여 있는 데이터 중 하나를 나타냅니다. 예를 들어 Song 객체에는 artist 속성과 title 속성이 포함될 수 있으며 MovieClip 클래스에는 rotation, x, widthalpha와 같은 속성이 포함될 수 있습니다. 속성은 개별 변수처럼 사용할 수 있습니다. 실제로 속성은 특정 객체에 포함된 "자식" 변수라고 생각하면 간단합니다.

속성을 사용하는 ActionScript 코드의 예제는 다음과 같습니다. 다음 코드 행은 square MovieClip을 x 좌표 100 픽셀로 이동합니다.

square.x = 100;

다음 코드에서는 rotation 속성을 사용하여 triangle MovieClip의 회전과 일치하도록 square MovieClip을 회전합니다.

square.rotation = triangle.rotation;

다음 코드에서는 수평 배율을 변경하여 square MovieClip의 폭을 1.5배 넓힙니다.

square.scaleX = 1.5;

객체 이름으로 변수(square, triangle)를 사용하고 그 뒤에 마침표(.)와 속성 이름(x, rotation, scaleX)을 차례로 사용하는 것이 일반적인 구조입니다. 도트 연산자인 마침표는 객체의 자식 요소 중 하나에 액세스한다는 것을 나타내는 데 사용됩니다. 컴퓨터 메모리에 있는 단일 값의 이름으로 "변수 이름-도트-속성 이름"의 전체 구조를 단일 변수와 같이 사용합니다.

메서드

메서드는 객체가 수행할 수 있는 작업입니다. 예를 들어 타임라인의 여러 키프레임과 애니메이션을 사용하여 Flash Professional에서 동영상 클립 심볼을 만든 경우를 가정해 봅니다. 이 동영상 클립을 재생 또는 중지하거나 재생 헤드를 특정 프레임으로 이동하도록 지시할 수 있습니다.

다음 코드는 shortFilm MovieClip의 재생을 시작하도록 지시합니다.

shortFilm.play();

다음 행은 shortFilm MovieClip의 재생을 중지합니다. 이렇게 하면 비디오를 일시 정지하는 것과 같이 재생 헤드가 제자리에 멈춥니다.

shortFilm.stop();

다음 코드는 비디오를 되감는 것과 같이 shortFilm MovieClip의 재생 헤드를 Frame 1로 이동하고 재생을 중지합니다.

shortFilm.gotoAndStop(1);

속성에서와 같이 객체 이름(변수) 뒤에 마침표를 사용한 후 메서드 이름과 괄호를 차례로 입력하여 메서드에 액세스합니다. 괄호는 메서드를 호출하는 것, 즉 객체가 해당 작업을 수행하도록 지시하는 것을 나타내는 방법입니다. 작업을 수행하는 데 필요한 추가 정보를 표시하는 방법으로 괄호 안에 값 또는 변수가 지정되는 경우도 있습니다. 이러한 값을 메서드 매개 변수라고 합니다. 예를 들어 gotoAndStop() 메서드는 이동할 프레임에 대한 정보가 필요하므로 괄호 안에 단일 매개 변수가 있어야 합니다. play()stop()과 같은 기타 메서드는 이름 자체로도 그 기능을 충분히 설명할 수 있으므로 추가 정보가 필요하지 않습니다. 그러나 괄호는 사용해야 합니다.

속성 및 변수와 달리 메서드는 값 자리 표시자로 사용되지 않습니다. 그러나 일부 메서드는 계산을 수행하여 변수처럼 사용할 수 있는 결과를 반환할 수 있습니다. 예를 들어 Number 클래스의 toString() 메서드는 숫자 값을 텍스트 표현으로 변환합니다.

var numericData:Number = 9; 
var textData:String = numericData.toString();

예를 들어 화면의 텍스트 필드에 Number 변수의 값을 표시하려면 toString() 메서드를 사용합니다. TextField 클래스의 text 속성은 String으로 정의되어 있으므로 이 속성에는 텍스트 값만 포함할 수 있습니다. text 속성은 화면에 표시된 실제 텍스트 내용을 나타냅니다. 다음 코드 행은 numericData 변수의 숫자 값을 텍스트로 변환합니다. 그런 다음 이 값이 화면에서 calculatorDisplay TextField 객체에 표시되도록 합니다.

calculatorDisplay.text = numericData.toString();

이벤트

컴퓨터 프로그램은 컴퓨터에서 단계별로 수행하는 일련의 명령입니다. 일부 간단한 컴퓨터 프로그램에는 프로그램이 끝나는 시점에 컴퓨터에서 수행되는 몇 가지 단계만 포함되어 있습니다. 그러나 ActionScript 프로그램은 사용자 입력 등을 기다리면서 계속해서 실행되도록 설계되었습니다. 이벤트는 컴퓨터에서 언제 어떤 명령을 수행할지 결정하는 메커니즘입니다.

기본적으로 이벤트는 ActionScript에서 감지하고 반응할 수 있는 사건입니다. 여러 이벤트가 버튼을 클릭하거나 키보드에서 키를 누르는 것과 같은 사용자 상호 작용과 관련되어 있지만, 이벤트 중에는 이와 다른 유형도 있습니다. 예를 들어 ActionScript를 사용하여 외부 이미지를 로드하는 경우 이미지 로드가 끝나면 알려 주는 이벤트가 있습니다. 개념적인 관점에서 보면 실행 중인 ActionScript 프로그램은 특정 상황이 발생하기를 기다리며 대기하고 있을 뿐입니다. 특정 상황이 발생하면 해당 이벤트에 대해 지정한 ActionScript 코드가 실행됩니다.

기본적 이벤트 처리

이벤트 처리는 특정 이벤트에 대한 응답으로 수행할 특정 작업을 지정하기 위한 방법입니다. 이벤트 처리를 수행하는 ActionScript 코드를 작성할 때 다음 세 가지 중요한 요소를 식별할 수 있어야 합니다.

  • 이벤트 소스: 이벤트가 발생할 객체. 예를 들어 클릭한 버튼 또는 이미지를 로드하는 Loader 객체 등이 이벤트 소스입니다. 이벤트 소스를 이벤트 대상이라고도 합니다. 해당 객체는 컴퓨터가 이벤트를 찾는 표적, 즉 이벤트가 실제로 발생한 위치이므로 이와 같은 이름으로도 불립니다.

  • 이벤트: 발생할 사건 및 응답할 사건. 많은 객체에서 여러 이벤트를 트리거하기 때문에 특정 이벤트를 식별하는 것이 중요합니다.

  • 응답: 이벤트가 발생하면 실행할 단계

이벤트를 처리할 ActionScript 코드를 작성할 경우에는 이러한 세 가지 요소가 항상 필요합니다. 코드는 다음과 같은 기본 구조를 따릅니다. 굵게 표시된 요소는 자리 표시자이며 특정 경우에 맞춰 사용자가 채워야 합니다.

function eventResponse(eventObject:EventType):void 
{ 
    // Actions performed in response to the event go here. 
} 
  
eventSource.addEventListener(EventType.EVENT_NAME, eventResponse);

이 코드는 두 가지 작업을 수행합니다. 먼저 함수를 정의하여 이벤트에 대한 응답으로 수행하려는 작업을 지정할 수 있습니다. 그런 다음 소스 객체의 addEventListener() 메서드를 호출합니다. addEventListener()를 호출하면 지정한 이벤트에 대해 해당 함수가 자동으로 "등록"됩니다. 따라서 이벤트가 발생하면 해당 함수의 작업이 수행됩니다. 이러한 부분을 개별적으로 보다 자세히 살펴 보겠습니다.

함수는 단축키 이름 같은 단일 이름으로 작업을 그룹화하여 수행할 수 있는 방법을 제공합니다. 함수는 특정 클래스와 반드시 연관되지는 않는다는 점을 제외하면 메서드와 동일합니다. 실제로 "메서드"라는 용어는 특정 클래스와 연관된 함수로 정의할 수 있습니다. 이벤트 처리를 위해 함수를 만드는 경우 함수의 이름(이 경우 eventResponse)을 선택하고, 매개 변수(이 예제에서는 eventObject)도 하나 지정합니다. 함수 매개 변수를 지정하는 것은 변수를 선언하는 것과 같기 때문에 매개 변수의 데이터 유형도 지정해야 합니다. 이 예제에서 매개 변수의 데이터 유형은 EventType입니다.

수신할 각 이벤트 유형에는 ActionScript 클래스가 연관되어 있습니다. 함수 매개 변수에 지정하는 데이터 유형은 항상 응답하려는 특정 이벤트의 연관된 클래스입니다. 예를 들어 click 이벤트(사용자가 마우스로 항목을 클릭할 때 트리거됨)는 MouseEvent 클래스와 연관되어 있습니다. click 이벤트에 대한 리스너 함수를 작성하려면 MouseEvent 데이터 유형의 매개 변수를 사용하여 리스너 함수를 정의합니다. 마지막으로, 여는 중괄호와 닫는 중괄호({ ... }) 사이에 이벤트가 발생할 때 컴퓨터에서 수행하려는 명령을 입력합니다.

이제 이벤트 처리 함수가 작성되었습니다. 다음 단계에서는 이벤트 발생 시 해당 함수를 호출하도록 이벤트 소스 객체(이벤트가 발생하는 버튼 등의 객체)에게 지시합니다. 해당 객체의 addEventListener() 메서드를 호출하여 이벤트 소스 객체에 함수를 등록합니다. 이벤트를 가지는 모든 객체는 addEventListener() 메서드도 함께 가집니다. addEventListener() 메서드에 다음과 같은 두 개의 매개 변수가 포함됩니다.

  • 첫 번째, 응답할 특정 이벤트 이름입니다. 각 이벤트는 특정 클래스와 연결되어 있습니다. 모든 이벤트 클래스는 고유한 이름 같은 특별한 값을 가지며 이러한 값은 각 해당 이벤트에 대해 정의됩니다. 이 값을 첫 번째 매개 변수로 사용합니다.

  • 두 번째, 이벤트 응답 함수 이름입니다. 함수 이름이 매개 변수로 전달되면 괄호 없이 작성됩니다.

이벤트 처리 프로세스

다음은 이벤트 리스너를 만들 때 발생하는 프로세스의 단계별 설명입니다. 이 경우는 myButton이라는 객체를 클릭할 때 호출되는 리스너 함수를 만드는 예제입니다.

프로그래머가 작성하는 실제 코드는 다음과 같습니다.

function eventResponse(event:MouseEvent):void 
{ 
    // Actions performed in response to the event go here. 
} 
 
myButton.addEventListener(MouseEvent.CLICK, eventResponse);

다음은 이 코드가 실행될 때 실제로 작동하는 방식을 나타낸 것입니다.

  1. SWF 파일이 로드되면 컴퓨터에서는 eventResponse()라는 함수의 존재 사실을 기억해 둡니다.

  2. 그런 다음 컴퓨터에서는 코드, 명확히 말하면 함수에 없는 코드 행을 실행합니다. 이 경우에는 이벤트 소스 객체(myButton)에서 addEventListener() 메서드를 호출하고 eventResponse 함수를 매개 변수로 전달하여 하나의 코드 행만 실행합니다.

    내부적으로 myButton에는 각 해당 이벤트를 수신하는 함수 목록이 있습니다. addEventListener() 메서드가 호출되면 myButton은 이벤트 리스너 목록에 eventResponse() 함수를 저장합니다.

  3. 어느 시점에서 사용자가 myButton 객체를 클릭하면 click 이벤트(코드에서 MouseEvent.CLICK으로 나타남)가 트리거됩니다.

    이때 다음과 같은 상황이 발생합니다.

    1. 해당 이벤트(이 예제에서는 MouseEvent)와 연관된 클래스의 인스턴스인 객체가 만들어집니다. 여러 이벤트에서 이 객체는 Event 클래스의 인스턴스입니다. 마우스 이벤트의 경우 이 객체는 MouseEvent 인스턴스이고, 다른 이벤트의 경우에는 해당 이벤트와 연관된 클래스의 인스턴스입니다. 생성된 이 객체는 이벤트 객체라고 하며, 발생한 이벤트에 대한 고유 정보(이벤트 유형, 이벤트 발생 위치 등) 및 적용 가능한 기타 이벤트별 정보가 포함되어 있습니다.

    2. 그런 다음 컴퓨터에서는 myButton에 의해 저장된 이벤트 리스너 목록을 검토합니다. 이러한 함수를 하나씩 검토하면서 각 함수를 호출하고 이벤트 객체를 매개 변수로 함수에 전달합니다. eventResponse() 함수는 myButton의 리스너 중 하나이므로, 컴퓨터에서는 이 프로세스의 일부로서 eventResponse() 함수를 호출합니다.

    3. eventResponse() 함수가 호출되면 해당 함수의 코드가 실행되어 특정 작업이 수행됩니다.

이벤트 처리 예제

다음에는 이벤트 처리 코드에 대한 보다 구체적인 예제가 몇 개 나와 있습니다. 이러한 예제를 통해 이벤트 처리 코드 작성 시 사용할 수 있는 공통적인 일부 이벤트 요소 및 가능한 변형에 대해 이해할 수 있습니다.

  • 버튼을 클릭하여 현재 동영상 클립 재생을 시작합니다. 다음 예제에서 playButton은 버튼의 인스턴스 이름이며 this는 "현재 객체"를 나타내는 특수 이름입니다.

    this.stop(); 
     
    function playMovie(event:MouseEvent):void 
    { 
        this.play(); 
    } 
     
    playButton.addEventListener(MouseEvent.CLICK, playMovie);
  • 텍스트 필드에 입력된 내용을 검색합니다. 이 예제에서 entryText는 입력 텍스트 필드이며 outputText는 동적 텍스트 필드입니다.

    function updateOutput(event:TextEvent):void 
    { 
        var pressedKey:String = event.text; 
        outputText.text = "You typed: " + pressedKey; 
    } 
     
    entryText.addEventListener(TextEvent.TEXT_INPUT, updateOutput);
  • 버튼을 클릭하여 URL로 이동합니다. 이 경우 linkButton은 버튼의 인스턴스 이름입니다.

    function gotoAdobeSite(event:MouseEvent):void 
    { 
        var adobeURL:URLRequest = new URLRequest("http://www.adobe.com/"); 
        navigateToURL(adobeURL); 
    } 
     
    linkButton.addEventListener(MouseEvent.CLICK, gotoAdobeSite);

객체 인스턴스 만들기

ActionScript에서 객체를 사용하려면 먼저 객체가 있어야 합니다. 객체를 만드는 방법 중 하나는 변수를 선언하는 것입니다. 그러나 변수를 선언하면 컴퓨터 메모리에 빈 공간만 만들어집니다. 따라서 변수에 실제 값을 항상 지정해야 합니다. 즉, 객체를 사용하거나 조작하려면 먼저 객체를 만들고 변수에 해당 객체를 저장합니다. 이처럼 객체를 만드는 과정을 객체 인스턴스화라고 합니다. 즉, 특정 클래스의 인스턴스를 만드는 것입니다.

객체 인스턴스를 간단하게 만드는 방법 중에는 ActionScript를 전혀 사용하지 않지 않아도 되는 방법도 있습니다. Flash Professional에서 동영상 클립 심볼, 버튼 심볼 또는 텍스트 필드를 스테이지에 배치하고 인스턴스 이름을 지정합니다. Flash Professional에서는 자동으로 해당 인스턴스 이름의 변수를 선언하고, 객체 인스턴스를 만들고, 해당 객체를 변수에 저장합니다. 이와 유사하게 Flex에서는 Flash Builder 디자인 모드에서 편집기에 구성 요소를 배치하거나 MXML 태그를 코딩하여 MXML로 구성 요소로 만듭니다. 해당 구성 요소에 ID를 지정하면 이 ID는 해당 구성 요소 인스턴스를 포함하는 ActionScript 변수의 이름이 됩니다.

그러나 객체를 시각적으로 만들고 싶지 않을 때도 있고 비시각적 객체의 경우에는 시각적인 방법을 사용할 수 없습니다. 이러한 경우에는 ActionScript만 사용하여 객체 인스턴스를 만들 수 있는 몇 가지 다른 방법을 활용하면 됩니다.

ActionScript 코드 내에 직접 작성되는 값인 리터럴 표현식을 사용하여 여러 ActionScript 데이터 유형의 인스턴스를 만들 수 있습니다. 다음에 몇 가지 예제가 나와 있습니다.

  • 직접 숫자를 입력하는 리터럴 숫자 값:

    var someNumber:Number = 17.239; 
    var someNegativeInteger:int = -53; 
    var someUint:uint = 22;
  • 텍스트가 따옴표로 둘러싸인 리터럴 문자열 값:

    var firstName:String = "George"; 
    var soliloquy:String = "To be or not to be, that is the question...";
  • true 또는 false 리터럴 값을 사용하는 리터럴 부울 값:

    var niceWeather:Boolean = true; 
    var playingOutside:Boolean = false;
  • 쉼표로 구분된 값 목록을 대괄호로 묶는 리터럴 배열 값:

    var seasons:Array = ["spring", "summer", "autumn", "winter"];
  • XML을 직접 입력하는 리터럴 XML 값:

    var employee:XML = <employee> 
            <firstName>Harold</firstName> 
            <lastName>Webster</lastName> 
        </employee>;

또한 ActionScript에서 Array, RegExp, Object 및 Function 데이터 유형의 리터럴 표현식을 정의합니다.

모든 데이터 유형의 인스턴스를 만드는 가장 일반적인 방법은 다음과 같이 클래스 이름과 함께 new 연산자를 사용하는 것입니다.

var raceCar:MovieClip = new MovieClip(); 
var birthday:Date = new Date(2006, 7, 9);

new 연산자를 사용하여 객체를 만드는 것을 흔히 "클래스 생성자를 호출"한다고 말합니다. 생성자는 클래스 인스턴스를 만드는 과정 중 호출되는 특수 메서드입니다. 이 방법으로 인스턴스를 만들 경우 클래스 이름 뒤에 괄호를 입력합니다. 이 괄호 안에 매개 변수 값을 지정하는 경우도 있습니다. 이 두 가지 작업은 메서드를 호출할 때도 수행됩니다.

리터럴 표현식을 사용하여 인스턴스를 작성할 수 있는 데이터 유형의 경우에도 new 연산자를 사용하여 객체 인스턴스를 만들 수 있습니다. 예를 들어 다음 두 코드 행은 동일한 작업을 수행합니다.

var someNumber:Number = 6.33; 
var someNumber:Number = new Number(6.33);

new ClassName()을 사용하여 객체를 만드는 방법에 익숙해지는 것이 좋습니다. ActionScript 데이터 유형 중에는 상응하는 시각적 표현이 존재하지 않는 경우가 많습니다. 따라서 이러한 데이터 유형의 인스턴스는 Flash Professional 스테이지 또는 Flash Builder MXML 편집기의 디자인 모드에서 항목을 배치하는 방법으로는 만들 수 없습니다. ActionScript에서 이러한 데이터 유형의 인스턴스는 new 연산자를 사용하는 방법으로만 만들 수 있습니다.

Adobe Flash Professional

Flash Professional에서는 라이브러리에 정의되어 있지만 스테이지에 배치되지 않은 동영상 클립 심볼의 인스턴스를 만들 때 new 연산자를 사용합니다.