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이 서로 연동된다.
액션스크립트를 무작정 따라하는 책에서도 함수와 이벤트 핸들러가 어떨 때에는 쓸 수 있고 어떨 때에는 쓸 수 없는지, 즉 어떤 건 어디에서만 쓸 수 있는지를 정리해놓지 않았다. 다만 이번 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(); 을 입력한다.
무비클립을 버튼처럼 사용한다면 레이어를 다음과 같이 만든다.
ac : 프레임에 액션스크립트를 넣기 위해 만든 프레임
hit : 버튼 영역 (안에 버튼 심벌이 들어간다)
txt : 텍스트 영역 (안에 그래픽이나 무비클립 심벌이 들어간다)
shape : 버튼의 모양 영역
무비클립의 ac 레이어 1프레임에는 stop(); 을 입력한다.
'연구 > 웹디자인/UX' 카테고리의 다른 글
HTML5+jQuery 애니메이션을 만들어주실 개발자+디자이너를 찾습니다. (0) | 2012.01.27 |
---|---|
관계자의 답변이 사용자 인터페이스에 우선한다. (0) | 2011.06.25 |
Number10.gov.uk(영국) 40대 총리의 웹사이트는 20대였다 (0) | 2010.06.06 |
한국 정부, 시민단체 웹사이트 디자인의 일률적인 테마에 대한 불만 (2) | 2009.10.26 |
Cartelle (네덜란드) : 참여하는 인터랙티브 웹디자인 소품 (0) | 2009.03.16 |