3부에서는 지난 번에 이어서 그래픽 객체 별로 다른 메뉴를 띄워보는 것을 해보겠습니다. 우선 예제와 소스코드를 구경해보세요. 오늘 예제는 fla 파일도 첨부하니 다운받아서 보셔도 좋습니다.

ContextMenu Tutorial 3 Example FLA File (1 MB)

2부와 소스코드가 다를 게 없어보이지만…;;;

오늘 중점적으로 설명할 것은 20~22줄 입니다.

ContextMenu 를 Attach 하는 부분이 세 곳이나 되죠?

contextMenu 속성을 가진 객체라면 무엇이든 커스텀 메뉴를 작성할 수 있습니다. 그런데 contextMenu 는 어떤 객체가 가지고 있을까요? Adobe 도움말을 보면 InteractiveObject 라는 클래스에 contextMenu 속성이 정의되어 있습니다.

InteractiveObject 클래스는 사용자가 마우스와 키보드를 사용하여 상호 작용할 수 있는 모든 표시 객체의 추상 기본 클래스입니다.

라고 Adobe 도움말에 나와있습니다. 거의 모든 객체가 해당된다고 보시면 될겁니다. 즉, 커스텀 메뉴는 거의 모든 객체에 작성할 수 있다는 뜻이지요! 와우!

제가 예제에 넣어둔 버튼과 체크박스도 모두 InteractiveObject 클래스를 상속하기 때문에 커스텀 메뉴를 작성할 수 있었습니다. 이 외에도 Sprite, TextField, MovieClip 등이 InteractiveObject 클래스를 상속합니다.

이번 강좌는 매우 짧은데 오른쪽 메뉴 컨트롤이 필요한 부분이라면 어디서든지 이용할 수 있다는 것을 알려드리는 정말 중요한 강좌라고 생각됩니다.

특히 RPG 게임 같은 경우에도 오른쪽 버튼 메뉴가 자주 쓰이는데 플래시로 RPG 게임을 만들 시에 유용하게 쓰일 수 있을 것입니다.

ContextMenu 강좌는 여기까지구요. 다음에 다른 강좌로 찾아뵙겠습니다 ^^

1부 바로가기: http://blog.saberre.kr/265/
2부 바로가기: http://blog.saberre.kr/296/

안녕하세요 ^^ 2부에서는 ContextMenu 를 활용해보도록 하겠습니다.

오늘은 제가 예제로 만든 소스코드를 보고 한 줄마다 설명해드리도록 하겠습니다.

클릭하면 크게 볼 수 있습니다.

길어보이지만 별거 아닌 소스입니다. 위 소스코드를 실행해보면 아래와 같은 예제가 나옵니다.

아주 심플한 기능만을 수행합니다. 자 이제 한 줄 한 줄 살펴볼텐데요. 1부에 설명했던 코드는 그냥 넘어가도록 하겠습니다. 1부를 읽지 않으신 분은 먼저 읽어주세요.

1부 바로가기: http://blog.saberre.kr/265/

7번째 줄을 먼저 살펴봅시다.

cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, test_select);

이게 무엇을 뜻할까요? 아마도 “구분선 만들기” 메뉴 아이템에 대한 것 같은데…….

addEventListener 메소드는 아시죠? 어떤 이벤트가 발생했을 때 어떤 함수가 실행되도록 하라고 이벤트 처리 목록에 추가하는 메소드입니다.

새로 등장한 ContextMenuEvent와 MENU_ITEM_SELECT 에 대해서 살펴봅시다.

메뉴 아이템을 클릭하면 menuItemSelect 이벤트가 발생하는데요. 이 이벤트에 대해서 살펴봅시다.

menuItemSelect 이벤트
속성 ContextMenuEvent.type = flash.events.ContextMenuEvent.MENU_ITEM_SELECT
사용자가 컨텍스트 메뉴에서 항목을 선택할 때 전달됩니다. 사용자는 포인팅 장치의 보조 버튼을 클릭하여 컨텍스트 메뉴를 생성합니다.
Ref: http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/ui/ContextMenuItem.html#event:menuItemSelect

MENU_ITEM_SELECT 상수
public static const MENU_ITEM_SELECT:String = “menuItemSelect”
Ref: http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/events/ContextMenuEvent.html#MENU_ITEM_SELECT

따라서 우리가 위처럼 addEventListener 메서드를 통해서 메뉴 아이템이 선택되었을 때 menuItemSelect 이벤트가 발생하는 것을 감지하여 함수가 실행될 수 있도록 하는 것입니다.

따라서 어떤 메뉴 아이템이 선택되었을 때 함수가 실행되도록 하려면

(ContextMenuItem 객체).addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, (Function 객체));

위 처럼 코드를 작성하면 됩니다.

11~19줄은 이벤트가 발생하였을 때 실행되는 함수입니다.

11줄에서 함수에 꼭! 이벤트를 받는 매개 변수를 넣어주셔야 합니다. 들어오는 이벤트 객체는 ContextMenuEvent 이니 매개 변수로 받아주시면 됩니다.

12줄에서 if 안에 조건문에 들어있는 separatorBefore 속성. 어디서 많이 보지 않으셨나요? (못보셨다면 1부에서 ContextMenuItem 생성자 부분을 참조하세요)

네, 바로 구분선을 추가할지 말지 결정하는 속성입니다. 이 속성에 대해서 Adobe 도움말을 살펴봅시다.

separatorBefore 속성
separatorBefore:Boolean
지정된 메뉴 항목 위에 구분 표시줄을 표시할지 여부를 나타냅니다. 기본값은 false 입니다.
Ref: http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/ui/ContextMenuItem.html#separatorBefore

그리고 14줄에는 caption 이라는 속성도 보입니다. 역시 Adobe 도움말을 살펴봅시다.

caption 속성
caption:String
컨텍스트 메뉴에 표시될 메뉴 항목 캡션 텍스트를 지정합니다. caption 값에 대한 제한 사항은 ContextMenuItem 클래스 개요를 참조하십시오.
Ref: http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/ui/ContextMenuItem.html#caption

바로 메뉴에 보여질 메뉴 아이템의 캡션 텍스트를 가지고 있는 속성입니다. 이를 수정하면 메뉴를 바꿀 수 있습니다.

이제 소스 코드 이해가 다 되셨나요?

어… 아직 안되셨다구요? 어디가요?

이미 메뉴 아이템은 ContextMenu 에 포함되었고 ContextMenu 는 메인에 Attach 되었는데 수정해도 되냐구요?

물론 됩니다! 우리가 push 를 통해서 ContextMenuItem 객체를 포함시켰는데 이는 객체를 복사해서 넣는 것이 아니라 단지 ‘연결’ 시키는 것 뿐입니다. 따라서 연결된 ContextMenuItem 객체를 편집해도 수정된 내용이 실시간으로 반영됩니다.

그리고 ContextMenu 객체 역시 메인에 연결시킨 것이기 때문에 수정해도 실시간으로 반영됩니다.

이해가 되셨나요?

3부에서는 객체별로 다른 ContextMenu 를 띄워보도록 하겠습니다.

3부 바로가기: http://blog.saberre.kr/311/

(이 강의는 필자가 오른쪽 커스텀 메뉴 관련 강의를 찾던 중 도저히 찾을 수 없어서 레퍼런스, 도움말 뒤져가면서 알아낸 정보를 바탕으로 이루어졌습니다. 부디 이 강의가 도움이 되길 바랍니다.) 안녕하세요 ^^ 제가 알려드리고 싶은 내용은 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 파일에서 원격 디버깅을 사용하지 않는 경우에는 이 항목이 흐리게 표시됩니다.

Ref: http://livedocs.adobe.com/flash/9.0_kr/ActionScriptLangRefV3/flash/ui/ContextMenu.html#hideBuiltInItems()

기본 내장 메뉴 항목을 숨기는 아주 편리한 메서드입니다. 사용 방법도 간단합니다.
[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/