액션스크립트좀 배워보자. hop#1 그냥 뻘글 시리즈. 플래시좀 가지고 놀아보고 싶다는 분을 위한 액션스크립트 뻘스런 노하우 공개 쇼.

이 글을 이해하기 위해서는,
1.아무데나 가서 FLASH 8 을 다운받아 설치한다. 아쉽게도 어도비 홈페이지의 Trial 버젼 다운로드가 끝나버렸다..
2.플래시를 통해 간단히 애니메이션을 만드는법을 익힌다. 네이버 블로거들이 퍼온글 보면 많이 있을듯 하다.
3.버튼같은거 만드려고 액션스크립트좀 써볼까나 하다가 GG친다.

이상의 개념 탑재를 완료했다면 어서빨리 궈궈~
요즘엔 AS 3.0 이 나온다니 하는 말이 많지만 대충 따라해보기엔 그렇게 거창하게 나가기 전에
간단한 스크립트만 써도 왠만한건 다 되니까 씸플하게 글을 한번 써보려 한다.



대략 첫번째 뻘글이니만큼, 아주 쉽게, 무비클립을 움직이게 하는법부터 알아보자.

#1.우선, 새로 스테이지를 열어서 상자를 만들고 F8을 눌러서 이 상자를 심볼로 바꾸자.

그리고 이름을 마음대로 써주고, 유형은 무비클립으로 해보자.
여기서 이름을 정해주는게 나름 중요한데, 대충 막 쓰지 말고, 자기 나름대로의 규칙을 정해서 써야지 나중에 가서 햇갈리지 않는다. 보통 플래시 초보들이 많이 하는 실수가 이 심볼 이름을 아무렇게나 처리한다는 것인데, 고수가 되고 싶다면 꼭 이름을 정성들여 규칙을 정해서 만드는게 좋다. 여기서 난 핑크색 상자니까 box_pink 로 이름을 정했다. pink_box 가 되도 상관 없고, bxpink 라던가 뭐 나름대로 잘 알아볼 수 있게 정하면 OK.

심볼 유형은 무비클립, 버튼, 그래픽이 있는데, 이건 나중에 쓰다보면 자연스럽에 아핳 하고 꺠닿게 될 날이 올테니 패스하고 그냥 넘어가자. 첨부터 골때리는 이야기 나오면 아직 플래시에 대해 파악이 안된 누구에게는 상당히 혼란스러울테니.


#2.여튼 상자를 무비클립으로 해놓으니까 하단의 속성창에 나오는 내용이 뭔가 바뀌어있다.
일단 왼쪽의 톱니바퀴 아이콘으로 이넘이 지금 무비클립이라는걸 알려주고 있고, 그 밑에 보니 <인스턴스 이름>이라고 쓰는 칸이 있다. 그릭 밑에는 위치, 넓이의 기본 정보와. 옆으로 가면 해당 인스턴스 : box_pink 라고 쓰여있다. 색상:없음은 이미 알고있겠고(모르면 알아서 눌러보자). 블렌드 모드는 포토샵의 레이어 블렌드와 같다.

여튼 다른거 다 필요 없고 여기서 중요한건 <인스턴스 이름>과 해당 인스턴스 : box_pink 다.


#3. 그럼 여기까지 준비 완료다. F9 를 눌러서 액션 창을 열자.
여기서부터가 주로 꼬꼬마 친구들이 많이 답답해 하는 부분이다. Flash 4 버전까지만 해도 스크립트 도우미 창이 기본장착되어 있어서 뭣모르는 친구들도 편하게 스크립트를 쓸 수 있었는데, MX 버젼이 되면서 갑자기 액션스크립트가 복잡해져서 많이들 포기했었다는 과거 이야기가 있다. -_-

뭐 그런데 액션 패널에 대해 별로 살펴볼건 없고, 복사 붙여넣기 하지 말고 그대로 받아쓰자.

this.onEnterFrame = function() {
 this.box_pink._x = this.box_pink._x + 1
}

여기서 설명 들어가보자면,

this.onEnterFrame = function() {
this : 여기서는 바탕 스테이지를 뜻한다. 일단은 그렇게 알고 넘어가자.
. : at 혹은 '의' 라고 읽자.
onEnterFrame : 프레임이 새로 넘어갈떄마다, 프레임 수는 스테이지 설정창에서 바꾸는것 이미 알고 있겠지?
= : 별다른거 없다. 그냔 '는' 이다.
function() : 일단 패스. 이건 나중에 가서 전문적으로 다루자.
{ : 이 대괄호 다음부터가 본문이라 이거다.
이상 내용을 한글로 읽어보면 : 이넘의 프레임이 바뀔때마다 아래 내용대로 해라.

 this.box_pink._x = this.box_pink._x + 1
this : 위에 내용과 같다. 바탕 스테이지라는 뜻.
box_pink : 아까 만들었던 상자의 이름이다. 각자 썼던대로 바꿔써보자.
_x : X위치. 그러니까 가로 위치다. 스테이지의 왼쪽 끝으로부터의 거리.
= : 역시 별다를거 없는 = 이다.
this.box_pink._x : 모르겠으면 위에 네줄 다시 읽어보자.
+1 : 1을 더한다는거다. 뻔하다.
이상의 내용을 한글로 읽으면 : 바탕의 상자의 가로 위치는 바탕의 상자의 가로 위치 + 1 이다. => 가로 위치를 1 더해라 => 오른쪽으로 한칸 가라.
}
} : 여기까지가 본론이다! 위에 내용대로 해라.

종합해보면 "프레임이 바뀔때마다 바탕의 상자를 오른쪽으로 한칸씩 이동시켜라" 이다. 한글로 하면 되는거 가지고, 아놔 암턴 컴터는 이렇게 해야 말을 알아들으니 별 수 없다.

#4.자, 내용을 이해했으면 Ctrl + Enter 를 눌러서 어디 한번 상자가 오른쪽으로 움직이나 확인해보자!
.
.
.
.

캐난감 뭐 오타가 난게 아닌데도 상자가 움직이지 않는다. 왜그러느냐!!!
원인은 바로 이거 :

여튼 다른거 다 필요 없고 여기서 중요한건 <인스턴스 이름>과 해당 인스턴스 : box_pink 다.

처음 무비클립을 만들때 쓴 이름과 실제 스테이지에서 쓸 수 있는 이름이 다르다는것이다.
예를들면 호나우딩요라는 꼬마가 태어났을때 이름을 호나우딩요 라고 지었을 뿐, 실제 축구장에서 호나우딩요는 10번인 것이다.
여기서 호나우딩요 : 심볼의 이름,
10번 : <인스턴스 네임>
이 되는것인데, 우린 아까 <인스턴스 네임> 에 아무것도 쓰지 않았기 때문에 동작할리가 없었던것.

#5.그럼 어서 <인스턴스 네임>을 쓰는곳에 역시 마음대로 나름의 규칙을 써서 뭐라고 써보자.
난 box1 이라고 이름을 써 넣었다. 그리고 역시 중요한것. 이 인스턴스 네임을 적어준대로 스크립트에서 우리가 아까 잘못 썼던 부분 'pink_box' 를 지우고 그 자리에 'box1' 을 넣어줘야 한다.
스크립트가 인식하는건 심볼의 이름이 아닌 인스턴스 네임인 것이다~


#6. 이제 Ctrl+Enter 를 눌러보면 상자가 지렁이 기어가듯이 오른쪽으로 비실비실 기어가는걸 볼 수 있다.
신기하다. 별도의 수동적인 애니메이션을 넣지 않아도 스크립트 세줄만으로 상자가 움직인다니!! 앗싸!





오늘은 여기까지 므흣