AS3.0 이벤트에 대해 알아봅시다.

이벤트란 

버튼을 클릭하거나 

키보드를 입력하거나 

마우스를 움직이거나 

사운드재생이 끝나거나

데이터가 로드되는  

등의 사건을 말합니다.

플래시의 가장 큰 장점인 인터랙티브라는 특성은 이벤트의 다양성에서 비롯됩니다.

AS3.0에서는 기존의 콜백구문이나 이벤트핸들러방식과는 달리 이벤트브로드캐스팅방식으로 처리합니다.

이전버전(AS2.0이하)에서는 

버튼이나 무비클립에 이벤트 핸들러를 달아주거나 

콜백이벤트를 해주거나 

이벤트리스너를 달아주었었는데

AS3.0에서는 Event 및 EventDispatcher클래스를 사용한 이벤트 모델만을 사용합니다.

이게 뭔소리인지 처음보는 사람에게는 헷갈리는 표현일 수도 있겠군요.

어찌되었건 간에 한가지 방법으로만 이벤트를 처리한다는 것입니다.

이벤트에 대해서는 하루종일 설명해도 모자랍니다.

그래서 거두절미하고 이벤트를 등록하는 방법을 먼저 알아보도록 하겠습니다.

AS3.0에서 이벤트를 처리하려면 3가지를 구성해야 합니다.

1. 이벤트 대상 - 이벤트를 발생시키는 대상

2. EventDispatcher - 이벤트를 보내고 받는 기능

3. Event - 여러가지 다양한 이벤트(Event, MouseEvent, 키보드이벤트 등...)

-------------------------------------------------------------------------------------

이벤트대상.addEventListener(이벤트종류, 이벤트핸들러함수명);

function 이벤트핸들러함수명(매개변수:이벤트종류):void{

   ...

}

--------------------------------------------------------------------------------------

이벤트를 구성하려면 위의 구조로 구성하면 됩니다.

여러가지 이벤트가 있겠지만 우선 마우스이벤트 위주로 실습해서 이벤트에 적응해 보도록 하겠습니다.

예제를 실행해 보겠습니다.

[예제1]

mc라는 무비클립을 오버하면 커지고 아웃하면 작아지는 이벤트를 구현해 보도록 하겠습니다.

mc.buttonMode = true; //무비클립이 버튼처럼 작동됩니다.

mc.addEventListener(MouseEvent.MOUSE_OVER, overHandler); //마우스오버이벤트등록

mc.addEventListener(MouseEvent.MOUSE_OUT, outHandler); //마우스아웃이벤트등록

//오버시 무비클립 2배로 커지게

function overHandler(e:MouseEvent):void{

 mc.scaleX = 2;

 mc.scaleY = 2; 

}

//아웃시 무비클립 원래크기대로

function outHandler(e:MouseEvent):void{

 mc.scaleX = 1;

 mc.scaleY = 1; 

}

1_mouseevent.fla

[예제2]

이번에는 메뉴5개를 클릭하면 그에 해당하는 인스턴스명을 출력하는 액션을 작성해 보겠습니다.

//무비클립 다섯개에 아래와 같이 이벤트를 등록

mc0.addEventListener(MouseEvent.CLICK, clickHandler);

mc1.addEventListener(MouseEvent.CLICK, clickHandler);

mc2.addEventListener(MouseEvent.CLICK, clickHandler);

mc3.addEventListener(MouseEvent.CLICK, clickHandler);

mc4.addEventListener(MouseEvent.CLICK, clickHandler);

 //이처럼 공통이벤트 함수로 사용 할 수 있다.

function clickHandler(e:MouseEvent):void{

 e.target as MovieClip;  // e.target은 매개변수의 타겟속성으로서 이벤트를 행한 당사자를 가리킨다. 중요!!!

 trace(e.target.name);   // 클릭한 무비클립의 인스턴스명 출력한다.

 trace(e.target.name.substring(3,2)); //출력한 무비클립의 index출력한다.

 result_txt.text = e.target.name; //텍스트필드에 클릭한 무비클립의 인스턴스명 출력한다.

}

이벤트를 일으킨 당사자의 정보를 이벤트함수에 넘겨주려면  target 속성을 사용합니다.

this는 사용하지 않습니다. 

이 방법은 많이 사용됩니다. 정말 중요한 부분이기 때문에 외워서 써야합니다.

2_mouseevent2.fla

 

[예제3]

이번에는 드래그앤 드롭이벤트를 구현해 보도록 하겠습니다.

btn이라는 인스턴스명을 가진 무비클립에다가 MOUSE_DOWN 일때는 드래그가 되도록 하고

MOUSE_UP일 때는 드래그가 멈추도록 합니다.

btn.buttonMode = true; //버튼모드작성

btn.addEventListener(MouseEvent.MOUSE_DOWN, dragHandler); //마우스눌러졌을때 이벤트 등록

btn.addEventListener(MouseEvent.MOUSE_UP, dropHandler); //마우스 놓았을 때 이벤트 등록

//드래그 이벤트 함수

function dragHandler(e:MouseEvent):void{

 trace("드래그");

 e.target.startDrag(false); //이벤트를 발생시킨 당사자를 드래그시작

}

//드롭 이벤트 함수

function dropHandler(e:MouseEvent):void{

 trace("드롭"); 

 e.target.stopDrag();

}

3_mouseevent3-dragdrop.fla

 

[예제 4]

이번에는 마우스 포인트를 없애고 연필모양의 아이콘으로 마우스를 대신해 보도록 하겠습니다.

 Mouse.hide();  //마우스 숨김

stage.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);

stage.addEventListener(Event.ENTER_FRAME, printResult);

//마우스 움직일 때 마우스 위치에 연필을 놓음

function moveHandler(e:MouseEvent):void{ //매개변수의 타입도 이벤트타입에 맞춘다.

 pencil.x = this.mouseX;

 pencil.y = this.mouseY; 

}

//스테이지가 돌아가는 동안 마우스의 위치 텍스트필드에 뿌려주기

function printResult(e:Event):void{

 x_txt.text = String(mouseX);

 y_txt.text = String(mouseY);

}

 

4_mousehide.fla

이벤트는 이정도로 하고 좀 더 다른 이벤트가 나오면 그 때 추가해서 공부해 보도록 하겠습니다.

다른 이벤트가 나와도 이런 식으로 사용하면 됩니다.

이런 단순한 소스로만 반복해서 연습하다 보면 이벤트 사용도 어렵지 않다는 것을 알 수 있습니다.

물론 사용자정의 이벤트라든가 이벤트 관련 속성이나 메서드가 꽤 있습니다.

이런것들은 초보딱지를 떼고 난 후에 공부하면 쉽게 공부할 수 있습니다.

많이 쓰는 문법으로만 먼저 숙달해서 사용할 수 있도록 연습해 봅시다.

익숙해지면 다른 이벤트가 나와도 응용해서 쓸 수 있습니다.