トップページ > Flash入門 > マウス・キーボード関係（４）
次のFlashでは，マウスカーソルがオレンジ色のボタンの上に乗るとへこみます。
スプライトにMOUSE_OVERとROLL_OUTの２つのイベントリスナを登録します。 MOUSE_OVERはマウスカーソルが上に乗った時，ROLL_OUTはマウスカーソルが外れた時にそれぞれ呼ばれます。 そのスプライトの上に表示したい画像を貼りつけています。 イベントの時に呼ばれる“onMouseOver()”と“onMouseRollover()”の関数内では， スプライトに表示させる画像を切り替えています。
以下のソースコードでは，表示したい２つの画像（今回は“OrangeButton_on.png”と“OrangeButton_off.png”） が必要です。
package
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.events.Event;
import flash.events.MouseEvent;
//画面サイズと背景色，フレームレートを設定
[SWF(width="300", height="300", frameRate = "60", backgroundColor="0xffffcc")]
public class Main extends Sprite
{
public const color_list:Array = ["Orange", "Green", "Cyan", "Yellow", "Gray", "Pink", "Purple",
"LightPink", "LightGray", "LightYellow", "LightOrange", "LightGreen", "LightCyan", "LightPurple",
"Red", "StrongGray", "Brown", "StrongGreen", "StrongCyan", "StrongPurple"];
//画像ファイルを読み込む
[Embed(source = "./OrangeButton_on.png")]
public var OrangeImg_on:Class;
public var OrangeButton_on:Bitmap = new OrangeImg_on();
[Embed(source = "./OrangeButton_off.png")]
public var OrangeImg_off:Class;
public var OrangeButton_off:Bitmap = new OrangeImg_off();
//スプライトを用意
public var spOrange:Sprite = new Sprite();
//main関数
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
//コンストラクタ
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
//画像をスプライトに貼る
spOrange.addChild(OrangeButton_off);
//位置決め
spOrange.x = 90;
spOrange.y = 100;
//スプライトを登録
this.stage.addChild(spOrange);
//============================================================
//MOUSE_OVERとROLL_OUTイベントを登録
spOrange.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
spOrange.addEventListener(MouseEvent.ROLL_OUT, onMouseRollout);
//============================================================
}
//================================================================
//マウスカーソルが上に乗ったときに呼ばれる関数
private function onMouseOver(e:MouseEvent):void
{
//offの画像を消す
e.currentTarget.removeChild(OrangeButton_off);
//onの画像を表示
e.currentTarget.addChild(OrangeButton_on);
}
//マウスカーソルが離れた時に呼ばれる関数
private function onMouseRollout(e:MouseEvent):void
{
//onの画像を消す
e.currentTarget.removeChild(OrangeButton_on);
//offの画像を表示
e.currentTarget.addChild(OrangeButton_off);
}
//================================================================
}
}
package
{
import flash.display.Loader;
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.events.Event;
import flash.events.MouseEvent;
//画面サイズと背景色，フレームレートを設定
[SWF(width="480", height="310", frameRate = "60", backgroundColor="0xffffcc")]
public class Main extends Sprite
{
public const color_list:Array = ["Orange", "Green", "Cyan", "Yellow", "Gray", "Pink", "Purple",
"LightPink", "LightGray", "LightYellow", "LightOrange", "LightGreen", "LightCyan", "LightPurple",
"Red", "StrongGray", "Brown", "StrongGreen", "StrongCyan", "StrongPurple"];
//================================================================
//画像ファイルを読み込む
[Embed(source = "./OrangeButton_on.png")]
public var OrangeImg_on:Class;
public var OrangeButton_on:Bitmap = new OrangeImg_on();
[Embed(source = "./OrangeButton_off.png")]
public var OrangeImg_off:Class;
public var OrangeButton_off:Bitmap = new OrangeImg_off();
[Embed(source = "./GreenButton_on.png")]
public var GreenImg_on:Class;
public var GreenButton_on:Bitmap = new GreenImg_on();
[Embed(source = "./GreenButton_off.png")]
public var GreenImg_off:Class;
public var GreenButton_off:Bitmap = new GreenImg_off();
[Embed(source = "./CyanButton_on.png")]
public var CyanImg_on:Class;
public var CyanButton_on:Bitmap = new CyanImg_on();
[Embed(source = "./CyanButton_off.png")]
public var CyanImg_off:Class;
public var CyanButton_off:Bitmap = new CyanImg_off();
[Embed(source = "./YellowButton_on.png")]
public var YellowImg_on:Class;
public var YellowButton_on:Bitmap = new YellowImg_on();
[Embed(source = "./YellowButton_off.png")]
public var YellowImg_off:Class;
public var YellowButton_off:Bitmap = new YellowImg_off();
[Embed(source = "./PinkButton_on.png")]
public var PinkImg_on:Class;
public var PinkButton_on:Bitmap = new PinkImg_on();
[Embed(source = "./PinkButton_off.png")]
public var PinkImg_off:Class;
public var PinkButton_off:Bitmap = new PinkImg_off();
[Embed(source = "./PurpleButton_on.png")]
public var PurpleImg_on:Class;
public var PurpleButton_on:Bitmap = new PurpleImg_on();
[Embed(source = "./PurpleButton_off.png")]
public var PurpleImg_off:Class;
public var PurpleButton_off:Bitmap = new PurpleImg_off();
[Embed(source = "./GrayButton_on.png")]
public var GrayImg_on:Class;
public var GrayButton_on:Bitmap = new GrayImg_on();
[Embed(source = "./GrayButton_off.png")]
public var GrayImg_off:Class;
public var GrayButton_off:Bitmap = new GrayImg_off();
//----------------------------------------------------------------
[Embed(source = "./LightOrangeButton_on.png")]
public var LightOrangeImg_on:Class;
public var LightOrangeButton_on:Bitmap = new LightOrangeImg_on();
[Embed(source = "./LightOrangeButton_off.png")]
public var LightOrangeImg_off:Class;
public var LightOrangeButton_off:Bitmap = new LightOrangeImg_off();
[Embed(source = "./LightGreenButton_on.png")]
public var LightGreenImg_on:Class;
public var LightGreenButton_on:Bitmap = new LightGreenImg_on();
[Embed(source = "./LightGreenButton_off.png")]
public var LightGreenImg_off:Class;
public var LightGreenButton_off:Bitmap = new LightGreenImg_off();
[Embed(source = "./LightCyanButton_on.png")]
public var LightCyanImg_on:Class;
public var LightCyanButton_on:Bitmap = new LightCyanImg_on();
[Embed(source = "./LightCyanButton_off.png")]
public var LightCyanImg_off:Class;
public var LightCyanButton_off:Bitmap = new LightCyanImg_off();
[Embed(source = "./LightYellowButton_on.png")]
public var LightYellowImg_on:Class;
public var LightYellowButton_on:Bitmap = new LightYellowImg_on();
[Embed(source = "./LightYellowButton_off.png")]
public var LightYellowImg_off:Class;
public var LightYellowButton_off:Bitmap = new LightYellowImg_off();
[Embed(source = "./LightPinkButton_on.png")]
public var LightPinkImg_on:Class;
public var LightPinkButton_on:Bitmap = new LightPinkImg_on();
[Embed(source = "./LightPinkButton_off.png")]
public var LightPinkImg_off:Class;
public var LightPinkButton_off:Bitmap = new LightPinkImg_off();
[Embed(source = "./LightPurpleButton_on.png")]
public var LightPurpleImg_on:Class;
public var LightPurpleButton_on:Bitmap = new LightPurpleImg_on();
[Embed(source = "./LightPurpleButton_off.png")]
public var LightPurpleImg_off:Class;
public var LightPurpleButton_off:Bitmap = new LightPurpleImg_off();
[Embed(source = "./LightGrayButton_on.png")]
public var LightGrayImg_on:Class;
public var LightGrayButton_on:Bitmap = new LightGrayImg_on();
[Embed(source = "./LightGrayButton_off.png")]
public var LightGrayImg_off:Class;
public var LightGrayButton_off:Bitmap = new LightGrayImg_off();
//----------------------------------------------------------------
[Embed(source = "./RedButton_on.png")]
public var RedImg_on:Class;
public var RedButton_on:Bitmap = new RedImg_on();
[Embed(source = "./RedButton_off.png")]
public var RedImg_off:Class;
public var RedButton_off:Bitmap = new RedImg_off();
[Embed(source = "./BrownButton_on.png")]
public var BrownImg_on:Class;
public var BrownButton_on:Bitmap = new BrownImg_on();
[Embed(source = "./BrownButton_off.png")]
public var BrownImg_off:Class;
public var BrownButton_off:Bitmap = new BrownImg_off();
[Embed(source = "./StrongGreenButton_on.png")]
public var StrongGreenImg_on:Class;
public var StrongGreenButton_on:Bitmap = new StrongGreenImg_on();
[Embed(source = "./StrongGreenButton_off.png")]
public var StrongGreenImg_off:Class;
public var StrongGreenButton_off:Bitmap = new StrongGreenImg_off();
[Embed(source = "./StrongGrayButton_on.png")]
public var StrongGrayImg_on:Class;
public var StrongGrayButton_on:Bitmap = new StrongGrayImg_on();
[Embed(source = "./StrongGrayButton_off.png")]
public var StrongGrayImg_off:Class;
public var StrongGrayButton_off:Bitmap = new StrongGrayImg_off();
[Embed(source = "./StrongCyanButton_on.png")]
public var StrongCyanImg_on:Class;
public var StrongCyanButton_on:Bitmap = new StrongCyanImg_on();
[Embed(source = "./StrongCyanButton_off.png")]
public var StrongCyanImg_off:Class;
public var StrongCyanButton_off:Bitmap = new StrongCyanImg_off();
[Embed(source = "./StrongPurpleButton_on.png")]
public var StrongPurpleImg_on:Class;
public var StrongPurpleButton_on:Bitmap = new StrongPurpleImg_on();
[Embed(source = "./StrongPurpleButton_off.png")]
public var StrongPurpleImg_off:Class;
public var StrongPurpleButton_off:Bitmap = new StrongPurpleImg_off();
//================================================================
//スプライトを用意
public var spOrange:Sprite = new Sprite();
public var spGreen:Sprite = new Sprite();
public var spCyan:Sprite = new Sprite();
public var spPink:Sprite = new Sprite();
public var spPurple:Sprite = new Sprite();
public var spGray:Sprite = new Sprite();
public var spYellow:Sprite = new Sprite();
//----------------------------------------------------------------
public var spLightOrange:Sprite = new Sprite();
public var spLightGreen:Sprite = new Sprite();
public var spLightCyan:Sprite = new Sprite();
public var spLightPink:Sprite = new Sprite();
public var spLightPurple:Sprite = new Sprite();
public var spLightGray:Sprite = new Sprite();
public var spLightYellow:Sprite = new Sprite();
//----------------------------------------------------------------
public var spRed:Sprite = new Sprite();
public var spStrongGray:Sprite = new Sprite();
public var spBrown:Sprite = new Sprite();
public var spStrongGreen:Sprite = new Sprite();
public var spStrongCyan:Sprite = new Sprite();
public var spStrongPurple:Sprite = new Sprite();
//main関数
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
//コンストラクタ
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
var i:int = 0;
//１行目を配置
for (i = 0; i < 5; i++ )
{
//インスタンスに名前を付ける
this["sp" + color_list[i]].name = color_list[i];
//画像をスプライトに貼る
this["sp" + color_list[i]].addChild(this[color_list[i]+"Button_off"]);
//位置決め
this["sp" + color_list[i]].x = 0;
this["sp" + color_list[i]].y = 60 * i
//スプライトを登録
this.stage.addChild(this["sp" + color_list[i]]);
//イベントリスナ登録
this["sp" + color_list[i]].addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
this["sp" + color_list[i]].addEventListener(MouseEvent.ROLL_OUT, onMouseRollout);
}
//２行目を配置
for (i = 5; i < 10; i++ )
{
//i = j;
//if (j > 19) i -= 19;
//インスタンスに名前を付ける
this["sp" + color_list[i]].name = color_list[i];
//画像をスプライトに貼る
this["sp" + color_list[i]].addChild(this[color_list[i]+"Button_off"]);
//位置決め
this["sp" + color_list[i]].x = 120;
this["sp"+color_list[i]].y = 60*(i-5)
//スプライトを登録
this.stage.addChild(this["sp" + color_list[i]]);
//イベントリスナ登録
this["sp" + color_list[i]].addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
this["sp" + color_list[i]].addEventListener(MouseEvent.ROLL_OUT, onMouseRollout);
}
//３行目を配置
for (i = 10; i < 15; i++ )
{
//i = j;
//if (j > 19) i -= 19;
//インスタンスに名前を付ける
this["sp" + color_list[i]].name = color_list[i];
//画像をスプライトに貼る
this["sp" + color_list[i]].addChild(this[color_list[i]+"Button_off"]);
//位置決め
this["sp" + color_list[i]].x = 240;
this["sp"+color_list[i]].y = 60*(i-10)
//スプライトを登録
this.stage.addChild(this["sp" + color_list[i]]);
//イベントリスナ登録
this["sp" + color_list[i]].addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
this["sp" + color_list[i]].addEventListener(MouseEvent.ROLL_OUT, onMouseRollout);
}
//４行目を配置
for (i = 15; i < 20; i++ )
{
//インスタンスに名前を付ける
this["sp" + color_list[i]].name = color_list[i];
//画像をスプライトに貼る
this["sp" + color_list[i]].addChild(this[color_list[i]+"Button_off"]);
//位置決め
this["sp" + color_list[i]].x = 360;
this["sp"+color_list[i]].y = 60*(i-15)
//スプライトを登録
this.stage.addChild(this["sp" + color_list[i]]);
//イベントリスナ登録
this["sp" + color_list[i]].addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
this["sp" + color_list[i]].addEventListener(MouseEvent.ROLL_OUT, onMouseRollout);
}
}
//================================================================
private function onMouseOver(e:MouseEvent):void
{
e.currentTarget.removeChild(this[e.currentTarget.name+"Button_off"]);
e.currentTarget.addChild(this[e.currentTarget.name + "Button_on"]);
}
private function onMouseRollout(e:MouseEvent):void
{
e.currentTarget.removeChild(this[e.currentTarget.name+"Button_on"]);
e.currentTarget.addChild(this[e.currentTarget.name + "Button_off"]);
}
//================================================================
}
}