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

提供: LWF Wiki
移動: 案内検索
(BitmapClipクラスとは?)
(BitmapClipを作る)
 
(1人の利用者による、間の16版が非表示)
4行: 4行:
 
パーティクルなどで大量に使用する際に便利です。<br/>
 
パーティクルなどで大量に使用する際に便利です。<br/>
 
BitmapClipはFlash上で配置することはできず、スクリプトを使って生成します。<br/>
 
BitmapClipはFlash上で配置することはできず、スクリプトを使って生成します。<br/>
 +
==BitmapClipを作る==
 +
BitmapClipはMovieにattachすることで生成することができます。<br/>
 +
下記はそのサンプルになります。<br/>
 +
//BitmapClipを作る
 +
var bitmapClip = <Movieインスタンス>.attachBitmap("hoge.png", 1);
 +
<Movieインスタンス>.attachBitmapでMovieにBitmapClipをattachすることができます。<br/>
 +
attachBitmapの第一引数にはattachしたい画像のリンケージ名を指定します。<br/>
 +
第二引数には深度を指定します。深度は0からはじまり整数で、かつ順番に指定する必要があるので注意してください。<br/>
 +
<br/>
 +
※Flashのライブラリ上で使用数0になっている画像はLWFに書き出されないので、attachBitmapだけにしか使用しない画像がある場合は<br/>
 +
 適当なムービークリップにその画像を入れて使用数を1以上にしてください。<br/>
 +
 そのムービークリップ自体が実際LWFで使われなくても問題ありません。<br/>
 +
 
  
 
==BitmapClipを移動する==
 
==BitmapClipを移動する==
 +
BitmapClipを移動させるサンプルです
 +
//BitmapClipをx:100,y:100に移動させる
 +
<BitmapClipインスタンス>.x = 100;
 +
<BitmapClipインスタンス>.y = 100;
 +
 
==BitmapClipを回転する==
 
==BitmapClipを回転する==
 +
BitmapClipを回転するサンプルです。
 +
//BitmapClipを45度回転させる
 +
<BitmapClipインスタンス>.rotation = 45;
 +
 
==BitmapClipを拡大縮小する==
 
==BitmapClipを拡大縮小する==
 +
BitmapClipをjavascriptで拡縮させるサンプルです。
 +
//BitmapClipのスケールを2倍にする
 +
<BitmapClipインスタンス>.scaleX = 2;
 +
<BitmapClipインスタンス>.scaleY = 2;
 +
 +
//BitmapClipを反転する
 +
<BitmapClipインスタンス>.scaleX = -1;
 +
 
==BitmapClipを透明にする==
 
==BitmapClipを透明にする==
 +
BitmapClipのアルファ(透明度)を設定します。0で透明 1で不透明になります。
 +
//BitmapClipを半透明にする
 +
<BitmapClipインスタンス>.alpha = 0.5;
 +
完全に非表示したい場合はalphaよりvisibleを使用してください。<br/>
 +
alpha=0; は visible=false より描画負荷がかかってしまいます。<br/>
 +
 
==BitmapClipを非表示にする==
 
==BitmapClipを非表示にする==
 +
BitmapClipの表示状態を設定します。
 +
//BitmapClipを非表示する
 +
<BitmapClipインスタンス>.visible = false;
 +
//BitmapClipを表示する
 +
<BitmapClipインスタンス>.visible = true;
 +
 
==BitmapClipの深度を変更する==
 
==BitmapClipの深度を変更する==
 +
BitmapClipの深度を入れ替えるにはMovieが配列で管理しているBitmapClipの順番を変えることで行います
 +
下記はBitmapClipの深度を変更するサンプルです。
 +
//BitmapClipを生成
 +
var hoge = <Movieインスタンス>.attachBitmap("hoge.png", 1);
 +
var hoge2 = <Movieインスタンス>.attachBitmap("hoge.png", 0);
 +
 +
//Movieが管理しているBitmapClipを配列で取得
 +
var bitmaps = <Movieインスタンス>.getAttachedBitmaps();
 +
 
 +
//深度を入れ替え
 +
bitmaps[1] = hoge2;
 +
bitmaps[0] = hoge;
 +
 
==BitmapClipの変形基準点を変更する==
 
==BitmapClipの変形基準点を変更する==
 +
BitmapClipはMovieと違いFlashで変形基準点を編集することができないので、デフォルトでは左上が変形基準点になっています。<br/>
 +
その基準点を下記のサンプルのように移動することができます。<br/>
 +
//変形基準点を中心に持ってくる
 +
<BitmapClipインスタンス>.regX = <BitmapClipインスタンス>.width * 0.5;
 +
<BitmapClipインスタンス>.regY = <BitmapClipインスタンス>.height * 0.5;
 +
 
==BitmapClipのサイズを取得する==
 
==BitmapClipのサイズを取得する==
 +
BitmapClipを構成している一枚の画像の原寸サイズを取得することができます。<br/>
 +
取得できるサイズはあくまで画像のサイズです。matrix値が反映されたサイズではないので注意してください。<br/>
 +
下記はサンプルになります。<br/>
 +
//画像のサイズを取得
 +
var width = <BitmapClipインスタンス>.width;
 +
var height = <BitmapClipインスタンス>.height;
 +
 
==BitmapClipにトゥイーンを適用する==
 
==BitmapClipにトゥイーンを適用する==
 +
BitmapClipと同じようにBitmapClipにもTweenクラスを適用してアニメーションさせることができます。<br/>
 +
//サンプル1
 +
<BitmapClipインスタンス>.addTween()
 +
    .easing(Tween.Easing.Quadric.Out)  //イージング設定
 +
    .to({x:150,y:200},24)              //(24フレームかけてx:150,y:200)へ移動
 +
    .onComplete(function(){            //移動が完了したら指定した関数を実行
 +
        console.log("着きました");
 +
    })
 +
    .start();                          //スタート
 +
 +
//------------------------------------------------------------
 +
 +
//サンプル2
 +
<BitmapClipインスタンス>.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クラスの詳しい扱い方<br/>
 +
[[Tween%E3%82%AF%E3%83%A9%E3%82%B9 | Tweenクラス]]<br/>
 +
[[Tween | API]]<br/>

2014年8月21日 (木) 13:12時点における最新版

目次

BitmapClipクラスとは?

BitmapClipクラスは、1つの画像のみで構成されておりタイムラインなども存在しません。
Movieクラスと違い、サイズの取得なども行うことができます。またMovieクラスにくらべ動作も軽いので
パーティクルなどで大量に使用する際に便利です。
BitmapClipはFlash上で配置することはできず、スクリプトを使って生成します。

BitmapClipを作る

BitmapClipはMovieにattachすることで生成することができます。
下記はそのサンプルになります。

//BitmapClipを作る
var bitmapClip = <Movieインスタンス>.attachBitmap("hoge.png", 1);

<Movieインスタンス>.attachBitmapでMovieにBitmapClipをattachすることができます。
attachBitmapの第一引数にはattachしたい画像のリンケージ名を指定します。
第二引数には深度を指定します。深度は0からはじまり整数で、かつ順番に指定する必要があるので注意してください。

※Flashのライブラリ上で使用数0になっている画像はLWFに書き出されないので、attachBitmapだけにしか使用しない画像がある場合は
 適当なムービークリップにその画像を入れて使用数を1以上にしてください。
 そのムービークリップ自体が実際LWFで使われなくても問題ありません。
 

BitmapClipを移動する

BitmapClipを移動させるサンプルです

//BitmapClipをx:100,y:100に移動させる
<BitmapClipインスタンス>.x = 100;
<BitmapClipインスタンス>.y = 100;

BitmapClipを回転する

BitmapClipを回転するサンプルです。

//BitmapClipを45度回転させる
<BitmapClipインスタンス>.rotation = 45;

BitmapClipを拡大縮小する

BitmapClipをjavascriptで拡縮させるサンプルです。

//BitmapClipのスケールを2倍にする
<BitmapClipインスタンス>.scaleX = 2;
<BitmapClipインスタンス>.scaleY = 2;
//BitmapClipを反転する
<BitmapClipインスタンス>.scaleX = -1;

BitmapClipを透明にする

BitmapClipのアルファ(透明度)を設定します。0で透明 1で不透明になります。

//BitmapClipを半透明にする
<BitmapClipインスタンス>.alpha = 0.5;

完全に非表示したい場合はalphaよりvisibleを使用してください。
alpha=0; は visible=false より描画負荷がかかってしまいます。

BitmapClipを非表示にする

BitmapClipの表示状態を設定します。

//BitmapClipを非表示する
<BitmapClipインスタンス>.visible = false;
//BitmapClipを表示する
<BitmapClipインスタンス>.visible = true;

BitmapClipの深度を変更する

BitmapClipの深度を入れ替えるにはMovieが配列で管理しているBitmapClipの順番を変えることで行います 下記はBitmapClipの深度を変更するサンプルです。

//BitmapClipを生成
var hoge = <Movieインスタンス>.attachBitmap("hoge.png", 1);
var hoge2 = <Movieインスタンス>.attachBitmap("hoge.png", 0);

//Movieが管理しているBitmapClipを配列で取得
var bitmaps = <Movieインスタンス>.getAttachedBitmaps();
 
//深度を入れ替え
bitmaps[1] = hoge2;
bitmaps[0] = hoge;

BitmapClipの変形基準点を変更する

BitmapClipはMovieと違いFlashで変形基準点を編集することができないので、デフォルトでは左上が変形基準点になっています。
その基準点を下記のサンプルのように移動することができます。

//変形基準点を中心に持ってくる
<BitmapClipインスタンス>.regX = <BitmapClipインスタンス>.width * 0.5;
<BitmapClipインスタンス>.regY = <BitmapClipインスタンス>.height * 0.5;

BitmapClipのサイズを取得する

BitmapClipを構成している一枚の画像の原寸サイズを取得することができます。
取得できるサイズはあくまで画像のサイズです。matrix値が反映されたサイズではないので注意してください。
下記はサンプルになります。

//画像のサイズを取得
var width = <BitmapClipインスタンス>.width;
var height = <BitmapClipインスタンス>.height;

BitmapClipにトゥイーンを適用する

BitmapClipと同じようにBitmapClipにもTweenクラスを適用してアニメーションさせることができます。

//サンプル1
<BitmapClipインスタンス>.addTween()
    .easing(Tween.Easing.Quadric.Out)  //イージング設定
    .to({x:150,y:200},24)              //(24フレームかけてx:150,y:200)へ移動
    .onComplete(function(){            //移動が完了したら指定した関数を実行
        console.log("着きました");
    })
    .start();                          //スタート

//------------------------------------------------------------

//サンプル2
<BitmapClipインスタンス>.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