한빛출판네트워크

제공 : 한빛 네트워크
저자 : Colin Moock
역자 : 박주현
원문 : ActionScript 3.0: Is It Hard or Not?

이제 다음 예제에서는 재생 중에 무비클립 인스턴스를 생성 해보겠습니다. ActionScript 1.0 에서의 방법입니다.

1. Library에서 원하는 무비클립심볼에 마우스 오른쪽 버튼을 누르고, Linkage를 선택합니다.
2. "Export for ActionScript" 를 체크하세요.
3. 코드에서 사용하기 위해 이름을 "BallSymbol"을 짓고 OK를 누르세요.
4. 원하는 timeline에 다음의 코드를 추가합시다.

   someParentClip.attachMovie("BallSymbol", "ball1", 0);
   

ActionScript 3.0 의 방법입니다.

1. Library에서 원하는 무비클립심볼에 마우스 오른쪽 버튼을 누르고, Linkage를 선택합니다.
2. "Export for ActionScript" 를 체크하세요.
3. 코드에서 쓰기 위해 클래스 이름을 짓겠습니다. "BallClass"로 하고 OK를 눌러봅시다.
4. ‘ActionScript Class 경고 창’에서 OK를 누르세요.
5. 원하는 timeline에 다음의 코드를 추가합시다.

   someParentClip.addChild(new Ball());
   

위 ActionScript 1.0에서의 방법과 ActionScript 3.0에서의 방법, 둘의 실질적인 차이점은 무비클립 인스턴스를 생성하고 이를 stage에 등록하는 다음의 코드뿐입니다.

// ActionScript 1.0 code:
someParentClip.attachMovie("BallSymbol", "ball1", 0);

// ActionScript 3.0 code:
someParentClip.addChild(new Ball());

저는 ‘인스턴스를 만드는 방법’ 중에 “new Ball”을 사용하는 ActionScript 3.0 형태가 새로 프로그래밍을 사람에게 "attachMovie(‘BallSymbol’...)."을 쓰는 ActionScript 1.0형태보다 훨씬 더 직관적이라 생각합니다. “new Ball”이 “무언가를 새로 만든다”는 의미로써 훨씬 의미의 이해가 더 빠르고요. ActionScript 3.0의 문법 “addChild()”은 “부모”클립의 아래에 속하는 “아들”클립, 즉 “부모자식 계층도”로 클립간의 관계를 보다 쉽고 직관적으로 표현합니다. 문법적인 측면을 떠나 ActionScript 3.0방식의 class기반 구조의 지원은 새로운 개발자가 OOP에 쉽게 적응할 수 있도록 도와줍니다. ActionScript 3.0에서 “new Ball()”을 쓸 줄 안다면 얼마든지 다른 형태의 응용이 가능합니다. 일단 “new Ball()”을 배우게 되면 “new TextField()”, "new Date()", "new MovieClip()", 와 "new ColorPicker()" 을 더 배우는 건 금방입니다. 이러한 ActionScript 3.0의 “new-based” 객체생성방법은 이전의, attachMovie()로 Library 무비클립, createEmptyMovieClip()로 기본 무비클립, createTextField()로 기본 텍스트필드, “new ClassName()”로 프로그램 객체들을 만드는 방법들보다 훨씬 간단합니다. 결국 이러한 ActionScript 2.0과 ActionScript 1.0에서의 객체생성방법은 새로 배우기에 어렵고 외우기도 힘들어서 Flash를 배우기 어렵다고 알려지게 된 원인 중 하나입니다.

ActionScript 3.0의 새로운 display시스템은 이전의 것보다 훨씬 제약이 없어져서 배우기 쉬워졌습니다. 이전의 Flash display시스템을 배우는 중에는 필시 문서화되지 않은 수많은 복잡한 제약들을 겪을 수 밖에 없었고, 이는 Flash 커뮤니티에 물어보아 해결해야만 했습니다. 예를 들어 ActionScript 2.0에서는 그래픽오브젝트 사이에 새로운 그래픽오브젝트를 직접 추가하는 기능이 없었습니다. 대신에 프로그래머는 swapDepths()를 이용해 직접 depth를 관리하는 코드를 만들어 그래픽오브젝트들을 재정렬하기도 했습니다. 마찬가지로 특정 swf파일 의 display 목록에 다른 swf파일을 추가할 방법도 제공되지 않습니다. 대신 프로그래머는 원하는 ‘부모’swf파일에 ‘자식’swf 파일을 직접 추가해서 ‘자식’심볼을 등록, 이를 사용해야 했습니다.

ActionScript 2.0과 ActionScript 1.0의 개발환경은 기존의 Flash 개발자들에게는 친숙하지만, ActionScript를 새로 배우는 사람에게는 큰 장애요소였습니다. 반면 ActionScript 3.0의 display시스템 매우 우수하여, 새로 배우는 프로그래머가 낯선 환경에 적응하는데 적은 시간이 걸리고, 실제 유용한 부분에 대해서 배울 시간이 많아졌습니다. ActionScript 3.0에서는 addChildAt()를 이용, 그래픽오브젝트 사이에 다른 그래픽오브젝트를 직접 끼워 넣을 수 있습니다. 또한 이것으로 offscreen의 모든 그래픽 container들을 onscreen이나 다른 곳에 손쉽게 넣을 수 있습니다. 그리고 쉽게 특정 swf파일의 심볼 인스턴스를 만들어 다른 swf파일의 display 리스트에 추가할 수 있습니다. 이로 시간을 절약할 수 있을 뿐만 아니라 ActionScript프로그램의 코드량을 줄일 수 있다는 점에서 뛰어나고, 결국 배우기가 쉬워졌습니다.

이제 서버로 간단한 로그인 정보를 보내는 마지막 예제로 ActionScript 1.0와 ActionScript 3.0의 난이도 비교를 해보겠습니다. ActionScript 1.0의 코드는 다음과 같이 loadVariables()대신 LoadVars를 사용하여 데이터를 보내고 읽습니다. 코드에서는 stage에 usernameField(이름)와 responseField(서버응답)의 2가지 텍스트필드를 배치하였다고 간주하였습니다.

// frame 1의 코드
var dataSender = new LoadVars();
var dataReceiver = new LoadVars();
dataReceiver.onLoad = function () {
  responseField.text = this.serverResponse;
}

function submitForm () {
  dataSender.username = usernameField.text;
  dataSender.sendAndLoad("http://www.example.com/cgi-bin/login.pl",
                         dataReceiver, 
                         "GET");
}

// submit button의 코드
on (release) {
  submitForm();
}

아래는 ActionScript 3.0 버전의 코드입니다.

// frame 1의 코드
var variables = new URLVariables();
var request = new URLRequest();
request.url = "http://www.example.com/cgi-bin/login.pl";
request.data = variables;

var loader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.VARIABLES;
loader.addEventListener(Event.COMPLETE, completeListener);

submitButton.addEventListener(MouseEvent.CLICK, clickListener);

function completeListener (e:Event) {
  responseField.text = loader.data.serverResponse;
}

function clickListener (e:MouseEvent) {
  variables.username = inputField.text;
  loader.load(request);
}

사실 위의 2가지 예제가 처음 프로그램을 하는 사람이 따라 하기에는 어렵다고 생각됩니다. 양쪽의 코드를 이해하기 위해서는 클래스의 생성, 변수의 대입, 이벤트의 등록에 대한 기본적인 지식이 필요합니다. 하지만 ActionScript 3.0의 코드는 장기적 관점에서 다음의 여러 가지 장점이 있습니다.

• ActionScript 3.0 URLLoader의 사용법을 배우면 이를 이용, 바이너리, 텍스트, 변수 나 XML 같은 모든 종류의 데이터를 읽을 수 있습니다. 이와 대조적으로 ActionScript 2.0과 그 이전 버전에서는 각각의 클래스들은 XML을 읽기 위해 필요했고, (XML.load()을 참조하세요) 비교 메커니즘이 변수를 로딩하기 위해 존재했습니다. (loadVariables()).ActionScript 3.0에서는 URLLoader만 알면 모든 타입의 데이터에서 사용이 가능합니다.
• ActionScript 3.0에서는 URRLoader만 한번 배우면 바로 이를 Loader 클래스에서도 사용가능한데, 이는 그래픽정보를 jpg 나 swf 파일에서 쉽게 끌어올 수 있습니다. ActionScript 2.0과 그 이전 버전에서는 다른 시스템(loadMovie(), loadMovieNum(), MovieClipLoader)이 각 그래픽정보들을 읽는데 사용되었습니다. 게다가 ActionScript 2.0의 API는 그 각각의 쓰임새에 따른 네이밍이 명확하지 못했습니다. ActionScript 2.0과 ActionScript 1.0의 일관적이지 못한 점 때문에 ActionScript 개발자들이 자기가 제대로 작성했는지 헷갈릴 정도였습니다. 그래서 “loadMovie로 jpg 파일 읽을 수 있나요?”,“txt 파일 읽으려고 하는데 정말 loadVariables()써도 되나요? Txt 읽는 함수가 아니라, 변수 읽는 용도 함수 아닌가요?” “언제 loadVariables()대신에 LoadVars를 쓸 수 있나요?” 라고 종종 질문을 받아왔습니다. 이에 비해 ActionScript 3.0 의 읽기용 함수들은 일관되고 간결합니다. Loader는 그래픽객체를, URLLoader는 binary데이타나 text데이터를 각각 읽어 올 수 있습니다. 둘 다 공통적으로 load()를 사용하고 같은 load-status 이벤트를 발생시킵니다. (Loader의 경우 LoaderInfo 인스턴스를 통해) 이 일관성 덕분에 이전 버전의 ActionScript 보다 훨씬 쉽게 배울 수 있습니다.
• ActionScript 3.0 에서는 addEventListener() 형태와 내장event 아키텍쳐가 언어 전반에 두루 적용되어, 컴포넌트의 이벤트, 네트워크 작업이나 입력에서도 동일하게 사용됩니다. 일단 이벤트를 처리하는 방법을 한번 배우면 다른 모든 사용처에도 동일하게 바로 사용이 가능합니다. ActionScript 2.0 과 그 이전 버전에서는, event properties, event listeners, on() 이벤트들, onClipEvent() 들의 총 4가지 이벤트 처리방법을 배워야 했습니다.
• 이러한 이전 버전과의 event 처리방법의 차이점 중에, 특히 이전의 on()/onClipEvent() 시스템과 이번의 addEventListener() 시스템의 비교가 가장 중요합니다. 전자의 시스템은 Visual 적인 Flash 환경에서 특정 오브젝트에 원하는 기능을 추가하기에 무척 간편한 시스템입니다. 후자의 시스템은 코드의 집중도를 높이고, 관리성을 향상을 추구합니다. 개념적으로 on()/onClipEvent() 시스템은 굉장히 이해하기 쉽습니다만, 필요한 별도 도구의 지원을 얻기 힘들었습니다. 빈번히 화면에 나오는 오브젝트의 기능을 추가를 위해 반복적으로, 또 비관리적으로 코드가 덫 붙여졌습니다. 이로 인해 시간을 많이 잡아먹는 단순하면서도 찾기 힘든 버그들이 많이 나오게 되고, 여러 개발자가 동시에 같이 개발하기도 어려웠습니다.
• 때문에 Flash CS3에서 on()/onClipEvent()시스템은 사라졌습니다. 내 생각에는 나중에 Adobe가 Visual 환경에서 더 강력한 기능의 toolset을 만들어서 on()/onClipEvent()시스템을 충분히 편리하게 사용할 수 있다면 이를 다시 복구시킬 것 같습니다. 예를 들자면 화면에 나오는 원하는 특정 오브젝트의 클래스를 자동으로 작성, 이 코드를 적당한 곳에 배치하여, 이를 유저에게 해당 코드를 작성 수정 가능하게 만들 것 같습니다. tool들의 적당한 지원이 있으면, 이와 같이 화면의 오브젝트에 직접 이벤트를 만들어 추가하더라도 개발이 원활하게 진행되도록 큰 도움이 될 것입니다. Adobe의 새로운 tool 인 Thermo 는 이러한 추세를 보여줍니다.