[PR]今日のﾆｭｰｽは
｢Infoseek ﾓﾊﾞｲﾙ｣



ムービークリップを移動したい



サンプルをダウンロード




■ムービークリップを移動する


_x プロパティと _y プロパティの値を変更すると、ムービークリップの位置を変更することができます。

左右が x 軸で上下が y 軸となります。 x 値が増加するほど右に移動します。y 値が増加するほど下に移動します。


ムービークリップ "mc" の座標を変更する

mc._x = 100;
mc._y = 100;




少しずつ移動させるには、 _x と _y の値を増加したり減少したりする処理を毎フレーム実行する事で実現できます。


ムービークリップを少しずつ右下に移動する

onClipEvent (enterFrame) {
	_x += 1;
	_y += 1;
}

ムービークリップ "mc" を少しずつ右下に移動する (Flash 6 以降)

mc.onEnterFrame = function(){
	this._x += 1;
	this._y += 1;
}






ムービークリップを回転したい



サンプルをダウンロード




■ムービークリップを回転する


_rotation プロパティの値を変更すると、ムービークリップを回転する事ができます。

0 から 360 までの数値を指定します。それ以外の数値を入れると自動的に 0 〜 360 の範囲に丸められます。数値を増加させると時計回りに回転します。


ムービークリップ "mc" の角度を変更する

mc._rotation = 32;




少しずつ回転させるには、 _rotation の値を増加したり減少したりする処理を毎フレーム実行する事で実現できます。


ムービークリップを少しずつ時計回りに回転する

onClipEvent (enterFrame) {
	_rotation += 1;
}

ムービークリップ "mc" を少しずつ反時計回りに回転する (Flash 6 以降)

mc.onEnterFrame = function(){
	this.__rotation -= 1;
}






ムービークリップを拡大縮小したい



サンプルをダウンロード




■拡大率を指定してスケーリングする


_xscale プロパティと _yscale プロパティの値を変更すると、ムービークリップを拡大縮小する事ができます。
100 を指定すると等倍になります。


ムービークリップ "mc" の拡大率を変更する

mc._xscale = 50;
mc._yscale = 150;




■高さと幅を指定してスケーリングする


_width プロパティと _height プロパティの値を変更すると、ムービークリップをピクセル単位で拡大縮小する事ができます。



ムービークリップ "mc" の幅と高さを変更する

mc._width = 50;
mc._height = 150;




_rotation が指定されている場合、『角度適応後の形状』を元に全体がスケーリングされます。という事は、幅か高さのどちらかを変更した場合、もう片方も自動的に補正されてしまうという事になります。

『角度適応前の形状』元にして幅と高さを変更したい場合は、いったん _rotation を 0 にするとよいでしょう。


幅と高さを指定してから回転する

mc._rotation = 0;	// いったん角度を 0 にしておく
mc._width = 50;
mc._height = 150;
mc._rotation = 30;	// 幅と高さを設定した後で角度を設定






ムービークリップを反転したい



サンプルをダウンロード




■ムービークリップを反転する


_xscale プロパティと _yscale プロパティにマイナスの値を代入すると、ムービークリップを反転する事ができます。

-100 を指定すると等倍で反転されます。


ムービークリップ "mc" の x 方向を反転させる

mc._xscale = -100;








ムービークリップを半透明にしたい



サンプルをダウンロード




■ムービークリップを半透明にする


_alpha プロパティを変更すると、ムービークリップの透明度を変更する事ができます。

0 〜 100 までの数値を指定します。0 にすると完全に透明になり、100 にすると普通に表示されます。


ムービークリップ "mc" の透明度を 50% にする

mc._alpha = 50;




■ムービークリップを非表示にする


完全に非表示にしたい場合は、 _visible プロパティを変更するとよいでしょう。
true を指定すると『 表示 』、false を指定すると『 非表示 』になります。


ムービークリップ "mc" を非表示にする

mc._visible = false;








ムービークリップにマスクをかけたい(Flash 6 以降)



サンプルをダウンロード




■ムービークリップにマスクをかける


ムービークリップにマスクをかけるには、 setMask() メソッドの引数に他のムービークリップなどのインスタンスを指定します。

指定したインスタンスの形状をソースとしてマスクがかかります。 ただし、線データが含まれていると正常にマスクがかからないようです。マスクのソースは面データだけで構成しましょう。


"mc" "source" mc.setMask(source);
＋ →
マスクする絵 マスク範囲用の絵 合成後の絵


ムービークリップ "mc" に ムービークリップ "source" の形状でマスクをかける

mc.setMask( source );








ムービークリップにインスタンス名をつけたい






■ムービークリップにインスタンス名をつける


インスタンス名を変更するには _name プロパティの値を変更します。
同じ階層上ですでに同名のインスタンス名が存在している場合、インスタンス名を使ってアクセスする事が出来なくなるので、必ず唯一の名前を付けるようにしましょう。


ムービークリップ "mc" のインスタンス名を "rename" に変更する

mc._name = "rename";








配置済みのムービークリップを複製したい



サンプルをダウンロード




■配置済みのムービークリップを複製する


Flash上に配置されているムービークリップインスタンスをソースにして、複数配置する事ができます。




１．配置されているインスタンスを複製する


配置されているムービークリップを複製するには duplicateMovieClip() メソッドを使用します。

コピーしたいムービークリップから呼び出すと、同じ階層に別深度で新しくインスタンスを作成する事ができます。複製されたインスタンスはタイムラインの1フレーム目から再生されます。
違う階層に複製する事はできません。


ムービークリップ.duplicateMovieClip ( 新しいインスタンス名 , 深度 , [初期化パラメータ] );
第01引数 複製して新しく作成されるインスタンスの名前
第02引数 複製して新しく作成されるインスタンスの深度
第03引数(略可)[Flash 6 以降]初期化したいパラメータをオブジェクト型で渡す
返り値 [Flash 5] なし、[Flash 6以降] 作成されるインスタンスの参照


第01引数には、唯一のインスタンス名を指定します。第02引数で指定する深度がすでに重複していた場合は、以前その深度に存在していたインスタンスが消滅します。


ムービークリップ "mc" を複製する。[インスタンス名]"new_mc"、[深度] 1

mc.duplicateMovieClip("new_mc",1);


(0,0)座標にムービークリップ "mc" を複製する。[インスタンス名]"new_mc"、[深度] 1 （Flash 6 以降）

mc.duplicateMovieClip("new_mc",1 ,{_x:0,y:0});




for 文を使って複数のインスタンスを作成したいときは、インスタンス名を連番にしたりして唯一の名称となるようにします。また、深度も重複しないように注意しましょう。


ムービークリップ "mc" をコピー元として、インスタンス名が "new_mc0" 〜 "new_mc99" 深度が 0 〜 99 になるインスタンスを _root 上に 100 個作成する

var i;
// インスタンス mc を 100 個複製する
for(i=0;i<100;i++){
	_root.duplicateMovieClip(mc,"new_mc"+i,i);
}

// 生成した複数のインスタンスにeval 関数を使ってアクセスする
for(i=0;i<100;i++){
	eval("_root.new_mc" + i)._x = Math.random() * 400;
	eval("_root.new_mc" + i)._y = Math.random() * 400;
}


// 生成した複数のインスタンスに配列アクセス演算子を使ってアクセスする
for(i=0;i<100;i++){
	_root[new_mc" + i]._x = Math.random() * 400;
	_root[new_mc" + i]._y = Math.random() * 400;
}




２．複製したインスタンスを破棄する


複製したインスタンスを破棄したい場合は、 removeMovieClip() メソッドを使用します。インスタンスの深度が 0 より小さい場合破棄することはできません。


ムービークリップ "mc" を破棄する

	mc.removeMovieClip();




■duplicateMovieClip メソッドを使うメリット


ムービークリップに直接イベントを記述している場合そのスクリプトごと複製してくれます。Flash 5 では動的にイベントを記述できないためこれを利用する事が考えられます。


バラバラの動作をするイベント例

onClipEvent (load) {
	dx = 1;
	dy = 1;
	_x = Math.random() * 400;
	_y = Math.random() * 300;
}

onClipEvent (enterFrame) {
	
	// ムービークリップを移動
	_x = _x + dx;
	_y = _y + dy;

	// 壁との当たり判定
	if(_x < 0 || _x > 400)	dx *= -1;
	if(_y < 0 || _y > 300)	dy *= -1;


}






ライブラリから動的にインスタンス化したい



サンプルをダウンロード




■ライブラリにあるムービークリップをインスタンス化する


ライブラリにあるムービークリップシンボルをソースにして、Flash 上に複数配置する事ができます。ムービークリップインスタンスを生成するためには、ムービークリップシンボルを swf ファイルに埋め込む必要があります。




１．swf ファイルにデータを埋め込む


ライブラリウィンドウを開きます。複製したいムービークリップ上で右クリックを押して『リンケージプロパティ』を選択します。







リンケージプロパティというダイアログボックスが開いたら、識別子に好きな名称を付けます。Flash 5 の場合は、『このシンボルに書き出す』にチェックを付けておきます。


Flash 5 の場合





Flash MX 以降の場合は、『ActionScript に書き出し』と『最初のフレームに書き出し』にチェックを付けておきます。


Flash MX2004 の場合




この状態でFlashを書き出すと swf ファイルにデータが埋め込まれるようになります。プロファイラ機能を使って確認してみるとタイムラインの１フレーム目にデータが追加されている事がわかります。


埋め込む前の状態


埋め込んだ後の状態




２．ムービークリップを動的にインスタンス化する


ムービークリップを動的にインスタンス化するには attachMovie() メソッドを使用します。


ムービークリップ.attachMovie ( 識別子 , 新しいインスタンス名 , 深度 );
第01引数 リンケージプロパティで設定した識別子
第02引数 新しく作成されるインスタンスの名前
第03引数 新しく作成されるインスタンスの深度
返り値 新しく作成されるインスタンスの参照


第02引数には、唯一のインスタンス名を指定します。第03引数で指定する深度がすでに重複していた場合は、以前その深度に存在していたインスタンスが消滅します。


識別子で "source" と名前を付けたシンボルをソースとして、インスタンス名が "new_mc" 深度が 1 になるインスタンスを _root 上に作成する

_root.attachMovie("source","new_mc",1);




for 文を使って複数のインスタンスを作成したいときは、インスタンス名を連番にしたりして唯一の名称となるようにします。また、深度も重複しないように注意しましょう。


識別子で "source" と名前を付けたシンボルをソースとして、インスタンス名が "new_mc0" 〜 "new_mc99" 深度が 0 〜 99 になるインスタンスを _root 上に 100 個作成する

var i;
// シンボル source を 100 個インスタンス化して配置する
for(i=0;i<100;i++){
	var mc = _root.attachMovie(source,"new_mc"+i,i);

	// 返ってきたリファレンス（参照）を使ってアクセスする
	mc._x = Math.random() * 400;
	mc._y = Math.random() * 400;
}

// 生成した複数のインスタンスにeval 関数を使ってアクセスする
for(i=0;i<100;i++){
	eval("_root.new_mc" + i)._x = Math.random() * 400;
	eval("_root.new_mc" + i)._y = Math.random() * 400;
}


// 生成した複数のインスタンスに配列アクセス演算子を使ってアクセスする
for(i=0;i<100;i++){
	_root[new_mc" + i]._x = Math.random() * 400;
	_root[new_mc" + i]._y = Math.random() * 400;
}






■attachMovie メソッドの注意点


attachMovie() メソッドはとても便利なメソッドですが、 swf ファイルを Web から落としている最中に注意すべき問題があります。

Flash で任意のフレームを再生して表示するには、そのフレームにあるデータをすべて読み込み終わるまで待つ必要があります。ところが埋め込みデータは、基本的にタイムラインの１フレーム目にすべて格納されています。

例えば、swf ファイルの全容量中 50% が埋め込みデータだった場合、50% まで読み込むまでロード画面すら表示する事ができないという事態が起こります。




■タイムラインのどこかに埋め込む


『ロード画面が表示されない問題』を回避するために、タイムラインの 1 フレーム目に埋め込まずにタイムラインのどこかに埋め込む方法があります。

まず、リンケージプロパティを開いて『最初のフレームに書き出し』のチェックを外します。 次にタイムラインのどこでもいいので静的に配置しておきます。これでそのフレームにデータを埋め込む事ができます。

しかし、attachMovie() メソッドを使って生成するためには、あらかじめこのデータが配置されているフレームを再生する必要があります。




■ロード用の swf ファイルを別途作成する


別の読み込み専用の swf ファイルを作って、そこにメインの swf ファイルを読み込む方法があります。メイン swf ファイルに変な細工をしなくて済むため、一番現実的な回避方法ではないでしょうか。

詳しくはこちら。






空のムービークリップを作成したい(Flash 6 以降)






■空のムービークリップを作成する


空のムービークリップインスタンスを作成して配置するには、createEmptyMovieClip() メソッドを使用します。


ムービークリップ.createEmptyMovieClip ( 新しいインスタンス名 , 深度 );
第01引数新しく作成されるインスタンスの名前
第02引数新しく作成されるインスタンスの深度
返り値新しく作成されるインスタンスの参照


第01引数には、唯一のインスタンス名を指定します。第02引数で指定する深度がすでに重複していた場合は、以前その深度に存在していたインスタンスが消滅します。


インスタンス名が "mc" 深度が 1 になる、空のインスタンスを _root 上に作成する

_root.createEmptyMovieClip("mc",1);






ムービークリップにブレンドを適応したい(Flash 8 以降)






■ムービークリップにブレンドを適応する


ブレンドを適応するには、blendMode () メソッドを使用します。引数に以下の表にある数値が文字列を指定すると適応されます。


数値文字一般名称
1"normal"通常
2"layer"レイヤー
3"multiply"乗算
4"screen"スクリーン
5"lighten"比較 (明)
6"darken"比較 (暗)
7"difference"差の絶対値
8"add"加算
9"subtract"減算
10"invert"反転
11"alpha"アルファ
12"erase"消去
13"overlay"オーバーレイ
14"hardlight"ハードライト


インスタンス "mc" を加算でブレンドする

mc.blendMode(8);		// 数値で指定する場合
mc.blendMode("add");	// 文字列で指定する場合


インスタンス mc を減算でブレンドする

mc.blendMode(9);		// 数値で指定する場合
mc.blendMode("subtract");	// 文字列で指定する場合




Flash 8 の場合、ブレンド機能は、Professional 版の機能ですが、Basic 版でもアクションスクリプトを使う事によって動作させる事が可能です。






ムービークリップにフィルタを適応したい(Flash 8 以降)






■ムービークリップにフィルタを適応する


ムービークリップにフィルタを適応するには、 filters プロパティにFiltersクラス系のインスタンスオブジェクトを配列にして代入します。

配列で指定できるため複数のフィルタを同時に適応できます。以下の表がフィルタの種類です。


クラス名効果
BlurFilter ブラー
BevelFilter べベル
GradientBevelFilter グラデーションべベル
GlowFilter グロー
GradientGlowFilter グラデーショングロー
DropShadowFilter ドロップシャドウ
ColorMatrixFilter カラーマトリックス
ConvolutionFilter コンボリューション
DisplacementMapFilter ディスプレイスメントマップ


ムービークリップ "mc" にブラーを適応する(AS1.0)

var blur = new flash.filters.BlurFilter();
mc.filters = [blur];

ムービークリップ "mc" にブラーを適応する(AS2.0)

import flash.filters.BlurFilter;

var blur : BlurFilter = new BlurFilter();
mc.filters = [blur];




複数のフィルタを適応する例です。


ムービークリップ "mc" にブラーとドロップシャドウを適応する(AS1.0)

var blur = new flash.filters.BlurFilter();
var drop = new flash.filters.DropShadowFilter();
mc.filters = [blur,drop];


ムービークリップ "mc" にブラーとドロップシャドウを適応する(AS2.0)

import flash.filters.BlurFilter;
import flash.filters.DropShadowFilter;

var blur : BlurFilter = new BlurFilter();
var drop : DropShadowFilter = new DropShadowFilter();
mc.filters = [blur,drop];




Flash 8 の場合、フィルタ機能は、Professional 版の機能ですが、Basic 版でもアクションスクリプトを使う事によって動作させる事が可能です。






ムービークリップに行列を適応したい(Flash 8 以降)



サンプルをダウンロード




■行列（マトリックス）を使って何が出来るのか？


行列（マトリックス）を使うと６つのパラメータから、原点を中心とした『座標』の、移動、回転、スケーリング等の変換ができます。

座標の変換ができるという事は、ベクタグラフィックやビットマップグラフィックなどの２次元的なデータも置き換えることができるので ムービークリップの移動、回転、スケーリング、せん断等の姿勢制御に使えるという事になります。

線形代数学といった数学的な分野が関係しているそうですが、 Matrix クラスに必要な機能がまとまっているので特に数学の理解が無くても道具として使用できます。





■行列の各パラメータについて


行列を図式化したものがサンプルの図になります。
赤いベクトルが x 軸成分を表しており ( a , b ) ベクトルとなります。
青いベクトルが y 軸成分を表しており ( c , d ) ベクトルとなります。
２つのベクトルの交わる点が座標成分を表していて (tx, ty) 位置ベクトルとなります。

この６つの a, b, c, d, tx, ty パラメータで姿勢が表現されます。



■行列にパラメータを設定する


まず、Matrixクラスを使って行列を作成します。


正規化された行列を作成する(AS1.0)

var m = new flash.geom.Matrix(1,0,0,1,0,0);

正規化された行列を作成する(AS2.0)

import flash.geom.Matrix;
var m : Matrix = new Matrix(1,0,0,1,0,0);




scale()メソッド、rotate()メソッド、translate()メソッドを使って、スケーリング、回転、移動を順番に行い、行列を合成していきます。

３つのメソッドは原点を中心に変換されるため、３つのメソッドを呼び出す順番が変わると最終的に合成される結果が変わってしまうので注意してください。


縦方向に80% 横方向に120%、30 度回転し、座標(200,50)に移動する行列を作成する(AS1.0)

var m = new flash.geom.Matrix();
m.identity();                 // 正規化
m.scale(0.8,1.2);             // 行列 *= スケーリング
m.rotate(Math.PI / 180 * 30); // 行列 *= 回転
m.translate(200,50);          // 行列 *= 平行移動

縦方向に80% 横方向に120%、30 度回転し、座標(200,50)に移動する行列を作成する(AS2.0)

import flash.geom.Matrix;
var m : Matrix = new Matrix();
m.identity();                 // 正規化
m.scale(0.8,1.2);             // 行列 *= スケーリング
m.rotate(Math.PI / 180 * 30); // 行列 *= 回転
m.translate(200,50);          // 行列 *= 平行移動






■インスタンスに行列を適応する


ムービークリップに行列を適応するには、 transform.matrix プロパティにマトリックスオブジェクトを代入します。


インスタンス mc に行列を適応する(AS1.0)

var m = new flash.geom.Matrix();
m.identity();                 // 正規化
m.scale(0.8,1.2);             // 行列 *= スケーリング
m.rotate(Math.PI / 180 * 30); // 行列 *= 回転
m.translate(200,50);          // 行列 *= 平行移動

mc.transform.matrix = m;

インスタンス mc に行列を適応する(AS2.0)

import flash.geom.Matrix;
var m : Matrix = new Matrix();
m.identity();                 // 正規化
m.scale(0.8,1.2);             // 行列 *= スケーリング
m.rotate(Math.PI / 180 * 30); // 行列 *= 回転
m.translate(200,50);          // 行列 *= 平行移動

mc.transform.matrix = m;


transform.matrix プロパティの値を直接書き換えた場合は適応されないようです。必ずオブジェクトを渡すようにしましょう。