「Movieクラス」の版間の差分

2014年1月16日 (木) 10:55時点における版

Movieクラスとは?

MovieクラスはFlashのムービークリップに相当します。
javascriptを用いることでMovieを制御したり情報を得たりすることができます。

Movieを作る

Movieクラスを作成するには主に2つの方法があります。

• Flashで静的に配置する。

Flashのタイムライン上にムービークリップを配置することで作成します。
インスタンス名を設定することでjavascriptで参照得ることもできます。
※FlashCC(as3書き出し)ではリンケージ名と同じインスタンス名を設定するとエラーが発生するため
　LWF側で自動に設定するリンケージ名とインスタンス名が同じにならないようにしてください。

• 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の表示状態を設定します。
非表示にしている間は描画処理がストップし、alpha=0にして完全に透明にするよりもパフォーマンスの向上が期待できます。

//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引数のオプションは省略することもできますが、設定することで特定のタイミングで指定した関数を実行することができます。

動的に生成したMovieを破棄する

動的に配置されたMovieを破棄するサンプルです。タイムライン上に静的に配置されたMovieには適用できません。

//自身を親から破棄する
<Movieインスタンス>.removeMovieClip();

//子のMovieを破棄する
<Movieインスタンス>.detachMovie(<破棄するMovieインスタンス>);

破棄したあともmovieインスタンスは残っていますが、再attachすることはできません。
再利用したい場合は <Movieインスタンス>.active を使用してください。

//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);

※removeMovieClip()を行った後はmovieが破棄されているため再attachできないので注意してください。

Movieの処理を止めたい

一時的に不必要だが、後に再度利用したいといった場合にMovieを破棄せずに処理を止めることが出来ます。
下記はサンプルになります。

//movieの処理を止めたい
<Movieインスタンス>.active = false;

Movie.removeMovieClip()を行うと再attachができません。
Movie.visibleでは描画処理は停止しますが、Matrix計算やタイムラインの処理などは動いているので負荷がかかってしまいます。
なので、再利用したいMovieが一時的に不必要になる場合はMovie.activeを使用してください。
また、Movie.activeはタイムライン上で静的に配置されたものにも適用できます。

※処理を停止している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);

※これらの処理は、マトリックス処理が走ってからでないと取得することができません。
　なので、attachMovie直後や登場したフレームでは取得できないので注意してください。

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の現在のフレームを取得する

Movieが現在再生しているフレームを取得できます。下記がサンプルになります。

//現在再生中のフレームを取得
var frame = <Movieインスタンス>.currentFrame;
//出力
console.log("現在、" + frame + "を再生中です");

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

Movieに適用したトゥイーンをすべて止めたい

MovieにaddTween()で適用したトゥイーンをすべて止めるサンプルになります。
タイムラインで設定したモーショントゥイーンは対象外です。

//movieにかかっている全てのトゥイーンを停止
<Movieインスタンス>.stopTweens();

Movieに空の子Movieを追加する

Movieインスタンスに何もない空のMovieを追加するには下記のサンプルを参考にしてください

//空Movieをattach
var emptyMovie = <Movieインスタンス>.attachEmptyMovie("movieName");

attachEmptyMovieの第1引数はattachした空Movieの名前になります。

なお、LWFには"_empty"というリンケージ名の空Movieが自動で挿入されます。
なのでFlash上で_emptyという名前のムービークリップをライブラリには作らないでください。

Movieにイベントリスナーをセットする

Movieにイベントリスナーを設定することで様々なタイミングで指定した関数を実行させることが出来ます。
詳しくは コチラ→

Movieのイベントリスナーを解除する

Movieに設定したイベントリスナーを解除することができます。
主に2通りの方法があります。

• 指定したイベントタイプ内の指定した関数を解除する
• 指定したイベントタイプの関数を全て解除する

詳しくは コチラ→

Movieにイベントを送信する

任意のイベントを発火することができます。(カスタムイベント)
そのイベントに対応したイベントリスナーが設定されていれば、リスナー関数が実行されます。

/* js
    //イベントを発火
    <Movieインスタンス>.dispatchEvent("attack");
*/

イベントについて、詳しくは コチラ→

Movieのサイズを取得する

LWFのMovieは基本的にwidthやheightといったサイズを取得することはパフォーマンスの都合上できないのですが
どうしても取得したいという時に、Movieの現在のフレームのサイズを取得する機能があります。
下記はそのサンプルになります

//現在のMovieのサイズを保持するようにリクエスト
//第1引数に取得完了後のcallbackを指定することができる。
<Movieインスタンス>.requestCalculateBounds(function(){
    var bounds = <Movieインスタンス>.getBounds();
    var width = bounds.xMax - bounds.xMin;
    var height = bounds.yMax - bounds.yMin;
});

//旧バージョンの方法(第1引数のcallbackがない)
//現在のMovieのサイズを取得するようにリクエスト
<Movieインスタンス>.requestCalculateBounds();

//計算結果は次のフレームから取得できるので、1フレーム待ってから取得するように設定
<Movieインスタンス>.nextEnterFrame(function(){
    var bounds = <Movieインスタンス>.getBounds();
    var width = bounds.xMax - bounds.xMin;
    var height = bounds.yMax - bounds.yMin;
});

まだ、サイズ計算が終わっていない状態でgetBounds()を行うとundefinedが返ってきます。

Movieのタイムラインを操作する

MovieはFlashのムービークリップと同様にgotoAndPlay()などでフレームを操作することができます。
下記はフレーム操作に使用するメソッドになります。

• gotoAndPlay(フレーム数 または ラベル名)

  指定したフレームに移動し再生

• gotoAndStop(フレーム数 または ラベル名)

  指定したフレームに移動し停止

• nextFrame()

  １つ次のフレームへ移動

• prevFrame()

  １つ前のフレームへ移動

• play()

  再生

• stop()

  停止

下記はサンプルになります。
詳しくはAPI を参照してください

//Flashで指定したラベルのフレームへ
<Movieインスタンス>.gotoAndPlay("jump");

Flashでは、複数のフレーム操作を行った際に途中で通過したフレームのスクリプトが全て実行されますが
LWFでは最終的に到達したフレームのスクリプトだけが実行されますので注意してください。

Movieの子Movieを検索する

Movieの子となっているMovieを取得することができます。
下記はそのサンプルです。

//子Movieを取得
var childMovie = <Movieインスタンス>["子のインスタンス名"];

Movieの所属するLwfを取得する

Movieの所属しているLWFインスタンスを取得することができます。
LWFインスンタンスには全体的な設定に関するメソッドやプロパティがあります。
詳しくは、 API や LWFクラスについて で扱っています。
下記は取得のサンプルになります

//lwfインスタンスを取得
var lwf = <Movieインスタンス>.lwf;

1フレーム待ってから関数を実行させたい

LWFでは処理の都合上、1フレーム待ってからでないと行えないことがあったりします。

• Movie.requestCalculateBounds() => Movie.getBounds()
• gotoAndPlay等で飛んだ先で生成される子Movieを取得する場合

等々です。
そういった時のために、1フレーム待ってから実行する関数を設定することが出来ます。
下記がサンプルになります。

//1フレーム待ってから実行
<Movieインスタンス>.nextEnterFrame(function(){
    console.log("1フレーム待ちました");
});

全ての子要素に対して関数を実行する

Movieの子要素(Movie,Button,BitmapClip)に対して指定した関数を実行することが出来ます。
これを利用することで、全ての子Movieにstop()を簡単にかけたりすることができます。

【sample】
//全ての子要素に対して関数を実行
(Movieインスタンス).inspect(function(obj){
    if(obj.isMovie() === true){
        //Movieなのでstop
        obj.stop();
    } 
    if(obj.isButton() === true){
        //Buttonにはなにもしない
    }
    if(obj.isBitmapClip() === true){
        //BitmapClipなら非表示
        obj.visible = false;
    }
});

Movieの子要素全てに対して(Movieインスタンス).inspect()で設定した関数が実行されます。
関数の第1引数には、子要素が入ります。
子要素の種類(Movie等)を判別する際にはisMovie()、isButton()、isBitmapClip()を使用します。