4-21. 마우스 이벤트 활용 - rollOver / rollOut

제4장 예제를 이용한 애니메이션 만들기

4-21. 마우스 이벤트 활용 - rollOver / rollOut

마우스 이벤트란 마우스 버튼을 어떻게 조작할 것인가를 의미합니다. 다음과 같은 마우스 이벤트가 있습니다.

- 누르기(press) : 마우스 왼쪽 버튼 누르기
- 해제(release) : 마우스 왼족 버튼 눌렀다 놓기(클릭)
- 외부에서 해제 : 마우스 버튼을 hit 프레임에서 정해준 영역 밖에서 뗐을 때
- 키 누르기 : 마우스 이벤트와 함께 혹은 단독으로 키보드의 지정해준 키를 사용하도록 합니다. 선택하고 키보드의 키를 눌러주면 키 이름이 표시됩니다.
- 롤 오버 : 마우스 포인터를 hit 영역에 올렸을 때
- 롤 아웃 : 마우스 포인터를 hit 영역에서 벗어나게 했을 때
- 드래그 오버 : 마우스를 드래그해서 hit 영역 위에 올렸을 때
- 드래그 아웃 : 마우스를 드래그해서 hit 영역 바깥에 놓았을 때
- 구성 요소 :

[완성된 무비]



이 예제는 마우스 이벤트만 이해하면 아주 쉽게 제작할 수 있습니다.
흘러가는 글자를 담은 무비클립을 만들고, 적당한 위치에 보이지 않는 버튼을 포갠 다음 그 버튼에 마우스 이벤트를 이용한 액션을 넣어주면 되는 것입니다.

여기에 사용된 마우스 이벤트는 rollOver와 rollOut입니다.




[만들어보기]

1. 새 파일을 열고 스테이지 크기를 가로 550, 세로 100 픽셀, 프레임 속도 20fps로 설정해줍니다. 프레임 속도가 기본값인 12fps로 해주면 글자의 움직임이 부자연스럽습니다.

2. 글자를 타이핑합니다.(사진이나 본인이 그린 그림을 활용하면 더 좋을 것입니다)

3. 타이핑한 글자를 무비클립 심볼로 변환합니다(F8키). 이때 이 무비클립을 제어하는 액션을 만들기 위해 반드시 [인스턴스 이름]을 넣어주어야 합니다.
 
여기서는 무비클립의 이름은 '글'로 인스턴스 이름은 'text'라고 넣어주었습니다.

4. 무비클립 편집 모드로 들어가서 글자를 움직이게 합니다.
글의 길이에 따라 키프레임 사이 간격을 조절해준 후 [트윈 > 모션]을 적용합니다.

5. [장면1]로 나와서 투명 버튼을 만들어줍니다.

6. 사각형을 그린 후 [심볼로 변환(F8) > (이름) : 버튼 (유형) : 버튼]

7. 버튼 편집 모드로 들어가서 히트 프레임을 클릭한 후 F6키를 눌러 키프레임을 넣어줍니다.
투명 버튼을 만들기 위해 업 프레임을 클릭한 후 Delete키를 눌러 사각형을 지워줍니다.
[장면 1]로 나옵니다.

8. 버튼을 선택한 후 다음과 같이 액션을 넣어줍니다.(직접 입력 모드에서 하는 것이 좋습니다)


on(rollOver){
   _root.text.stop();
}
on(rollOut){
   _root.text.play();
} 

즉, 버튼 위에 마우스 커서를 올리면 글이 멈추고, 벗어나면 재생을 하라는 액션 스크립트입니다.