'Programming/Action Script 3.0'에 해당하는 글 9건

Testing in-chapter example code listings

이번 테스팅에서는 프로그램에서 특정 시점에 변수값을 나타내거나, 화면에 내용을 보여줄 것이다.

1. 스테이지의 텍스트 필드에 값을 나타내기 위해, 스테이지에 Dynamic 텍스트 필드를 생성한다.
 - Line type: Multiline
 - Instance name - outputText

2. 텍스트 필드에 값을 쓰려면 appendText() 메소드를 코드에 추가해야 한다.

3. trace() 함수를 사용하여 결과를 확인할 수도 있다.

4. Control > Test Movie 에서 SWF를 생성하고 결과를 확인한다.

  • trace() 함수 : 변수나, 상수등의 값을 Output 패널에 나타낸다.
    var albumName:String = "Three for the money";
    trace( "albumName = ", albumName );
    // output: albumName = Three for the money

  • 스테이지의 텍스트 필드 : TextField 클래스의 appendText() 메소드는 텍스트 필드의 내용 끝에 문자값을 추가하는데 사용될 수 있고, AS를 사용하여 텍스트 필드에 접근하려면, 텍스트 필드의 인스턴스 네임(outputText 같은..)을 지정해야 한다.
    var albumName:String = "Three for the money";
    outputText.appendText( "albumName = " );
    outputText.appendText( albumName );
    // output: albumName = Three for the money

    줄을 분리시킬 경우에는 특정 부분에 newline 문자인 "\n" 를 삽입하면 된다.
    outputText.appendText( "\n" );

    trace() 함수와 달리 appendText() 메소드는 파라미터로서 하나의 문자열 값만 받을 수 있다.
    문자열이 아닌 변수값을 출력하려 한다면, 객체의 toString 메소드를 사용하여 문자열 값으로 변환해야만 한다.
    var albumYear:int = 1999;
    outputText.appendText( "albumYear = " );
    outputText.appendText( albumYear.toString() );

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

,
Designing your ActionScript application

AS 어플리케이션의 첫번째 예제는 매우 단순하게 설계된 "Hello World" 이다.
  • 어플리케이션 이름 : Helloworld
  • "Hello World!" 문구가 텍스트 필드에 출력
  • 재사용을 위해, 플래시 문서나 플렉스 어플리케이션에서 사용될 수 있는 Greeter란 이름의 객체지향 클래스 사용
  • 기본 어플을 만든 후에, 사용자가 이름을 입력하고, 사용자 목록을 체크하는 새로운 기능 추가


Creating the HelloWorld project and the Greeter class

 - File > New > ActionScript file 선택
 - File > Save > Greeter.as 저장


Adding code to the Greeter class

Greeter 클래스 : HelloWorld 어플에 사용할 Greeter 객체를 정의
package
{
    public class Greeter
    {
        public function sayHello():String
        {
            var greeting:String;
            greeting = "Hello World!";
            return greeting;
        }
    }
}
 - Greeter 클래스는 "Hello World!" 문자열을 반환하는 sayHello() 메소드를 포함.


Greating an application that uses your ActionScript code

Greeter 클래스는 함수를 정의하고 있지만, 완전하게 보여지지는 않는다.
클래스를 사용하기 위해서는 플래시 문서를 생성해야 한다.

 - File > New > Flash Document 선택
 - File > Save > HelloWorld.fla 저장

1. 텍스트 툴을 선택하고 스테이지에 드래그하여 300px * 100px 정도의 새로운 텍스트 필드를 정의.
2. 속성 패널에서 텍스트 유형을 Dyanmic Text로 지정하고, 인스턴스 이름에 mainText를 입력한다.
3. 액션 패널에 다음 스크립트를 입력한다.
var myGreeter:Greeter = new Greeter();
mainText.text = myGreeter.sayHello();
 - 1줄: Greeter 클래스에서 myGreeter 객체를 생성
 - 2줄: mainText 텍스트 필드에 sayHello() 메소드로 반환된 문자열 반환. (Hello World!)


Publishing and testing your ActionScript application

Flash 와 Flex builder 개발 환경은 어플의 테스트 및 디버그, 퍼블리쉬을 위한 몇가지 방법을 제공한다.
어플을 퍼블리시하고 컴파일 에러를 주시하라.
 - Control > Test Movie
결과는 아마도 mainText Dynamic 텍스트 필드 안에 "Hello World!" 가 보여질 것이다.


Enhancing the HelloWorld application

어플을 조금더 흥미롭게 하기 위해, 사용자에게 이름을 물어보고 미리 정의된 목록의 이름과 일치하는지를 확인할 것이다.
먼저, 새로운 함수를 추가하기 위해 Greeter 클래스를 변경하고, 새 함수를 사용하기 위해 어플을 변경한다.

1. Greeter.as 파일을 다음의 내용으로 변경한다.
package
{
    public class Greeter
    {
        // 인사 받을 이름을 정의.
        pubilc static var validNames:Array = ["Sammy", "Frank", "Dean"];

        // 주어진 이름에 인사하는 함수
        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;
        }

        // 입력된 이름이 리스트에 있는지 확인
        pubilc function validName(inputName:String = ""):Boolean
        {
            if (validNames.indexOf(inputName) > -1)
            {
                return true;
            }
            else
            {
                return false;
            }
        }
    }
}
 - validNames 배열은 유효한 사용자 이름들을 목록화한다.
 - 배열은 Greeter 클래스가 로드됐을 때 세가지 이름의 목록으로 초기화한다.
 - sayHello() 메소드는 사용자 이름을 입력받고 몇가지의 조건에 기반하여 인사말을 변경한다.
 - 만약 userName 이 빈 문자열("")이면, greeting 속성은 사용자 이름을 입력받을 준비를 한다.
 - 사용자 이름이 일치하면, 인사말은 "Hello, userName."이 된다.
 - 마지막에는, 위 두 조건에 해당하지 않은을 경우, greeting 변수는 "Sorry userName, you are not on the list."로 지정된다.
 - validName() 메소드는 validNames 배열에서 inputName을 찾을 수 있으면 true, 찾지 못하면 false를 반환한다.
 - validNames.indexOf(niputName) 구문은 inputName 문자열에 대해 validNames 배열에서 각각의 문자열을 체크한다.
 - Array.indexOf() 메소드는 배열에서 객체의 첫번째 인스턴스의 인덱스 위치를 반환하거나, 배열에서 찾지 못하면 -1 값을 반환한다.

2. HelloWorld.fla 파일을 열고 sayHello() 메소드에 빈 문자열("")을 넘기도록 1번 프레임의 스크립트를 수정한다.
mainText.text = myGreeter.sayHello( "" );

텍스트 툴을 선택하고, 스테이지에서 mainText 텍스트 필드 아래에 새로운 텍스트 필드를 두 개 생성한다.
하나의 텍스트 필드에는 "User Name:" 이란 문구를 넣는다.
다른 텍스트 필드의 속성 창에는, 텍스트 유형을 InputText, 라인 유형을 Single line 선택하고, 인스턴스 이름은 textIn 을 입력한다.

타임라인의 첫번째 프레임의 스크립트 뒤에 다음을 입력한다.
mainText.border = true;
textIn.border = true;

textIn.addEventListener( KeyboardEvent.KEY_DOWN, keyPressed );

function keyPressed( event:KeyboardEvent ):void
{
    if ( event.keyCode == Keyboard.ENTER )
    {
        mainText.text = myGreeter.sayHello( textIn.text );
    }
}
 - 첫 두 줄은 단순히 두 개의 텍스트 필드 테두리를 정의한 것이다.
 - 입력 텍스트 필드인 textIn은 빠른 처리를 위해 이벤트를 지정한다.
 - addEventListener() 메소드는 이벤트 타입이 발생할 때 실행할 함수를 정의하게 한다.
    (위 경우에, 이벤트는 키보드의 키를 누르는 것이다. )
 - keyPressed() 사용자 함수는 눌려진 키가 Enter 키인지 아닌지를 체크한다.
 - Greeter 객체의 sayHello() 메소드를 호출하면, 파라미터로서 textIn 텍스트 필드의 텍스트가 전달되고, 전달된 값에 의해 인사말 문자열을 반환한다.
 - 반환된 문자열은 mainText 텍스트필드의 text 속성에 할당된다.

3. 어플을 실행시켜본다 ( Control > Test Movie )

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

,
다음은 액션스크립트 클래스를 생성하기 위한 최소한의 단계이다.

1. 텍스트 문서로 작업할 수 있는 Flex Builder, Flash, Dreamweaver 등의 프로그램에서 새 텍스트 문서를 연다.

2. class 구문으로 이름을 지정하고 괄호안에 메소드와 속성을 정의한다.
public class MyClass
{
    // define method, property
}
- public 지시자는 다른 코드로부터 접근될 수 있는 클래스임을 나타낸다.

3. package 구문으로 클래스를 찾을 수 있는 패키지의 이름을 정의한다.
package mypackage
{
    public class MyClass
    {
        // define method, property
    }
}

4. 클래스 괄호안에 var 구문을 사용하여 클래스의 각 속성을 정의한다.(public 지시자 추가)
public var textVariable:String = "some default value";
public var numericVariable:Number = 17;
public var dateVariable:Date;

5. 함수를 정의하는 것처럼 같은 문법을 사용하여 클래스의 각 메소드를 정의한다.
pubilc function myMethod(param1:String, param2:Number):void
{
    // do something with parameters
}

6. 생성자(constructor)를 생성할 때는, 클래스 이름과 동일한 이름의 메소드로 만든다.
생성자는 클래스의 인스턴스를 생성하기 위해 호출하는 중요한 메소드이다.
public function Myclass()
{
    textVariable = "Hello there!";
    dateVariable = new date(2001, 5, 11);
}
 - 클래스에 생성자 메소드가 포함되어 있지 않으면, 컴파일러는 파라미터도 없고 명령어도 없는 빈 생성자를 자동으로 만들 것이다.

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

,
Storing code in frames in a Flash timeline

플래시에서는 타임라인의 어떤 프레임에든 AS 코드를 추가할 수 있고, 추가된 코드는 플레이헤드가 해당 프레임을 지나거나 멈췄을 때 실행된다. 어플리케이션에 비헤이비어를 추가하는 간단한 방법 중의 하나가 프레임에 AS 코드를 배치하는 것이다. 타임라인의 모든 프레임과 무비클립 심볼의 모든 프레임에 AS 코드를 추가할 수 있다.

방대한 어플리케이션을 개발한다면, 어떤 프레임에 어떤 스크립트가 있는지를 알아내가 쉽지 않기 때문에 많은 개발자들은 특정한 레이어에 혹은 타임라인의 첫번째 프레임에만 AS 코드를 삽입하여 구조를 단순화한다. 그러나, 또 다른 플래시 프로젝트에 같은 코드를 사용하려면 해당 코드를 복사하고 붙여넣게 될 것이다. 다른 플래시 프로젝트에도 같은 AS코드를 사용하길 원한다면, 외부 액션스크립트 파일(*.as)로 저장해야 한다.


Storing code in ActionScript files

프로젝트에 중요한 액션스크립트 코드를 사용한다면, 코드를 구조화하는 최상의 방법은 액션스크립트 소스 파일(*.as)을 분리하는 것이다. 액션스크립트 파일은 어플리케이션에 사용되는 의도에 따라 두 부분을 하나로 구조화 할 수 있다.

구조화되지 않은 액션스크립트 코드
구문이나 함수가 정의된 액션스크립트 코드가 MXML 파일이나, 타임라인에 직접 입력되는 것처럼 쓰여진다.
이 방법에서 쓰여지는 액션스크립트는 include 구문이나 Flex MXML에서 <mx:Script>를 사용하여 접근될 수 있다.
AS include 구문은 특정한 위치(구문은 스크립트의 유효범위)에 삽입할 외부 액션스크립트 파일의 내용을 불러온다.
Flex MXML 언어에서 <mx:Script> 태그는 어플리케이션의 특정 부분에 불러올 외부 액션스크립트 파일과 동일한 소스의 속성을 지정할 수 있게 한다.
ex) 외부 액션스크립트 파일(Box.as)을  불러오는 태그.
<mx:Script source="Box.as" />

액션스크립트 클래스 정의
클래스를 정의할 때, 클래스의 인스턴스를 만들고, 속성, 메소드, 이벤트를 사용함으로써 클래스의 액션스크립트 코드에 접근할 수 있다.
액션스크립트의 MovieClip 클래스를 사용하려면, 패키지와 클래스를 포함하는 완전한 이름을 사용하여 클래스를 불러와야 한다.
import flash.display.MovieClip;

혹은, 패키지의 각 클래스들에 import 구문을 사용한 것 같이, MovieClip 클래스를 포함하는 패키지를 불러올 수도 있다.
import flash.display.*;

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

,
Operators

연산자(operator)는 계산을 수행하는데 사용된다.
연산자는 대부분 수학 연산자도 사용이되고 또한 각각의 값을 비교할 때도 사용된다.
일반적인 규칙은, 연산자가 하나 또는 그 이상의 값을 사용하여 하나의 결과값을 만든다.

ex) 덧셈 연산자(+) / 곱셈 연산자(*) / 동등 연산자(==)
var sum:Number = 23 + 32;
var energy:Number = mass * speedOfLight * speedOfLight;
if (dayOfWddk == "Wednesday")
{
    takeOutTrash();
}
 - 동등 연산자는 다른 비교 연산자들과 if 절에서 특정 명령을 실행할 것인지를 결정하기 위해 많이 쓰인다.

Comments

  • Single-line comment: // content
  • Multiline comments: /* content */

Flow control

프로그램에서 특정 부분을 반복할 때가 있는데, AS에서 가능한 몇 가지 방법이 있다.

  • Functions : 함수는 이벤트 핸들링에도 매우 중요하고, 계산이나 하나의 이름으로 여러 명령들을 한번에 실행할 수 있는 방법을 제공한다.
  • Loops : 루프 구조는 조건이 변할 때마다특정 명령을 실행할 수 있게 한다.
  • Conditional statements : 일반적인 조건문 유형인 if 절은 괄호안의 값이나 표현식을 체크한다.

WRITTEN BY
손가락귀신
정신 못차리면, 벌 받는다.

,