アクセシビリティ
デベロッパーリソース

目次

Flash グラフィックエフェクト学習ガイド

ビットマップの操作

BitmapData クラスでは、任意のサイズの透明または不透明のビットマップイメージを作成し、実行時にさまざまな方法で操作できます。ActionScript を使用して BitmapData インスタンスを直接操作することによって、Flash Player でベクターデータのコンテンツを連続的に再描画するオーバーヘッドを避けながら、複雑なイメージを作成できます。BitmapData クラスのメソッドは、Flash ワークスペースの [フィルタ] タブを通じては使用できない各種の効果をサポートします。

BitmapData オブジェクトには、ピクセルデータの配列が含まれています。このデータは、完全に不透明なビットマップも、アルファチャンネルデータを含む透明なビットマップも表現できます。いずれの種類の BitmapData オブジェクトも 32 ビット整数のバッファとして保存されます。各 32 ビット整数は、ビットマップ内の 1 つのピクセルのプロパティを決定します。また、アルファ透明度とピクセルの赤緑青 (ARGB) の値を表す 4 つの 8 ビットチャンネル値 (0 ~ 255) の組み合わせです。

RGB カラーが 6 桁の 16 進数で通常は表されるように (たとえば、赤は 0xFF0000)、ARGB は 8 桁の 16 進数で表されます。ARGB では、先頭 2 桁の数字がアルファチャンネルを表し、次の 2 桁の数字は赤のチャネルを表す、というようになります (たとえば、不透明度 50% の赤は 0x80FF0000)。

次の手順は、ステージに JPEG イメージを動的にロードし、BitmapData クラスを使用して、テレビのノイズ画面のようなノイズ効果を作成します。ノイズ効果は、100 ミリ秒 (1 秒の 1/10) ごとにランダムなパターンで再描画されます。x 軸および y 軸に沿ってマウスポインタを動かすと、一定の間隔でノイズが描画される様子が変化します。

BitmapData クラスでノイズ効果を作成するには :
  1. 新しい Flash ドキュメントを作成し、「noise.fla」という名前で保存します。
  2. タイムラインのフレーム 1 に次の ActionScript を追加します。

    import flash.display.BitmapData;
    createTextField("status_txt", 90, 0, 0, 100, 20);
    status_txt.selectable = false;
    status_txt.background = 0xFFFFFF;
    status_txt.autoSize = "left";
    function onMouseMove() {
    status_txt._x = _xmouse;
    status_txt._y = _ymouse-20;
    updateAfterEvent();
    }
    this.createEmptyMovieClip("img_mc", 10);
    img_mc.loadMovie("http://www.helpexamples.com/flash/images/image1.jpg");
    var noiseBmp:BitmapData = new BitmapData(Stage.width, Stage.height, true);
    attachBitmap(noiseBmp, 20);
    setInterval(updateNoise, 100);
    var grayScale:Boolean = true;
    function updateNoise():Void {
    var low:Number = 30 * _xmouse / Stage.width;
    var high:Number = 200 * _ymouse / Stage.height;
    status_txt.text = "low:"+ Math.round(low) + ", high:"+ Math.round(high);
    noiseBmp.noise(Math.round(Math.random() * 100000), low, high, 8, grayScale);
    }
    

    このコードは、status_txt という名前のインスタンスを含むテキストフィールドを作成します。このインスタンスは、マウスポインタの位置を追跡し、noise() メソッドの high パラメータと low パラメータの値を表示します。setInterval() 関数は、updateNoise() を呼び出し続けることによって、ノイズ効果を変化させます。ノイズ効果は、100 ミリ秒 (1 秒の 1/10) ごとに再描画されます。noise() メソッドの high パラメータと low パラメータは、ステージ上のマウスポインタの現在の位置を計算することによって指定されます。

  3. [制御]-[ムービープレビュー] を選択してドキュメントをテストします。

マウスポインタをステージの x 軸に沿って動かすと low パラメータが変わり、y 軸に沿って動かすと high パラメータが変わります。

ランタイムビットマップキャッシュ

Flash 内のデザインのサイズが大きくなるにつれて、アプリケーションを作成している場合であれ、複雑なスクリプトで記述されたアニメーションを作成している場合であれ、パフォーマンスや最適化について考慮する必要が生じてきます。静的な状態を維持するコンテンツ (矩形のムービークリップなど) がある場合、Flash ではコンテンツが最適化されません。そのため、矩形のムービークリップの位置を変更したり、その周りのエレメントを変更した場合、Flash Player 7 以前では、矩形全体が再描画されます。

Flash Player 8 では、指定したムービークリップをキャッシュして、SWF ファイルのパフォーマンスを向上させることができます。ムービークリップやボタンはサーフェスであり、基本的にはインスタンスのベクターデータのビットマップバージョンです。このデータは、SWF ファイルの処理中に大きく変更されることはありません。そのため、キャッシュがオンになったインスタンスは、SWF ファイルの再生中に頻繁に再描画されないので、SWF ファイルをすばやくレンダリングできます。

cacheAsBitmap プロパティを true に設定しても、次のいずれかの条件に該当する場合、ビットマップはキャッシュされません。

  • ビットマップの高さまたは幅が 2880 ピクセルより大きい
  • ビットマップが割り当てに失敗した場合 (メモリ不足エラー)

必ずしもビットマップキャッシュを適用する必要はありません。適用すると、状況によっては SWF ファイルのパフォーマンスに悪影響が出るためです。また、実行時の RAM 使用率がわずかに増加するのは、プレーヤーがベクターデータとキャッシュされたビットマップの両方をメモリに保持する必要があるためです。ビットマップキャッシュを適用する必要のある状況の詳細については、Flash LiveDocs の次のセクションを参照してください。[ActionScript 2.0 の学習]-[ムービークリップの操作]-[ActionScript を使用したムービークリップのキャッシュとスクロールについて]-[キャッシュを有効にする状況]。

メモ : サーフェスが再作成されるときに、ベクターデータを更新できます。そのため、サーフェスにキャッシュされたベクターデータは、SWF ファイル全体を通して同じになっている必要はありません。

ムービークリップのビットマップキャッシュを指定するには :
  1. ステージで、ムービークリップまたはボタンシンボルを選択します。
  2. シンボルのプロパティインスペクタで、[ランタイムビットマップキャッシュを使用する] チェックボックスをオンにします。

ActionScript を使用してキャッシュとスクロールを有効にし、背景を制御することができます。プロパティインスペクタを使用して、ムービークリップインスタンスのキャッシュを有効にすることができます。ActionScript を使用しない場合は、プロパティインスペクタで [ランタイムビットマップキャッシュを使用する] オプションを代わりに選択します。

ActionScript を使用する場合は、ボタンおよびムービークリップインスタンスの 3 つの新しいプロパティを使用できます。これらのプロパティを使用して、ビットマップキャッシュを有効にし、ムービークリップの背景色を設定し (opaqueBackground)、ムービークリップコンテンツの高速スクロールを有効にします (scrollRect)。詳細については、Flash LiveDocs の次のセクションにある一覧を参照してください。[ActionScript 2.0 の学習]-[ムービークリップの操作]-[ActionScript を使用したムービークリップのキャッシュとスクロールについて]。

ムービークリップインスタンスをキャッシュするには、cacheAsBitmap プロパティを true に設定する必要があります。cacheAsBitmap プロパティを true に設定すると、ムービークリップインスタンスのピクセルが全体の座標に自動的に吸着します。SWF ファイルをテストすると、複雑なベクターアニメーションがより速くレンダリングされることがわかります。

ムービークリップをキャッシュするには :
  1. 新しい Flash ドキュメントを作成し、「cachebitmap.fla」という名前を付けます。
  2. プロパティインスペクタ ([ウィンドウ]-[プロパティ]-[プロパティ]) の [フレームレート] テキストボックスに「24」と入力します。
  3. 複雑なベクターグラフィックを FLA ファイルに作成または読み込みます。

    Flash のインストール時に作成された次のディレクトリ内にある完成済みソースファイルに、このサンプルとなる複雑なベクターデータグラフィックが用意されています。

    Windows の場合は、boot drive\Program Files\Macromedia\Flash 8\Samples and Tutorials\Samples\ActionScript\BitmapCaching を開きます。

    Macintosh の場合は、Macintosh HD/アプリケーション/Macromedia Flash 8/Samples and Tutorials/Samples/ActionScript/BitmapCaching を開きます。

  4. ベクターグラフィックを選択し、[修正]-[シンボルに変換] を選択します。
  5. [名前] テキストボックスに「star」と入力し、(ダイアログボックスが拡張されていなければ) [詳細] をクリックします。
  6. [ActionScript に書き出し] を選択します (これによって [最初のフレームに書き出し] も選択されます)。
  7. [識別子] テキストボックスに「star」と入力します。
  8. [OK] をクリックして、リンケージ識別子 Star が設定されたムービークリップシンボルを作成します。
  9. タイムラインのフレーム 1 を選択し、[アクション] パネルに次の ActionScript を追加します。

    import mx.transitions.Tween;
    
    var star_array:Array = new Array();
    for (var i:Number = 0; i<20; i++) {
    makeStar();
    }
    function makeStar():Void {
    var depth:Number = getNextHighestDepth();
    var star_mc:MovieClip = attachMovie("star ", "star" + depth, depth);
    star_mc.onEnterFrame = function() {
    star_mc._rotation += 5;
        }
    star_mc._y = Math.round(Math.random() * Stage.height - star_mc._height / 2);
    var star_tween:Tween = new Tween(star_mc, "_x", null, 0, Stage.width, (Math.random() * 5) + 5, true);
    star_tween.onMotionFinished = function():Void  {
    star_tween.yoyo();
        };
    star_array.push(star_mc);
    }
    var mouseListener:Object = new Object();
    mouseListener.onMouseDown = function():Void {
    var star_mc:MovieClip;
    for (var i:Number = 0; i < star_array.length; i++) {
    star_mc = star_array[i];
    star_mc.cacheAsBitmap = !star_mc.cacheAsBitmap;
        }
    }
    Mouse.addListener(mouseListener);
    
  10. [制御]-[ムービープレビュー] を選択してドキュメントをテストします。

ステージのどこかをクリックしてビットマップキャッシュを有効にします。1 秒間に 1 フレームくらいでアニメーション表示されていたのが、表示がスムーズになってインスタンスがステージ上のあちらこちらでアニメーション表示されるようになったことに注目してください。ステージをクリックすると、star インスタンスの cacheAsBitmap の設定が true と false で切り替わります。

前の例で行ったようにキャッシュのオンとオフを切り替えると、キャッシュされたデータが解放されます。このコードは Button インスタンスに対しても適用できます。

メモ : キャッシュをテキストフィールドに直接適用することはできません。この機能を利用するには、ムービークリップ内にテキストを配置する必要があります。例については、Flash のインストールフォルダにあるサンプルファイルを参照してください (\Samples and Tutorials\Samples\ActionScript\FlashType)。