スポンサーサイト

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

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

画像をスライスして変形させる

スライスした画像に対して、揺れ/振幅/回転の3種類の変形をするサンプルです。




harayokiさんのバスキュールサイトのツボの所エントリに、スライスしたムービークリップを使って変形するテクニックが解説してあって面白そうだったのでマネしてみました。
といっても、オレが作ったサンプルはかなり泥臭い書き方になってますケド…。

いずれの変形も、元の画像(ムービークリップ)を高さ1のムービークリップに分解してonEnterFrameで位置や幅を変えています。

揺れは、各ムービークリップがサインカーブを描くように_xプロパティを設定しています。フレーム毎に角度を変えて、画像が波打ってるように見せています。

振幅は、揺れとだいたい似たようなカンジなんですが、こっちは幅を変えています。

回転は、表示中の画面の上辺と、次に表示する画像の下辺が90度の角度で接してると仮定して、ソレがグルっと下向きに回転するように変形させています。その際、スライスしたそれぞれのムービークリップの奥行きにあわせて位置と幅を縮小することでパースをつけています。
2枚の画像が接してる辺の奥行きが常に0となるように計算してるので、回転軸は角度によって前後するようなカンジになってます。

今回のサンプルのActionScriptは以下のようなカンジです。

import flash.display.BitmapData;
import flash.geom.Matrix;
import flash.geom.ColorTransform;
import flash.geom.Rectangle;
// 画像の識別子
var imageIdArray:Array = ["flower.png",
"pudding.png",
"bag.png",
"egg.png"];
// 表示位置
var l:Number = 100;
var t:Number = 80;
// 短冊状にした画像の配列
var lineImagesArray:Array = createLineImagesArray(imageIdArray);
// 表示画像インデックス
var index:Number = 0;
// 揺れ速度
var wSpeed:Number = 20;
// 揺れ振幅
var wAmp:Number = 10;
// 振幅速度
var aSpeed:Number = 20;
// 振幅
var aAmp:Number = 50;
// 回転速度
var tSpeed:Number = 3;
// 視点からの距離
var v:Number = 300;

// 回転角
var d:Number = 0;
// ゆれ角度
var wR:Number = 0;
// 振幅角度
var aR:Number = 0;

// 初期表示
showImage();

// 画像選択用ムービークリップ
flower_mc.onRelease = function() {
delete onEnterFrame;
hideImage();
index = 0;
showImage();
}
pudding_mc.onRelease = function() {
delete onEnterFrame;
hideImage();
index = 1;
showImage();
}
bag_mc.onRelease = function() {
delete onEnterFrame;
hideImage();
index = 2;
showImage();
}
egg_mc.onRelease = function() {
delete onEnterFrame;
hideImage();
index = 3;
showImage();
}
// 揺れボタン
wave_btn.onRelease = function() {
_root.onEnterFrame = doWave;
hideImage();
showImage();
}
// 振幅ボタン
amp_btn.onRelease = function() {
_root.onEnterFrame = doAmp;
hideImage();
showImage();
}
// 回転ボタン
turn_btn.onRelease = function() {
d = 0;
_root.onEnterFrame = doTurn;
}

// 揺れ
function doWave() {
var mcArray:Array = lineImagesArray[index];
for (var i:Number = 0; i < mcArray.length; i++) {
var line_mc:MovieClip = mcArray[i];
line_mc._x = line_mc.orgX
+ Math.sin((wR + i) * Math.PI / 180) * wAmp;
}
wR += wSpeed;
if (wR >= 360) {
wR = 0;
}
}

// 振幅
function doAmp() {
var mcArray:Array = lineImagesArray[index];
for (var i:Number = 0; i < mcArray.length; i++) {
var line_mc:MovieClip = mcArray[i];
var dx:Number = Math.sin((aR + i) * Math.PI / 180) * aAmp;
var w:Number = line_mc.orgW - dx;
line_mc._xscale = 100 * (w / line_mc.orgW);
line_mc._x = line_mc.orgX + dx / 2;
}
aR += aSpeed;
if (aR >= 360) {
aR = 0;
}
}

// 回転
function doTurn() {
// 下側画像
var mcArray1:Array = lineImagesArray[index];
// 上側画像
var mcArray2:Array = lineImagesArray[getNextIndex()];
// 回転の原点y座標
var oY:Number = mcArray1[Math.floor(mcArray1.length / 2)].orgY;
// 頂点の回転半径
var r:Number = Math.sqrt(2) * mcArray1.length / 2;
// 角度を加算
d += tSpeed;
// 頂点y座標
var sY:Number = oY - r * Math.cos((d + 45) * Math.PI / 180);
// 余弦/正弦
var c:Number = Math.cos(d * Math.PI / 180);
var s:Number = Math.sin(d * Math.PI / 180);
// 下側画像の高さ
var l1:Number = mcArray1.length;
// 上側画像の高さ
var l2:Number = mcArray2.length;
// 下側
for (var i:Number = 0; i < l1; i++) {
var line_mc1:MovieClip = mcArray1[i];
// 縮小率
var curt1:Number = v / (v + i * s);
// 位置/幅の調整
line_mc1._y = sY +(i * c * curt1);
line_mc1._width = line_mc1.orgW * curt1;
line_mc1._x = line_mc1.orgX
+ (line_mc1.orgW - line_mc1._width) / 2;
}
// 上側
for (var i:Number = 0; i < l2; i++) {
var line_mc2:MovieClip = mcArray2[l2 - 1 - i];
// 縮小率
var curt2:Number = v / (v + i * c);
// 位置/幅の調整
line_mc2._y = sY - (i * s * curt2);
line_mc2._width = line_mc2.orgW * curt2;
line_mc2._x = line_mc2.orgX
+ (line_mc2.orgW - line_mc2._width) / 2;
line_mc2._visible = true;
}
// 90度回転したら次の画像
if (d > 90) {
_root.showNext();
d = 0;
}
}

// 画像を表示します。
function showImage() {
var mcArray:Array = lineImagesArray[index];
for (var i:String in mcArray) {
var line_mc:MovieClip = mcArray[i];
// 状態を初期化
line_mc._x = line_mc.orgX;
line_mc._y = line_mc.orgY;
line_mc._width = line_mc.orgW;
// 表示
line_mc._visible = true;
}
}

// 次の画像のインデックスを戻します。
function getNextIndex():Number {
var idx:Number = index + 1;
if (idx >= lineImagesArray.length) {
idx = 0;
}
return idx;
}

// 次の画像を表示します。
function showNext() {
hideImage();
index = getNextIndex();
showImage();
}

// 画像を消去します。
function hideImage() {
for (var i:String in lineImagesArray) {
var mcArray:Array = lineImagesArray[i];
for (var j:String in mcArray) {
mcArray[j]._visible = false;
}
}
}

// 指定した識別子の配列から、短冊状にした画像の配列を戻します。
function createLineImagesArray(idArray:Array):Array {
var lineImagesArray:Array = new Array();
for (var i:Number = 0; i < idArray.length; i++) {
// ビットマップデータをロード
var bitmap:BitmapData = BitmapData.loadBitmap(idArray[i]);
// 線ムービークリップの配列を結果に追加
var lineMCArray:Array = createHorizontalLineArray(bitmap);
lineImagesArray.push(lineMCArray);
}
return lineImagesArray;
}

// 指定したビットマップから水平な線ムービークリップの配列を戻します。
function createHorizontalLineArray(src:BitmapData):Array {
var mcArray:Array = new Array();
var matrix:Matrix = new Matrix();
var ct:ColorTransform = new ColorTransform();
var rect:Rectangle = new Rectangle(0, 0, src.width, 1);
for (var i:Number = 0; i < src.height; i++ ) {
// 縦1ピクセルのBitmapDataを切り出す
var bitmap:BitmapData = new BitmapData(src.width, 1);
matrix.ty = -i;
bitmap.draw(src, matrix, ct, "normal", rect, false);
// 切り出したBitmapDataのムービークリップを作成
var depth:Number = _root.getNextHighestDepth();
var line_mc:MovieClip =
_root.createEmptyMovieClip("line_" + depth, depth);
line_mc.attachBitmap(bitmap, 1);
line_mc._x = l;
line_mc.orgX = line_mc._x;
line_mc._y = t + i;
line_mc.orgY = line_mc._y;
line_mc.orgW = line_mc._width;
line_mc._visible = false;
// 配列にムービークリップを追加
mcArray.push(line_mc);
}
return mcArray;
}
imageIdArrayに設定しているのが、ライブラリに入ってる4つの画像の識別子です。ココで指定した識別子の画像を下の方のcraeteLineImagesArrayというメソッドでBitmapDataにして、createHorizontalLineArrayで高さ1ピクセルのムービークリップに切り出しています。

揺れ/振幅/回転は、フレーム毎の動作をそれぞれdoWave(),doAmp(),doTurn()に記述していて、ボタンを押したときにボタンにあった処理を_root.onEnterFrameにディスパッチしています。

スポンサーサイト

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

2007.04.28 | | Comments(0) | Trackback(0) | Flash/ActionScript

放物運動するムービークリップ

ムービークリップを放物運動させるサンプルを作ってみました。一応、マウスで掴んで投げられマス。




3つの入力欄ですが、重力加速度は下方向に働く加速度デス。反発係数は壁や床/天井に当たって跳ね返るときの減速度合いで、摩擦係数は壁や床/天井にこすれたときの減速度合いデス。

onEnterFrameでフレーム毎に速度を設定値分増加させることで放物っぽい動きにしています。

スクリプトは以下のようなカンジです。

// 重力加速度
var a:Number;
// 反発係数
var e:Number;
// 摩擦係数
var r:Number;
// 設定ボタン
setting_btn.onRelease = setup;
// 枠
var left:Number = frame_mc._x;
var top:Number = frame_mc._y;
var right:Number = left + frame_mc._width;
var bottom:Number = top + frame_mc._height;
// 対象の中心からの幅/高さ
var oX:Number = jien_mc._width / 2;
var oY:Number = jien_mc._height / 2;
// ドラッグ中か?
var dragging:Boolean = false;
// ドラッグ係数
var d:Number = 0.5;
// 速度
jien_mc.speedX = 0;
jien_mc.speedY = 0;

setup();

// 移動
jien_mc.onEnterFrame = function() {
if (dragging) {
// x方向の移動
this.speedX = (_xmouse - this._x) * d;
this._x = _xmouse;
// y方向の移動
this.speedY = (_ymouse - this._y) * d;
this._y = _ymouse;
} else {
// x方向の移動
this._x += this.speedX;
// y方向の移動
this.speedY += a;
this._y += this.speedY;
// 壁にぶつかったら跳ね返る
if (this._x - oX < left) {
this._x = left + oX;
this.speedX *= -e;
this.speedY *= r;
} else if (this._x + oX > right) {
this._x = right - oX;
this.speedX *= -e;
this.speedY *= r;
}
// 天井/床にぶつかったら跳ね返る
if (this._y - oY < top) {
this._y = top + oY;
this.speedX *= r;
this.speedY *= -e;
} else if (this._y + oY > bottom) {
this._y = bottom - oY;
this.speedX *= r;
this.speedY *= -e;
}
}
}
// ドラッグ
jien_mc.onPress = function () {
dragging = true;
}
jien_mc.onRelease = function() {
dragging = false;
}
jien_mc.onReleaseOutside = function() {
dragging = false;
}
// 設定
function setup() {
a = Number(a_txt.text);
e = Number(e_txt.text);
r = Number(r_txt.text);
}
jien_mcが放物運動するムービークリップです。jien_mcは、ムービークリップの中心を原点としています。
jien_mc.speedX/jien_mc.speedYに、ムービークリップx方向の速度/y方向の速度を持たせています。

frame_mcは、ムービークリップが移動可能な範囲を示すワクです。

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

2007.04.18 | | Comments(0) | Trackback(0) | Flash/ActionScript

マウスカーソルの軌跡を表示する

ステージ上でマウスカーソルを動かしたときに軌跡を表示するサンプルです。左上のアイコンをクリックすると軌跡の形状を変更できます。




コレは、直前のフレームでのマウスカーソルの位置と現在のマウスカーソルの位置に合うように、だんだん消えるムービークリップを配置する。というのを毎フレーム実行しています。

スクリプトのソースはこんなカンジです。

import flash.filters.BlurFilter;
// 消滅係数
var speed:Number = 0.8;
// 消滅閾値
var threshold:Number = 10;
// ブラー
var blur:Number = 8;
// 軌跡ムービークリップ
var locus_mc:MovieClip = blue_mc;
blue_mc.onRelease = changeLocus;
red_mc.onRelease = changeLocus;
green_mc.onRelease = changeLocus;
black_mc.onRelease = changeLocus;
// 軌跡座標
var oldX:Number;
var oldY:Number;
// フレーム毎の処理
function onEnterFrame() {
if (oldX && oldY) {
// 軌跡ムービークリップを作成
var depth:Number = _root.getNextHighestDepth();
var mc:MovieClip
= locus_mc.duplicateMovieClip("locus_" + depth, depth);
// 距離/角度算出
var dX:Number = _xmouse - oldX;
var dY:Number = _ymouse - oldY;
var d:Number = Math.sqrt(dX * dX + dY * dY);
var r:Number = Math.atan(dY / dX) + (dX >=0 ? 0 : Math.PI);
// 軌跡の位置/長さ/傾き設定
mc._x = oldX;
mc._y = oldY;
mc._width = d;
mc._rotation = r * 180 / Math.PI;
// 軌跡のフレーム毎の変化
mc.onEnterFrame = function () {
if (this._alpha < threshold) {
this.removeMovieClip();
return;
}
this._alpha *= speed;
}
// ブラーフィルタを設定
var filter:BlurFilter = new BlurFilter(blur, blur, 1);
mc.filters = [filter];
}
oldX = _xmouse;
oldY = _ymouse;
}
// 軌跡ムービークリップを変更
function changeLocus() {
locus_mc = this;
}
最初の方で設定しているspeed、threshold、blurはそれぞれ軌跡のムービークリップのアルファ値の変化割合、軌跡ムービークリップを消去するアルファ値、軌跡ムービークリップにかけるブラーの強さデス。

locus_mcというのが軌跡として表示されるムービークリップ(のひな型)で、実際には左上に表示されてる4つのムービークリップのいずれかデス。onEnterFrame内でlocus_mcをduplicateMovieClipして軌跡を作りマス。

oldX、oldYは、一つ前のフレームでの_xmouse、_ymouseデス。onEnterFrame内でセットしています。

軌跡のムービークリップは、
  var dX:Number = _xmouse - oldX;
var dY:Number = _ymouse - oldY;
でx方向、y方向の移動量を算出して、
  var d:Number = Math.sqrt(dX * dX + dY * dY);
で移動距離d、
var r:Number = Math.atan(dY / dX) + (dX >=0 ? 0 : Math.PI);
で移動角度rを求めています。
rを求めるときにdxが0未満だったらMath.PIを加算しているのは、Math.atanが-π/2~π/2の値を返すためデス。

こうやって求めたdを軌跡ムービークリップの幅、rを軌跡ムービークリップの傾きとして軌跡を表示しています。

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

2007.04.12 | | Comments(0) | Trackback(0) | Flash/ActionScript

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

思いつきでマウスカーソルの移動にあわせて視線を動かす目玉(のようなモノ)を作ってみました。左上の画像をクリックすることで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

Flex2で残像表示

前回のエントリだんだんぼやける残像で作ったのと同じようなモノをActionScript3.0でも書いてみました。




今回もクリックすると残像の効果が切り替わりマス。

やってるコトはフラッシュのものと大して変わらないのですが、コッチは表示してるシンボルはPNG画像を読み込んだモノです。

ソースコードは、以下のようなカンジです。

package {
import flash.display.*;
import flash.events.*;
// メインクラス
public class AfterImageSample extends Sprite {
// 画像リソース
[Embed(source='ball.png')]
private var BallBitmap:Class;
// 画像
private var _ballBitmap:Bitmap;
// 移動体
private var _chaser:Chaser;
// 残像生成インターバル
private var _interval:Number = 1;
// インターバルカウンタ
private var _intervalCnt:Number = 0;
// 残像タイプフラグ
private var _isAlpha:Boolean = true;
// コンストラクタ
public function AfterImageSample() {
// 画像
_ballBitmap = new BallBitmap();
// 移動体
_chaser = new Chaser();
_chaser.addChild(_ballBitmap);
_chaser.x = 100;
_chaser.y = 100;
_chaser.addEventListener(MouseEvent.CLICK, onChaserClick);
addChild(_chaser);
// イベントリスナ
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
// フレーム毎の処理
private function onEnterFrame(evt:Event):void {
_intervalCnt++;
if (_intervalCnt > _interval) {
// 残像を作成
var afterImage:AfterImage;
if (_isAlpha) {
afterImage = new AlphaAfterImage(_ballBitmap.bitmapData);
} else {
afterImage = new BlurAfterImage(_ballBitmap.bitmapData);
}
addChildAt(afterImage, getChildIndex(_chaser));
afterImage.x = _chaser.x;
afterImage.y = _chaser.y;
afterImage.effect();
// カウンタをリセット
_intervalCnt = 0;
}
// 移動
_chaser.moveTo(mouseX - _chaser.width / 2, mouseY - _chaser.height / 2);
}
// 移動体をクリックした時の処理
private function onChaserClick(evt:Event):void {
_isAlpha = !_isAlpha;
}
}
}
import flash.display.*;
import flash.events.*;
import flash.filters.BlurFilter;
// 移動体
class Chaser extends Sprite {
// 加速度
private var _k:Number = 0.15;
// 減衰係数
private var _a:Number = 0.65;
// x方向の速度
private var _speedX:Number = 0;
// y方向の速度
private var _speedY:Number = 0;
// 目標に対して移動
public function moveTo(x:Number, y:Number):void {
_speedX = _k * (x - this.x) + _a * _speedX;
_speedY = _k * (y - this.y) + _a * _speedY;
this.x += _speedX;
this.y += _speedY;
}
}
// 残像クラス
class AfterImage extends Sprite {
// 画像
private var _bitmap:Bitmap;
// 残像の寿命
private var _life:Number = 12;
// 寿命カウンタ
private var _lifeCnt:Number = 0;
// コンストラクタ
public function AfterImage(bitmapData:BitmapData) {
_bitmap = new Bitmap();
_bitmap.bitmapData = bitmapData;
addChild(_bitmap);
// イベントリスナ
addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
// 残像効果
public function effect():void {
// テンプレートメソッドなので未実装
}
// フレーム毎の処理
private function onEnterFrame(evt:Event):void {
effect();
_lifeCnt++;
// 寿命に達したら消滅
if (_lifeCnt++ > _life) {
this.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
parent.removeChild(this);
}
}
}
// アルファ残像
class AlphaAfterImage extends AfterImage {
// 透過係数
private var _t:Number = 0.6;
// コンストラクタ
public function AlphaAfterImage(bitmapData:BitmapData) {
super(bitmapData);
}
// 残像効果
override public function effect():void {
// アルファ値を減らす
alpha *= _t;
}
}
// ブラー残像
class BlurAfterImage extends AfterImage {
// 拡大率
private var _scaleRate:Number = 1.05;
// ブラー係数
private var _blurInc:Number = 3;
// ブラー
private var _blur:Number = 0;
// コンストラクタ
public function BlurAfterImage(bitmapData:BitmapData) {
super(bitmapData);
}
// 残像効果
override public function effect():void {
// 拡大
x -= width * (_scaleRate - 1) / 2;
y -= height * (_scaleRate - 1) / 2;
width *= _scaleRate;
height *= _scaleRate;
// ブラー
_blur += _blurInc;
var filter:BlurFilter = new BlurFilter(_blur, _blur, 1);
filters = [filter];
}
}
AfterImageSampleがメインクラスです。
メインクラス以外に4つのクラスを定義していて、
  • Chaserクラス
    moveToメソッドで指定した座標に対してバネの動きで接近するSprite
  • AfterImageクラス
    フレーム毎に変化し設定されたフレーム数に達したら消滅するSpriteで、残像をあらわすクラスの基底クラス。
  • AlphaAfterImageクラス
    AfterImageクラスを継承したクラスで、フレーム毎の変化はアルファ値の変更
  • BlurAfterImageクラス
    AfterImageクラスを継承したクラスで、フレーム毎の変化は拡大とBlurFiterの強さの変更
といった具合になっています。

AfterImageSampleクラスでは、コンストラクタでChaserクラスのインスタンスの生成とそのインスタンスをクリックしたときのイベントリスナの登録、フレームが進んだときのイベントリスナの登録をしています。

Chaserクラスのインスタンスのクリックに対するイベントハンドラでは、表示する残像の種類を示すフラグ(_isAlpha)を切り替えています。

フレームが進んだときのイベントハンドラでは、残像を発生する間隔を示す_intervalと前回の残像表示からの経過フレーム数を示す_intervalCntにしたがって残像を表示するかどうか判断しています。
残像を表示するタイミングでは、_isAlphaによってAlphaAfterImageクラスかBlurAfterImageクラスのインスタンスを生成しています。
この際、生成したインスタンスがChaserクラスのインスタンスよりも後ろに表示されるようにaddChildメソッドではなくaddChildAtメソッドを使用しています。

mxmlc -default-size 400 300 -default-frame-rate=24 -default-background-color=0x00CC66 AfterImageSample.as
なカンジでswfを生成しました。

テーマ:プログラミング - ジャンル:コンピュータ

2007.04.03 | | Comments(0) | Trackback(0) | Flex2

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

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

ブログ内検索


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