Movieクラス
Movieクラスとは?
MovieクラスはFlashのムービークリップに相当します。
javascriptを用いることでMovieを制御したり情報を得たりすることができます。
Movieを作る
Movieクラスを作成するには主に2つの方法があります。
- Flashで静的に配置する。
Flashのタイムライン上にムービークリップを配置することで作成します。
インスタンス名を設定することでjavascriptで参照得ることもできます。
- javascriptを用いて動的に生成する。
下記のコードでFlashのライブラリに存在するムービークリップを子Movieとして動的に配置することができます。
戻り値として生成されたMovieの参照を取得することができます。
<Movieインスタンス>.attachMovie(<リンケージ名>, <配置後のMovieの名前>, <オプション(省略可)>);
//sample
var movie = this.attachMovie("hoge", "piyo");
上記のthisは、フレームスクリプトが記述されているムービークリップ自身になります。
なので、上記の例は自身にリンケージ名"hoge"のムービークリップを"piyo"という名前の子Movieとして配置します。
Movieを移動させる
Movieをjavascriptで移動させるサンプルです。
//movieをx:100,y:100に移動させる <Movieインスタンス>.x = 100; <Movieインスタンス>.y = 100; //movieをx:50,y:50に移動させる <Movieインスタンス).moveTo(50,50); //movieを現在地からx+200 y+50する <Movieインスタンス>.move(200,50);
Movieを回転させる
Movieをjavascriptで回転させるサンプルです。
//movieを45度回転させる <Movieインスタンス>.rotation = 45; //movieを現在の角度から-20度回転させる <Movieインスタンス>.rotate(-20);
Movieを拡大縮小させる
Movieをjavascriptで拡縮させるサンプルです。
//movieの横スケールを2倍にする <Movieインスタンス>.scaleX = 2; //movieの縦横スケールを2倍にする <Movieインスタンス>.scaleTo(2,2); //movieの現在のスケールに設定した値を加算する <Movieインスタンス>.scale(0.1, 0.1);
Movieを反転させる
Movieを反転させるにはscale値をマイナスに設定します。
//movieを左右反転する <Movieインスタンス>.scaleX = -1; //movieを上下反転する <Movieインスタンス>.scaleY = -1;
Movieを半透明にする
Movieのアルファ(透明度)を設定します。0で透明 1で不透明になります。
//movieを半透明にする <Movieインスタンス>.alpha = 0.5;
完全に非表示したい場合はalphaよりvisibleを使用してください。
alpha=0; は visible=false より描画負荷がかかってしまいます。
Movieを非表示にする
Movieの表示状態を設定します。
//movieを非表示する <Movieインスタンス>.visible = false; //movieを表示する <Movieインスタンス>.visible = true;
動的にMovieを生成する
Movieにライブラリに存在するムービークリップを子Movieとして配置するサンプルです。
<Movieインスタンス>.attachMovie(<リンケージ名>, <配置後のMovieの名前>, <オプション(省略可)>);
//movieを子として配置し参照を取得。 生成時に非表示状態を設定する。
var movie = this.attachMovie("hoge", "piyo", {
"load":function(){
this.visible = false;
}
});
第3引数のオプションは省略することもできますが、設定することで特定のタイミングで指定した関数を実行することができます。
| オプション名 | 実行タイミング |
|---|---|
| load | movieが生成されたタイミング。 この時点では、まだタイムラインの制御などは行うことができません。 |
| postLoad | movieの生成が完了したタイミング。 |
動的に生成したMovieを破棄する
動的に配置されたMovieを破棄するサンプルです。タイムライン上に静的に配置されたMovieには適用できません。
//自身を親から破棄する <Movieインスタンス>.removeMovieClip(); //子のMovieを破棄する <Movieインスタンス>.detachMovie(<破棄するMovieインスタンス>);
破棄したあともmovieインスタンスは残っていますが、再attachすることはできません。
//NG
var movie = this.attachMovie("hoge","piyo");
movie.removeMovieClip();
this.attachMovie(movie);
別のMovieに再attachしたい
動的に配置されたMovieは別のMovieに再attachすることができます。
その場合、前にいた場所からはいなくなり、新しく指定してたMovieの子Movieとして扱われます。
以下がサンプルです。
//movieを配置
var movie = this.attachMovie("hoge","piyo");
//別のmovieの子movieとして配置
<別のMovieインスタンス>.attachMovie(movie);
Movieの深度を取得する
attachMovie等で動的に配置されたMovieは深度が設定されています。
その深度の値は下記のように取得することができます。
//Movieの深度 <Movieインスタンス>.depth;
※上記のプロパティは読み取り専用です。書き換えると不具合の原因になる可能性があるので書き換えないでください。
Movieの深度を変更する
attachMovie等で動的に配置されたMovieは深度が設定されています。
その深度を変更してMovieの重ね順を変更することができます。
//Movieの深度を設定 <Movieインスタンス>.swapDepths(30);
深度の値は0からはじまり数字が大きいほど重ね順が上になります。
タイムラインで静的に配置されたMovieの深度は変更することはできません。
また、静的に配置されたMovieは動的に配置されたMovieより下になります。
Movieにブレンドを適用する
Movieのブレンドモードを変更することができます。
ブレンドモードを変更することで加算合成を行うことができるようになります
//加算合成にする <Movieインスタンス>.blendMode = "add"; //通常状態にする <Movieインスタンス>.blendMode = "normal";
加算合成はwebkitcss描画モードでは適用されないので注意してください
Movieにマスクを適用する
LWFではFlashタイムラインによるマスクの適用は行うことはできませんが、スクリプトによってマスクを適用することができます。
しかし、マスク処理は非常にパフォーマンスに影響するため、使わなくても良い場合は極力使わないようにしましょう。
※マスクの大きさに変わらず、マスクの数が大きくパフォーマンスに影響します。
- マスク
マスク対象のMovieの内容に合わせて、被マスク対象のMovieが切り抜かれます。
このマスクはwebkitcss版では使用することができません。
マスク対象は被マスク対象より上の深度にしてください。
//マスク形状として設定 <Movieインスタンス>.blendMode = "erase"; //被マスク対象設定 <Movieインスタンス>.blendMode = "layer";
- 矩形マスク
マスク対象のMovieの矩形領域内に含まれている部分のみ、被マスク対象のMovieが表示されます。
このマスクはすべての描画方式に対応しています。
マスク対象は被マスク対象より上の深度にしてください。
また、マスク形状として設定するMovieは同じMovie内に２つ以上存在することはできません。
※Movie内に２つ以上設定した場合webkitcss版で正常に動作しなくなります。
//マスク形状として設定 "erase"と違い Movie内に２つ以上存在してはいけない。 <Movieインスタンス>.blendMode = "mask"; //被マスク対象設定 <Movieインスタンス>.blendMode = "layer";
- 注意点
- ※マスクを使ったMovieに更にマスクをかける。といったことはできません。
- ※css版ではdivのoverflow:hiddenを使ってマスクかける構造上、Movie内にblendMode="mask"は1つしか使えません。
Movieのステージ上の座標を取得する
下記のサンプルで、Movieから見た任意の座標をステージから見た座標に変換して取得することができます。
//Movie内の座標(100,100)をグローバル座標に変換して取得 var globalPoint = <Movieインスタンス>.localToGlobal(new Point(100,100)); //座標出力 console.log(globalPoint.x, globalPoint.y);
逆にステージの任意の座標をMovieから見た座標に変換して取得する場合は下記のようにして取得できます。
//グローバル座標(100,100)をMovieから見たローカル座標に変換して取得 var localPoint = <Movieインスタンス>.globalToLocal(new Point(100,100)); //座標出力 console.log(localPoint.x, localPoint.y);
Movieの名前を取得する
attachMovieの際に設定したMovieの名前は下記のようにして取得することができます。
タイムラインで静的に配置したMovieはnullになります。
読み取り専用なので書き換えは行わないでください。
//attachMovieの際に設定した名前を取得。 var name = <Movieインスタンス>.attachName; //出力 console.log(name);
タイムラインで静的に配置しインスタンス名をつけたMovieのインスタンス名に関しては下記のようにして取得することができます。
attachMovieで生成したmovieもattachMovie時に設定した名前を取得することができます。
読み取り専用なので書き換えは行わないでください。
//attachMovieの際に設定した名前を取得。 var name = <Movieインスタンス>.name; //出力 console.log(name);
Movieの親Movieを取得する
Movieの親にあたるMovieを取得することができます。下記がサンプルになります。
//親Movieを取得 var parentMovie = <Movieインスタンス>.parent; //親Movieを移動 parentMovie.moveTo(100,0);
Movieの再生状況を取得する
Movieの現在の再生状況をブール値で取得することができます。下記がサンプルになります。
//再生状況を取得
var playing = <Movieインスタンス>.playing;
//停止していれば出力
if(playing === false){
console.log("movieは現在停止中です");
}
Movieの総フレーム数を取得する
Movieのタイムラインの総フレーム数を取得できます。下記がサンプルになります。
//総フレーム数を取得 var frames = <Movieインスタンス>.totalFrames; //出力 console.log(frames);
Movieにトゥイーンクラスを適用する
LWFではTween.jsというアニメーションライブラリが使用できます。
Movieクラスで使用する際、下記のサンプルようにして使用します。
//サンプル1
<Movieインスタンス>.addTween()
.easing(Tween.Easing.Quadric.Out) //イージング設定
.to({x:150,y:200},24) //(24フレームかけてx:150,y:200)へ移動
.onComplete(function(){ //移動が完了したら指定した関数を実行
console.log("着きました");
})
.start(); //スタート
//サンプル2
<Movieインスタンス>.addTween()
.to({x:100},24) //24フレームかけて(x:100)へ移動
.start() //スタート
.chain() //(x:100)への移動が完了した後に新たなトゥイーンを生成
.delay(24) //24フレーム、ウェイト状態に
.onComplete(function(){ //24フレームウェイトが完了したら実行する関数
console.log("24フレーム待ちました");
})
.chain()
.to({rotation:180},12) //12フレームかけて180度回転
.onComplete(function(){ //回転が完了したら実行する関数
console.log("完了");
})
※Tweenクラスの詳しい扱い方
[| Tweenクラス]
[| API]
