Flash HTML5 canvas でのライブラリからのインスタンス追加の注意点

まえがき

ライブラリからのインスタンスの追加はFlashのとっても便利な機能。新しいメニューHTML5canvasでも同じようにお手軽に追加したいと思ったのですが、一癖あったのでまとめます。

サンプル

ライブラリ内のインスタンス

containerという名前を用意しました。

コードスニペット

「ライブラリからインスタンスを追加」を使います

記述されるソース

/* ライブラリからステージにインスタンスを追加
指定したムービークリップまたはボタンのライブラリシンボルのインスタンスをステージに追加します。

手順 :
Add "LibrarySymbol" as the linkage property of the symbol.
*/

//ライブラリから別のシンボルを追加する場合は、
//上記手順 2 の「クラス」フィールドと以下のコードに、別の名前を入力します。
var fl_MyInstance_3 = new lib.LibrarySymbol();
this.addChild(fl_MyInstance_3);

上記のソースが追記されます。
上記のソースのうち手順に沿って以下のようにnewを書き換えます。
「new lib.LibrarySymbol();」→「new lib.container();」
しかし、まだ配置されません。なので、以下のように書き換えました。
「var fl_MyInstance_3」→「this.container1」
「this.addChild(fl_MyInstance_3);」→「this.addChild(this.container1);」

this.container1 = new lib.container();
this.addChild(this.container1);

ライブラリからインスタンスの追加をする事が出来ました。

addChild();でライブラリ内のインスタンスをそのまま配置。わたしは起点をライブラリに格納したインスタンスで指定するよりも、いろいろな使い方が出来るように起点は左上。デフォルトの状態で使用します。
よって、生成後にsetTransform()でパラメーターを指定します。

this.container1 = new lib.container();
this.addChild(this.container1);
this.container1.setTransform(84, 112, 0.35, 0.35, 0, 0, 0, 240, 320);

イメージ通りに配置できました。

まとめ

個人的に使い勝手に関して。スクリプトでアニメーションさせたいのでライブラリからインスタンス生成後、setTransformでパラメータをセットしてオブジェクトのパラメータを把握しておけるようにするのが扱いやすくするポイントだと思いました。
また、スニペットと自分の書いたスクリプトが上手く連携できていない時は、バッティングしている可能性や変数名の定義などがおかしい時があるので、パブリッシュで生成されたjavascriptをもう一度確認。

パブリッシュで生成されたjavascriptに全て書かれているので、問題があった時は想定している表示をどのように再現するスクリプトを生成させるかを念頭にflashのほうを修正してゆくのが良いと思います。