イトウ先生のTipsnoteFlash CS6・Toolkit for CreateJS その1

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 11月・12月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 Flash CS6の新機能 〜 Toolkit for CreateJS:その1 〜 】 

今週は、Flash CS6の新機能、Toolkit for CreateJSについてご紹介します。
このToolkit for CreateJS(オープンソースのCreateJS JavaScriptライブラリ)は、Flash CS6の拡張キットにあたるもので、Flash CS6で作成したアニメーションから、HTML5やJavaScriptの書き出しを可能にするものです。ご存知の通り、iPhone非対応のswfですが、このToolkit for CreateJSを使用することで、Flashからcanvasの中で動作するJavaScriptの書き出しができるようになります!

さっそくやってみよう!

Toolkit for CreateJSは、ベクター、ビットマップ、クラシックトゥイーン、サウンド、JavaScriptタイムラインスクリプトなど、アニメ・イラストの大部分をサポートしており、1クリックでステージ上やライブラリ内のコンテンツをHTML5とJavaScriptに書き出します。あとは、書き出したソースをコピーペーストするだけです。
まずは、このToolkit for CreateJSという拡張キットをダウンロードする必要があります。以下のサイトからダウンロード可能です。ダウンロード後、Adobe Extension Manager CS6が起動するため、承認してインストールし、Flashを起動します。

Flash Professional CS6 / Toolkit for CreateJS
http://www.adobe.com/jp/products/flash/flash-to-html5.html

Flashの基本トレーニングを受講したことがある方は見たことがあるかと思いますが、今回は、トゥイーンは何も設定していない、以下のような4カットのキーフレームアニメーションを書き出します。

FLCS6_blog008

まず、Toolkit for CreateJSをインストールすると、ウィンドウメニュー→その他のパネル→Toolkit for CreateJSというメニューが新設されるため、表示しておきます。Toolkit for CreateJSパネルの「設定の編集」をクリックすると、アセットパスやJavaScriptのnamespaceの設定か可能です。

FLCS6_blog007

FLCS6_blog010

Flashのファイルをflaで保存しておき、Toolkit for CreateJSパネルの「パブリッシュ」をクリックすると、HTMLファイルとJavaScriptファイルを書き出します。

FLCS6_blog012

HTMLソースを見てみる

書き出したソースは以下のようになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CreateJS export from 001cat</title>

<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.5.0.min.js"></script>
<script src="001cat.js"></script>

<script>
var canvas, stage, exportRoot;

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

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

createjs.Ticker.setFPS(24);
createjs.Ticker.addListener(stage);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="550" height="400" style="background-color:#ffffff"></canvas>
</body>
</html>
headの中に、Flashから書き出したJavaScriptが外部ファイルとして参照されており、HTML5でのマークアップで、アニメーション部分はcanvasタグとして書き出されているのがわかります。
canvasタグには、id="canvas"を設定し、headの最下部にあるscriptに、function init()で、getElementById("canvas")で取得、bodyタグにonloadで読み出す、という仕組みです。アニメーションの書き出しですので、Flashから書き出したJavaScriptソースは相当なボリューム(372行)があるためこのブログで解釈するのは控えますが、canvasで動作するこれだけのJavaScriptを1クリックで書き出すこのToolkit for CreateJSはぜひインストールして使いたいですね。

以下は、実際にFlashで書き出したHTML5のソースとJavaScriptを取り込んだものです。このブログのページをiPhoneやiPad、アンドロイドで見てみてください。Flashで作成したアニメがこれまでのSWFとしてではなく、JavaScriptのcanvasアニメとして動作しているのが確認できるはずです。 これで、Flashで作成したファイルも、スマートフォンでも見ることができるようになりますね!



次回は、このToolkit for CreateJSをもう少し掘り下げてご説明したいと思います。

 【 Flash CS6の新機能 〜 Toolkit for CreateJS:その2 〜 】

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |