『 MX : 버튼심볼 사용하기 』

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 버튼심볼 만들기, 버튼심볼내 프레임 이해하기, 버튼심볼에 액션넣기등 버튼에 관련된 모든것을 배워보도록 하겠습니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 00. 버튼심볼 플래시에서 빠질 수 없는 것중의 하나가 바로 버튼심볼입니다. 이 녀석 꽤 유용하죠. 웹서핑 중 우리가 보는 수많은 플래시 광고. 그 광고에 버튼심볼이 사용안된 곳이 없죠. 광고를 클릭해서 해당 페이지로 연결되게 하려면, 당연히 버튼이 사용되야 하니깐요. 이 외에 플래시로 만든 게임이나 플래시로 만든 게시판, 방명록등등 실로 버튼심볼이 사용안되는 곳이 없습니다. 플래시 애니메이션의 경우, 단순히 한방향으로 그 정보를 전달해 주죠. 즉, 사용하는 우리들은 그냥 그 애니메이션을 보고만 있으면 되니깐요. 하지만 플래시로 만든 게시판이나 게임같은 경우, 정보는 한방향으로만 흐르는 것이 아니라 양방향으로 흐르게 됩니다. 상호작용을 하게 되는거죠. 글을 쓰기 위해서 우리는 write라는 버튼을 눌러야 하고, 다른 글을 읽기 위해서는 해당 글 제목을 눌러야 합니다. 또한 게임상에서 시작하기 위해서 시작버튼을 눌러야 하는등 버튼심볼의 쓰임새는 수도 없이 많죠. 그럼 이러한 버튼심볼을 우리가 상황에 따라 알맞게 사용할 수 있는 방법을 자세히 배워보도록 합시다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 01. 버튼심볼 만들기 메뉴의 Insert > New Symbol...(Ctrl+F8) 을 선택합니다. Name 부분은 아무렇게나 적어주시구요, Behavior 부분은 Button을 선택한 후 확인(OK)을 누릅니다. 자, 그럼 버튼심볼 편집화면으로 들어가게 됩니다. 버튼심볼의 타임라인을 보시면, 총 4개의 프레임으로 구성이 되어 있는 것이 보일 겁니다. Up, Over, Down, Hit 프레임이죠. Up 프레임은 버튼심볼이 로드 됐을 때 기본적으로 보여지는 모습이 담긴 프레임입니다. Over 프레임은 버튼위로 마우스가 올라갔을 때의 모습이 담긴 프레임입니다. Down 프레임은 버튼을 마우스로 누르고 있을 때의 모습이 담긴 프레임입니다. 마지막으로 Hit 프레임은 마우스가 버튼으로 인식할 수 있는 버튼영역입니다. 각각 만들어보죠. 먼저, Up 프레임에 빨간색 동그라미를 그립니다. 다음으로 Over 프레임에 파랑색 사각형을 그리겠습니다. 프레임을 구분하기 위해서 다르게 그립니다. 이때 Over 프레임에 Blank KeyFrame(빈키프레임:단축키F7)을 삽입하고 그려야 Up 프레임에 들어가 있는 빨간색 동그라미가 Over 프레임으로 따라오지 않습니다. Down 프레임에는 노랑색 동그라미를 그립니다. 마지막 Hit 프레임에는 Up 프레임에 그린 동그라미의 절반 크기의 동그라미를 그리겠습니다. 이 Hit 프레임에는 딱히 색을 넣을 필요는 없습니다. 단지 버튼으로 인식되기 위한 영역만을 표시해 주기 때문에 모양만 집어 넣어주면 됩니다. 딱 보기에도 Hit 프레임에 들어간 영역은 상당히 작죠? 이 작은 영역이 실제 무비상에서 어떻게 작용하는지도 잘 보셔야 합니다. 다 만들었습니다. 버튼심볼 편집화면을 빠져 나오시구요. 라이브러리 패널에서 이제까지 만든 버튼심볼을 마우스로 끌어와서 스테이지에 배치합니다. 메뉴의 Control > Test Movie(Ctrl+Enter)로 무비를 테스트 해 봅니다. 전 이해를 돕고자 hit 프레임에 들어가 있는 부분을 실제로 볼 수 있게 위의 무비처럼 만들었습니다. 처음 무비가 로드 되면, 위처럼 빨간색 동그라미 즉, Up프레임의 내용이 보여지게 됩니다. hit 영역인 검은색 외의 빨간색 위로 마우스를 가져가 보세요. 어떻게 되죠? 아무일도 일어나지 않습니다. 네 그렇습니다. 버튼 부분이 맞긴 하지만, Hit 영역이 아닌 부분이므로, 버튼으로 인식하지 못하는 겁니다. 그럼 이번엔 Hit 프레임에 들어간 모양부분인 검은색 동그라미위로 마우스를 가져가 보세요. 마우스 포인터가 손가락 모양으로 변했습니다. 비로소 버튼으로 인식을 하게 된거죠. 또한 이때 보여지는 모습은 Over 프레임에 들어가 있던 파랑색 사각형이 되는 거랍니다. 이제 그 상태에서 가만히 버튼을 마우스로 누르고 있어보세요. Down 프레임에 들어가 있는 모습인 노랑색 동그라미로 변했습니다. 여기서 짤막한 의문점..!!! 문:그럼 버튼을 만들 때 항상 hit 프레임에 모양을 넣어야 하나요? 답:꼭 그럴 필요는 없습니다. Up, Over, Down 프레임의 모양과 Hit 프레임의 영역이 같은 크기라면, 꼭 Hit 프레임에 영역을 지정할 필요는 없습니다. 만약 Hit 프레임에 아무것도 없다면, 그 전 프레임인 Down 프레임에 들어가 있는 모양의 크기가 Hit 과 같은 기능을 하구요, Down 프레임이 없다면, Over 프레임, Over 프레임이 없다면, Up 프레임에 들어가 있는 모양의 크기대로 마우스 반응영역이 결정됩니다. 이제 아시겠죠? Up, Over, Down, Hit 프레임 각각이 어떠할 때 사용되는 지요... 그럼 다음으로 버튼에 액션을 입력해 봅시다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 02. 버튼에 액션을 입력하기 이번에는 버튼심볼에 액션을 입력해 보도록 하겠습니다. 버튼의 제일 기본적인 기능은 아시다시피 일정 사이트로 들어가게끔 링크를 거는 것이지요. 위에서 예제로 만든 버튼에 액션을 입력해 보겠습니다. 먼저, 메인 스테이지를 보시면, 아래처럼 되어 있을 겁니다. 1프레임에 버튼심볼이 들어가 있는 모습이요. 이 상태에서 버튼심볼을 선택하시구요, 다음으로 메뉴의 Window > Actions(F9)를 누르시면, 액션패널이 활성화 될겁니다. 버튼심볼을 선택한 상태에서 단축키 F9를 누르셔도 되구요. 버튼심볼 위에서 마우스 오른쪽 버튼을 눌러서 나오는 서브메뉴에서 Actions를 선택해도 됩니다. 버튼에 액션을 입력할 경우, 액션으로써 우리는 버튼 이벤트 핸들러를 사용해야 합니다. 즉, on(event){ actions; } 위와 같은 형식이죠. 많이 보셨죠? ( ) 안의 이벤트가 발생하면, { }안의 actions 부분의 액션이 실행이 되는 겁니다. 이벤트의 종류에 따라서 버튼이 반응하는 것도 여러가지가 있는데요, 이 이벤트 각각에 대해서는 액션스크립트 강좌 게시판의 버튼 이벤트 핸들러(button event handler) 부분을 참고하세요. 여기서는 간단히 버튼을 눌렀을 때, 다른 웹페이지가 열리는 액션을 사용할까 합니다. 자, 액션패널이 활성화가 되었으면, 우리는 실제로 액션을 입력해 봅니다. 참, 혹자는 위 그림의 마우스 포인터 부분에 텍스트를 입력할려고 해도 안된다고 하시는데요, 그건 액션스크립트 편집모드가 Normal로 되어 있어서 그럽니다. 액션스크립트를 익숙하게 쓰시기 위해서는 Expert 모드로 바꿔줘야 하죠. 액션패널의 우측상단의 서브메뉴버튼을 눌러서 Expert 모드로 바꾸세요. 이제 아래처럼 액션을 입력합니다. on(press){ getURL("//www.daum.net","_blank"); } 버튼 이벤트 핸들러 중 press 이벤트를 써서 나타낸 무비입니다. 해당 버튼을 마우스로 누르면, { } 안의 액션이 실행되지요. getURL(); 은 해당 페이지로 연결한다는 액션이구요. 첫번째 매개변수인 //www.daum.net 은 연결될 웹페이지입니다. 두번째 매개변수인 _blank 는 타겟지정입니다. _blank로 되어 있으면, 새창으로 웹페이지를 연결합니다. 이제 만들어진 무비를 테스트 해보면, 새창으로 해당 사이트가 열리는 것을 보실 수 있습니다. 아래의 무비에서 버튼을 눌러보세요. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 03. 액션입력용 투명버튼 만들기 투명버튼이란 것이 있습니다. 즉, 실제 무비상에서는 나타나지 않지만, 버튼의 기능을 하는 것들이죠. 단순히 액션의 입력을 위해서 많이 사용됩니다. 한번 만들어 보도록 하죠. 먼저, 메뉴의 Insert > New Symbol...(Ctrl+F8)을 눌러서 새 심볼만들기 창을 엽니다. 이름은 아무것이나 적어주시고, Behavior 부분은 버튼을 선택해 주시고, OK(확인)을 눌러주세요. 버튼 심볼 편집 화면으로 넘어갔죠? 이제 Hit 프레임에 빈키프레임을 삽입합니다. 물론, 아무것도 없으니 그냥 키프레임을 삽입해도 되요. 그리고, Hit 프레임에 동그라미를 하나 그려 넣습니다. 마우스 반응 영역이므로 무슨 색을 넣든 상관없습니다. 이제 버튼 심볼 편집 화면을 빠져나옵니다. 그리고, 라이브러리 패널에서 버튼심볼을 끌어다가 스테이지에 배치합니다. 어떻게 되죠? 아쿠아색으로 버튼심볼이 표시가 되어 있을 겁니다. 즉, Hit 프레임, 버튼 반응 영역만 지정이 되었다면, 이렇게 보입니다. 이게 바로 투명버튼이죠. 실제 무비상에서는 보여지지 않지만, 버튼의 역할을 하게 됩니다. 이 버튼에 아까 위처럼 액션을 입력합니다. on(press){ getURL("//www.daum.net","_blank"); } 만들어진 예제는 아래와 같습니다. 아무것도 없는 것 같지만, 가운데 쯤에 투명버튼이 놓여져 있습니다. 이러한 투명버튼은 Up, Over, Down 프레임같이 버튼의 모양이 변하지는 않지만, 액션만을 입력해 사용할 때 유용하죠. 자, 버튼 만들기의 기본적인 것들을 쭉 살펴봤습니다. 여러분들도 꼭 직접 해 보시고, 이해를 하셔야 합니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 본 게시물은 //xen.new21.org, //cafe.daum.net/macromedia, //www.bcpark.net 외의 이동/불펌을 금지합니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━