간단한 응용 프로그램

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

[새 문서] 대화 상자에서 [Flash 파일(ActionScript 3.0)]을 선택하고 [확인]을 클릭합니다.

새 Flash 윈도우가 열립니다.

[파일] > [저장]을 선택하고 Flash 파일의 이름을 Greetings.fla 로 지정한 다음 [저장] 버튼을 클릭합니다.

Flash [구성 요소] 패널에서 TextArea 구성 요소를 선택하고 스테이지로 드래그합니다.

[속성] 윈도우에서 스테이지에 TextArea 영역이 선택되어 있는 상태로 aTa 를 인스턴스 이름으로 입력하고 다음 정보를 입력합니다.

• W 값(폭)으로 230 을 입력합니다.

• H 값(높이)으로 44 를 입력합니다.

• X 값(가로 위치)으로 165 를 입력합니다.

• Y 값(세로 위치)으로 57 을 입력합니다.

• [매개 변수] 탭에서 텍스트 매개 변수로 Hello World! 를 입력합니다.

ColorPicker 구성 요소를 스테이지로 드래그하여 TextArea 왼쪽에 배치한 후 인스턴스 이름으로 txtCp 를 지정합니다. 속성 관리자에서 다음 정보를 입력합니다.

• X 값으로 96 을 입력합니다.

• Y 값으로 72 를 입력합니다.

세 가지 RadioButton 구성 요소를 한 번에 하나씩 스테이지로 드래그하고 인스턴스 이름을 각각 smallRb , largerRb 및 largestRb 로 지정합니다. 속성 관리자에서 다음 정보를 입력합니다.

• 각각의 W 값으로 100 을, H 값으로 22 를 입력합니다.

• X 값으로 155 를 입력합니다.

• Y 값으로 smallRb는 120 , largerRb는 148 , largestRb는 175 를 각각 입력합니다.

• 각각에 대해 groupName 매개 변수로 fontRbGrp 를 입력합니다.

• [매개 변수] 탭에서 각각의 레이블을 Small , Larger , Largest 로 입력합니다.

ComboBox를 스테이지로 드래그하고 인스턴스 이름을 msgCb 로 지정합니다. 속성 관리자에서 다음 정보를 입력합니다.

• W 값으로 130 을 입력합니다.

• X 값으로 265 를 입력합니다.

• Y 값으로 120 을 입력합니다.

• [매개 변수] 탭에서 prompt 매개 변수로 Greetings 를 입력합니다.

• dataProvider 매개 변수의 텍스트 필드를 두 번 클릭하여 [값] 대화 상자를 엽니다.

• 더하기 기호를 클릭하고 레이블 값을 Hello World! 로 바꿉니다.

• 위의 단계를 반복하여 레이블 값 Have a nice day! 와 Top of the Morning! 을 추가합니다.

• [확인]을 클릭하여 [값] 대화 상자를 닫습니다.

파일을 저장합니다.

F9 키를 누르거나 [윈도우] 메뉴에서 [액션]을 선택하여 [액션] 패널을 엽니다(열려 있지 않은 경우). 기본 타임라인에서 [프레임 1]을 클릭하고 [액션] 패널에서 다음 코드를 입력합니다.

import flash.events.Event; 
import fl.events.ComponentEvent; 
import fl.events.ColorPickerEvent; 
import fl.controls.RadioButtonGroup; 
 
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp"); 
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
msgCb.addEventListener(Event.CHANGE, cbHandler);

처음 세 행은 응용 프로그램에서 사용하는 이벤트 클래스를 가져옵니다. 따라서 사용자가 구성 요소 중 하나와 상호 작용할 경우 이벤트가 발생합니다. 다음 다섯 행은 응용 프로그램에서 수신하려고 하는 이벤트에 대한 이벤트 핸들러를 등록합니다. 따라서 RadioButton을 클릭하면 이에 대한 click 이벤트가 발생하고 ColorPicker에서 다른 색상을 선택하면 change 이벤트가 발생합니다. 드롭 다운 목록에서 다른 인사말을 선택하면 ComboBox에서 change 이벤트가 발생합니다.

네 번째 행은 응용 프로그램이 리스너를 각 버튼에 개별적으로 할당하는 대신 이벤트 리스너를 RadioButton 그룹에 할당할 수 있도록 RadioButtonGroup 클래스를 가져옵니다.

[액션] 패널에 다음 코드 행을 추가하여 TextArea에서 텍스트의 size 및 color 스타일 속성을 변경할 때 응용 프로그램이 사용하는 tf TextFormat 객체를 만듭니다.

var tf:TextFormat = new TextFormat();

다음 코드를 추가하여 rbHandler 이벤트 처리 함수를 만듭니다. 이 함수는 사용자가 RadioButton 구성 요소 중 하나를 클릭할 때 click 이벤트를 처리합니다.

function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
        } 
        aTa.setStyle("textFormat", tf); 
}

이 함수는 switch 문으로 event 객체의 target 속성을 검사하여 어느 RadioButton이 해당 이벤트를 트리거했는지 확인합니다. currentTarget 속성에는 이벤트를 트리거한 객체의 이름이 포함되어 있습니다. 사용자가 클릭한 RadioButton에 따라 응용 프로그램은 TextArea에서 텍스트의 크기를 14, 18 또는 24포인트로 변경합니다.

다음 코드를 추가하여 ColorPicker의 값 변경 사항을 처리하는 cpHandler() 함수를 구현합니다.

function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
}

이 함수는 tf TextFormat 객체의 color 속성을 ColorPicker에서 선택된 색상으로 설정하고 setStyle() 을 호출하여 aTa TextArea 인스턴스의 텍스트에 해당 스타일을 적용합니다.

다음 코드를 추가하여 ComboBox 선택의 변경 내용을 처리하는 cbHandler() 함수를 구현합니다.

function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.label; 
}

이 함수는 단순히 TextArea의 텍스트를 ComboBox에서 선택된 텍스트인 event.target.selectedItem.label 로 바꿉니다.

[컨트롤] > [동영상 테스트]를 선택하거나 Control+Enter를 눌러 코드를 컴파일하고 Greetings 응용 프로그램을 테스트합니다.

다음 단원에서는 외부 ActionScript 클래스 및 라이브러리에 필수 구성 요소만 있는 FLA 파일을 사용하여 같은 응용 프로그램을 만드는 방법을 보여 줍니다.

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

[새 문서] 대화 상자에서 [Flash 파일(ActionScript 3.0)]을 선택하고 [확인]을 클릭합니다.

새 Flash 윈도우가 열립니다.

[파일] > [저장]을 선택하고 Flash 파일의 이름을 Greetings2.fla 로 지정한 후 [저장] 버튼을 클릭합니다.

다음과 같은 각 구성 요소를 [구성 요소] 패널에서 라이브러리로 드래그합니다.

• ColorPicker

• ComboBox

• RadioButton

• TextArea

  이러한 에셋은 컴파일된 SWF 파일에 사용되므로 라이브러리에 추가해야 합니다. 구성 요소를 [라이브러리] 패널 아래쪽으로 드래그합니다. 이러한 구성 요소를 라이브러리에 추가할 때 List, TextInput, UIScrollBox 등의 다른 에셋도 자동으로 추가됩니다.

[속성] 윈도우에서 [문서 클래스]에 Greetings2 를 입력합니다.

문서 클래스에 대한 정의를 찾을 수 없다는 경고가 표시되면 무시합니다. Greetings2 클래스는 다음 단계에서 정의합니다. 이 클래스는 응용 프로그램의 기본 기능을 정의합니다.

Greetings2.fla 파일을 저장합니다.

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

[새 문서] 대화 상자에서 [ActionScript 파일]을 선택하고 [확인]을 클릭합니다.

새 스크립트 윈도우가 열립니다.

스크립트 윈도우에 다음 코드를 추가합니다.

package { 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.events.MouseEvent; 
    import flash.text.TextFormat; 
    import fl.events.ComponentEvent; 
    import fl.events.ColorPickerEvent; 
    import fl.controls.ColorPicker; 
    import fl.controls.ComboBox; 
    import fl.controls.RadioButtonGroup; 
    import fl.controls.RadioButton; 
    import fl.controls.TextArea; 
    public class Greetings2 extends Sprite { 
        private var aTa:TextArea; 
        private var msgCb:ComboBox; 
        private var smallRb:RadioButton; 
        private var largerRb:RadioButton; 
        private var largestRb:RadioButton; 
        private var rbGrp:RadioButtonGroup; 
        private var txtCp:ColorPicker; 
        private var tf:TextFormat = new TextFormat(); 
        public function Greetings2() {    

이 스크립트는 Greetings2라는 ActionScript 3.0 클래스를 정의하며 다음과 같은 작업을 수행합니다.

• 파일에 사용될 클래스를 가져옵니다. 일반적으로 코드에서 여러 클래스를 참조할 때 이러한 import 문을 추가하게 되지만 이 예제에서는 간단히 하기 위해 모두 하나의 단계로 가져옵니다.

• 코드에 추가할 여러 유형의 구성 요소 객체를 나타내는 변수를 선언합니다. 다른 변수는 tf TextFormat 객체를 만듭니다.

• 클래스에 대해 생성자 함수 Greetings2() 를 정의합니다. 이 단계에서는 이 함수에 행을 추가하고 다음 단계에서는 클래스에 다른 메서드를 추가합니다.

[파일] > [저장]을 선택하고 파일의 이름을 Greetings2.as 로 지정한 후 [저장] 버튼을 클릭합니다.

Greeting2() 함수에 다음 코드 행을 추가합니다.

    createUI(); 
    setUpHandlers(); 
}

함수는 이제 다음과 같아야 합니다.

public function Greetings2() { 
    createUI(); 
    setUpHandlers(); 
}

Greeting2() 메서드의 닫는 중괄호 뒤에 다음 코드 행을 추가합니다.

private function createUI() { 
    bldTxtArea(); 
    bldColorPicker(); 
    bldComboBox(); 
    bldRadioButtons(); 
} 
private function bldTxtArea() { 
    aTa = new TextArea(); 
    aTa.setSize(230, 44); 
    aTa.text = "Hello World!"; 
    aTa.move(165, 57); 
    addChild(aTa); 
} 
private function bldColorPicker() { 
    txtCp = new ColorPicker(); 
    txtCp.move(96, 72); 
    addChild(txtCp); 
} 
private function bldComboBox() { 
    msgCb = new ComboBox(); 
    msgCb.width = 130; 
    msgCb.move(265, 120); 
    msgCb.prompt = "Greetings"; 
    msgCb.addItem({data:"Hello.", label:"English"});             
    msgCb.addItem({data:"Bonjour.", label:"Français"});             
    msgCb.addItem({data:"¡Hola!", label:"Español"});             
    addChild(msgCb); 
} 
private function bldRadioButtons() { 
    rbGrp = new RadioButtonGroup("fontRbGrp"); 
    smallRb = new RadioButton(); 
    smallRb.setSize(100, 22); 
    smallRb.move(155, 120); 
    smallRb.group = rbGrp; //"fontRbGrp"; 
    smallRb.label = "Small"; 
    smallRb.name = "smallRb"; 
    addChild(smallRb); 
    largerRb = new RadioButton(); 
    largerRb.setSize(100, 22); 
    largerRb.move(155, 148); 
    largerRb.group = rbGrp; 
    largerRb.label = "Larger"; 
    largerRb.name = "largerRb"; 
    addChild(largerRb); 
    largestRb = new RadioButton(); 
    largestRb.setSize(100, 22); 
    largestRb.move(155, 175); 
    largestRb.group = rbGrp; 
    largestRb.label = "Largest"; 
    largestRb.name = "largestRb"; 
    addChild(largestRb); 
}

이 행은 다음과 같은 작업을 수행합니다.

• 응용 프로그램에 사용되는 구성 요소를 인스턴스화합니다.

• 각 구성 요소의 크기, 위치 및 속성을 설정합니다.

• addChild() 메서드를 사용하여 각 구성 요소를 스테이지에 추가합니다.

bldRadioButtons() 메서드의 닫는 중괄호 뒤에 setUpHandlers() 메서드에 대한 다음 코드를 추가합니다.

private function setUpHandlers():void { 
    rbGrp.addEventListener(MouseEvent.CLICK, rbHandler); 
    txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler); 
    msgCb.addEventListener(Event.CHANGE, cbHandler); 
} 
private function rbHandler(event:MouseEvent):void { 
    switch(event.target.selection.name) { 
        case "smallRb": 
            tf.size = 14; 
            break; 
        case "largerRb": 
            tf.size = 18; 
            break; 
        case "largestRb": 
            tf.size = 24; 
            break; 
    } 
    aTa.setStyle("textFormat", tf); 
} 
private function cpHandler(event:ColorPickerEvent):void { 
    tf.color = event.target.selectedColor; 
    aTa.setStyle("textFormat", tf); 
} 
private function cbHandler(event:Event):void { 
    aTa.text = event.target.selectedItem.data; 
} 
} 
}

이러한 함수는 구성 요소에 대한 이벤트 리스너를 정의합니다.

[파일] > [저장]을 선택하여 파일을 저장합니다.

[컨트롤] > [동영상 테스트]를 선택하거나 Control+Enter를 눌러 코드를 컴파일하고 Greetings2 응용 프로그램을 테스트합니다.