1. Adobe Edge Animateと
CreateJSを演出連携してみる
アイデア
•ワンフットシーバス
田中正吾
1

2. 自己紹介
自己紹介
2

3. 自己紹介
田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。
以後、FLASH制作を中心にインタラク
ティブコンテンツを主に行い現在に至る。
最近はソーシャルゲーム制作界隈で
JavaScriptやHTML5アニメーション、
スマートフォン演出制作の
ワークフロー改善に関わったりしています。
3

4. 自己紹介
細々と技術ブログ書いてます。
http://ｗｗｗ.1ft-seabass.jp/memo/
Flash/CreateJS/Swiffy/EdgeAnimate/
JavaScript/自動処理 などなど…
4

5. 早速連携してみる
早速連携してみる
5

6. 早速連携してみる – デモ
まずはデモから
6

7. 早速連携してみる – デモ
全体・テキスト部分はEdgeAnimate
中央のアニメ部分はCreateJS
EdgeAnimate
CreateJS
7

8. 早速連携してみる – デモ
• 今回はテキスト周りに強いEdgeAnimateと組み合わせ
て、FlashIDEの恩恵を得つつ細かなアニメーションが
できるToolkit for CreateJSを組み合わせてみた。
細かなアニメなら
まかせて！
テキストは得意！
8

9. 早速連携してみる – デモ
• 今回はテキスト周りに強いEdgeAnimateと組み合わせ
て、FlashIDEの恩恵を得つつ細かなアニメーションが
できるToolkit for CreateJSを組み合わせてみた。
•
使いどころによっては効果を発揮しそう。
– 例えば、キャラクターが細かくランダムに動くような箇所はCreateJS
に任せるといった使い方。
– EdgeAnimateはFlashと比べるとIDEが発展途上です。Flashほど思
い通りに作れるとは、まだいえません。細かなアニメーションを試行
錯誤に時間がかかります。（個人的感想です。）
9

10. 早速連携してみる – 仕組み
仕組み
10

11. 早速連携してみる – 仕組み
EdgeAnimateのエレメントはdivででき
ているので、canvasを配置。そこに
CreateJSを描画させる。
Canvas
DIV
EdgeAnimate
Canvas
DIV
DIV
EdgeAnimate
EdgeAnimate
11

12. 早速連携してみる – CreateJS部分
Toolkit for CreateJSで
アニメ部分は書きだす。
12

13. 早速連携してみる – EdgeAnimate部分
EdgeはCreateJS用のエレメントを配置
13

14. 早速連携してみる – EdgeAnimate部分
CreateJS用のエレメント(DIV)を配置
DIV
EdgeAnimate
EdgeAnimate
14

15. 早速連携してみる – 連携させるには
連携させるには
15

16. 早速連携してみる – 連携部分
• ファイル配置について
• EdgeAnimateのHTMLにCreateJSライブラリの呼び
出し部分を移植
• EdgeAnimate内のトリガーにCanvas生成・
CreateJS生成を移植
Canvas
Canvas
DIV
DIV
EdgeAnimate
EdgeAnimate
16

17. 早速連携してみる – 連携部分 – ファイル配置
ファイル配置
17

18. 早速連携してみる – 連携部分 – ファイル配置
EdgeAnimeteの構造の中に
CreateJSのファイル群を入れる
CreateJS
EdgeAnimate
18

19. 早速連携してみる – 連携部分 – EdgeAnimateのHTMLに移植
EdgeAnimateのHTMLに
CreateJS関連の呼び出しコードも移植。
移植
19

20. 早速連携してみる – 連携部分 – EdgeAnimateのHTMLに移植
EdgeAnimateのHTMLに
CreateJS関連の呼び出しコードも移植。
20

21. 早速連携してみる – 連携部分 – EdgeAnimateのHTMLに移植
EdgeAnimateのHTMLに
CreateJS関連の呼び出しコードも移植。
移植
21

22. 早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
つづいてEdgeAnimateのトリガーへ
CreateJSの生成コードも移植。
トリガー
22

23. 早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
トリガーに以下の処理を移植。
Canvas生成
CreateJS生成
(HTMLで生成されたものを移植)
initスタート
23

24. 早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
トリガーにcanvas生成を書く。
24

25. 早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
つづいてCreateJSの生成コードも移植。
Edgeのパスに
合わせて調整
25

26. 早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
つづいてCreateJSの生成コードも移植。
26

27. 早速連携してみる – できあがり
できあがり
27

28. 今回紹介したソースについて
今回紹介したソースについて
28

29. 今回紹介した内容について
• 今回紹介した内容は自分のブログに上げます
http://www.1ft-seabass.jp/memo/
29

30. ありがとうございました！
ありがとうございました！
30