[AS3] 기본적인 어플리케이션 작성

Programming/ActionScript 3.0 2007. 6. 28. 16:09
Flash, Flex Builder, Dreamweaver또는 임의의 텍스트 문자 편집기를 사용하여 as 확장자(extension)를 가지는 외부 ActionScript 원시 파일을 작성할 수 있다.

ActionScript 3.0은 Flash authoring tool나 Flex Builder 등 다양한 어플리케이션 개발 환경에서 사용할 수 있다.

아래에서는 Flash authoring tool 또는 Flex Builder 2 툴을 사용한 간단한 ActionScript 3.0 어플리케이션의 작성과 확장을 스텝 방식으로 학습해본다. 작성하는 어플리케이션은 ActionScript 3.0의 외부 클래스 파일을 Flash 및 Flex 어플리케이션으로 사용하기 위한 단순한 견본을 제시한다. 그 패턴은 다른 모든 어플리케이션에 적용할 수 있는 기본적인 것이다.


ActionScript 어플리케이션의 설계

어플리케이션의 작성을 시작하기 전에 어떠한 어플리케이션을 만들 것인가를 생각할 필요가 있다.

설계는 어플리케이션의 이름과 목적을 나타내는 짧은 설명 등과 같이 간단한 것에서부터 다수의 UML (Unified Modeling Language) 그림을 포함한 것과 같이 복잡한 것으로 나타낼 수 있는데 어느 것을 사용하여도 상관없다. 아래에서 나올 내용은 ActionScript 어플리케이션의 개발과 설계에서 빠뜨릴 수 없는 순서라고 할 수 있다.

다음에서 설명할 어플리케이션은 ActionScript 어플리케이션을 공부할 때 처음으로 사용되는 예로서 단순한 설계를 사용한 표준적인 "Hello World" 어플리케이션이다.

    * 어플리케이션의 이름은 HelloWorld 다.

    * "Hello, World!" 라고하는 문자열이 포함된 텍스트 필드가 1개 표시된다.

    * 이 필드를 간단하게 재이용할 수 있도록 Greeter라는 이름의 객체 지향 클래스가 1개 사용된다. 이 클래스는 Flash 문서 또는 Flex 어플리케이션 내에서 사용할 수 있다.

    * 기본이 되는 어플리케이션을 작성한 후에 유저에게 유저명을 입력시켜서 어플리케이션에 그 이름을 유저 리스트와 조합시키는 새로운 기능을 추가하다.

위와 같이 간결하게 정의하고 어플리케이션의 작성을 시작한다.


HelloWorld 프로젝트와 Greeter 클래스의 작성

Hello World 어플리케이션의 설계 설명에서는 재이용하기 쉬운 코드를 사용한다는 것이 명시되어 있다. 이 목표를 고려하여 어플리케이션은 Greeter라는 이름의 객체 지향 클래스를 1개 사용한다.이 클래스는 Flex Builder 또는 Flash authoring tool로 작성한 어플리케이션 내에서 사용된다.

Flash authoring tool로 Greeter 클래스를 작성하려면:

   1. Flash authoring tool로 [파일]-[신규]를 선택한다.

   2. [신규 문서] 다이알로그 박스로 ActionScript 파일을 선택하여 [OK]를 클릭한다.

ActionScript 편집 윈도우가 표시된다.

   3. [파일]-[저장]을 선택한다. 어플리케이션을 보존하는 폴더를 선택하여 ActionScript 파일에 Greeter.as라는 이름을 붙여 [OK]를 클릭한다.

 
Greeter 클래스에의 코드의 추가

Greeter 클래스는 오브젝트 Greeter를 정의하고 이것을 통해 HelloWorld 어플리케이션을 사용할 수 있다.

Greeter 클래스에 코드를 추가하려면 :

   1. 새로운 파일에 다음 코드를 입력한다.

package
{
public class Greeter
{
public function sayHello():String

{
var greeting:String;
greeting = "Hello World!";
return greeting;
}
}
}
Greeter 클래스에서는 " Hello World!";"라는 문자열을 돌려주는 1개의 sayHello() 메소드가 포함되어 있다.

   2. [파일]-[저장]을 선택하고 이 ActionScript 파일을 저장한다..

이로써 Flash 또는 Flex 어플리케이션으로 Greeter 클래스를 사용할 수 있게 되었다.


ActionScript 코드를 사용하는 어플리케이션의 작성

작성된 Greeter 클래스는 필요한 것을 모두 갖춘 어플리케이션이지만 어플리케이션 전부를 나타내는 것은 아니다. Greeter 클래스를 사용하려면 Flash 문서 또는 Flex 어플리케이션을 작성할 필요가 있다.

HelloWorld 어플리케이션에서는 Greeter 클래스의 새로운 인스턴스가 작성된다. 다음에 나타내는 것은 어플리케이션에 Greeter 클래스를 합성하는 방법이다..

Flash authoring tool를 사용해 ActionScript 어플리케이션을 작성하려면:

   1. [파일]-[신규]를 선택한다.

   2. [신규 문서] 다이알로그 박스로 [Flash 문서]를 선택하고 [OK]를 클릭한다.

새로운 Flash 윈도우가 표시된다.

   3. [파일]-[저장]을 선택한다. Greeter.as 클래스 파일과 같은 폴더를 선택하여 Flash 문서에 HelloWorld.fla라는 이름을 붙이고 [OK]를 클릭한다.

   4. [Flash 툴] 팔레트로 [텍스트 툴]을 선택한 후, 스테이지상에서 드레그 하여 폭 300 픽셀, 높이 약 100 픽셀의 새로운 텍스트 필드를 정의한다.

   5. 스테이지상의 텍스트 필드가 선택된 상태에서 [프롭퍼티] 윈도우에 텍스트 필드의 인스턴스명을 mainText라고 입력한다.

   6. 메인 타임 라인의 최초의 프레임을 클릭한다.

   7. [액션] 패널에 다음의 스크립트를 입력한다.
	var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello();
   8. 파일을 저장한다.

ActionScript 어플리케이션의 퍼블리시를 통한 테스트


어플리케이션 개발은 반복 프로세스다. 코드를 기술하여 컴파일 하고 올바르게 컴파일 될 때까지 코드를 편집한다. 컴파일 된 어플리케이션을 실행해 테스트하고 의도한 설계가 실현되고 있는지 어떤지를 확인한다. 의도한 설계대로 실현되지 않을 경우에는 실현될 때까지 코드를 편집한다. Flash 및 Flex Builder의 개발 환경에는 어플리케이션을 퍼블리시, 테스트, 및 디버그 하는 다수의 방법이 준비되어 있다.

다음에 각 환경에서 HelloWorld 어플리케이션을 테스트하는 기본적인 순서를 나타낸다.

Flash authoring tool를 사용해 ActionScript 어플리케이션을 퍼블리시 및 테스트하려면:

   1. 어플리케이션을 퍼블리시하고, compile error가 없는가 확인한다. Flash authoring tool로 [컨트롤]-[무비 프리뷰]를 선택하고 ActionScript 코드를 컴파일 하여 HelloWorld 어플리케이션을 실행한다.

   2. 어플리케이션을 테스트했을 때, [출력] 윈도우에 에러나 경고가 표시되었을 경우에는HelloWorld.fla 또는 HelloWorld.as 파일에서 에러의 원인을 수정하고 나서 어플리케이션의 테스트를 다시 시도한다.

   3. compile error가 없으면 Flash Player 윈도우에 Hello World 어플리케이션이 표시된다. 윈도우에는 "Hello World!"라는 텍스트가 표시된다.

 
이로써 간단하지만 ActionScript 3.0을 사용하여 완전한 객체 지향 어플리케이션을 작성할 수 있었다. 다음으로는 HelloWorld 어플리케이션을 확장해본다.


HelloWorld 어플리케이션의 확장

여기에서는 어플리케이션을 좀 더 흥미롭게 작성 해본다. 어플리케이션에 유저명을 요구시켜서 그것을 이름 리스트와 검증시켜본다.

우선 Greeter 클래스를 갱신해 새로운 기능을 추가한다. 다음에 Flex 또는 Flash 어플리케이션을 갱신해 새로운 기능을 추가한다.

Greeter.as 파일을 갱신하려면 :

   1. "Greeter.as" 파일을 연다.

   2. 파일의 내용을 다음과 같이 변경한다.

package{
public class Greeter{
// Defines the names that should receive a proper greeting.

public static var validNames:Array = ["Sammy", "Frank", "Dean"];

// Builds a greeting string using the given name.

public function sayHello(userName:String = ""):String{

var greeting:String;

if (userName == ""){
greeting = "Hello. Please type your user name, and then press the Enter key.";
}else if (validName(userName)){
greeting = "Hello, " + userName + ".";
}else{
greeting = "Sorry, " + userName + ",you are not on the list.";
}
return greeting;
}

// Checks whether a name is in the validNames list.

public static function validName(inputName:String = ""):Boolean{
if (validNames.indexOf(inputName) > -1){
return true;
}else{
return false;
}
}
}
}
Greeter 클래스는 몇개의 새로운 기능이 추가되었다.

   3. validNames 배열은 유효한 유저명을 리스트로 나타낸다. 이 배열은 Greeter 클래스의 로드시에 3개의 이름의 리스트에 초기화된다.

   4. sayHello() 메소드는 유저명을 받아들여 어떠한 조건에 근거하여 인사를 변경할 수 있게 된다. userName이 문자열 ("") 인 경우 greeting 프롭퍼티는 유저에게 이름의 입력을 요구하는 것으로 설정한다. 유저명이 유효하면 인사는 "Hello, userName"이 된다. 마지막으로 2개의 조건 어느 쪽에도 적합하지 않는 경우에는 greeting 변수는 "Sorry, userName, you are not on the list." 로 설정된다.

   5. validName() 메소드는 inputName변수 값을 validNames 배열내에서 발견했을 경우에는 true 를, 발견되지 않았을 경우에는 false를 반환한다. 스테이트먼트 validNames.indexOf(inputName) 는 validNames 배열 내에서 inputName 문자열과 같은 문자열이 있는지를 검사한다. Array.indexOf() 메소드는 배열내의 오브젝트 초기의 인스턴스의 인덱스 위치, 또는 오브젝트가 배열에 발견되지 않았을 경우에는 값 -1을 반환한다.

 
아래와 같이 Flash 파일 또는 Flex 파일을 편집한다.

 
Flash authoring tool를 사용해 어플리케이션을 변경하려면:

   1. HelloWorld.fla 파일을 연다.

   2. 프레임 1의 스크립트를 아래와 같이 변경하고 문자열 ("")를 Greeter 클래스의 sayHello() 메소드에게 건네도록 한다.
 
	var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello("");
   3. [툴] 팔레트의 [텍스트] 툴을 선택하고 스테이지상에서 기존의 mainText 텍스트 필드의 바로 아래에 2개의 새로운 텍스트 필드를 작성한다.

   4. 최초의 텍스트 필드의 라벨이 되는 텍스트로서 User Name: 이라고 입력한다.

   5. 1개의 새로운 텍스트 필드를 선택하고 텍스트 필드의 타입으로서 InputText를 선택한다. 인스턴스명으로서 textIn이라고 입력한다.

   6. 메인 타임 라인의 최초의 프레임을 클릭한다.

   7. [액션] 패널에서 기존의 스크립트의 아래에 아래와 같은 스크립트를 추가한다.
mainText.border = true;
textIn.border = true;

textIn.addEventListener(KeyboardEvent.KEY_UP, keyPressed);

function keyPressed(event:Event):void
{
if (event.keyCode == Keyboard.ENTER)
{
mainText.text = myGreeter.sayHello(textIn.text);
}
}
이 스크립트는 아래와 같은 기능을 한다
   8. 최초의 2행은 단순하게 2개의 텍스트 필드의 경계선을 정의한다.

   9. textIn 필드 등의 입력 텍스트 필드에는 dispatch 할 수 있는 이벤트 세트가 있다. addEventListener() 메소드에 의해서 특정의 타입의 이벤트가 발생했을 때에 실행되는 함수를 정의할 수 있다. 이 예에서는 키보드의 Enter 키를 떼었을 때 이벤트를 처리하게 된다.

  10. keyPressed() 커스텀 함수는 myGreeter 오브젝트의 sayHello() 메소드를 호출하여 textIn 텍스트 필드의 텍스트를 파라미터로서 건네준다. 이 메소드는 건네 받은 값에 근거하여 인사의 문자열을 돌려준다. 반환된 문자열은 mainText 텍스트 필드의 text 프롭퍼티에 할당할 수 있다.

프레임 1의 완전한 스크립트는 다음과 같다.
mainText.border = true;
textIn.border = true;

var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello("");

textIn.addEventListener(KeyboardEvent.KEY_UP, keyPressed);

function keyPressed(event:Event):void
{
if (event.keyCode == Keyboard.ENTER)
{
mainText.text = myGreeter.sayHello(textIn.text);
}
}
  11. 파일을 저장한다.

  12. [컨트롤]-[무비 프리뷰]를 선택하고 어플리케이션을 실행한다.

어플리케이션을 실행하면 유저명 입력을 통해서 메시지를 구할 수 있다. 유효한 유저명 (Sammy ,Frank , 또는 Dean)를 입력하면 "hello"라는 확인 메세지가 표시된다.

    

설정

트랙백

댓글