Flashの経験が活かせます！ゲーム、プログラミングアートなどリッチなHTML5のCanvasコンテンツが簡単につくれます。電 子 版 特 別 編 集 シ リ ー ズ

Flashfor HTML5HTML5開発環境としてのFlash Pro CC活用テクニック沖 良矢、池田泰延 著

Flash Pro as HTML5Dev Tools

Web Designing Library 003

Index HTML5コンテンツ制作における注意点

テキストアニメーションを作ろう

ユーザーインタラクションを実装しよう

自由度の高いスライドショーを作成しよう

アニメーションと連動する時計を作ろう

サウンドを使ったコンテンツを制作してみよう

タイムラインを利用したスロットゲームを作ってみよう

お絵描きツールを作ってみよう

リキッドレイアウトでマルチデバイスに対応しよう

スプライトシートを書き出してHTML5で使ってみよう

外部から更新可能なスライドショーを作ってみよう

光を駆使したモーションを作ってみよう

ストップウォッチ付きのアナログ時計を作ってみよう

マルチデバイス対応のゲームを作ってみよう

HTMLの背景をアニメーションで演出してみよう

プログラミングアートを作ってみよう

押さえておきたいコンテンツ制作時の注意点

本書は、Web Designingの2014年3月号～2015年7月号に掲載された連載「Flash Lab.　HTML5オー•

サリング編」と「応用講座 Flash for HTML5」 を集約し、再構成したものです。なお、記載されている内容は、基本的に連載当時のものです。Flash Professional CCのバージョンによって、HTML5関連のパネルや仕様が異なります。各回の冒•

頭に、執筆の際に用いたFlash Professional CCのバージョンを明記しているので参考にしてください。サンプルデータによっては、ローカル環境では動作しないものがあります。その場合は、サーバにアップ•

ロードするなどしてご利用ください。

DOWNLOAD

本誌のサンプルデータは、特設サイトからダウンロードできます。ただし、ダウンロードに際しては、以下に記載した IDとパスワードが必要です。ID：wdlib　パスワード：f4h5

ZIP

http://book.mynavi.jp/wd/wdlib/15.html

004

008

012

016

020

024

028

032

036

040

044

048

052

056

060

064

068

004 Web Designing

Flash Lab.FlashLab.

WD

　HTML5オーサリングツールの急先鋒として、Flash Professional（以

降、Flash Pro）が名乗りを挙げている。もともとリッチコンテンツの制作

とFlash Proの相性は大変よく、これまで作成したアセットなどの資産も

豊富に抱えていることなどから、にわかにFlash Proの動向が注目される

ようになった。

　今回は、制作前に押さえておきたい基礎知識として、Flash Proで

作ることができるHTML5コンテンツの特徴、そしてパブリッシュや

JavaScriptを記述する際の注意点について解説する。

Flash Proで作るHTML5コンテンツの特徴と制作時の注意点

Flash ProfessionalはCS6以来、HTML5関連の機能強化を図っており、特にCC 13.1ではCanvasをネイティブサポートするなど、HTML5オーサリングツールとしての機能が充実している。今回は、HTML5コンテンツを制作する上での注意点を解説しよう。

Topic of the Month

POINT

・Flash Professional CC 13.1からは、HTML5のCanvasがネイティブサポートされている。

・Flash Professionalで出力できるHTML5コンテンツでは、CreateJSが利用されている。

HTML5コンテンツ制作における注意点

沖 良矢＿OKI Yoshiyahttp://ceroan.jp/　Twitter：@448jpインタラクションデザイナー。フリーランスとしてWebを中心としたテクニカルディレクション、Flash／HTML5を用いたフロントエンド構築、スマートフォンアプリ制作など、さまざまなプロジェクトに参加している。DIST主宰、F-site代表。

Researcher of this Lab.

Flash Pro上で作成し、それをHTML5コンテンツとして書き出せるようになった

HTML 5オーサリング編

※本記事の内容は、Flash Professional CC 13.1.0.226をもとにしています。

Web Designing Library 005

FlashW

eb Desig

nin

g Labo

ratory

Lab.

SECTION1 Flash Professionalで作るHTML5コンテンツの特徴

一口に「HTML5コンテンツ」と言っても、その実装にはさまざまな形が考えられる。

Flash Proで作ることができるHTML5コンテンツには、どのような特徴があるのか紹介しよう。

HTML5コンテンツの仕様

　Flash Proから書き出せるHTML5コンテン

ツは、2つの仕様に準拠している。1つ目は

HTML5の仕様の中の1つであるCanvas、2つ

目はそのCanvasをより手軽に扱えるように作

られた「CreateJS」という JavaScriptライブラ

リ群だ（01）。

　CreateJSの特徴として、コードの記述方法

がActionScriptに似ており、Flashユーザー

に馴染みやすいことが挙げられる。また、基本

的なHTML／CSS／ JavaScriptを書くことが

できれば、直感的にHTML5でリッチコンテン

ツを構築することができる。

動作環境

　CreateJSのライブラリ群は、それぞれ単体

でも、組み合わせても動作するように設計され

ている。そのため、CreateJS全体で統一され

た動作環境は存在せず、各ライブラリによって

異なる（02）。

　ただし、Flash Proから書き出したHTML5

コンテンツではEaselJSが必須となるため、

実質的には02にある通り、各種モダンブラウ

ザ（スマートフォン、タブレット含む）または

Internet Explorer 9以上が動作環境の前提に

なると考えてよいだろう。

Flash Proに適している HTML5コンテンツ

　Flash Proで制作するのに適しているHTML5

コンテンツは、スマートフォンやタブレットを

対象としたクロスプラットフォームのコンテ

ンツに加え、視覚表現と音を同時に使用する

「いわゆるフルFlashコンテンツ」のようなゲー

ム、アニメーション、サウンドプレーヤーなど

といえるだろう（03）。ただ、SEOを重視した

り、レガシーブラウザへの対応が求められるコ

ンテンツには向いていない。

02　CreateJSのライブラリ群の動作環境

ライブラリ 動作環境

EaselJS動作するのに、HTML5のcanvas要素が必要。HTML5に対応していないレガシーブラウザ、特に Internet Explorer 8以下では動作しない。

TweenJS 基本的にすべてのブラウザで動作する。

SoundJS

動作するのに、モダンなオーディオ機能（HTML5のaudio要素またはWeb Audio、Flash）のいずれかが必要。Internet Explorer 9～10／Chrome／Firefox／Safari／Opera／ iOS 6以上／Android Chromeのブラウザで動作テストが行われている。※Flash Playerプラグインを使うと、Internet Explorer 7～8でも動作可能。※BlackBerryブラウザでも簡易テストが行われている。

PreloadJS基本的にすべてのブラウザで動作する。ただし、ブラウザと機能の組み合わせによっては、制限がある。

「日本全国花粉飛散マップ」。環境省が提供している資料をもとに、過去11年分の花粉の飛散量をパーティクルを用いてビジュアライズしたサイト。本連載の共著者でもある池田泰延氏が代表を務める ICSが、Flash ProとCreateJSを使って制作したhttp://ics-web.jp/projects/pollenmap/

03

Canvasに対応していないレガシーブラウザに対しては、canvas要素の開始タグと終了タグの間にコンテンツを挿入することで、フォールバック用のコンテンツを表示することができる。

レガシーブラウザへの対応方法

<canvas width="640" height="480"> <!-- フォールバック用のコンテンツを挿入 --></canvas>

01

CreateJSは、Flashデベロッパーとして著名なGrant Skinner氏が中心となり、オープンソースソフトウェアとして開発が行われている。MITライセンスのため、商用でも無償で利用できる

CreateJS

HTML5のcanvas要素にコンテンツを描画するための仕組みを提供するライブラリ

トゥイーンアニメーションを作成するライブラリ

音声を再生するためのライブラリ

画像、音声、JavaScriptなどの外部ファイルのプリロードを実現するライブラリ

EaselJS

TweenJS

SoundJS

PreloadJS

HTML 5オーサリング編

006 Web Designing Library

HTML5 Canvasドキュメントを使ってFlash ProからHTML5コンテンツをパブリッシュする際、これまでのFlashドキュメントとは異なる点がある。ここでは、それらの注意点を紹介しよう。

SECTION2 パブリッシュ時の注意点

HTML5 Canvasドキュメントのタブには、末尾に「(Canvas)」と表示される

01 ドキュメントの種類

　Flash Pro CC 13.1からの新機能として、

Flashドキュメントとは別にHTML5コンテン

ツ用として「HTML5 Canvasドキュメント」が

加わった。ただ、拡張子が今までのFlashドキュ

メントと同じ「.fla」となっている。

　HTML5 Canvasドキュメントの場合、Flash

Proでドキュメントを開くと、ファイル名を表

示するタブの末尾に「(Canvas)」と表示される

（01）。

パブリッシュ設定

　F lash Pro CC 13.1以 前は、Toolk i t for

CreateJSパネルとして提供されていたHTML5

コンテンツの書き出し設定は、パブリッシュ設

定の「JavaScript/HTML」という項目に移動し

ている（02）。この項目は、HTML5 Canvasド

キュメントのみで表示される。各設定の内容

は02を参考にしてほしい※1。

ライブラリアイテムの書き出し

　Flash ProでSWFを出力する際は、コンテン

ツに使っていないライブラリアイテム（シンボ

ルやサウンドなど）は自動的に省略して書き出

されるようになっている。

　しかし、HTML5 Canvasドキュメントでは、

すべてのライブラリアイテムが書き出される

（03）。そのため、ファイルサイズ削減のために

も、使用していないアイテムはすべてライブラ

リから削除しておくのがいいだろう※2。

Flash Pro（13.1.0.226）が書き出すCreateJSの各ライブラリのバージョンは、EaselJS 0.7.0、TweenJS 0.5.0、SoundJS 0.5.0、PreloadJS 0.4.0となっている。しかし、CreateJSでは各ライブラリにおいて0.0.1～0.0.2のバージョンアップが行われている。Flash Pro側のアップデートでサポートしない限り、CreateJSの新バージョンにもとづく記述、書き出しはできないので注意してほしい。書籍やネットなどにあるCreateJSの情報を参考にするときは、Flash Proでサポートしているバージョンと、それらの情報がもとにしているバージョンを確認するようにしよう。

Flash Professionalが書き出すCreateJSライブラリのバージョン

02出力ファイル 出力されるメイン JavaScriptファイル

のパス。タイムラインをループ

メインタイムラインをループ再生するかどうか。

HTMLをパブリッシュ

JavaScriptを呼び出すためのHTMLファイルを出力するかどうか。

アセット書き出しオプション

各種類のアセットを書き出すかどうかと、書き出す際のパス。

イメージ 画像ファイルの書き出しと、そのパス。サウンド 音声ファイルの書き出しと、そのパス。

CreateJS

CreateJSライブラリのファイルの書き出しと、そのパス。「ホストのライブラリ」をチェックした場合は、ここにチェックが入っていても無視される。

03

ステージ上には何も置いていない、つまり、ライブラリにある画像ファイルや音声ファイルはメインタイムラインで使っていないが、パブリッシュするとそれぞれ imagesフォルダと soundsフォルダ内にライブラリアイテムが書き出されている

JavaScript名前空間 JavaScriptに出力される際の名前空間。シンボル シンボルの名前空間。イメージ 画像ファイルの名前空間。CreateJS CreateJSライブラリの名前空間。

詳細 -

ホストのライブラリ

CreateJSライブラリをCDNから読み込むかどうか。

非表示レイヤーを含める

Flash Pro上の非表示レイヤーを書き出すかどうか。

シェイプをコンパクト化

シェイプを描画するための JavaScriptを圧縮するかどうか。

各フレームでの境界を取得

タイムラインに置いたシンボルのインスタンスに境界領域のプロパティ（frameBoundsプロパティ）を持たせるかどうか。

※2　 2015年2月にリリースされた Flash Professional CC 2014（14.2.0.20）からは、HTML5 Canvasドキュメントの仕様が変更されている。これまでライブラリ内のアイテムは基本的にすべてパブリッシュ時に書き出されていたが、このバージョンからはステージやペーストボード、シンボルに配置していないものは書き出されなくなった。スクリプトから直接利用するアセットでも、必ず一つはステージなどに置く必要があるので注意しよう。

※1　 本書発行時点の最新版であるFlash Professional CC 2015（15.0.1.179）では、パブリッシュ設定に以下の2点の変更が加わっている。　1）「HTMLをパブリッシュ」→「HTMLを上書き」に名称変更。　2）「アセット書き出しオプション」のイメージに「すべてのビットマップとスプライトシートを書き出し」および「スプレッドシートの最大サイズ」を追加（複数のビットマップをスプライトシートにまとめて書き出す機能）。

Web Designing Library 007

JavaScriptの記述場所

　Flashコンテンツの場合、ActionScriptの

記述方法として、フレームアクション、または

外部クラスの2通りがある。HTML5コンテン

ツの場合も同様に、JavaScriptをアクション

パネル（01）、または外部ファイル（02）に記述

することができる。

　2つの方法を併用することもできるが、メイ

ンの処理はどちらかに集中させた方が、コード

をメンテナンスしやすくなるだろう。

シンボルやインスタンスの参照

　メインタイムラインから見ると、ライブラリ

内のシンボルはその名前空間（デフォルトで

は lib）の下にシンボル名で格納されている。そ

のため、たとえば「button」というシンボルが

ある場合、そのシンボルを参照するには「lib.

button」というパスになる（03）。

　このとき、シンボル名に2バイト文字が使わ

れている場合、そのまま JavaScriptコードとし

て出力されてしまうため、原則として半角英数

字で名前を付けよう。

　同様に、タイムラインに配置されたインスタ

ンスは、インスタンス名で参照できる。ただし、

ActionScript 3.0と違い、「this」を省略せずに

書く必要があるので注意しよう（03）。なお、外

部ファイルから参照する場合は、02のように

exportRootを使ったパスとなる。

開始フレーム番号の違い

　ActionScriptの場合、タイムラインのフレー

ム番号は、「1」から始まる。ところがHTML5

Canvasドキュメントの場合は、「0」から始ま

る仕様になっている。そのため、先頭のフレー

ムに移動するためには、JavaScriptでは「this.

gotoAndStop(0);」と記述する。なお、これは

CreateJSの仕様によるものだ。

FlashW

eb Desig

nin

g Labo

ratory

Lab.

アクションパネルにJavaScriptを記述したところ。処理の内容は、ボタンをクリックすると、ブラウザのコンソールに「clickHandler」という文字列を出力する、というもの（サンプル：section3_a.fla）

01

Flash Pro CC 13.1からはアクションパネルに JavaScriptを記述できるようになり、さらにコードヒントも表示されるようになった。ここでは、JavaScriptを記述する際の注意点を紹介しよう。

SECTION3 JavaScriptを記述する際の注意点

2014年1月16日、CreateJS公式ブログにて「WebGLのサポート」が発表された（http://blog.createjs.com/

webgl-support-easeljs/）。これまでのCanvasによるレンダリング（画面描画）に加えて、WebGLも用いることができるようになり、併用も可能ということだ。公式ブログによれば、そのパフォーマンスはCanvasと比べて6～50

倍の速さとのこと。　※なお、2014年12月17日にリリースされたEaselJS 0.8.0からWebGLを利用することができるようになった。

CreateJSがWebGLをサポート

03　サンプルスクリプト（section3_c.fla）

// シンボルを参照console.log(lib.button);

// インスタンスを参照console.log(this.myButton);

02　サンプルスクリプト（section3_bのmain.js）

var canvas, stage, exportRoot;

function clickHandler() { console.log("clickHandler");}

function init() { canvas = document.getElementById("canvas"); exportRoot = new lib.section3_b();

stage = new createjs.Stage(canvas); stage.addChild(exportRoot); stage.update();

createjs.Ticker.setFPS(lib.properties.fps); //createjs.Ticker.addEventListener("tick", stage);

exportRoot.myButton.addEventListener("click", clickHandler);}

01と同様の処理を外部ファイル（main.js）に記述した例。外部ファイルの作成手順は、まずアクションパネルにスクリプトを記述しない状態でパブリッシュする。次に、出力されたHTMLファイル内に記述されている（外部読み込みされていない）JavaScriptコードをmain.jsに移植する（オレンジ色部分）。そのコードの init()メソッドが初期化メソッドとなるので、同メソッド内の最後尾にメインタイムラインで実行したいスクリプトを記述する。このとき、「exportRoot」という変数がメインタイムラインにあたり、メインタイムラインに置かれたインスタンスはこの変数の下に格納される。なお、このままではパブリッシュの度に書き換えたHTMLが上書きされる（移植した部分が追加される）ので、パブリッシュ設定で「HTMLをパブリッシュ」項目をオフにしておく

HTML 5オーサリング編