마우스를 쫓아 다니는 단풍잎 트레일러 만들기 1탄(파트2 스크립트 작성하기)
안녕하세요 두리입니다 히^^*
지난 시간에 단풍이 마우스 트레일러 기본 설계 작업을 하셨습니다
이번 파트에는 스크립트를 작성해보겠습니다
그럼 심호흡 크게 한번 들이키시고 구호 힘차게 외쳐보면서 시작해 볼까요
두리가 할 수 있는건 나두 할수있따!!~ 아자 아자 홧팅!!
무비 전체를 덮고있는 btnSp 스프라이트 위에 마우스가 올라오면 단풍잎을 복제하게하는 변수를 만들려고합니다
btnSp를 선택하고 스크립트(Script) 패널에서 가이드(Guided) 모드를 선택합니다
엑스퍼트(expert/전문가) 모드인 분은 버튼을 클릭해서 가이드 모드로 바꿔주세요
애드 스크립트(Add Script/스크립트 추가하기) -이벤트(Events) -셀프(Self) -언 셀프 이벤트 롤오버(onSelfEvent(rollOver) )을 선택합니다
반드시 스위시에 나오는 모든 영어는 입으로 말하면서 강좌를 따라하시고 또한 작업 할때도 그렇게 할 수 있도록 노력하시길 당부드립니다
강좌와 똑같은 글씨 찾기로는 그 한계를 극복 할 수 없을것입니다
모르는 단어가 나오면 반드시 사전을 찾아가면서 어떻게 발음하는지, 뜻은 무엇인지 그리고 스팰링까지 외우십시요
지금은 이렇게 가이드 모드에서 작성하고 있지만 앞으로 여러분들의 최종 목표는 머리속에 떠오는것을 직접 키보드를 쳐서 전문가 모드에서 입력해야하기 때문입니다 제 말씀 꼭 명심하십시요
"두리님~ 두리님 ~ 그런데 말이죠 ...왜 onSelfEvent(rollOver) 를 부착하셨나요
버튼이라면 그냥 on(rollOver) 를 부착해야하는것이 아닌감유? "
자 그럼 버튼과 버튼을 제외한 나머지 오브젝트들을 서로 구분할 수 있도록 이번에 확실하게 설명 드리겠습니다
플래시 액션 스크립트 MX 버전(2002년 발표) 이후부터는 onSelfEvent 라는 이벤트 핸들러가 프로그램에 내장되어 있지 않습니다
스위시 스크립트에서만 현재 내장되어 있는 것인데 이것은 버튼이 아닌 다른 오브젝트를 마치 버튼처럼 마우스와 키보드에 반응하여 사건을 감지하는 역활을 수행합니다
버튼일 경우는 on(rollOver) 이라고 부착하시고 버튼이 아닌 오브젝트는 이렇게 onSelfEvent(rollOver) 이벤트 핸들러를 부착하는것이 원칙입니다
플래시 액션 스크립트에서는 콜백함수 방식으로 이러한 역활을 대신하게 됩니다
스위시 맥스 버전에서도 콜백함수 방식으로 스크립트를 작성하면 onSelfEvent라는 이벤트 핸들러는 사용하지 않아도 됩니다
버튼 전용 이벤트 핸들러인 on(rollOver)는 명령만 내릴수 있지 이곳에 작성한 데이터(변수)는 다른곳에서 호출할 수가 없습니다
왜?
지난 시간에 배우셨지요 버튼은 이름이 있어도 경로를 지정할수 없으므로 이름을 호출 할수가 없기 때문입니다
쉽게 말하면 버튼은 주소가 없는 번지없는 주막입니다 (트로트 노래 제목 키득키득 ^^)
반드시 구분해서 꼭 외워두시길 바랍니다
무비 전체를 덮고있는 투명 사각형 위에 마우스가 올라가면 발생하는 이벤트를 핸들러안에 변수를 만들고 데이터를 저장해 놓겠습니다
한 문장(또는 코드)을 넣을때마다 이렇게 애드 스크립트(Add Script) -스테이트먼트(Statements) -이밸류에이트(evaluate;)를 선택합니다
보조편집기에 아래 문장을 한글자도 틀리지않게 똑같이 잘 써넣으십시요
rollOvered=true
이게 몬소리일까요?
롤오버드 어사인 트루라고 읽습니다
" = " 을 그간 이퀄이라고 읽지않고 어사인이라고 읽은것은 강좌 중간에 설명을 드리겠습니다
rollOvered는 제가 제 멋대로 이름을 지은것입니다
이것은 마우스를 올렸을 경우라는 의미를 담고 있는 변수명을 짓고 그 변수에 참이라는 true 값을 대입해 놓은것입니다
boolean 객체의 true 와 false는 이미 제 강좌에서 몇번 언급했으니 따로 설명드리지 않겠습니다
무비안에 있던 마우스가 무비 밖으로 벗어났을때 발생하는 이벤트 핸들러를 부착하겠습니다
아래와 같이 닫기 중괄호를 선택하고 순서대로 합니다
onSelfEvent(rollOut) 는 마우스가 벗어나는 순간을 감지하는 이벤트 핸들러입니다
다음 문장을 입력하기 위해 아래와 같이 합니다
애드 스크립트(Add Script) -스테이트먼트(Statements) -이밸류에이트(evaluate;)입니다
아래와 같이 한글자도 틀리지않고 똑같이 입력합니다
rollOvered=false
롤오버드 어사인 폴스라고 읽습니다
rollOvered 라는 변수명에 거짓이라는 false 값을 넣었습니다
이제 무비 위에 마우스를 올리면 rollOvered 변수에 true 값을 호출할 수 있게 되었고
마우스가 무비 밖으로 벗어나면 rollOvered 변수에 false 값을 호출할 수 있게 되었습니다
이제 본격적으로 단풍이를 복제하는 코드를 작성해 보겠습니다
마우스이벤트(mouseEvent) 스프라이트를 선택합니다
스크립트 패널에서 언로드([안내]태그제한으로등록되지않습니다-xxonLoad()) 프레임 이벤트 핸들러를 부착합니다
여러번 설명드렸지요
복습차원에서 다시 언급하면 [안내]태그제한으로등록되지않습니다-xxonLoad() 프레임 이벤트 핸들러는 오브젝트가 무비안에 처음 로드 되었을때 사건을 감지해 냅니다
여기서는 mouseEvent가 무비에 처음 등장할때 사건을 감지해 냅니다
다음 문장을 입력하기 위해 아래와 같이합니다
애드스크립트(Add Script) -스테이트먼트(Statements) -이밸류에이트(evaluate;)
복제되는 인스턴스 스프라이트의 이름으로 사용할 i 라는 변수에 초기값으로 0을 저장합니다
i=0
i=0을 저장하지 않으면 컴퓨터는 0 이라는 숫자를 자동으로 사용합니다
그럼 현재는 써도 되고 안써도 되는 것인데 왜 썼는냐하고 궁금해하실 분이 계실것입니다
여러분들께서 앞으로 다른 코드를 작성하다보면 i 라는 변수에 1을 대입할수도 있고 2를 대입해야하는 경우도 있을것입니다
그러므로 처음부터 항상 이렇게 초기값을 지정해 주는 습관을 들이시는게 좋습니다
애드스크립트(Add Script) -스테이트먼트(Statements) -이밸류에이트(evaluate;)을 한번씩 하고 한줄 입력하고를 반복해서 모두 세줄의 값을 입력하십시요
this._x=0;
this._y=0;
this.mapleLeafSp._visible=0;
설명을 해드리겠습니다
단풍이가 무비에 등장하면 현재 본인이 무비를 기준으로 위치를 X 좌표 0픽셀 지점과 Y좌표 0픽셀 지점에 있게 한것입니다
즉 실제로 단풍이를 작업할때 스테이지 정중앙에 놓았다고해도 무비가 실제 모니터에서 보여질때는 (0,0) 위치로 이동을 한다는것입니다
위의 코드중 세번째 코드 this.mapleLeafSp._visible=0 이라는 코드를 삭제하고 무비를 테스트 해보시면 금방 아실수가 있을거예요
항상 강좌를 따라하실때는 이렇게 자꾸 테스트 하면서 실제로 이 코드가 어떤 의미를 담고 있는지를 눈으로 확인하는 과정을 거치시는게 큰 도움이 됩니다
만약 실제로 테스트를 할수 없다면 노트에 그림을 그려서 눈으로 확인하는것도 좋은 공부 방법입니다
세번째 코드에 사용한 언더바 비저블(_visible)는 눈에 보이느냐를 결정하는 속성입니다
기본값은 true (참) 입니다
그러므로 이 속성을 넣지 않으면 항상 무비에 오브젝트들이 눈에 보이는 것이지요
이것에 0 이라는 false(거짓) 값을 넣었으니 이제 눈에 보이지 않게됩니다
이퀄라이저 강좌와 복권 긁기에서 공부 하신것이니 잘 이해가 안되는 분들은 복습해 보십시요
모든 공부는 반복하는 방법밖에는 달리 잘하는 방법이 없습니다
첫째도 반복 둘째도 반복 .... 본인이 공부를 때려치는 그 순간까지 무한 반복 하십시요
다음은 대따 맘에 드는 언엔터프레임 이벤트 핸들러를 부착하려고합니다
그간 제 강좌에서 여러차례 요놈을 사용해 보셨으니 얼마나 이쁜 녀석인지 다들 알고 계실겁니다
뽀뽀 많이 해주세요 ㅋㄷㅋㄷ
onEnterFrame() 프레임 이벤트 핸들러는 한가지 단점이 있다고 말씀드렸었지요
이쁜 녀석인데 요녀석이 주책 바가지입니다
무비가 짠하고 열리는 순간부터 코드 블록에 작성한 코드들을 무한 반복 실행한다는 것입니다
우리가 원하는것은 마우스가 무비위에 올라갔을때만 단풍이를 복제하고 싶은데 마우스도 안올렸는데 단풍이를 마구 복제하면 콱!! 꼬집어 주고 싶어지겠지요 키득키득 ^^
자 그래서 주책을 떨지 못하도록 if 조건문을 작성해서 조건을 충족할때만 복제를 하도록 하겠습니다
애드 스크립트-컨디셔널(Conditional)- 이프(if(...){ )을 선택합니다
보조 편집기에 아래 문장을 똑같이 입력합니다
_root.btnSp.rollOvered==true
한번 읽어볼까요
언더바 점 비티엔에스피 점 롤오버드 어사인 어사인 트루
= 은 수학에서 말하는 같다는 것이 아니고 대입해라라는 것이라고 여럿차례 말씀 드렸지요
== 이 같다입니다
해석하면 언더바 점 비티엔에스피 점 롤오버드가 참이면 이라는 뜻이됩니다
위에서 작성한 if문의 조건 표현식이 참이면 복제를 시작하는 문장을 작성하겠습니다
애드스크립트 -스프라이츠(Sprites)-듀플리케이트스프라이트(duplicateSprite(...) ) 을 선택합니다
보조 편집기에서 1번 타겟(Target) 은 2번 mapleLeafSp 를 선택합니다
단풍이가 들어있는 스프라이트지요
네임(Name) 항목의 1번 (e) 버튼을 클릭하세요
그럼 그림처럼 입력하는 곳 좌우로 소괄호 () 가 표시됩니다
아래와 같이 똑같이 직접 입력하세요
"mapleLeafSp"+i
복제되어 탄생하는 단풍이의 이름을 단풍이1,
단풍이2, 단풍이3 ...이렇게 문자열로 표시하도록 정해준 것입니다
마지막 항목 뎁쓰(Depth) 에 아래와 같이 직접 입력하세요
i
소문자 i입니다
깊이값도 단풍이1은 1이라는 깊이값을 갖게되고
단풍이2는 2라는 깊이값을 갖게되고
....
단풍이 15는 15라는 깊이값을 갖게되었습니다
깊이값은 지난 강좌에서도 두번 반복하셨으니 잘 기억이 가물가물하시면 복습하시길 바래요
위의 문법을 한번 정리해 보겠습니다
오브젝트를 복사하라는 함수 디플리케이트스프라이트는 아래와 같이 합니다
복제할 대상의 이름.duplicateSprite("복제된 아이들 이름",깊이값) 입니다
또한 아래와 같이 사용되기도합니다
duplicateSprite(복제할 대상의 이름, "복제된 아이들 이름",깊이값)
또한 이퀄라이저 사운드 플레이어 강좌와 복권 효과에서는 아래와 같이 작성하셨지요
spr=복제할 대상의 이름.duplicateSprite("복제된 아이들 이름",깊이값)
다 같은 문법이니 잘 기억해두시고 사용하시면됩니다
다음 문장을 넣기위해 애드스크립트(Add Script) -스테이트먼트(Statements) -이밸류에이트(evaluate;) 을 선택합니다
아래와 같이 똑같이 입력합니다
this["mapleLeafSp"+i]._x=_root._xmouse
한번 읽어볼까요
디스 대괄호 열고 쌍따옴표 열고 메이플리프에스피 쌍따옴표 닫고 플러스 아이 대괄호 닫고 점 언더바 엑스 어사인 언더바 루트 점 언더바 엑스마우스
무자게기네요 - -
복제된 단풍이가 메인 무비의 스테이지 엑스 마우스 좌표를 쫓아 댕기게됩니다
[ ] 은 대괄호 연산자라고 부릅니다
문자열+수치로 이루어진 인스턴스 네임명은 이렇게 대괄호 연산자를 사용해서 표기해줍니다
즉 this.mapleLeafSp+i._x 라고 표현하면 컴퓨터가 못알아 듣게되는거지요
i 라는 것은 결국 1,2,3,4,5....이라는 숫자이기 때문입니다
지난 제 강좌에서 설명드렸으니 복습해 보시길 바랍니다
이제 " = " 이것에 대하여 한번 이야기를 해봐야겠습니다
먼저 우리 스위시 맥스 프로그램에는 set value(셋 밸류/값을 놓다) 라고 스위시 맥스에 내장된 연산자에는 표기되어 있습니다
스위시 스크립트 강좌는 우리나라에 없기에 액션 스크립트를 제가 여러 강사님께 배웠는데 이것을 부르는 명칭이 여러가지입니다
어사인(assign/대입하다)이라고 하시는 강사님도 계시고
이퀄(equal/같은) 이라고 하시는 분도 계시고
는이라고 하는 분도 계십니다
이전 강좌까지는 이퀄이라고 읽었으나 실제로 " = " 이것은 대입하다라는 의미이므로 앞으로는 어사인이라고 읽겠습니다
여러분께서는 셋밸류 또는 어사인이라고 읽어주시면 별 무리가 없을것입니다
x 와 y는 항상 같이 따라 댕긴다고 했지요
다음 문장을 넣기위해 애드스크립트(Add Script) -스테이트먼트(Statements) -이밸류에이트(evaluate;) 을 선택합니다
this["mapleLeafSp"+i]._y=_root._ymouse;
복제된 단풍이가 메인 무비의 스테이지 와이(y) 마우스 좌표를 쫓아 댕기게됩니다
그런데 위에서 단풍이가 계속 복제하면 어떨까요? 실제로 파트1에서 15프레임만 애니매이션이 되고 16프레임에서는 사라지는 단풍이를 만들었기에 이번 경우는 문제가 없을수있으나 다른 경우라면 사라지지않고 계속적으로 단풍이가 늘어날것입니다 즉 컴퓨터의 CPU에 영향을 줄 수 있다는 애기가 되겠지요
onEnterFrame 프레임 핸들러를 사용해서 함수를 실행할때는 항상 이점을 고려해야합니다
그래서 15개만 복제하고 다시 1~15를 반복하도록 조건을 걸어 놓겠습니다
애드 스크립트-컨디셔널(Conditional)- 이프(if(...){ )을 선택합니다
보조 편집기에 아래와 같이 입력합니다
i==15
i 변수에 저장된 값이 15와 똑같다면 입니다
애드스크립트(Add Script) -스테이트먼트(Statements) -이밸류에이트(evaluate;)를 선택하고 아래와 같이 보조 편집기에 입력합니다
i=0
i 변수에 15가 저장되면 i 변수에 다시 0이라는 변수를 대입하게 해서 1에서 15까지만 반복하게되는것입니다
두리님 두리님~ i=0 이면 0에서 15까지 반복하는게 아닌가유?
그것은 다음 문장을 입력하면 알게되십니다 히^^*
아래 그림 1번 닫기 중괄호를 선택하고 애드스크립트(Add Script) -스테이트먼트(Statements) -이밸류에이트(evaluate;)를 선택합니다
반드시 i=0 바로 아래있는 중괄호를 선택해야합니다 아주 중요합니다
여러분들중 다른 중괄호를 선택하는 실수하실까봐서 제가 분명히 짚어 드립니다
보조 편집기에 아래와 같이 똑같이 입력합니다
i++
++ 은 증가 연산자라고 말씀드렸지요
이것은 i=i+1 과 같습니다
i 라는 자기 자신에게 1씩 값을 더해주어 다시 본인에게 대입해 주는 것입니다
즉
1=0+1
2=1+1
3=2+1
....
수학적인 개념이라면
0+1=1 이라고해야 이해하기 좋으실텐데 꺼꾸로 하니까 참 낯설고 어렵지요
그래도 자꾸 보고 자꾸 쓰면 금방 익숙해지실 것입니다
스크립트에서 = 의 의미는 대입하다이니까 수학적인 = 과는 다르다는것을 꼭 정립시켜합니다
아래와 같이 잘 입력 되셨는지 한글자 한글자 그리고 점하나 빠짐없이 꼼꼼하게 확인해 보십시요