2013年2月15日に開催された「CreateJS勉強会」のセッション「Toolkit for CreateJSで作るリッチコンテンツ」の発表資料です。

1. Toolkit for CreateJSで作る
リッチコンテンツ
池田 泰延
株式会社 ICS 代表/インタラクティブディレクター
筑波大学 非常勤講師

2. スマートフォン
リッチコンテンツの制作 アプリ開発
サイトの制作
(Flash / HTML5) (Adobe AIR)
(HTML5)
書籍執筆
ユーザー
講師・セミナー 雑誌連載 技術検証
コミュニティー
(自著、WebDesiging等)

4. http://ics-web.jp/lab/archives/93

5. 1. Toolkit for CreateJSとは
2. 想定されるワークフロー
Agenda 3. 実現できる機能
4. 最適化手法と注意点

6. Toolkit for CreateJSとは

7. Toolkit for CreateJSはFlash Proの拡張機能
Toolkit for CreateJS .zxp
(無償提供)
Flash Professional CS6

8. Toolkit for CreateJSパネル
Flash Proで作成したコンテンツの出力機能

9.  Flash Pro上で作成したコンテンツを
CreateJSコンテンツ開発に利用できる拡張機能
 変換ツールではなく、
CreateJS開発の補助ツールの位置づけ
Toolkit for
CreateJS

10. 制御スクリプトを開発
JS
JS JS
グラフィック・ HTML5コンテンツを作成
アニメーションを作成

11. 想定されるワークフロー

12. JavaScriptもCSS3もコードだらけ…

13. 動きを実装する直感的な方法 – タイムライン

14.  JavaScriptのスキルを持ちあわせていない
デザイナーでもCreateJS開発に参加できる
Workflow
HTML5って言われても
コード書けないし…

15. プログラマー
制御スクリプトを開発
デザイナー
JS
JS JS
グラフィック・ HTML5コンテンツを作成
アニメーションを作成

16. プログラマー
制御スクリプトを開発
デザイナー
Flashコンテンツ/
グラフィック・
AIRアプリを作成
アニメーションを作成

17. Toolkit for CreateJSで出力されるファイル群

18. Toolkit for CreateJSで
出力されるファイル

19. JavaScript による
タイムラインアニメーション インスタンスプロパティ
タイムラインスクリプティング
ベクターグラフィックス サウンド

20. // 使い方
var score = new lib.Score();
score.textScore.text = 9999;
JS

21. Toolkit for CreateJSでコンテンツ開発

22. Demos

24. // タッチ操作も可能にする(iOS,Android向け)
Script for if (createjs.Touch.isSupported()) {
touch device createjs.Touch.enable(stage);
}

25. Toolkit for CreateJSのテクニック

26. 処理負荷のため
ビットマップキャッシュ 避けたい機能
高速化
 フィルター
 ブレンドモード

27. スクリプトを意識した
出力設定 タイムラインの整理が必須
 トゥイーンを含むレイヤー
注意点 に複数のシンボルが置けな
 名前空間の共有 い
 シンボルは英数字に  カスタムイージング/IK/マ
スク(シェイプ以外)/モー
ションガイド使えない

28. ご清聴ありがとうございました
ご質問等はメールもしくは Twitter までお気軽にご連絡ください。
株式会社ICS
池田 泰延
ikeda@ics-web.jp
Copyright © 2013 ICS INC. All rights reserved.