FlashゲームPG講座 For AS3.0【コンテキストメニューについて】

コンテキストメニューについて

・	コンテキストメニューとは？
・	コンテキストメニューを非表示にする
・	コンテキストメニューが呼び出されるか調べる
・	コンテキストメニューに項目を追加する

前のページに戻る

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

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

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

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

コンテキストメニュークラスを使用すると、「設定」以外の項目を非表示にする事ができます。

さらに、カスタムアイテムを使う事で、好きな項目を最大 15 個まで登録する事が可能です。

上に戻る

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

サンプルをダウンロード

context_menu_00_fla09_as3.fla Adobe Flash CS3 AcrionScript3.0

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

右クリックしたときにでるコンテキストメニュー自体は非表示にする事はできません。しかし項目の一部を非表示にする事は可能です。

１．コンテキストメニューインスタンスを作成する

ContextMenu クラスを使用すると、メニューを個別に表示と非表示の切り替えが可能となります。

コンテキストメニューを作成


var menu_cm = new ContextMenu ();

２．プロパティを設定する

ContextMenu クラスは以下の表にあるプロパティを保有しています。このプロパティを true にすると表示、 false にすると非表示になります。

プロパティ	説明
builtInItems.forwardAndBack	先送り、戻る
builtInItems.loop	ループ再生
builtInItems.play	再生
builtInItems.print	プリント
builtInItems.quality	画質
builtInItems.rewind	巻き戻し
builtInItems.save	SWF ファイルを保存 (Shockmachine 使用時？)
builtInItems.zoom	拡大、縮小

コンテキストメニューにプロパティを設定する


var menu_cm = new ContextMenu ();

menu_cm.builtInItems.forwardAndBack = false;	// 先送り、戻る
menu_cm.builtInItems.loop = false;			// ループ再生
menu_cm.builtInItems.play = false;			// 再生
menu_cm.builtInItems.print = false;		// プリント
menu_cm.builtInItems.quality = false;		// 画質
menu_cm.builtInItems.rewind = false;		// 巻き戻し
menu_cm.builtInItems.zoom = false;			// 拡大

また、hideBuiltInItems() メソッドを呼び出すと、上の表にあるプロパティがすべて false となります。

コンテキストメニューのプロパティをすべて false にする


var menu_cm = new ContextMenu ();

menu_cm.hideBuiltInItems();

３．contextMenu に登録する

ムービークリップやテキストフィールドなどの InteractiveObject クラスから派生しているクラスは、contextMenu プロパティを保有しています。

このcontextMenu プロパティにコンテキストメニューを登録すると、インスタンス上で右クリックを押したときに、設定どおりのコンテキストメニューが表示されます。

Flash画面全体に適用したい場合は、stage や MainTimeline に登録したい所ですが、残念ながらこれらのクラスは contextMenu プロパティを保有していません。「画面全体を描画している」なんらかのインスタンスに登録する必要があります。

画面全体に描画したスプライトに設定する例です。

スプライト上で右クリックを押されたときに動作させる


var menu_cm = new ContextMenu ();

menu_cm.builtInItems.forwardAndBack = false;	// 先送り、戻る
menu_cm.builtInItems.loop = false;		// ループ再生
menu_cm.builtInItems.play = false;		// 再生
menu_cm.builtInItems.print = false;		// プリント
menu_cm.builtInItems.quality = false;	// 画質
menu_cm.builtInItems.rewind = false;		// 巻き戻し
menu_cm.builtInItems.zoom = false;		// 拡大

// ダミーのスプライト（Flash全体を矩形で描画）
var shape = new Sprite();
stage.addChild(shape);
shape.graphics.beginFill ( 0xFF0000 , 0.5 );
shape.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
shape.graphics.endFill();

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

上に戻る

コンテキストメニューが呼び出されるか調べる

サンプルをダウンロード

context_menu_01_fla09_as3.fla Adobe Flash CS3 AcrionScript3.0

１．コンテキストメニューインスタンスを作成する

ContextMenu クラスをインスタンス化します。

コンテキストメニューを作成


var menu_cm = new ContextMenu ();

２．コールバック関数を登録する

ContextMenu クラスの ContextMenuEvent.MENU_SELECT イベントを使用すると、右クリックを押してコンテキストメニューが呼び出される直前に、登録したコールバック関数を呼び出してくれます。

イベントを登録する


var menu_cm = new ContextMenu ();
menu_cm.addEventListener(ContextMenuEvent.MENU_SELECT, function(e){
	trace("右クリックが押された");
});

３．contextMenu に登録する

ムービークリップやテキストフィールドなどの InteractiveObject クラスから派生しているクラスは、contextMenu プロパティを保有しています。

このcontextMenu プロパティにコンテキストメニューを登録すると、インスタンス上で右クリックを押したときに、登録した関数が呼び出されます。

画面全体に描画したスプライトに設定する例です。

スプライト上で右クリックを押されたときに動作させる


var menu_cm = new ContextMenu ();
menu_cm.addEventListener(ContextMenuEvent.MENU_SELECT, function(e){
	trace("右クリックが押された");
});

// ダミーのスプライト（Flash全体を矩形で描画）
var shape = new Sprite();
stage.addChild(shape);
shape.graphics.beginFill ( 0xFF0000 , 0.5 );
shape.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
shape.graphics.endFill();

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

上に戻る

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

サンプルをダウンロード

context_menu_02_fla09_as3.fla Adobe Flash CS3 AcrionScript3.0

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

メニューに項目を追加したい場合は、ContextMenuItem クラスを使用します。第一引数に表示したいキャプション名を指定します。

コンテキストメニューを作成


var menu_item = new ContextMenuItem ("表示テスト");

２．メニューアイテムのプロパティを設定する

ContextMenuItem クラスは、以下の表にあるプロパティを保有しています。各プロパティに必要なパラメータを設定します。

プロパティ	説明
caption	表示する文字を指定（キャプション名）
enabled	通常表示の場合 true 、淡色表示の場合 false
separatorBefore	このメニューの1つ上にセパレータ（区切り線）を付ける
visible	表示する場合 true , 非表示にする場合 false

コンテキストメニューアイテムにプロパティを設定する


var menu_item = new ContextMenuItem();	// メニューアイテムを作成

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

複数の項目を追加したい場合は、その数だけコンテキストメニューアイテムを作成する必要があります。

３．コールバック関数を登録する

ContextMenuItem クラスの ContextMenuEvent.MENU_ITEM_SELECT イベントを使用すると、メニューを選択したときに登録したコールバック関数を呼び出してくれます。

イベントを登録する


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

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

// 押されたときに呼び出される関数
menu_item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(e){
	trace("選択された");
});

４．コンテキストメニューを作成する

次に、ContextMenu クラスを使用して、コンテキストメニューインスタンスを作成します。

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


var menu_cm = new ContextMenu ();

５．項目を登録する

ContextMenu クラスが持っている customItems プロパティに、コンテキストメニューアイテムを配列に格納して登録します。

カスタムアイテムは最大 15 個のメニューアイテムを登録できます。キャプションの文字数は 100 文字以内である必要があります。同名のキャプションは登録できません。

カスタムアイテムにメニューアイテムを登録する


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

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

// 押されたときに呼び出される関数
menu_item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(e){
	trace("選択された");
});

var menu_cm = new ContextMenu ();
menu_cm.customItems = [menu_item];	// カスタムメニューに登録

下の画像のようなコンテキストメニューを作成したい場合の例です。

３つのメニューアイテムをカスタムアイテムに登録する


var menu_item1 = new ContextMenuItem("");	// メニューアイテムを作成
menu_item1.caption = "アイテム１";		// キャプション名
menu_item1.enabled = true;			// 有効か
menu_item1.separatorBefore = false;		// １つ上にセパレータを付けるか
menu_item1.visible = true;			// 可視表示するか
menu_item1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(e){	// 押されたときに呼び出される関数
	trace("アイテム１が選択された");
});

var menu_item2 = new ContextMenuItem("");	// メニューアイテムを作成
menu_item2.caption = "アイテム２";		// キャプション名
menu_item2.enabled = false;			// 有効か
menu_item2.separatorBefore = false;		// １つ上にセパレータを付けるか
menu_item2.visible = true;			// 可視表示するか
menu_item2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(e){	// 押されたときに呼び出される関数
	trace("アイテム２が選択された");
});

var menu_item3 = new ContextMenuItem("");	// メニューアイテムを作成
menu_item3.caption = "アイテム３";		// キャプション名
menu_item3.enabled = true;			// 有効か
menu_item3.separatorBefore = true;		// １つ上にセパレータを付けるか
menu_item3.visible = true;			// 可視表示するか
menu_item3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(e){	// 押されたときに呼び出される関数
	trace("アイテム３が選択された");
});


var menu_cm = new ContextMenu ();
menu_cm.hideBuiltInItems();

// カスタムメニューに登録
menu_cm.customItems = [
   menu_item1,
   menu_item2,
   menu_item3
];

// ダミーのスプライト（Flash全体を矩形で描画）
var shape = new Sprite();
stage.addChild(shape);
shape.graphics.beginFill ( 0xFF0000 , 0.5 );
shape.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
shape.graphics.endFill();

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

６．contextMenu に登録する

ムービークリップやテキストフィールドなどの InteractiveObject クラスから派生しているクラスは、contextMenu プロパティを保有しています。

このcontextMenu プロパティにコンテキストメニューを登録すると、インスタンスの上で右クリックを押したときに、登録した関数が呼び出されます。

画面全体に描画したスプライトに設定する例です。

スプライト上で右クリックを押されたときに動作させる


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

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

// 押されたときに呼び出される関数
menu_item.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, function(e){
	trace("選択された");
});

var menu_cm = new ContextMenu ();
menu_cm.customItems = [menu_item];		// カスタムメニューに登録

// ダミーのスプライト（Flash全体を矩形で描画）
var shape = new Sprite();
stage.addChild(shape);
shape.graphics.beginFill ( 0xFF0000 , 0.5 );
shape.graphics.drawRect(0,0,stage.stageWidth,stage.stageHeight);
shape.graphics.endFill();

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

上に戻る

前のページに戻る