createjs jp study #4 20130726

1

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

2

自己紹介

自己紹介

3

自己紹介

田中正吾（たなかせいご）屋号：ワンフットシーバス

2004年よりフリーランス。

以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。

最近はソーシャルゲーム制作界隈で

JavaScriptやHTML5アニメーション、

スマートフォン演出制作の

ワークフロー改善に関わったりしています。

4

自己紹介

細々と技術ブログ書いてます。http://ｗｗｗ.1ft-seabass.jp/memo/

Flash/CreateJS/Swiffy/EdgeAnimate/

JavaScript/自動処理などなど…

5

早速連携してみる

早速連携してみる

6

早速連携してみる – デモ

まずはデモから

7


全体・テキスト部分はEdgeAnimate

中央のアニメ部分はCreateJS

CreateJS

EdgeAnimate

8


• 今回はテキスト周りに強いEdgeAnimateと組み合わせて、FlashIDEの恩恵を得つつ細かなアニメーションができるToolkit for CreateJSを組み合わせてみた。

テキストは得意！細かなアニメなら

まかせて！

9


• 今回はテキスト周りに強いEdgeAnimateと組み合わせて、FlashIDEの恩恵を得つつ細かなアニメーションができるToolkit for CreateJSを組み合わせてみた。

• 使いどころによっては効果を発揮しそう。

– 例えば、キャラクターが細かくランダムに動くような箇所はCreateJSに任せるといった使い方。

– EdgeAnimateはFlashと比べるとIDEが発展途上です。Flashほど思い通りに作れるとは、まだいえません。細かなアニメーションを試行錯誤に時間がかかります。（個人的感想です。）

10

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

仕組み

11

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

EdgeAnimateのエレメントはdivでできているので、canvasを配置。そこにCreateJSを描画させる。

DIV

Canvas

EdgeAnimate

DIV

EdgeAnimate

DIV

Canvas

EdgeAnimate

12

早速連携してみる – CreateJS部分

Toolkit for CreateJSで

アニメ部分は書きだす。

13

早速連携してみる – EdgeAnimate部分

EdgeはCreateJS用のエレメントを配置

14

早速連携してみる – EdgeAnimate部分

CreateJS用のエレメント(DIV)を配置

DIV

EdgeAnimateEdgeAnimate

15

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

連携させるには

16

早速連携してみる – 連携部分

• ファイル配置について

• EdgeAnimateのHTMLにCreateJSライブラリの呼び出し部分を移植

• EdgeAnimate内のトリガーにCanvas生成・CreateJS生成を移植

DIV

Canvas

EdgeAnimate

DIV

Canvas

EdgeAnimate

17

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

ファイル配置

18

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

EdgeAnimeteの構造の中に

CreateJSのファイル群を入れる

CreateJS

EdgeAnimate

19

早速連携してみる – 連携部分 – EdgeAnimateのHTMLに移植

EdgeAnimateのHTMLに

CreateJS関連の呼び出しコードも移植。

移植

20




21




移植

22

早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植

つづいてEdgeAnimateのトリガーへ

CreateJSの生成コードも移植。

トリガー

23


トリガーに以下の処理を移植。

Canvas生成

CreateJS生成

(HTMLで生成されたものを移植)

initスタート

24


トリガーにcanvas生成を書く。

25


つづいてCreateJSの生成コードも移植。

Edgeのパスに

合わせて調整

26


つづいてCreateJSの生成コードも移植。

27

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

できあがり

28

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

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

29

今回紹介した内容について

• 今回紹介した内容は自分のブログに上げます

http://www.1ft-seabass.jp/memo/

30

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

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

createjs jp study #4 20130726

Education