on(rollOver)와 onRollover, onEnterFrame과 .onClipEvent(enterFrame). 액션스크립트를 처음 접하는 학생에게는 이처럼 헷갈리는 함수가 많아서 코딩이 끝난 후 Ctrl+Enter를 눌렀을 때 수십 개의 오류가 다다다~ 튀어나오곤 한다.

 액션스크립트를 무작정 따라하는 책에서도 함수와 이벤트 핸들러가 어떨 때에는 쓸 수 있고 어떨 때에는 쓸 수 없는지, 즉 어떤 건 어디에서만 쓸 수 있는지를 정리해놓지 않았다. 다만 이번 step에서는 다음과 같이 입력하라고 설명할 뿐이다. 이런 식으로 액션스크립트를 배운 학생은 나중에 실제로 플래시로 웹사이트의 내비게이션 영역을 디자인할 때 위와 같은 함수를 사용할 때 어떤 것을 써야 하는지 확실하게 모른다. 확실하게 모르면 코딩이 이루어질 수가 없다. 어떤 함수를 써야 하는지를 모르면 프로그래밍해놓은 작품이 아예 동작을 하지 않아서 오류를 하나씩 제거해나가는 tracing 자체가 불가능해지기 때문이다.
 
 따라서 적어도 다음과 같이 정리는 해두자.

프레임용 함수
play();
stop();
(무비클립 인스턴스 이름).(무비클립용 함수) 무비클립 안에 직접 함수를 써넣을 수도 있지만(무비클립을 누르고 F9를 누를 때) 무비클립의 수가 많거나 한 프레임짜리 Scene 혹은 한 프레임짜리 무비클립이라면 프레임을 재생할 필요가 없으므로 1프레임 안에 무비클립용 함수를 다 써넣는다.
gotoAndPlay(2);
한번만 실행할 함수는 프레임 안에 그냥 function으로 쓴다. 여러번 실행하고자 한다면 1프레임에 함수를 그냥 써놓고 2프레임에 gotoAndPlay(1);을 넣는다.

버튼용 함수
on(release){
on(rollOver){
on(rollOut, dragOut){
 버튼용 함수는 on( ) 식으로 이벤트 핸들러가 생겼다.

무비클립용 함수
onClipEvent(load){
onClipEvent(enterFrame){ 이것은 onEnterFrame = function(){ 과 같은 효과를 갖는다.
gotoAndPlay(2);  그리고 이 함수는 어떤 경우를 만족시킬 때에만 작동하기 위해 존재하는 함수이기 때문에 99%의 경우로 if(){ 안에 들어가 있다.
계속해서 실행할 함수는 무비클립 함수의 onEnterFrame 안에 넣는다.

if(over && this._xscale < 110){
   }else if(!over && this._xscale > 110) {
  }
else는 꼭 써 주어야 한다.


또 알아야 할 것이 있는데 그것은 변수의 scope이다.
무비클립 안의 액션스크립트에 있는 변수는 무비클립 프레임 안의 액션스크립트에 있는 변수와 scope가 같다.
예를 들어, mc1이라는 무비클립 안에 var1=1;을 써넣고 mc1 무비클립을 더블클릭하여 1프레임에 if(var1==3) 을 써넣으면 var1이 서로 연동된다.


보너스: 무비클립을 버튼처럼 사용할 때의 공식

무비클립을 버튼처럼 사용한다면 레이어를 다음과 같이 만든다.
ac : 프레임에 액션스크립트를 넣기 위해 만든 프레임
hit : 버튼 영역 (안에 버튼 심벌이 들어간다)
txt : 텍스트 영역 (안에 그래픽이나 무비클립 심벌이 들어간다)
shape : 버튼의 모양 영역

무비클립의 ac 레이어 1프레임에는 stop(); 을 입력한다.
Posted by 마키아또

댓글을 달아 주세요

  얼마 전에 잡지 w.e.b. 을 통해 알게 된 The Favourite Website Awards (The FWA) 라는 사이트가 있습니다. 어느 나라에서 만든 사이트인지는 모르겠지만, 플래시나 CSS를 중심으로 만든 웹사이트 중 아이디어가 기발하거나 창조적인 콘셉트를 활용한 곳을 소개해 주는 사이트입니다. 매일 한 개의 사이트가 차곡차곡 올라와 기분이 흐뭇합니다.

The FWA의 메인 화면 (사이트 들어가기)



  그중 제가 우연히 들어간 사이트 중 인테리어 소품과도 같은 즐거운 느낌을 주는 사이트가 있었으니 그것은 바로 Cartelle!! 인터랙티브 디자인을 연구하는 일종의 연구소 비슷한 곳이었습니다. 사이트 들어가기
  사이트는 매우 간소하게 생겼습니다. 마치 인사동에 있는 작은 비디오 아티스트의 전시관에 잠시 들른 느낌이랄까요? 사이트를 방문한 사람에게는 무작위로 Cartelle에서 제작한 인터랙티브 디자인 화면을 보여줍니다. TOY #1부터 #10까지인가 있습니다.

Cartelle의 왼쪽 사이드바 메뉴. 다양하게 즐길 수 있는 인터랙티브 디자인 소품들이 마련되어 있습니다.


제가 가장 좋아하는 소품은 바로 이 Rainy Day (TOY #2)입니다. 우산을 움직일 수 있어요~


  물론 한국에서도 플래시광고에 이러한 인터랙티브 디자인이 잘 쓰이지만 저는 웹사이트 자체에도 이것이 넓게 활용되었으면 합니다. 클릭하고 포인터를 움직이는 것에도 얼마나 많은 의미를 담을 수 있는지를 생각해 봐야겠지요.

Posted by 마키아또

댓글을 달아 주세요