Flashゲームプログラミング講座 for ActionScript3.0

 

コンテキストメニューとは?

 

■ コンテキストメニューとは?


マウスを右クリックしたときに、ポップアップで表示されるメニューをコンテキストメニューといいます。
 
 

■ コンテキストメニュークラスを使うと?


コンテキストメニュークラスを使用すると、「設定」以外の項目を非表示にする事ができます。
 
 
好きな項目を、最大 15 個まで追加登録する事が可能です。
 
 
クリップボード用のメニューを表示することができます。
 
 

■Adobe AIR 版について

 
Adobe AIR では、ContextMenu クラスを使用することもできますが、かわりに NativeMenu クラスを使用するとより複雑なメニューを作成することができます。
 
NativeMenu クラスについてはこちらで解説しています。
 

■コンテキストメニューに対応しているか調べる


コンテキストメニューをサポートしているか調べるには、ContextMenu.isSupported プロパティを使用します。
 
true であれば利用可能です。
 
この確認用のプロパティは、Flash 10.1 以降、Adobe AIR 2.0 以降で利用可能です。
 
モバイルなどの環境で動作させる場合、コンテキストメニューに対応していない事があります。
 
ContextMenu をサポートしているか調べる

import flash.ui.ContextMenu;
import flash.text.TextField;

// テキストフィールドを作成
var text_field:TextField = new TextField();
text_field.x = 10;
text_field.y = 10;
text_field.width = stage.stageWidth - 20;
text_field.height = 20;
text_field.border = true;
stage.addChild(text_field);

text_field.text = "ContextMenu のサポート:" + ContextMenu.isSupported;
 
 

 

コンテキストメニューを非表示にする

 

サンプルをダウンロード
 
 


■コンテキストメニューを表示しない(Flash Player 11.1 以降)


Flash Player 版で、コンテキストメニューの表示を無効化できます。
 
任意の表示オブジェクトに対して、以下のイベントをどれでもいいので登録します。
 
MouseEvent.CONTEXT_MENU
 
MouseEvent.RIGHT_MOUSE_DOWN
 
MouseEvent.RIGHT_MOUSE_UP
 
MouseEvent.RIGHT_CLICK
 
すると、表示オブジェクト上で右クリックしても、コンテキストメニューが表示されなくなります。
 
コンテキストメニューの表示を無効化する (Flash Player 11.1 以降)

import flash.events.MouseEvent;

// コンテキストメニューが表示される直前で実行されるイベント (…だが、Flash Player 版では表示されなくなる)
stage.addEventListener(MouseEvent.CONTEXT_MENU , function (e:MouseEvent):void{

});
 
 


■メニュー項目を個別に非表示にする


コンテキストメニュークラスを使用した場合、コンテキストメニュー自体を非表示にする事はできません
 
しかし、項目の一部を非表示にする事は可能です。
 
 
1.コンテキストメニューインスタンスを作成する

new 演算子を使って、ContextMenu クラスをインスタンス化します。
 
コンテキストメニューオブジェクトを作成

import flash.ui.ContextMenu;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();
 
2.ビルトインメニューの設定を行う

ContextMenu クラスの builtInItems プロパティには、ContextMenuBuiltInItems オブジェクトが格納されています。
 
ContextMenuBuiltInItems クラスには、以下のプロパティがあります。
 
true をセットすると可視表示となります。
 
false をセットすると非表示となります。
 
プロパティ 説明
forwardAndBack 先送り、戻る
loop ループ再生
play 再生
print プリント
quality 画質
rewind 巻き戻し
save SWF ファイルを保存 (Shockmachine 使用時?)
zoom 拡大、縮小
 
ビルトインメニューの設定を行う

import flash.ui.ContextMenu;
import flash.ui.ContextMenuBuiltInItems;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// ビルトインメニュー設定用オブジェクトを取得
var builtin_items:ContextMenuBuiltInItems = context_menu.builtInItems;

// 各アイテムの可視表示の設定
builtin_items.forwardAndBack = false;	// 先送り、戻る
builtin_items.loop = false;		// ループ再生
builtin_items.play = false;		// 再生
builtin_items.print = false;		// プリント
builtin_items.quality = false;		// 画質
builtin_items.rewind = false;		// 巻き戻し
builtin_items.zoom = false;		// 拡大
 
hideBuiltInItems() メソッドを呼び出すと、すべてのアイテムが非表示となります。
 
すべてのビルトインメニューを非表示に設定する

import flash.ui.ContextMenu;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// すべてのビルトインメニューを非表示に設定する
context_menu.hideBuiltInItems();
 
3.表示オブジェクトにコンテキストメニューを登録する

表示オブジェクトにコンテキストメニューを登録する方法は、こちらで解説しています。
 
画面全体に描画したスプライトに設定する例です。
 
画面全体に描画されたスプライトに、コンテキストメニューオブジェクトを渡す

import flash.ui.ContextMenu;
import flash.ui.ContextMenuBuiltInItems;
import flash.display.Sprite;
import flash.display.Graphics;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// ビルトインメニュー設定用オブジェクトを取得
var builtin_items:ContextMenuBuiltInItems = context_menu.builtInItems;

// 各アイテムの可視表示の設定
builtin_items.forwardAndBack = false;	// 先送り、戻る
builtin_items.loop = false;		// ループ再生
builtin_items.play = false;		// 再生
builtin_items.print = false;		// プリント
builtin_items.quality = false;		// 画質
builtin_items.rewind = false;		// 巻き戻し
builtin_items.zoom = false;		// 拡大

// スプライトを生成して配置
var sprite:Sprite = new Sprite();
stage.addChild(sprite);

// ステージ全体に矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
g.endFill();

// スプライトにコンテキストメニューを登録
sprite.contextMenu = context_menu;
 


 

コンテキストメニューが表示されるか調べる

 

サンプルをダウンロード
 


コンテキストメニューが表示されるか調べる

 
コンテキストメニューが表示されるか調べるには、ContextMenuEvent.MENU_SELECT イベントを使用します。
 
コンテキストメニューが表示されるか調べる

import flash.ui.ContextMenu;
import flash.events.ContextMenuEvent;
import flash.display.Sprite;
import flash.display.Graphics;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// コンテキストメニューが表示される瞬間に実行されるイベント
context_menu.addEventListener(ContextMenuEvent.MENU_SELECT, function (e:ContextMenuEvent):void{
	trace("右クリックが押された");
});

// スプライトを生成して配置
var sprite:Sprite = new Sprite();
stage.addChild(sprite);

// ステージ全体に矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
g.endFill();

// スプライトにコンテキストメニューを登録
sprite.contextMenu = context_menu;
 


 

コンテキストメニューに項目を追加する

 

サンプルをダウンロード
 


コンテキストメニューに項目を追加する

 
コンテキストメニューに、最大 15 個のカスタム項目を追加できます。
 
セパレータ(区切り線)を付けることもできます。
 
メニューを入れ子にする事はできません。
 
 

コンテキストメニューアイテムを作成する

 
1.コンテキストメニューアイテムオブジェクトを作成する

new 演算子を使って、ContextMenuItem クラスをインスタンス化します。
 
引数に、キャプション名を文字列で指定します。
 
コンテキストメニューアイテムを作成

import flash.ui.ContextMenuItem;

// コンテキストメニューアイテムオブジェクトを作成
var menu_item:ContextMenuItem = new ContextMenuItem("表示テスト");
 
2.プロパティを設定する

ContextMenuItem クラスは、以下プロパティがあります。
 
プロパティ 説明
caption String 表示する文字を指定(キャプション名)
enabled Boolean 通常表示の場合 true 、淡色表示の場合 false
separatorBefore Boolean このメニューの1つ上にセパレータ(区切り線)を付ける
visible Boolean 表示する場合 true , 非表示にする場合 false
 
コンテキストメニューアイテムのプロパティを設定する

import flash.ui.ContextMenuItem;

// コンテキストメニューアイテムオブジェクトを作成
var menu_item:ContextMenuItem = new ContextMenuItem("");

// プロパティの設定
menu_item.caption = "表示テスト";	// キャプション名
menu_item.enabled = true;		// 有効か
menu_item.separatorBefore = false;	// 1つ上にセパレータを付ける
menu_item.visible = true;		// 可視表示するか
 
3.コールバック関数を登録する

メニューが選択されたか調べるには、ContextMenuEvent.MENU_ITEM_SELECT イベントを使用します。
 
メニューが選択されたか調べる

import flash.ui.ContextMenuItem;
import flash.events.ContextMenuEvent;

// コンテキストメニューアイテムオブジェクトを作成
var menu_item:ContextMenuItem = new ContextMenuItem("");

// プロパティの設定
menu_item.caption = "表示テスト";	// キャプション名
menu_item.enabled = true;		// 有効か
menu_item.separatorBefore = false;	// 1つ上にセパレータを付ける
menu_item.visible = true;		// 可視表示するか

// メニューが選択された時に実行されるイベント
menu_item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function (e:ContextMenuEvent):void{
	trace("選択された");
});
 

コンテキストメニューにアイテムを追加する

 
1.コンテキストメニューオブジェクトを作成する

new 演算子を使って、ContextMenu クラスをインスタンス化します。
 
コンテキストメニューを作成

import flash.ui.ContextMenu;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();
 
2.コンテキストメニューにアイテムを追加する

表示したいメニューアイテムを配列に格納して、customItems プロパティにセットします。
 
複数の項目を表示したい場合は、メニューアイテムを複数作成する必要があります。
 
配列に登録した順番通りに、上から下へアイテムが表示されます。
 
最大 15 個のメニューアイテムを登録できます。
 
キャプションの文字数は 100 文字以内である必要があります。
 
同名のキャプションは登録できません
 
コンテキストメニューオブジェクトにメニューアイテムを登録する

import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// メニューアイテムを作成
var menu_item1:ContextMenuItem = new ContextMenuItem("表示テスト1");
var menu_item2:ContextMenuItem = new ContextMenuItem("表示テスト2");

// メニューアイテムを登録
context_menu.customItems = [menu_item1 , menu_item2];
 
下の画像のような、コンテキストメニューを作成したい場合の例です。
 
 
3つのメニューアイテムをカスタムアイテムに登録する

import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;
import flash.events.ContextMenuEvent;
import flash.display.Sprite;
import flash.display.Graphics;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// すべてのビルトインメニューを非表示に設定する
context_menu.hideBuiltInItems();


// ------------------------------------------------------------
// メニューアイテム1
// ------------------------------------------------------------
// メニューアイテムを作成
var menu_item1:ContextMenuItem = new ContextMenuItem("");

// メニューアイテムのプロパティを設定
menu_item1.caption = "アイテム1";		// キャプション名
menu_item1.enabled = true;			// 有効か
menu_item1.separatorBefore = false;		// 1つ上にセパレータを付けるか
menu_item1.visible = true;			// 可視表示するか

// メニューが選択された時に実行されるイベント
menu_item1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function (e:ContextMenuEvent):void{
	trace("アイテム1が選択された");
});

// カスタムメニューに追加登録
context_menu.customItems.push(menu_item1);


// ------------------------------------------------------------
// メニューアイテム2
// ------------------------------------------------------------
// メニューアイテムを作成
var menu_item2:ContextMenuItem = new ContextMenuItem("");

// メニューアイテムのプロパティを設定
menu_item2.caption = "アイテム2";		// キャプション名
menu_item2.enabled = false;			// 有効か
menu_item2.separatorBefore = false;		// 1つ上にセパレータを付けるか
menu_item2.visible = true;			// 可視表示するか

// メニューが選択された時に実行されるイベント
menu_item2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function (e:ContextMenuEvent):void{
	trace("アイテム2が選択された");
});

// カスタムメニューに追加登録
context_menu.customItems.push(menu_item2);


// ------------------------------------------------------------
// メニューアイテム3
// ------------------------------------------------------------
// メニューアイテムを作成
var menu_item3:ContextMenuItem = new ContextMenuItem("");

// メニューアイテムのプロパティを設定
menu_item3.caption = "アイテム3";		// キャプション名
menu_item3.enabled = true;			// 有効か
menu_item3.separatorBefore = true;		// 1つ上にセパレータを付けるか
menu_item3.visible = true;			// 可視表示するか

// メニューが選択された時に実行されるイベント
menu_item3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function (e:ContextMenuEvent):void{
	trace("アイテム3が選択された");
});

// カスタムメニューに追加登録
context_menu.customItems.push(menu_item3);



// スプライトを生成して配置
var sprite:Sprite = new Sprite();
stage.addChild(sprite);

// ステージ全体に矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
g.endFill();

// スプライトにコンテキストメニューを登録
sprite.contextMenu = context_menu;
 
3.表示オブジェクトにコンテキストメニューを登録する

表示オブジェクトにコンテキストメニューを登録する方法は、こちらで解説しています。
 
画面全体に描画したスプライトに設定する例です。
 
画面全体に描画されたスプライトに、コンテキストメニューオブジェクトを渡す

import flash.ui.ContextMenu;
import flash.ui.ContextMenuItem;
import flash.events.ContextMenuEvent;
import flash.display.Sprite;
import flash.display.Graphics;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// コンテキストメニューアイテムオブジェクトを作成
var menu_item:ContextMenuItem = new ContextMenuItem("");

// メニューアイテムのプロパティを設定
menu_item.caption = "表示テスト";		// キャプション名
menu_item.enabled = true;			// 有効か
menu_item.separatorBefore = true;		// 1つ上にセパレータを付けるか
menu_item.visible = true;			// 可視表示するか

// メニューが選択された時に実行されるイベント
menu_item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function (e:ContextMenuEvent):void{
	trace("アイテムが選択された");
});

// カスタムメニューに登録
context_menu.customItems = [menu_item];

// スプライトを生成して配置
var sprite:Sprite = new Sprite();
stage.addChild(sprite);

// ステージ全体に矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
g.endFill();

// スプライトにコンテキストメニューを登録
sprite.contextMenu = context_menu;
 


 

コンテキストメニューにクリップボードメニュを追加する(Flash 10以降)

 

サンプルをダウンロード
 


コンテキストメニューにクリップボードメニュを追加する

 
コンテキストメニューにクリップボード用のメニューを追加します。
 
クリップボードからデータを取得するときは、このメニューの利用が必須となります。
 
 
1.コンテキストメニューオブジェクトを作成する

new 演算子を使って、ContextMenu クラスをインスタンス化します。
 
コンテキストメニューを作成

import flash.ui.ContextMenu;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();
 
2.クリップボードメニューを有効

clipboardMenu プロパティに true をセットすると、クリップボード用のメニューが有効になります。
 
クリップボード用のメニューを有効に設定

import flash.ui.ContextMenu;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// クリップボードメニューを有効
context_menu.clipboardMenu = true;
 
3.クリップボードメニューの設定を行う

ContextMenu クラスの clipboardItems プロパティには、ContextMenuClipboardItems オブジェクトが格納されています。
 
ContextMenuClipboardItems クラスには、以下のプロパティがあります。
 
true を指定すると、メニューが有効になります。
 
false を指定すると、メニューが無効になります。
 
プロパティ 説明
cut 「切り取り」の有効無効を設定します。
copy 「コピー」の有効無効を設定します。
paste 「貼り付け」の有効無効を設定します。
clear 「削除」の有効無効を設定します。
selectAll 「すべて選択」の有効無効を設定します。
 
クリップボードメニューの各アイテムの有効無効を設定

import flash.ui.ContextMenu;
import flash.ui.ContextMenuClipboardItems;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// クリップボードメニューを有効
context_menu.clipboardMenu = true;

// クリップボードメニュー設定用オブジェクトを取得
var clipboard_items:ContextMenuClipboardItems = context_menu.clipboardItems;

// 各アイテムの有効無効の設定
clipboard_items.cut = true;	//「切り取り」の有効無効
clipboard_items.copy = true;	//「コピー」の有効無効
clipboard_items.paste = true;	//「貼り付け」の有効無効
clipboard_items.clear = true;	//「削除」の有効無効
clipboard_items.selectAll = true;	//「すべて選択」の有効無効
 
4.表示オブジェクトにコンテキストメニューを登録する

表示オブジェクトにコンテキストメニューを登録する方法は、こちらで解説しています。
 
画面全体に描画したスプライトに設定する例です。
 
画面全体に描画されたスプライトに、コンテキストメニューオブジェクトを渡す

import flash.ui.ContextMenu;
import flash.ui.ContextMenuClipboardItems;
import flash.display.Sprite;
import flash.display.Graphics;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// クリップボードメニューを有効
context_menu.clipboardMenu = true;

// クリップボードメニュー設定用オブジェクトを取得
var clipboard_items:ContextMenuClipboardItems = context_menu.clipboardItems;

// 各アイテムの有効無効の設定
clipboard_items.cut = true;	//「切り取り」の有効無効
clipboard_items.copy = true;	//「コピー」の有効無効
clipboard_items.paste = true;	//「貼り付け」の有効無効
clipboard_items.clear = true;	//「削除」の有効無効
clipboard_items.selectAll = true;	//「すべて選択」の有効無効

// スプライトを生成して配置
var sprite:Sprite = new Sprite();
stage.addChild(sprite);

// ステージ全体に矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
g.endFill();

// スプライトにコンテキストメニューを登録
sprite.contextMenu = context_menu;
 

クリップボードメニュが選択されたか調べる

 
クリップボードメニューが押されたか調べるには、以下のイベントを使用します。
 
Event.CUT 「切り取り」が選択された
 
Event.COPY 「コピー」が選択された
 
Event.PASTE 「貼り付け」が選択された
 
Event.CLEAR 「削除」が選択された
 
Event.SELECT_ALL 「すべて選択」が選択された
 
このイベントは、テキストフィールドでは検出できません。
 
クリップボードメニューが選択されたか調べる

import flash.ui.ContextMenu;
import flash.ui.ContextMenuClipboardItems;
import flash.events.Event;
import flash.display.Sprite;
import flash.display.Graphics;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// クリップボードメニューを有効
context_menu.clipboardMenu = true;

// クリップボードメニュー設定用オブジェクトを取得
var clipboard_items:ContextMenuClipboardItems = context_menu.clipboardItems;

// 各アイテムの有効無効の設定
clipboard_items.cut = true;	//「切り取り」の有効無効
clipboard_items.copy = true;	//「コピー」の有効無効
clipboard_items.paste = true;	//「貼り付け」の有効無効
clipboard_items.clear = true;	//「削除」の有効無効
clipboard_items.selectAll = true;	//「すべて選択」の有効無効

// スプライトを生成して配置
var sprite:Sprite = new Sprite();
stage.addChild(sprite);

// ステージ全体に矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
g.endFill();

// スプライトにコンテキストメニューを登録
sprite.contextMenu = context_menu;

// 「切り取り」が選択された時に実行されるイベント
sprite.addEventListener(Event.CUT , function (e:Event):void{
	trace("「切り取り」が選択された");
});

// 「コピー」が選択された時に実行されるイベント
sprite.addEventListener(Event.COPY , function (e:Event):void{
	trace("「コピー」が選択された");
});

// 「貼り付け」が選択された時に実行されるイベント
sprite.addEventListener(Event.PASTE , function (e:Event):void{
	trace("「貼り付け」が選択された");
});

// 「削除」が選択された時に実行されるイベント
sprite.addEventListener(Event.CLEAR , function (e:Event):void{
	trace("「削除」が選択された");
});

// 「すべて選択」が選択された時に実行されるイベント
sprite.addEventListener(Event.SELECT_ALL , function (e:Event):void{
	trace("「すべて選択」が選択された");
});
 


 

表示オブジェクトにコンテキストメニューを登録する

 


表示オブジェクトにコンテキストメニューを登録する

 
1.コンテキストメニューオブジェクトを作成する

new 演算子を使って、ContextMenu クラスをインスタンス化します。
 
コンテキストメニューを作成

import flash.ui.ContextMenu;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();
 
2.表示オブジェクトにコンテキストメニューを登録する

MovieClip や、TextField などのクラスには、contextMenu プロパティが存在します。
 
InteractiveObject クラスから派生しているクラスであれば、利用可能です。
 
この、contextMenu プロパティに、ContextMenu オブジェクトを渡します。
 
すると、表示オブジェクトの上で右クリックしたときに、設定したコンテキストメニューが表示されるようになります。
 
Adobe AIR の場合、NativeMenu オブジェクトを渡すこともできます。
 
NativeMenu クラスについては、こちらで解説しています。
 
ステージ全体に適用する場合
 
Stage や MainTimeline クラスには、contextMenu プロパティが存在しません。
 
ステージ全体に適用したい場合、画面全体を描画している表示オブジェクトに登録する必要があります。
 
画面全体に描画したスプライトに設定する例です。
 
画面全体に描画されたスプライトに、コンテキストメニューオブジェクトを渡す

import flash.ui.ContextMenu;
import flash.ui.ContextMenuClipboardItems;
import flash.display.Sprite;
import flash.display.Graphics;

// コンテキストメニューオブジェクトを作成
var context_menu:ContextMenu = new ContextMenu();

// スプライトを生成して配置
var sprite:Sprite = new Sprite();
stage.addChild(sprite);

// ステージ全体に矩形を描画
var g:Graphics = sprite.graphics;
g.beginFill ( 0xFF0000 , 0.5 );
g.drawRect(0,0,stage.stageWidth,stage.stageHeight);
g.endFill();

// スプライトにコンテキストメニューを登録
sprite.contextMenu = context_menu;