calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< October 2017 >>

categories

archives

CreateJSでHelloWorld

0
    CreateJSでHelloWorldする手順をまとめてみました。
    画面に、クリックできるMovieClipを配置して、クリックするとJSで「HelloWorld」のアラートを出すというものです。
    作成物はこちら

    ちなみに、Flashでコンテンツを作成する方法は大きく分けて2種類ありますね。
    ・メインタイムラインに全てのコンテンツを配置してgotoAndStopでメインタイムラインを行ったり来たりしながら処理を行う方法
    ・メインタイムラインには何も置かずに、ドキュメントルートから必要に応じてインスタンス化したりして制御をおこなう方法

    それぞれの手法にメリット・デメリットありますが、ゲームなどのコーディングが沢山必要なものやパフォーマンスを出したいものなんかは、後者の方がいいと思います。

    自分はゲームを作る人なので、いつも後者の方法で作るのですが、HTML5Canvasでパブリッシュすると、前者の方法を前提とした感じに出力されてしまいます。そこで今回のHelloWorldは、独自のやり方で後者の方法に近い形で進められる様な手順でまとめみました。

    おおまかな作業の流れとしては
    ・Flashでデザインを行ってパブリッシュする
    ・出力されたHTMLを、メインタイムラインの内容を表示させないように修正する
    ・JSファイルを別途作り、そこへドキュメントルートに相当する記述を行う。
    という感じになります。

    独自のやり方なので、最善の方法なのか分りません。もっといい方法があるよ〜とかあったらぜひ教えてくださいませ。

    尚、手順ではFlash Professional CC(一か月無料体験版)を使っています。

    まず、Flash CCを立ち上げて、新規作成のところにある「HTML5 Canvas」を選択します。

    test.flaという名前で保存します。

    次に、矩形とテキストを組み合わせて、ボタンのMovieClipを作成します。
    名前は「mcButton」としました。


    さて、ここで1つ注意する事があります。AS3では、リンケージを設定することでAS3からインスタンス化できましたが、
    「HTML5 Canvas」ではリンケージの設定が選択できません。


    パブリッシュして書き出されたJSファイルの中を見ると分るのですが、メインタイムライン上に配置したMCの定義は書きだされるのですが、配置されていないMCの情報は書き出されません。定義が書き出されたMCについては、AS3でリンケージ設定した時と同様に、JSファイル上からインスタンス化できます。

    というわけで、JSファイルから利用できるようにするために、メインタイムライン上にMCを配置します(複数のMCがある場合は、全て配置しておきます)。

    メインタイムラインは1フレームだけです。
    ちなみにメインタイムラインに配置したものは使いません。後でHTML内のJSを編集してメインタイムラインに配置されたものは使用しないように修正します。

    パブリッシュすると、HTMLとJSファイルが作成されます。(test.htmlとtest.js)
    実行結果は次の通りです。



    Flash側での作業は、ここまでとなります。
    この後は、HTMLファイルと、JSファイルを直接直します。(メインタイムラインに配置したものを表示させないようにすることと、JS上からインスタンス化と配置を行い、クリックイベントの挙動を記述する)
    あ、ちなみに、HTMLとJSを修正したあと、Flashでまたパブリッシュすると、同じファイルを上書きしてしまいますので注意です。
    パブリッシュの設定でHTML出力しない、とかはできますが、念の為。
    名前を変えるとかして対応すると良いと思います。

    パブリッシュで生成されたHTMLファイル内のJSは、こんな感じになっています。










    これを以下の通り書き換えます。




    //←※1




    ※1.test.jsは、MovieClipなどの情報が書き込まれているファイルです。基本的に自分で弄って修正するものではありません。デザインやモーションを修正したい場合は、Flash側で行うべきです。つまり、test.jsは一切手を加えず、自分で作るプログラムは、別ファイルで管理したいです。というわけで、その別ファイルへの参照を追加します。(myCode.jsという名前にしました。このファイルは後で作成します。)

    ※2.exportRootっていうのをインスタンス化してaddChildしていますが、これはメインタイムラインの内容を書き出している部分です。ドキュメントルート派としては、メインタイムラインに配置したものは使わないので、消します。

    ※3.canvasっていう変数ですが直接文字列で指定しても動くみたいなので、書き換えてすっきりさせます。

    ※4.stage.update()っていう命令によって、画面が更新されます。が修正前のままだと、表示時に一回画面が更新されて、それ以降は更新されません。今回の作成するものは画面が更新されないので問題ないのですが、アニメーションものは、毎フレーム毎に表示を更新するようにする必要があります。なので、stage.update()を消して、Tickerのイベントリスナーのコメントを外します。

    ※5.ドキュメントルートに該当する命令を追加する必要があります。
    これは、myCode.jsの中に記述します。

    ここまでで、HTMLファイルの準備はできました。
    続いて、myCode.jsファイルを同じフォルダへ別途作成します。

    ファイルの内容は以下の通りにします。


    function main()
    {
    var btn = new lib.mcButton();
    btn.setTransform(100, 100);
    stage.addChild(btn);

    btn.addEventListener("click", eClick);
    }

    function eClick(e) {
    alert("Hello world");
    }


    こちらの内容は、AS3に慣れた方でしたら説明は不要かと。
    型の定義がない部分などが、AS2臭がしますが(笑)ここは慣れるしかないところですね。

    JUGEMテーマ:コンピュータ


    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック