createjs jp study #4 20130726
TRANSCRIPT
1
Adobe Edge AnimateとCreateJSを演出連携してみるアイデア•ワンフットシーバス 田中正吾
2
自己紹介
自己紹介
3
自己紹介
田中正吾(たなかせいご)屋号:ワンフットシーバス
2004年よりフリーランス。
以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。
最近はソーシャルゲーム制作界隈で
JavaScriptやHTML5アニメーション、
スマートフォン演出制作の
ワークフロー改善に関わったりしています。
4
自己紹介
細々と技術ブログ書いてます。http://www.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
早速連携してみる – 連携部分 – EdgeAnimateのHTMLに移植
EdgeAnimateのHTMLに
CreateJS関連の呼び出しコードも移植。
21
早速連携してみる – 連携部分 – EdgeAnimateのHTMLに移植
EdgeAnimateのHTMLに
CreateJS関連の呼び出しコードも移植。
移植
22
早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
つづいてEdgeAnimateのトリガーへ
CreateJSの生成コードも移植。
トリガー
23
早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
トリガーに以下の処理を移植。
Canvas生成
CreateJS生成
(HTMLで生成されたものを移植)
initスタート
24
早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
トリガーにcanvas生成を書く。
25
早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
つづいてCreateJSの生成コードも移植。
Edgeのパスに
合わせて調整
26
早速連携してみる – 連携部分 – EdgeAnimateのトリガーに移植
つづいてCreateJSの生成コードも移植。
27
早速連携してみる – できあがり
できあがり
28
今回紹介したソースについて
今回紹介したソースについて
29
今回紹介した内容について
• 今回紹介した内容は自分のブログに上げます
http://www.1ft-seabass.jp/memo/
30
ありがとうございました!
ありがとうございました!