WebGL ランタイム API を使用したインタラクティブアニメーションの作成

次に示すステップバイステップのチュートリアルは、アニメーションにインタラクティブ機能を追加するために Flash WebGL ランタイム API を使用し始めるのに役立ちます。このチュートリアルでは、シンプルな FLA ファイルから始めて、ステージに MovieClip インスタンスを追加するために API を使用します。

  1. night_webgl.fla ファイルをダウンロードして、Adobe Flash Professional CC 2014 で開きます。ステージの夜空のビットマップイメージがファイルに含まれていることが確認できます。

  2. Ctrl + Enter(Windows)または Cmd + Enter(Mac)を押して、ムービーをテストします。ブラウザーウィンドウにビットマップが表示されます。

  3. .fla ファイルを含むフォルダーに移動します。パブリッシュすると、次のファイルとフォルダーが見つかります。

    • night_webgl.html ファイル
    • WebGL ランタイム JavaScript ライブラリを含む「libs」フォルダー
    • アニメーションをレンダリングするために必要なアセットを含む「assets」フォルダー
  4. Flash Professional に戻ります。ライブラリパネルで、透明度が調整された星のアニメーションを含むムービークリップ、「Star」を確認できます。 

  5. ライブラリパネルで、Star ムービークリップの隣の「linkage」列をダブルクリックし、「star」と入力します。この手順では、API を使用してランタイムで作成できるこのムービークリップのインスタンスが使用するリンケージ名を指定します。また、ステージで使用されなくてもこのムービークリップはパブリッシュされるようにします。

  6. HTML ファイルを開いて、 タグを含む行の後に次の行を追加します。これにより、HTML にボタンが追加され、作成された星の数を表示するためのプレースホルダーが作成されます。

    <button onclick="onAdd();">Add</button>
    <p id="count"></p>
  7. handleComplete() 関数の後に、次のコードを追加します。

    var count = 0;
    function onAdd() {
        var sgf = player.getScenegraphFactory();
        var star = sgf.createMovieClipInstance("star");
        player.getStage().addChildAt(star, 0);
        var x = Math.random() * 540;
        var y = Math.random() * 180;
        var s = Math.random();
        var mat = new flwebgl.geom.Matrix([s, 0, 0, s, x, y]);
        star.setLocalTransform(mat);
     
        count++;
        document.getElementById("count").innerHTML = count + (count > 1 ? " stars" : " star");
    }

    ここで起こっていることを次に示します。

    • 変数「player」は、WebGL プレーヤーのインスタンスを参照する、API の外観です。
    • SceneGraphFactory への参照が取得されます。ムービークリップのインスタンスを作成するために使用されます。
    • MovieClip インスタンスは、createMovieClipInstance() 関数を使用して作成され、Flash で指定されたリンケージ名が渡されます。
    • ステージ(ルートタイムライン)への参照がプレーヤーから取得されます。
    • addChildAt() 関数を使用して、新しい MovieClip インスタンスがステージの子として追加されます。この関数に 0 を渡すことで、ステージの他のすべての子の上に子が追加されます(ビットマップの上)。
    • Matrix クラスを使用して、星の位置とサイズが設定されます。
  8. HTML ファイルに加えた変更を保存します。

  9. Flash でのパブリッシュ中、HTML に加えた変更を上書きしないように、パブリッシュ設定ダイアログボックスの「HTML を上書き」チェックボックスの選択を解除します。

  10. もう一度ムービーをテストします。今度は、ブラウザーで、背景画像の下に「Add」ボタンが表示されます。「Add 」を複数回クリックして、ステージに星を追加します。

注意:

完成例をここからダウンロードできます。

ダウンロード

night_webgl

注意:

  • HTML 内のキャンバスに WebGL アニメーションをレンダリングするので、周囲の HTML を修正する必要はありません。この例では、作成された星の数が維持されます。
  • 上述の例は、インタラクティブなアニメーションおよびゲームを作成し始めるために重要です。シーン上のエレメントを制御するその他の方法について詳しくは、WebGL ランタイム API ドキュメントページを参照してください。
  • コンテンツをパブリッシュする場合、Flash はアートワークを GPU に対応した形式に変換します。計算に負荷がかかるので、この処理が完了するまで数分かかる場合があります。アートワークの線と曲線の数を最小限にすることをお勧めします。修正/シェイプメニューの下のオプションを使用してアートワークを最適化、スムージングおよび直線化することで、アートワークを簡素化できます。これにより、レンダリングパフォーマンスを向上させ、パブリッシュにかかる時間を削減できます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー