야훔의 Front-END

컴파일도 잘 되는거 같으니 이제 코드를 좀 적어줘야겠다. OSMF에서 가장 중요한 녀석은 MediaPlayer라는 클래스다. 이녀석이 재생 컨트롤도 맡고 있고 시간도 뱉어낸다. 온갖 이벤트를 발생시켜서 플레이어의 상태도 알려준다. API를 살펴보자.
어도비가 다른건 몰라도 Language Reference를 기똥차게 만든다고 생각한다. 어쩜 이렇게 잘 만드는지. MediaPlayer를 찾아들어가서 보니 Example이 떡하니 있다.

요 예제를 그대로 Main 클래스에 옮겨서 컴파일 해보도록 하자. 아, 물론 package 경로랑 constructor 이름은 Main 클래스에 맞게 고쳐야겠지.
그래서 전에 만든 명령어를 이용해 컴파일을 한 다음 swf를 실행해 보자.

예제를 만들고 나서 알았다. 파일의 확장자가 mp3 였다는 사실을!! 이런!! 그러고 보니 AudioElement라는 클래스를 사용한걸 보니 영상쪽이 아니라 mp3 재생기였다.
생각해보니 OSMF Feature를 보면 재생할 수 있는 포멧들이 쭉 나와있는데 mov, mp4, flv, swf, mp3... 등등이라고 나와있다.

잘 읽어보니 OSMF에서 재생되는 포멧이 아니라 Flash Player 10.0 이후 버젼에선 저런 포멧들을 지원한다는 이야기인거다. 어쨌든 지금 뭘 재생할 수 있느냐가 중요한게 아니라 영상을 재생하고 싶은거니깐 일단 영상부터 나오게 해보자.

예제 코드를 아래와 같이 살짝 수정해 보자.

package { import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import org.osmf.containers.MediaContainer; import org.osmf.elements.VideoElement; import org.osmf.events.TimeEvent; import org.osmf.media.MediaPlayer; import org.osmf.media.URLResource; import org.osmf.media.MediaPlayerSprite; public class Main extends Sprite {     private var mediaPlayer:MediaPlayer;     public function Main()     {          super();         stage.scaleMode = StageScaleMode.NO_SCALE;         stage.align = StageAlign.TOP_LEFT;         var mediaPlayerSprite:MediaPlayerSprite = new MediaPlayerSprite();         var videoElement:VideoElement = new VideoElement();         videoElement.resource = new URLResource("rtmp://cp67126.edgefcs.net/ondemand/mediapm/strobe/content/   test/SpaceAloneHD_sounas_640_500_short");         mediaPlayer = mediaPlayerSprite.mediaPlayer;         addChild( mediaPlayerSprite );         mediaPlayer.volume = .5;         mediaPlayer.loop = true;         mediaPlayer.addEventListener(TimeEvent.CURRENT_TIME_CHANGE, onTimeUpdated);          mediaPlayer.addEventListener(TimeEvent.DURATION_CHANGE, onTimeUpdated);         mediaPlayer.autoPlay = true;         mediaPlayer.media = videoElement;      }     private function onTimeUpdated(event:TimeEvent):void     {         trace('time: ' + mediaPlayer.currentTime + ' duration: ' + mediaPlayer.duration);     } } }

이렇게 수정하고 컴파일을 하면 아래와 같은 에러메시지를 확인 할 수 있는데

사실 이 내용은 "RSL 컴파일 안되니까 옵션에서 빼라"는 말입니다. 저 메시지를 보게되면 명령어를 다음과 같이 바꿔서 컴파일 해주면 된다. RSL 컴파일에 대해서는 여러 블로그에서 설명을 하고 있으므로 한번 검색해서 스스로 공부해 보길 바란다.

위에 빨간줄 쳐진 부분을 컴파일 옵션에 포함시키면 위와 같은 현상은 없어지지만 swf 파일의 용량이 129kb로 뻥튀기 된다. 그 이유는 RSL 컴파일에 대해서 공부하면 자연스럽게 나오므로 따로 설명하진 않겠다.

컴파일도 되었겠다. 한번 swf를 실행해보자.

오오오 동영상이 재생된다. 어디나라 언어인진 못알아 보겠지만; 파일명에 확장자가 없는데도 잘 재생되는 걸 보니 꽤나 똑똑하게 만들어졌나 보다.( flash.media.Video 객체가 꽤나 똑똑한 모양 )
다음 3탄에서는 간단한 컨트롤러를 이용해서 동영상을 컨트롤 하는 것을 만들어볼 예정이지만 언제 만들어질지는 알기 힘들다. 왜냐하면 꽤나 큰 프로젝트를 맡아서 진행하게 되어 시간이 부족해졌기 때문인데... 언제든 짬짬히 다음 3탄을 만들어 올리도록 하겠다. 에헴.

예전에 시즌 1에서 이야기 했는지 모르겠지만 디자인 패턴이라는 부분에 대해서 좀 짚고 넘어가야할 부분이 있는것 같다. 요즘 플래시 모임이나 어디 게시판에 가보면 디자인 패턴 좀 안다면서 코드를 주르륵 흘려놓고 그걸 어떻게 치워야 할지도 모른 채 지나가버리는 사람들을 종종 보게 되는데 여기서 문제는 그 주르륵 흘려놓고 뒷 수습을 못한다는 부분이다.
디자인 패턴이라고 흘려놓은 코드들이 잘못되었다는게 아니라 디자인 패턴이라는 것이 도데체 왜 생겨났고 그걸 어떻게 이용하는 것인지 그리고 그걸 왜 이용하는 것인지에 대한 이해 없이 슥 코드만 써놓고 "이게 싱글톤 패턴임"이라고 적어놓는다는데 있다. 그러 식의 글을 보면서 느끼는건 "나는 싱글톤을 알고있다. 그건 이런 코드로 작성하면 됨"하고 자랑하는 것으로 밖에 보이지 않는다. 그런 사람들하고 대화를 하다보면 디자인 패턴이라는게 왜 있고 그걸 왜 쓰고 도데체 그걸 어디다 어떻게 적용하는 것인지에 대해 전혀 이해없이 그저 코드만 외워서 쓰는 경우가 많다.
본문으로 들어가기 전에 미리 이야기하는데 디자인 패턴을 설명하는 것은 "방법론을 공유하자" 라는 부분과 "방법론을 좀 더 간결하게 만들자"하는 개발자 적 욕구로 시작되었음을 이해해야한다. 그래서 최초의 디자인 패턴을 서술해 놓은 책을 보면 코드는 단 한줄도 없었다고 한다. 그저 그 책은 "이런 문제가 있을 땐 이런식으로 해결하자"는 식의 풀이집에 더 가까웠다는 것이다. 그 이후 그 책을 기반으로 각각의 언어로 구현하는 방법들을 소개하는 책들과 글들이 쏟아져 나왔다. 그러니 "자바에서 싱글톤 패턴이 구현되나요?"라던가 "자바에서 MVC 패턴을 구현하는 방법이 있나요?" 같은 바보같은 질문은 삼가하도록 하자. 자바나 플래시, C나 C++과 같은 언어들의 종류를 불문하고 디자인 패턴이라는 것은 구현된다. 서로서로 방법이 다를 뿐 디자인 패턴이라는 것은 결국 하나의 흐름에서 각각의 문제를 해결하기 위한 방법들을 만들어가는 가이드 라인일 뿐이니.
서론이 길었다. 본론으로가자.

이번 포스팅은 싱글톤 패턴에 대해서 써놓으려고 한다. 싱글톤을 처음 이야기 하는 이유는 디자인 패턴 중에서 가장 쉽고 설명하기도 간편하며 가장 많이 사용되는 패턴이라서 그렇다. 그래서 이번 포스팅에서는 Actionscript 3.0으로 싱글톤을 구현하는 방법에 대해 설명할텐데 그전에 싱글톤이 뭔지부터 좀 알아보자.

위키엔 없는게 없다. 역시 우리 모두의 백과사전. 싱글톤 패턴의 기본적인 정의를 잘 설명해 놨다. 싱글톤 패턴의 구현여부는 인스턴스가 하나만 있어야한다는 무결성을 보장해야하며 이 인스턴스에 접근 할 수 있는 전역적인 접촉점을 제공하면 된다. 음. 데이터의 무결성. "단 하나만의" 객체를 생성하는 약속이 보장되어야 한다는게 바로 싱글톤 패턴이다. 그럼 이걸 언제 사용하지?

싱글턴 패턴이나 팩토리 패턴, 옵져버 패턴, MVC패턴. 이런게 다 어디에 사용하느냐. 언제 사용하느냐. 에 대한 질문을 받을때면 대답하기가 굉장히 애매해진다. "싱글톤 패턴이 뭔가요?"라고 질문하면 "그건 ....."이라면서 설명이라도 해줄 텐데 "싱글톤 패턴은 언제 사용해요?"라는 질문에는 "적절하게 필요할 때..."라고 밖에 대답을 못해주겠다. 데이터가 두번 생성되지 말아야하는 경우가 어디 한두가지여야 말이지. 뭐. 싱글턴 패턴의 용도는 일단 앞에서 말했다 시피 데이터가 두번 생성되지 말아야하는 상황에서 사용된다. 무결성이 보장되어야하고. 한번만 생성되어야하며 그 데이터의 변경 값에 따라 다른 객체들도 그 변경값이 동일하게 적용되어야하는 상황에서 싱글턴 패턴을 사용한다. 간단한 예제를 들어서 설명해볼까. 일단 Flash에서 빈번하게 사용되는 싱글턴 패턴 클래스를 만들어 보자. 워낙 많은 사람들이 알고 있는 코드이기도 하고 코드를 좀 살펴보면 이해하기도 간편하니 설명없이 코드를 써놓을 텐데 코드가 이해가 안간다고 슬퍼하지 말 것. 필요한 때가 오면 다 이해가 되니깐.

classes/UserInfo.as

package classes {    public class UserInfo    {        public function UserInfo(creator:Creator = null):void        {            if( null != instance )            {                throw new Error(“이미 객체가 생성되어 있음”);            }            if( null == creator )            {                throw new Error(“정상적인 방법으로 생성하지 않았음”);            }        }        public static var instance:UserInfo; public var isLogin:Boolean = false;         public static function getInstance():UserInfo        {            if( null == instance )            {                instance = new UserInfo( new Creator() );            }            return instance;        }    } } final class Creator {}

위의 코드가 Flash에서 흔히 사용하는 싱글톤 패턴의 정형화된 구현인데 위와 같은 방법으로 코드를 작성할 경우 getInstance() 라는 static 메서드를 통하지 않는다면 다른 방법으로 instance를 생성할 방법이 없도록 구현된다. 결국 instance는 한개 밖에 생성되지 않기 때문에 그 클래스 안의 내용들은 한번만 생성되고 무결성을 유지할 수 있게 된다. 저렇게 코드를 하나 두고 샘플클래스 몇몇개를 작성해보도록 하자.

Main.as

package { import flash.display.Sprite; import flash.display.Graphics; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.Event; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFieldAutoSize; import classes.LoginCheck; import classes.UserInfo; public class Main extends Sprite {     public function Main()     {         super();         addEventListener( Event.ADDED_TO_STAGE, onAddedToStage );     }     private var btn_login:Sprite;     private var btn_logout:Sprite;     private var txt_output:TextField;     private var loginCheck:LoginCheck     /**      *  @private      *  Create Buttons      */     private function createButtons():void     {         var g:Graphics;         if( null == btn_login )         {             btn_login = new Sprite();                          g = btn_login.graphics;             g.clear();             g.beginFill( 0xFF0000, 1 );             g.drawRect( 0, 0, 100, 50 );             g.endFill();             btn_login.buttonMode = true;             btn_login.useHandCursor = true;             btn_login.addEventListener( MouseEvent.CLICK, onLoginClick );             addChild( btn_login );         }         if( null == btn_logout )         {             btn_logout = new Sprite();             g = btn_logout.graphics;             g.clear();             g.beginFill( 0x0000FF, 1 );             g.drawRect( 0, 0, 100, 50 );             g.endFill();             btn_logout.buttonMode = true;             btn_logout.useHandCursor = true;             btn_logout.addEventListener( MouseEvent.CLICK, onLogoutClick );             addChild( btn_logout );         }         if( null == txt_output )         {             txt_output = new TextField();             txt_output.autoSize = TextFieldAutoSize.LEFT;             txt_output.text = "logout";             addChild( txt_output );             loginCheck = new LoginCheck( txt_output );         }     }     private function updateButtons():void     {         if( null != btn_login )         {             btn_login.x = 10;             btn_login.y = 10;         }         if( null != btn_logout )         {             btn_logout.x = 115;             btn_logout.y = 10;         }         if( null != txt_output )         {             txt_output.x = 225;             txt_output.y = 10;         }     }     /**      *  @private      *  Added To Stage      */     private function onAddedToStage( event:Event ):void     {         removeEventListener( Event.ADDED_TO_STAGE, onAddedToStage );         stage.align = StageAlign.TOP_LEFT;         stage.scaleMode = StageScaleMode.NO_SCALE;         createButtons();         updateButtons();     }     /**      *  @private      *  Click Login button      */     private function onLoginClick( event:MouseEvent ):void     {         UserInfo.getInstance().isLogin = true;         if( null != loginCheck )         {             loginCheck.checkLogin();         }     }     /**      *  @private      *  Click Logout button      */     private function onLogoutClick( event:MouseEvent ):void     {         UserInfo.getInstance().isLogin = false;         if( null != loginCheck )         {             loginCheck.checkLogin();         }     } } }

classes/LoginCheck.as

package classes { import flash.text.TextField; public class LoginCheck {     public function LoginCheck(targetField:TextField)     {         field = targetField;     }     private var field:TextField;     public function checkLogin():void     {         if( true == UserInfo.getInstance().isLogin )         {             field.text = "login";         }         else         {             field.text = "logout";         }     } } }

 
위와 같이 코딩하고 나면 TextField에 Text를 입력하는 부분은 Main에서 해주는게 아니라 LoginCheck라는 클래스에서 해주게 되어있다. 이때 LoginCheck의 값에 따라서 TextField에 "login"이나 "logout"을 뿌려주는데 Main에서는 그저 UserInfo라는 싱글톤 클래스에 값을 변경해주는 것 뿐이고 그것에 대한 행동은 LoginCheck라는 클래스에서 알아서 하도록 냅두기 위함이다.
여기서 싱글톤 클래스를 사용하는 한가지 예를 살펴보았다. "이게 뭔소리여"할 수도 있는데 나중에 도움이 되리라 생각하고 읽어보길 바란다.  



p.s http://goo.gl/Ueoip 이것은 싱글톤 패턴에 대한 정리로 예전에 디자인 패턴에 대해 정리한 적이 있었는데 그때 써놓은걸 간추려놓은 것임. 싱글톤 패턴을 구현하는 기술적 방법론에 대해 서술했음. 
 

이벤트 이야기 세번째입니다.

오늘은 bubbles와 cancelable에 대해서 설명해보려고 합니다.

일단 bubbles를 알아야 cancelable에 대해서 알아 볼 수 있지요.

bubbles라는 것에 대해 Language Reference에서 확인을 좀 해봤습니다.

....

무슨 소리지? -_-

해서 구글번역기로 돌려봤습니다.

영어를 한글로 바꾼다는 것이 좀 문제가 있으니 저정도의 어휘들은 이해하도록 하고.....-_-;;;

일단 거품이라는게 bubble을 직역을 하다보니 저렇게 표시가 된건데 이것은 이벤트가 어떤 거품이 터지는것과 비유하여 사용하게 되었다 합니다.(사실 어디선가 주워들은 이야기 ㅎ)

우리가 집중해서 봐야할 부분은 "이벤트 흐름의 세 단계를 통해 이동" 이라는 부분인데요.

이벤트에 대해서 이해하기 전에 사실 액션스크립트에서는 객체들을 XML로 뽑아내어줄 수 있다는 사실을 알고 있는게 좀 도움이 될 것 같습니다.(flash.utils.describeType() 메서드를 보면 도움이 될까요?) 이는 곧 무슨이야기냐 하면 어떤 객체가 있다면 그 객체 내부적으로 어떤 객체를 갖고 있을 수 있는지 XML로 파악할 수 있다는 이야기이고 그런 하이라키(Hierarchy)구조에서는 각 객체들의 계층관계를 파악할 수 있다는 이야기지요.

위에서 표시되는 "대상 노드"라는 것은 방금 이야기한 XML의 각 노드라고 이해하면 됩니다.(객체간 관계가 정리되어있는 XML의 각 노드지요. 족보라고 생각하면 이해가 빠릅니다.)

그래서 이벤트가 발생되는 단계를 세단계로 쪼개서 확인해보면

1. 대상 노드가 표시 목록 계층 구조의 상단에서 노드의 흐름을 캡처 단계직전.

- 이 이야기는 어떤 객체가 이벤트가 발생했을 때 이를 수신하는 상위 객체가 이벤트를 받기 직전의 상태를 이야기 합니다.

2. 이벤트를 받는 순간

3. 상위 노드로 이벤트를 계속적으로 발생시킬지에 대한 판단

이렇게 나눌 수 있습니다. 여기서 3번과정에서 판단의 기준이 되는 것이 bubbles 가 되겠습니다. 이해하기 어렵다면 예제를 만들어보면 쉽게 이해할 수 있습니다.

일단 클래스 구조를 이런 형태로 만들어 볼까요.

(위의 그림에서 화살표는 데이터의 흐름을 의미합니다.)

각각의 객체들은 Main 클래스 하위에 붙어있고 실질적으로 이벤트를 발생시키는 곳은 SubClass뿐입니다.

이벤트를 수신하는 곳은 Main클래스와 ExampleClass 이렇게 두 곳으로 두고 있습니다.

여기서 주의 할 점은 Main은 ExampleClass에서 이벤트를 수신한다는것을 조건으로 해야 이번에 만드는 샘플이 의미가 있습니다.

오늘 샘플은 Flex로 만들어 볼까요? (그래야 만들기 쉬우니까요...)

/Main.mxml

/classes/example/Example.as

/classes/example/SubClass.as

/classes/events/CustomEvent.as

위의 예제대로 만드셨다면 컴파일 ㄱㄱ

음. 확실히 flash 패키지만으로 코딩한 것과는 용량 차이가 많습니다. Flex는 용량이 커요. 역시. 하지만 그만큼 제공되거나 개발 속도도 flash 패키지만으로 작업한것보다 더 좋은건 사실입니다. 딜레마에요. 딜레마.

어찌되었든 컴파일이 성공적으로 이뤄졌다면 결과물을 확인해봐요.

bubbles 를 체크한것과 체크하지 않은 것에 대해 이벤트 버블링이 어떻게 처리되는지 확인 할 수 있습니다.

자신이 속해있는 디스플레이 객체에만 전달할 것인지 아니면 그보다 상위 객체에 전달하게 할것인지 결정할 수 있다는 이야기인데요. bubbles 속성이 true인 대표적인 이벤트가 MouseEvent 입니다.

자. 그럼 여기서 문제로 거론되는 건데요.

bubbles가 true인 이벤트를 받았을때 addEventListener 되는 객체가 실제로 해당 객체인지 아닌지에 대해 고민해 볼 필요가 있습니다.

위의 예제를 살펴보면 Example 클래스에서 addEventListener해도 받을 수 있고 Example클래스 안에있는 SubClass라는 클래스에서도 받을 수 있지요. 하지만 실질적으로 Example에서 받은 이벤트는 실제로 Example 클래스에서 발생시킨게 아니지요. 이벤트를 실제로 발생시킨 객체와 이벤트를 bubbles의 여부에 따라 중계해준 클래스. 이 두개의 상황에 대해 이벤트는 아주 괜찮은 방법을 제시하고 있습니다.

currentTarget과 target이라는 속성들이지요.

이것들을 레퍼런스에서 확인해보면

라고 정의 되어있습니다.

사실 저는 무슨말인지 번역기를 돌려봐도 모르겠어서 그냥 위에서 만든 샘플을 조금 손보기로 했습니다.

/Main.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application     xmlns:mx="http://www.adobe.com/2006/mxml"     xmlns:example="classes.example.*"     creationComplete="creationCompleteHandler(event);">     <mx:Script>         <![CDATA[         import flash.events.MouseEvent;         import mx.events.FlexEvent;         import classes.events.CustomEvent;         private function creationCompleteHandler(event:FlexEvent):void         {             exampleRect.addEventListener(CustomEvent.SAMPLE_EVENT, exampleRectSampleEventHandler);             exampleRect.sub.addEventListener(CustomEvent.SAMPLE_EVENT, subSampleEventHandler);         }         private function bubblesChkClickHandler(event:MouseEvent):void         {             exampleRect.bubbles = bubblesChk.selected;         }         private function subSampleEventHandler(event:CustomEvent):void         {             ta.text += ("event Listen : subClass eventListen\n");             ta.text += "sub currentTarget : " + event.currentTarget + "\n";             ta.text += "sub target : " + event.target + "\n";         }         private function exampleRectSampleEventHandler(event:CustomEvent):void         {             ta.text += "event Listen : exampleRect event Listen\n";             ta.text += "example currentTarget : " + event.currentTarget + "\n";             ta.text += "example target : " + event.target + "\n";         }         ]]>     </mx:Script> <mx:TextArea id="ta" width="300" height="200" editable="false" /> <mx:CheckBox label="bubbles" id="bubblesChk" click="bubblesChkClickHandler(event);" /> <example:Example id="exampleRect" width="30" height="30" /> </mx:Application>

(코드 하이라이트가 mxml 코드는 잘 못그려내는 바람에 그냥 코드를 썼어요)

이렇게 수정하고 확인해보면 이렇습니다.

(이미지입니다. 클릭해서 낚이는 불상사는 피해주세요)

Example에서 수신된 이벤트의 currentTarget은 이벤트를 발생시킨 SubClass가 아닌 자신을 반환하고

target은 실제로 이벤트를 발생시킨 SubClass인것을 확인할 수 있습니다.

사실 이번시간에 cancelable까지 다 손을 보려고 했습니다만 너무 양이 많아졌네요.

cancelable은 다음시간에 이야기하도록 해요.

p.s 마지막에 target과 currentTarget을 확인하려고 만든 샘플은 이 밑에 있어요.

#1 에서 이벤트 등록하고 핸들러를 작동하는 것까지 확인해봤는데요..

내가 처음 3.0을 접했을때가 불과 2년전이었는데 그때 가장 어렵게 느껴졌던게

도무지 "이벤트"라는 녀석과 친해지기 어렵다는 사실이었다.

도데체 왜 "이벤트"라는 놈을 갖고 코드를 작성해야만 할까.

"이벤트"없이 코딩할 수 있지 않을까?

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

그것에 대한 결론으로는 여기를 확인하면 좀 도움이 되리라 생각된다.

결론적으로는 ActionScript의 태생적 이유때문이라는 것인데 ECMAScript를 모태로 삼고있는

ActionScript로써는 개발자가 원하는 흐름대로 코드를 진행하기 위해서는 이벤트를 사용해야만 한다고

결론 지었다.

또다른 결론이 하나 더 있는데 이는 어플리케이션을 구성하는데 있어서 구조적으로 "약한결합"을 사용해야 유지보수, 클래스의 컨포넌트 화(化), 등이 용이하다는 결론.

위와같은 결론 덕에 결국 이벤트를 사용하긴 해야겠는데 뭘 어떻게 써야하는 것인지 당최 배우기가 마땅찮다.

그래서 일단 이벤트를 추가하고(import), 등록하고(addEventListener), 행동(Handler) 하는 3가지 단계를 마스터 해보자.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

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. 오오오오.....(뭐지???)