CLOSE OPEN

ENT TECH LAB.

TAGSTAGS

WEBコンテンツ開発におけるFlash CC(CreateJS)とTypeScriptを用いたワークフロー(前編)


Canvasを使ったインタラクティブなアニメーションでもデザイナーと開発者は共同作業可能!?Flash CCでの制作の利点である直感的なアニメーションと強力なアセット管理をHTML5でも。

Flash CCのHTML5 Canvasテンプレート

Flash CCの最新版は「HTML5 Canvas」テンプレートでCanvas向けのコンテンツをパブリッシュ可能になりました。
これまでのFlashコンテンツ開発ワークフローでは、デザイナーが制作したSWFもしくはSWCファイルを開発者がActionScriptでコントロールできることがメリットでした。それと同様なワークフローがFlash CC + HTML5 Canvasで可能になるかもしれません。
CanvasパブリッシュされたコンテンツをJavaScriptから利用できれば、パラメータ変化が複雑なアニメーションへもインタラクティブな機能を追加することが容易になります。
さらにここでは、ある程度の規模での開発を効率化できるようTypeScriptでの開発をターゲットに検証してみます。

image.jpg

記事は前編・後編の2本立ての予定です。

TypeScript開発環境

まずTypeScriptの開発環境を用意します。ここでは簡単な説明に留めますが、詳細は他情報サイトを参照してください。

TypeScript概要

TypeScriptはマイクロソフトからオープンソースで提供され、変数の型付けチェックが可能な可読性に優れた言語です。 とてもきれいなJavaScriptにコンパイルでき、ActionScriptによく似ている為ActionScript開発者は学習が容易になっています。

TypeScriptのコンパイラ

TypeScriptとして書かれたソースコードはJavaScriptとしてコンパイルします。 TypeScriptのコンパイラはNode.jsのモジュールとして提供されているので、まずはNode.jsをインストールしましょう。

上記からダウンロード、インストールするだけです。

続いてTypeScriptのコンパイラ「tsc」を、Windowsであればコマンドプロンプトから、Macであればターミナルから

と入力しインストールします。
Windowsで上記コマンドが動かない場合は、環境変数のパスを確認してみてください。
(筆者の環境では再起動したらパスが有効になりました)

TypeScriptソースコード「file.ts」ファイルをコンパイルする場合はtscコマンドを使い、
コマンドプロンプトまたはターミナルから

と入力します。これで「file.js」ファイル、JavaScriptが書き出されます。

tscにはJavaScriptのファイル名指定や、ファイルの更新を監視し自動でコンパイルするオプション等があるのでヘルプを参照してみてください。ヘルプをみるにはコマンドプロンプトまたはターミナルから

と入力します。

Hello TypeScript!

ではさっそくHelloWorldしてみましょう。お好みのテキストエディタで下記を入力します。

hello.ts

これを「hello.ts」として任意の場所に保存します。
コマンドプロンプトやターミナルで開いているディレクトリがいいでしょう。ファイル保存する際の拡張子は慣例で「ts」とするようです。

このソースファイルをコマンドプロンプトまたはターミナルから

としてコンパイルします。同じ場所にhello.jsファイルができましたか?
これを適当なHTMLファイルからブラウザで表示させてみましょう。
console.log()関数の結果を見る為にブラウザのコンソールを開いておきます。

index.html

コンソールに「hello TS」と表示されました。

ソースコードの説明を簡単にすると、「say」メソッドをもつ「Hello」というクラスを作りインスタンス化した後、sayメソッドに”hello TS”という文字列を渡しています。
「module」はActionScriptでいうパッケージのようなもので、exportは外部からこのクラスを利用出来るようにする為の修飾子です。
クラスのコンストラクタは必ずconstructerで定義します。
ActionScriptの書き方にとてもよく似ていると思います。

Flash CCからHTML Canvasコンテンツをパブリッシュ

それでは一旦テキストエディタから離れてFlash CCでCanvasコンテンツを作成してみます。
ファイルを新規作成時に「HTML Canvas」テンプレートを選びます。

flashcc.jpg

この後コンテンツを作成していきますが、Canvasで未対応の機能はグレーアウトされます(使用できません)。
尚、「ActionScript 3.0」テンプレートで始めたファイルも「HTML Canvas」テンプレートへ変換出来るようですが、未対応の機能は同様に省かれてしまうようです。

適当にコンテンツを作成し、パブリッシュします。 ここでは単に円のシェイプを書きシンボル化、右へ移動するトゥイーンアニメーションを作りました。

パブリッシュ後はHTMLファイルとJavaScriptファイルの二つが書き出されます。
ブラウザにHTMLファイルを放り込んでみるとCanvasアニメーションが表示されます。非常に簡単ですね。

CreateJS

書き出されたHTMLのheaderには、

などとscriptタグが並びます。
必要なCreateJSライブラリを始めにすべて読み込んでいることから、CanvasはCreateJSによって動いていることがわかります。

「sample.js」は先ほどパブリッシュしたコンテンツの内容を構築するJavaScriptです。
JavaScriptはさらに以下のように続きます。

Canvas要素の取得や、コンテンツのインスタンス化等、CreateJSを使うときのコードが並びます。
特に、exportRoot = new lib.sample();の部分はFlash CCで作成したメインのMovieClipがlib.testクラスで出来ていることを表します。

続けてsample.jsを眺めてみます。概ね以下のようになっているはずです。

sample.js

少し長いですがたいしたことはしていません。
この無名関数()へは「lib」、「images」、「createjs」を引数として与えています(末尾から2行目)。
libはコンテンツ自体をもつオブジェクトとして名前空間的な使い方をしています。
imagesはPreloadJSで得られるリソース(今回は画像を使っていないので使用されない)、そして、createjsはCreateJS本体への参照です。

上から順に見ていくと、lib.propertiesにはコンテンツの基本的なプロパティオブジェクトがあります。
「manifest」はPreloadJSを使った経験があるならばおなじみ、リソースのパス情報です(今回は空)。

続いて、HTMLでインスタンス化しているlib.sampleがstage contentとして定義されているのが見えます。
lib.sampleはCreateJSのMovieClipなので(new cjs.MovieClip()されている。cjsはCreateJSへのショートカット)、再利用は容易そうです。

今回は準備編、ということでTypeScriptの開発環境づくり、FlashCCでのCanvas書き出しを試し、書き出されたコードを見てみました。次回は書き出されたJavaScriptにTypeScriptで手を加えてみます。

関連記事
BACK TO TOP