スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

マウスカーソルの方を見る目玉

思いつきでマウスカーソルの移動にあわせて視線を動かす目玉(のようなモノ)を作ってみました。左上の画像をクリックすることで3種類の画像を切り替えられます。




目玉は、元になる画像の一部をマウスカーソルの位置に応じてクリッピングして、DisplacementMapFilterをかけて表示しています。

元になる画像はムービークリップで、その内容は



なカンジで、左上のサムネイル(縮小したムービークリップ)をクリックしたタイミングでどれを使うかを切り替えています。

マップ画像の方は

なカンジです。レンズで部分拡大と同じようなカンジで生成しましたが、今回は毎回生成しないで、画像ファイルとして読み込んでいます。
レンズのときと四隅のあたりが違ってますがこれは円の外側の部分を透明にしたかったので、マップ画像では範囲外を示すようにしてDisplacementMapFilterを適用するときにmode="color"で色/アルファに0を指定しています。

ソースコードの方はこんなカンジです。

import flash.display.BitmapData;
import flash.filters.DisplacementMapFilter;
import flash.geom.Matrix;
// 視線移動係数
var r:Number = 0.2;
// 加速度
var k:Number = 0.05;
// 減衰係数
var a:Number = 0.95;
// テンプレートスケール
var tScale:Number = 0.25;
// 元画像
src1_mc._visible = false;
src2_mc._visible = false;
src3_mc._visible = false;
var src_mc:MovieClip = src1_mc;
// 表示用ムービークリップ
var depth:Number = _root.getNextHighestDepth();
var eye_mc:MovieClip
= _root.createEmptyMovieClip("eye_" + depth, depth);
// マップ画像
var map:BitmapData = BitmapData.loadBitmap("map.png");
// フィルタ
var mapFilter:DisplacementMapFilter
= new DisplacementMapFilter(map,
new Point(),
4,
2,
32,
32,
"color",
0,
0);
eye_mc.filters = [mapFilter];
// 中心からのオフセット
var oX:Number = map.width / 2;
var oY:Number = map.height / 2;
// 原点
var ooX:Number = Stage.width /2 - oX;
var ooY:Number = Stage.height / 2 - oY;
// 位置調整
eye_mc._x = ooX;
eye_mc._y = ooY;
// 初期速度
eye_mc.speedX = Math.floor(Math.random() * 50);
eye_mc.speedY = Math.floor(Math.random() * 50);
// 移動限界
var rLimit:Number = Math.sqrt(Math.pow(map.width / 4, 2)
+ Math.pow(map.height / 4, 2));

// フレーム毎の処理
eye_mc.onEnterFrame = doEnterFrame;

function doEnterFrame() {
// 移動
this.speedX = k * (ooX - this._x) + a * this.speedX;
this.speedY = k * (ooY - this._y) + a * this.speedY;
this._x += this.speedX;
this._y += this.speedY;
// 視線移動量
var dX:Number = (_xmouse - this._x - this._width / 2) * r;
var dY:Number = (_ymouse - this._y - this._height / 2) * r;
// 移動リミット
var d:Number = Math.sqrt(dX * dX + dY * dY);
if (d > rLimit) {
dX = dX * rLimit / d;
dY = dY * rLimit / d;
}
// 画像切り出し
var src:BitmapData = new BitmapData(map.width - 1,
map.height - 1);
var matrix:Matrix = new Matrix();
matrix.tx = oX + dX;
matrix.ty = oY + dY;
src.draw(src_mc,
matrix,
new ColorTransform(),
"normal",
new Rectangle(0, 0, map.width, map.height),
false);
this.attachBitmap(src, 1);
}
//画像選択
t1_mc.onRelease = function() {
src_mc = src1_mc;
}
t2_mc.onRelease = function() {
src_mc = src2_mc;
}
t3_mc.onRelease = function() {
src_mc = src3_mc;
}
// 画像ドラッグ
eye_mc.onPress = function () {
delete this.onEnterFrame;
this.startDrag(false);
}
eye_mc.onRelease = function () {
this.stopDrag();
eye_mc.speedX = Math.floor(Math.random() * 50);
eye_mc.speedY = Math.floor(Math.random() * 50);
this.onEnterFrame = doEnterFrame;
}
src1_mc、src2_mc、src3_mcというのが元画像となるムービークリップです。t1_mc、t2_mc、t3_mcというのが左上に表示している画像選択用ムービークリップで、ソレゾレsrc1_mc、src2_mc、src3_mcに対応しています。

map.pngがマップ画像で、コレを使ってDisplacementMapFilterオブジェクトmapFilterを作っています。また、範囲外を指定した場合アルファ0のピクセルに置き換わるよう指定しています。

onEnterFrameでは、目玉ムービークリップの移動、視線の移動をしています。目玉ムービークリップがステージ中央に向かってバネの動きで近づきます。
視線の移動は、マウスカーソルの位置から元画像をクリッピングする位置を算出して画像の切り出しを行い、目玉ムービークリップにattachBitmapしています。瞳があまり動きすぎないように(白目にならないように)移動量の限界を設定していますが、この値はテキトーです。

目玉の画像はドラッグできるようにして、ドラッグ中は上記onEnterFrameの処理をしないようにしています。ドラッグが終了したときにはテキトーな方向に移動を開始するようにして、上記onEnterFrameも実行されるようにしています。
スポンサーサイト

テーマ:Flash - ジャンル:コンピュータ

2007.04.07 | | Comments(4) | Trackback(0) | Flash/ActionScript

コメント

承認待ちコメント

このコメントは管理者の承認待ちです

2010-10-22 金 17:03:28 | | # [ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです

2010-10-22 金 18:16:24 | | # [ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです

2010-10-22 金 20:38:59 | | # [ 編集]

承認待ちコメント

このコメントは管理者の承認待ちです

2010-10-22 金 21:51:07 | | # [ 編集]

コメントの投稿


秘密にする

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。