CreateJS エディタ編(FlashDevelop)


createJS_FD
2013/2/15にアドビシステムズセミナールームにて行われた第一回CreateJS勉強会の発表内容です。当日はASer、JSerともにいらっしゃるだろうとの予想のもと、

  • ASerの方向けにFlashDevelop
  • JSerの方向けにPhpStorm

を使用した簡単なデモを用意しておき、それをお見せしました。この記事はその2つの内のFlashDevelop版です。

まず、FlashDevelopの特徴を簡単に説明すると以下のようになります。

  • FlashDeveloperの方にはお馴染み
  • とにかくコード補完が最強
  • 無料
  • Windows版のみ
  • 最近ではHaxeのエディタとしても使用されている

ダウンロードは以下のサイトから可能です。
http://www.flashdevelop.org/

インストールは非常に簡単で.exeファイルを実行するだけなのですが、一点だけ注意点があります。インストール中に以下の画面が出てくるのですが、ここでInstall JS Compilerに必ずチェックを入れて下さい。デフォルトではチェックが入っていません。これを忘れてしまうと当然ながらJavaScriptを書き出すことが出来ません。
flashDevelop_01

ではCreateJSのプロジェクトを作成してみましょう。メニュー→プロジェクト→新規プロジェクト、あるいはスタートページの新規プロジェクトをクリックします。
flashdevelop_02

するとこの様なウィンドウが開きますので、CreateJS Appをクリックしてプロジェクトファイルを作成して下さい。
flashdevelop_03

作成されたプロジェクトを確認すると以下の様な構造になっている事が確認できます。

  • bin/index.html
  • src/js/Main.js

flashdevelop_04

ではindex.htmlから見ていきましょう。ヘッダーではCreateJSの各種ライブラリの読み込みと、何やら”プロジェクト名.js”というファイルの読み込みが行われています。この”プロジェクト名.js”はコンパイル時に書き出されるJavaScriptファイルです。

bodyではCanvasの配置、Main.jsのmainファンクションの呼び出しが行われています。

次にMain.jsを見ていきます。

少々長いのですが、22行目でmain.initialize()とあり初期化を行っていることわかり、その内容が29行目から46行目に書かれています。初期化の内容としては、

となります。最後のTickerとはActionScript3.0でいうとEnterFrame、JavaScriptでいうとrequestAnimationFrameまたはsetTimeoutです。コールバック関数は52行目から55行目です。

さて、少し上に戻って23行目を見てみると// entry pointとあるので、ここに取りあえず円を描いてみたいと思います。以下のコードを書き加えてCtrl + Enterのショートカットで書き出してみます。

上手くいけば以下のように半径150pxの赤丸が描かれます。

次にアニメーションを付けたサンプルはこちらになります。アニメーションに必要なプロパティをグローバル変数にして、tick内でアニメーションの処理をしています。

上手くいけば以下の様になります。

Comments are closed.