2011. 1. 13. 20:53

이벤트란 무엇인가요? #1


내가 처음 3.0을 접했을때가 불과 2년전이었는데 그때 가장 어렵게 느껴졌던게
도무지 "이벤트"라는 녀석과 친해지기 어렵다는 사실이었다.

도데체 왜 "이벤트"라는 놈을 갖고 코드를 작성해야만 할까.
"이벤트"없이 코딩할 수 있지 않을까?

라는 고민으로 수없이 많은 생각들을 하곤했었는데

그것에 대한 결론으로는 여기를 확인하면 좀 도움이 되리라 생각된다.
결론적으로는 ActionScript의 태생적 이유때문이라는 것인데 ECMAScript를 모태로 삼고있는
ActionScript로써는 개발자가 원하는 흐름대로 코드를 진행하기 위해서는 이벤트를 사용해야만 한다고
결론 지었다.
또다른 결론이 하나 더 있는데 이는 어플리케이션을 구성하는데 있어서 구조적으로 "약한결합"을 사용해야 유지보수, 클래스의 컨포넌트 화(化), 등이 용이하다는 결론.

위와같은 결론 덕에 결국 이벤트를 사용하긴 해야겠는데 뭘 어떻게 써야하는 것인지 당최 배우기가 마땅찮다.
그래서 일단 이벤트를 추가하고(import), 등록하고(addEventListener), 행동(Handler) 하는 3가지 단계를 마스터 해보자.

package
{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;

import flash.text.TextField;

public class Main extends Sprite
{
    public function Main()
    {
        super();

        createSprite();
        createTextArea();
    }

    private var sp:Sprite;
    private var ta:TextField;

    private function createSprite():void
    {
        if(!sp)
        {
            sp = new Sprite();

            addChild(sp);

            drawSprite();
        }
    }

    private function drawSprite():void
    {
        if(sp)
        {
            var g:Graphics = sp.graphics;

            g.clear();
            g.beginFill(0x00FF00, 1);
            g.drawRect(0, 0, 100, 100);
            g.endFill();

            configureSpriteListeners();
        }
    }

    private function createTextArea():void
    {
        if(!ta)
        {
            ta = new TextField();
            ta.width = 200;
            ta.height = 300;
            ta.x = 110;
            ta.y = 0;
            ta.multiline = true;
            ta.background = true;
            ta.backgroundColor = 0xFFFFFF;

            addChild(ta);
        }
    }

    private function configureSpriteListeners():void
    {
        sp.addEventListener(MouseEvent.CLICK, spriteClickHandler);
    }

    private function spriteClickHandler(event:MouseEvent):void
    {
        ta.appendText("click sprite! \n");
    }
}
}
위의 코드를 한글로 번역을 하자면 이렇다.
"sp라는 Sprite객체를 만들어서 너비 100, 높이 100 사이즈의 초록색 네모를 그린다음 클릭하면 "click sprite!"라는 메시지를 ta라는 TextField객체에 출력해라!"

라는 것이다. 컴퓨터 나라말은 참 다양하지만(JAVA, C, C++, ActionScript, JavaScript.. 등등) 번역하고 보면 별거 없는 것같은 기분이다.
어쨌든 저 코드를 컴파일 해보자.
 
그럼 저 Main.swf를 실행해볼까.. (아래의 녹색 상자를 클릭해보세용)



간단하게 CLICK 이벤트를 등록하고 작동하게하는 예제를 만들어 봤다.

나름 간단하게 작성된 예제인데 여기서 드는 의문점은 해당 클래스에 등록할 수 있는 이벤트들은 어디서 확인하느냐는 의문.
그런 이벤트에 관련된 사항은 Language Reference를 확인하면 된다.
예를들어 방금 사용한 Sprite 클래스를 확인해보면

어떤 이벤트를 등록(addEventListener) 할 수 있는지 확인할 수 있다.
게다가 친절하게도 어떤 시점에서 이벤트가 발생하는지 설명도 해줬다. 좀 괜찮은데?

예전에 같이 일하던 분이 요런 말씀을 해주셨더랬다.
"궁금하면 API 뒤져봐"
그말이 진리. ㅎㅎㅎ

Sprite 클래스는 내부적으로 스스로를 클릭하면 CLICK 이벤트를 발생하게끔 설계되어있다.
그럼 우리는 그런 이벤트를 수신할 수 있도록 addEventListener를 통해 이벤트를 등록한다.
이때 같이 들어가는 Handler는 이벤트가 수신했을 때 실행하게 된다.

대략 이런 모양.
이미지 출처는 제가 그렸으므로 함부로 퍼가면 안됩니다. 말씀은 해주시고 퍼가세요.

Sprite는 addEventListener를 하든 말든 어차피 클릭을 하면 CLICK이벤트를 발생시킨다.
그럼 어떤 누군가는 addEventListener를 해서 핸들러를 실행시키겠지.
이벤트의 등록과 핸들러의 실행의 구조적인 모양새는 이런 모양이다.
그럼 클래스도 누군가가 만들어 사용하는 걸텐데 (적어도 신이 만든건 아닐거 아냐) 나도 만들어 볼 수 있지 않을까??

두둥. "이벤트란 무엇인가요? #2" 예고편.

1. 내가 만든 이벤트?
2. dispatchEvent?
3. 오오오오.....(뭐지???)
2011. 1. 13. 20:44

ActionScript Class 만들기(기본)

Actionscript 3.0 은 클래스 단위로 프로그램을 구성한다.(적어도 내 생각엔)
그럼 어떤 프로그램을 만들기 위해서 가장 먼저 선행되어야 하는 것은 클래스를 만들 줄 알아야한다는 것이니
한번 시작해보자.

일단 준비물을 살펴보자.

Flex SDK 3.5.0 : 다운로드
빌더, 혹은 에디터 툴.(난 Editplus로 개발하니깐 Editplus)

뭐 이정도로 간단하게 준비가 끝났으면 시작해보자.
일단 간단하게 소스 저장용 폴더와 파일 하나를 하나 만들자.
여기서 파일명은 Main.as 로 하자.

Main.as 파일에는 이렇게 코딩해볼까.

Main.as 파일에는 이렇게 코딩해볼까.
package
{
import flash.display.Sprite;

public class Main extends Sprite
{
    public function Main()
    {
        super();
    }
}
}
이러면 우리 클래스를 만든거다.
실행하려면 아까 우리가 준비했던 Flex SDK를 이용해 컴파일을 하면 swf 파일이 떨어진다.
아까 sdk 파일 폴더로 가자. 그 폴더안에 가보면 "bin" 이라는 폴더가 있는데
그 안에 살펴보면 mxmlc라는 파일이 있다.
저 명령어를 이용하면 된다.
아까의 작업폴더로 이동한 뒤(프롬프트 창에서) 아래와 같이 입력한다.

 [mxmlc가 있던 sdk의 bin 폴더]\mxml Main.as -o Main.swf

결과화면은 아래와 같다.

오. Main.swf 파일이 생성되었다. 556bytes 뿐이다.
폴더를 확인했더니


정상적으로 파일이 생성된것을 확인할 수 있다.
그럼 실행해볼까.

아무것도 없는 빈파일이다. 이렇게 그냥 끝내면 아쉬우니까 네모칸 하나 만들어 넣자.
아까의 Main.as 소스를 아래와 같이 수정한다.

package
{
import flash.display.Sprite;
import flash.display.Graphics;

public class Main extends Sprite
{
    public function Main()
    {
        super();

        drawRect();
    }

    private function drawRect():void
    {
        var g:Graphics = this.graphics;

        g.clear();
        g.beginFill(0xFF0000, 1);
        g.drawRect(0, 0, 100, 100);
        g.endFill();
    }
}
}

수정한뒤에 다시 첨에 했던것처럼 컴파일.
그담에 생성된 swf 파일을 확인해보자.


예상한대로 빨간 사각형이 그려졌다.
음. 좋군. 클래스 만들기 별것 아니로구나.

도움글 :
2011. 1. 13. 18:29

구글의 Blogger에 합류되어버린 내 Textcube 블로그..

텍스트큐브의 글들이 구글의 Blogger에 포함되어버린것을 눈치채고 눈물을 머금고 티스토리로 급하게 이사를 왔습니다.
제일 먼저 한것이 Syntax Highlighting 설치!
아.. 저 많은 글들을 언제 다 옮길지.. 당분간은 글쓰기 못하고 이사작업을 좀 해야겠습니다.
ㅠㅠ