Flash/ActionScript

マウスカーソルをでっかくします!

OSのマウスカーソルをハックしてちょっとしたいたずらを仕掛けます。OSのマウスカーソルを消す(非表示)方法、マウスの移動が止まったのを取得する方法など基本を押さえて楽しんでください!

執筆者:渡辺 大介

OSのマウスカーソルをハックしてちょっとしたいたずらをしてみましょう。今回はFlash上でマウスカーソルが一定時間静止した状態になると、マウスカーソルがでっかくなるFlashを作成します。
Flash上でマウスが一定時間止まるとカーソルがでっかくなります!
Adobe Flash 8 Professionalを使用してサンプルを作成しています。

Flashムービー上でOSのマウスカーソルを消す「Mouse.hide()」

ポイントはムービークリップ「cursor」
1. ここからサンプルのFlashをここからダウンロードしてください。真赤な背景と、ステージの左外に見覚えのあるカーソル画像のムービークリップ「cursor」が配置されています。

でっかくなっちゃった!
2. このムービークリップの中では、カーソルがでっかくなるアニメーションが用意されています。今回はこのムービークリップ「cursor」が特定の条件に達したときに2フレーム目から再生されるという仕掛けを用意することになりますね。

3. レイヤー「action」の1フレーム目に以下のActionscriptを記述してください。
Mouse.hide();
stopTime = 0;

_root.onMouseMove = function(){
	cursor.gotoAndStop(1);
	cursor._x = _root._xmouse;
	cursor._y = _root._ymouse;
	updateAfterEvent();
}

_root.onEnterFrame = function(){
	if(cursorX == _root._xmouse && cursorY == _root._ymouse){
		if(stopTime == 150){
			cursor.gotoAndPlay(2);
		}
		stopTime += 1;
	}else{
		stopTime = 0;
	}
	cursorX = _root._xmouse;
	cursorY = _root._ymouse;
}
少しずつ見ていきます。まずは前半の以下の部分に注目してください。

Mouse.hide();
stopTime = 0;

_root.onMouseMove = function(){
	cursor.gotoAndStop(1);
	cursor._x = _root._xmouse;
	cursor._y = _root._ymouse;
	updateAfterEvent();
}
1行目の「Mouse.hide()」はOSのマウスカーソルを消す(非表示にする)命令です。Flash上でマウスカーソルをカスタムしたり、ゲーム等を作る際にマウスカーソルが邪魔な場合に使用します。逆にマウスカーソルを表示する場合は「Mouse.show()」を使います。

2行目は後に使用するマウスの静止時間を管理する変数「stopTime」を宣言しています。

以下の関数は、OSのカーソルを模したムービークリップ「cursor」にマウスカーソルと同様の動きを与えている部分です。まず最初の「onMouseMove」は、マウスが動いた場合に実行するというイベントハンドラでしたね。関数内の1行目は、ムービークリップ「cursor」が再生されている場合を考えて、1フレーム目に戻し静止させています。2・3行目でマウスカーソルの位置とムービークリップの位置を同期させています。最後の行はカーソルの移動を滑らかにするため、フレームレートとは関係なくマウスが移動している間ずっとこの関数を実行するという命令の「updateAfterEvent()」を実行しています。

続いて、マウスカーソルをでっかくする判定を行う後半を見ていきましょう。
_root.onEnterFrame = function(){
	if(cursorX == _root._xmouse && cursorY == _root._ymouse){
		if(stopTime == 150){
			cursor.gotoAndPlay(2);
		}
		stopTime += 1;
	}else{
		stopTime = 0;
	}
	cursorX = _root._xmouse;
	cursorY = _root._ymouse;
}
1行目から「onEnterFrame」を利用した関数です。

2行目のif文では「cursorX」と「cursorY」という変数と現在のマウスの位置を比較しています。最後の2行でこの二つの値は現在のマウスカーソルの位置にアップデートされているので、ここでは1フレーム前とのマウスカーソルの位置の比較を行っていることになります。

マウスカーソルが移動していない場合、3行目からのif文に進みます。ここでは「stopTime」が150(5秒マウスが静止した場合)だった場合、「cursor.gotoAndPlay(2)」を実行して、アニメーションを開始しています。規定のフレームを経過していない場合は「stopTime」に1を足して、カウントアップしていきます。

また、マウスカーソルが動いてしまった場合、「stopTime」に0を代入して初期化を行っています。



これで完成です!
完成したファイルをダウンロード


マウスカーソルという従来動き出さない物ですら、Flashでは自由にデザインすることが出来ます。たまには、ちょっとしたいたずらをFlashに取り入れてみるのも面白いですよね。

参考までに、多くのWebポータルサイトの広告表現規定ではこの手のマウスカーソルのハックは禁止事項に含まれていますので仕事で使われないようご注意ください。
【編集部おすすめの購入サイト】
楽天市場で Flash 関連の書籍を見るAmazon で Flash 関連の書籍を見る
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます