はじめに

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

night_webgl.fla ファイルをダウンロードして、Adobe Flash Professional CC 2014 で開きます。ステージの夜空のビットマップイメージがファイルに含まれていることが確認できます。
Ctrl + Enter（Windows）または Cmd + Enter（Mac）を押して、ムービーをテストします。ブラウザーウィンドウにビットマップが表示されます。
.fla ファイルを含むフォルダーに移動します。パブリッシュすると、次のファイルとフォルダーが見つかります。
- night_webgl.html ファイル
- WebGL ランタイム JavaScript ライブラリを含む「libs」フォルダー
- アニメーションをレンダリングするために必要なアセットを含む「assets」フォルダー
Flash Professional に戻ります。ライブラリパネルで、透明度が調整された星のアニメーションを含むムービークリップ、「Star」を確認できます。
ライブラリパネルで、Star ムービークリップの隣の「linkage」列をダブルクリックし、「star」と入力します。この手順では、API を使用してランタイムで作成できるこのムービークリップのインスタンスが使用するリンケージ名を指定します。また、ステージで使用されなくてもこのムービークリップはパブリッシュされるようにします。
HTML ファイルを開いて、タグを含む行の後に次の行を追加します。これにより、HTML にボタンが追加され、作成された星の数を表示するためのプレースホルダーが作成されます。
```
<button onclick="onAdd();">Add</button>
<p id="count"></p>
```
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 クラスを使用して、星の位置とサイズが設定されます。
HTML ファイルに加えた変更を保存します。
Flash でのパブリッシュ中、HTML に加えた変更を上書きしないように、パブリッシュ設定ダイアログボックスの「HTML を上書き」チェックボックスの選択を解除します。
もう一度ムービーをテストします。今度は、ブラウザーで、背景画像の下に「Add」ボタンが表示されます。「Add 」を複数回クリックして、ステージに星を追加します。

注意：

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

ダウンロード

ファイルを取得する

night_webgl.zip

night_webgl

注意：

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

リーガルノーティス | プライバシーポリシー

はじめに

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

アドビサポートコミュニティ

サポート