본문 바로가기

FLASH/AS2.0

AS2 이벤트 정리

1. 이벤트(event)란?

 

이벤트(event)는 플래시 프로그램에 일어나는 반응이다.

마우스를 클릭하거나 키를 입력하는 것과 같은 사용자 이벤트 뿐만 아니라, 플래시가 로드되었을 때, 서버의 데이터가 바뀌었을 때 플래시 플레이어가 발생시키는 이벤트도 포함된다.

발생하는 이벤트는 플래시 내부적으로 이미 정해져 있기 때문에, 그 처리 방식도 정해져 있다.

이 이벤트를 처리하는 블록을 이벤트핸들러(event handler)라고 한다.

 

<버튼이벤트>

press 마우스를 눌렀을 때 발생

release 마우스를 눌렀다 뗐을 때 발생

releaseOut 마우스를 버튼 위에서 눌렀다가 버튼 밖에서 뗐을 때 발생

keyPress 키보드를 눌렀을 때 발생

rollOver 마우스가 버튼위에 오버되었을 때 발 생

rollOut 마우스가 버튼위에 오버된 후 버튼 밖으로 나갔을 때 발생

dragOver 마우스를 누른채 버튼 위에 오버 되었을 때 발생

dragOut 마우스를 누른채 버튼위에 오버 되었다가 버튼 밖으로 나갈 때 발생

 

<무비클립이벤트>

load 무비클립이 로드 되었을 때 호출

unload 무비클립이 언로드 되었을 때 호출

enterFrame 1/지정된 fps마다 호출

mouseUp 마우스를 눌었다 뗐을 때 호출

mouseDown 마우스를 누를 때 호출

mouseMove 마우스를 이동시킬 때 호출

keyDown 키보드를 누를 때 호출

keyUp 키보드를 눌렀다 뗐을 때 호출

data loadVariales(0나 loadMovie()액션이 실행되었을 때 실행 마지막 무비나 변수 값이 들어왔을 때 실행된다.

 

 

2. 이벤트 핸들러

onClipEvent() 및 on() 핸들러는 직접 버튼이나 무비클립 인스턴스에 이벤트 핸들러를 기입할 때 사용한다.

onClipEvent() 핸들러는 무비클립 이벤트를 관리하며 on()핸들러는 버튼 이벤트를 관리한다.

하지만 무비클립에 on()핸들러를 사용하여 버튼 이벤트를 받는 무비클립을 만들수도 있다.

on(press){

  trace("you pressed button.");

}

 

on() 핸들러에 이벤트를 여러개 지정할 수 있으며 각 이벤트는 쉼표로 구분한다.

on(rollOver.rollOut){

  trace("you rolled over or rolled out.");

}

 

onClipEvent()는 복수개의 이벤트를 지정할 수 없다.

서로 다른 이벤트가 발생할 때 서로 다른 스크립트가 실행되도록 하려면 오브젝트에 여러 핸들러를 지정하면 된다.

onClipEvent(load){

  trace("Movie is loaded.");

}

onClipEvent(unload){

  trace("Movie is inloaded.");

}

 

<클백한수 방식>

만약 이 버튼 (민스턴스 이름은 "btn")을 갖고 있는 프레임에다 이벤트 핸들러를 부착한다면 다음과 같이 할 수 있다.

btn.onRelease = function(){

  trace("You released button!");

}

 

마찬가지로 무비클립의 이벤트 핸들러를 프레임 스크립트에서 정의할 수 있다.

다음 예문은 mc라는 무비클립에 onEnterFrame 이벤트 핸들러를 부착하는 것이다.

mc.onEnterFrame = function(){

  count++;

  trace(count);

}

 

플래시가 제공하는 오브젝트마다 발생시키는 이벤트는 다르기 때문에, 각각의 오브젝트에 대한 이벤트를 알아야 한다.

예를 들어 Sound오브젝트는 사운드가 끝났을 때 onSoundComplete라는 이벤트를 발생시킨다.

만약 특정 사운드가 끝난 후에 계속해서 연달아 사운드를 내고 싶다면 다음과 같다.

SoundObj.onSoundComplete = function(){

  playSnd();

}

 

각 오브젝트의 특수한 이벤트를 정리하면 다음과 같습니다.

 오브젝트

 오브젝트 이름/ 인스턴스 이름

 이벤트

 버튼 / 무비클립  mc  mc.onKillFocus
 mc.onSetFocus
 Sound  sndObj 

 sndObj.onLoad
 sndObj.onSoundComplete

 sndObj.onID3

 TextField  tf

 tf.onChanged

 tf.onKillFocus

 tf.onScroller

 tf.onSetFocus

 Stage  최상위클래스  Stage.onLoad
 StyleSheet  styleObj  styleObj.onResize
 ContextMenu  contextMenuObj  contextMenuObj.onSelect
 ContextMenuItem  contextMenuItemObj  contextMenuItemObj.onSelect
 LoadVars  loadObj  loadObj.onLoad
 SharedObject  so  so.onStatus
 NetConnection  nc  nc.onStatus
 NetStream  ns  ns.onStatus
 XML  xmlObj

 xmlObj.onData

 xmlObj.onLoad

 XMLSocket  skt

 skt.onClose

 skt.onConnect

 skt.onData

 skt.onXML

 

  

이벤트리스너 방식


 이벤트리스너는 이벤트를 받을 오브젝트를 명시적으로 지정할 때 사용된다.

즉 특정 오브젝트가 발생시킨 이벤트를 다른 오브젝트가 받을 수 있도록 해준다.

이벤트 핸들러가 지정된 오브젝트 이외의 이벤트를 발생시켜야 할 때 사용한다.

이벤트를 받을 오브젝트나 무비클립을 addListener()를 통해 지정할 수 있다.

 

1. 키 오브젝트의 이벤트
Key.addListener(this);
_root.onKeyDown = function(){
 trace(Key.getCode()+"키를 클릭했습니다.");
}

 

 

2. 여러개의 이벤트리스너

// 키 오브젝트의 이벤트
Key.addListener(this);
Key.addListener(btn);
_root.onKeyDown = function(){
 trace(Key.getCode()+"키를 클릭했습니다.");
};
btn.onKeyDown = function(){
 trace(Key.getAscii()+"키를 클릭했습니다.");
};

 

 

3. 텍스트 필드의 이벤트리스너

fldListener = new Object();
Selection.addListener(fldListener);
fldListener.onSetFocus = function(oldFld, newFld){
 oldFld.border = false;
 newFld.border = true
};

//리스너 삭제
//Selection.removeListener(fldListener);

 

4. 구성요소의 이벤트리스너

myButton이라는 버튼구성요소와 myChk라는 체크박스구성요소를 올려놓고 아래의 코드를 실행해 봅시다.

listener = new Object();
listener.click = function(evtObj){
 trace(evtObj.target.label);
 trace(evtObj.type);
};

myButton.addEventListener("click", listener);
myChk.addEventListener("click", listener);