(이 강의는 필자가 오른쪽 커스텀 메뉴 관련 강의를 찾던 중 도저히 찾을 수 없어서 레퍼런스, 도움말 뒤져가면서 알아낸 정보를 바탕으로 이루어졌습니다. 부디 이 강의가 도움이 되길 바랍니다.) 안녕하세요 ^^ 제가 알려드리고 싶은 내용은 AS3.0 에서 ContextMenu 를 다뤄보자는 것입니다. 아마도 빠진 내용이 많을텐데 댓글로 태클 감사히 받겠습니다. 우선 Adobe 도움말에 나온 ContextMenu 에 대한 설명부터 볼까요?
ContextMenu
ContextMenu 클래스를 통해 Flash Player 컨텍스트 메뉴의 항목을 제어할 수 있습니다. 사용자가 Flash Player에서 마우스 오른쪽 버튼을 클릭하거나(Windows) Control 키를 누른 상태에서 클릭하면(Macintosh) 컨텍스트 메뉴가 열립니다. ContextMenu 클래스의 메서드 및 속성을 사용하여 사용자 정의 메뉴 항목을 추가하고 내장 컨텍스트 메뉴 항목(예: 확대 및 인쇄)의 표시 방법을 제어하거나 메뉴의 복사본을 만들 수 있습니다. Ref: http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/ui/ContextMenu.html
뭔 소리인지 모르겠지요? 이제부터 쉽게 알아봅시다. ContextMenu 란 플래시에서 오른쪽 버튼을 누르면 나타나는 메뉴를 뜻합니다. 이 메뉴를 편집하여 다양하게 활용할 수 있는데요.(아쉽게도 설정과 Adobe Flash Player XX 정보 는 지울 수 없습니다.) 우선 ContextMenu 를 생성하는 방법부터 살펴봅시다.
[as3]var cm:ContextMenu = new ContextMenu();[/as3]
cm 이라는 ContextMenu 형식의 변수를 만들고 새로운 ContextMenu 개체를 생성합니다. 생성 시에 따로 들어가는 인수는 없습니다. 그러면 기존에 있던 메뉴는 어떻게 삭제할까요? 아주 쉬운 메서드가 하나 존재합니다. 바로 hideBuiltInItems 인데요. Adobe 도움말을 살펴봅시다.
hideBuiltInItems() 메서드
public function hideBuiltInItems():void
지정된 ContextMenu 객체에서 [설정]을 제외한 모든 내장 메뉴 항목을 숨깁니다. 디버거 버전의 Flash Player를 실행하는 경우에는 [디버깅] 메뉴 항목이 표시됩니다. SWF 파일에서 원격 디버깅을 사용하지 않는 경우에는 이 항목이 흐리게 표시됩니다.
기본 내장 메뉴 항목을 숨기는 아주 편리한 메서드입니다. 사용 방법도 간단합니다.
[as3]cm.hideBuiltInItems();[/as3]
한 줄로 간단하게 끝납니다. 자, 필요없는 메뉴를 지웠으니 이제 나만의 메뉴를 추가해야겠죠? 그런데 한 가지 더 알아야 할 것이 있습니다. 바로 ContextMenuItem 인데요. Adobe 도움말을 또 살펴봅시다.
ContextMenuItem
ContextMenuItem 클래스를 사용하면 Flash Player 컨텍스트 메뉴에 표시할 사용자 정의 메뉴 항목을 만들 수 있습니다. 각 ContextMenuItem 객체에는 컨텍스트 메뉴에 표시되는 텍스트 캡션이 있습니다. 컨텍스트 메뉴에 새 항목을 추가하려면 이를 ContextMenu 객체의 customItems 배열에 추가합니다.
Ref: http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/ui/ContextMenuItem.html
앗, 그런데 여기에 몇 가지 제한이 있군요!
- 컨텍스트 메뉴에 사용자 정의 항목을 15개까지 추가할 수 있습니다.
- 각 캡션에는 표시 가능한 문자가 하나 이상 있어야 합니다.
- 제어 문자, 개행 문자 및 기타 공백 문자는 무시됩니다.
- 캡션에는 최대 100자까지만 입력할 수 있습니다.
- 내장 메뉴 항목 또는 다른 사용자 정의 항목과 동일한 캡션은 일치하는 항목의 표시 여부와 관계없이 무시됩니다. 메뉴 캡션은 대/소문자, 문장 부호 또는 공백을 고려하지 않고 내장 캡션 또는 기존의 사용자 정의 캡션과 비교됩니다.
- 다음 캡션은 개별적으로 사용할 수 없지만 다른 단어와 결합하여 사용자 정의 캡션을 구성할 수는 있습니다. 예를 들어 “Paste”는 사용할 수 없지만 “Paste tastes great”는 사용할 수 있습니다.
- (위의 ContextMenuItem 도움말 링크 참조)
- 다음 단어는 사용자 정의 캡션에 단독으로 사용할 수 없을 뿐만 아니라 다른 단어와 결합하여 사용할 수도 없습니다.
- (역시 참조)
꽤 제한이 많군요..;; 그러면 이 개체는 어떻게 생성할까요?
[as3]var cmi:ContextMenuItem = new ContextMenuItem(caption:String, separatorBefore:Boolean = false, enabled:Boolean = true, visible:Boolean = true);[/as3]
생성자에 들어가는 매개 변수를 하나하나 살펴봅시다.
- caption: 문자열 값을 넣어줍니다. 메뉴 항목에 연결된 텍스트를 지정합니다. caption 값에 대한 제한 사항은 ContextMenuItem 클래스 개요를 참조하십시오.
- separatorBefore (기본값 false): 부울 값을 넣어줍니다. 컨텍스트 메뉴에서 메뉴 항목 위에 구분 표시줄을 표시할지 여부를 지정합니다. 기본값은 false입니다.
- enabled (기본값 true): 부울 값을 넣어줍니다. 컨텍스트 메뉴에서 메뉴 항목의 활성화 여부를 지정합니다. 기본값은 메뉴 항목을 활성화하는 true입니다. 이 매개 변수는 선택적입니다.
- visible (기본값 true): 부울 값을 넣어줍니다. 메뉴 항목의 표시 여부를 지정합니다. 기본값은 메뉴 항목을 표시하는 true입니다.
이 중에서 caption 만 필수로 넣어주면 되구요, 나머지 세 매개 변수는 필요에 따라서 사용해주시면 됩니다. 물론 여기서 설정하는 네 개의 매개 변수는 나중에 바꿀 수도 있습니다. 예를 들어서 ContextMenuItem 객체를 생성해보겠습니다. “Shift” 라는 메뉴 아이템을 만들고 싶다면
[as3]var cmi:ContextMenuItem = new ContextMenuItem(“Shift”);[/as3]
위와 같이 해주면 되구요. 메뉴 아이템을 두개 이상 만들 때 Shift 위에 구분선을 두고 싶다면
[as3]var cmi:ContextMenuItem = new ContextMenuItem(“Shift”, true);[/as3]
위와 같이 해주면 됩니다. 대신 구분선을 넣을 아이템은 최소한 두번째 또는 그 아래에 위치해야 구분선이 나타나니 순서에 주의하시기 바랍니다. 그러면 이렇게 만든 아이템을 ContextMenu 에 포함시켜 보겠습니다. (ContextMenu 가 ContextMenuItem 들을 포함합니다) 여기서 필요한 ContextMenu의 속성이 customItems 입니다.
customItems 속성
customItems: Array(배열)
ContextMenuItem 객체의 배열입니다. 배열 내의 각 객체는 사용자가 정의한 컨텍스트 메뉴 항목을 나타냅니다. 이 속성을 사용하여 사용자 정의 메뉴 항목을 추가, 삭제 또는 수정할 수 있습니다.
Ref: http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/ui/ContextMenu.html#customItems
그러면 이제 포함시켜 보겠습니다.
[as3]cm.customItems.push(cmi);[/as3]
정말 간단하죠? 다들 잘 알고있는 push 메서드를 이용해서 배열에 추가해주기만 하면 됩니다. 여러 개를 추가하고 싶다면
[as3]cm.customItems.push(cmi,cmi2,…);[/as3]
인수를 쭉 늘려주시면 됩니다. 이제 ContextMenu 객체에 메뉴 아이템을 추가했습니다. 그런데 이 상태에서 Ctrl+Enter 를 눌러서 무비를 실행하더라도 메뉴는 그대로죠? 우리가 만든 ContextMenu 를 무비에 Attach 해야하는 데 그 작업을 하지 않았기 때문입니다. Attach 하는 방법은 간단합니다.
[as3]this.contextMenu = cm;[/as3]
정말 쉽죠? 아래에 예제와 예제에 사용된 소스코드를 첨부하였습니다. 참고하시기 바랍니다. 예제에 아무 그래픽이 없어서 그냥 하얀 배경밖에 없는데 아래 빈 공간 잘 클릭해보시면 메뉴 뜰겁니다.. ^^
[as3]var cm:ContextMenu = new ContextMenu();
var cmi:ContextMenuItem = new ContextMenuItem(“Shift”);
var cmi2:ContextMenuItem = new ContextMenuItem(“카페”, true);
cm.hideBuiltInItems();
cm.customItems.push(cmi, cmi2);
this.ContextMenu = cm;[/as3]
1부는 여기까지구요. 2부에서는 메뉴를 클릭했을 때 함수가 실행되게 해보고 여러 가지 응용을 해보겠습니다. 2부 바로가기: http://blog.saberre.kr/296/