楽に楽しそうなWebコンテンツを作れないか探って見ようと思い立ったので、
旧Flashで名を馳せたAnimateCCを普段のワークフローに組み込めないか模索してみました。
ちなみに、普段のワークフローはgulpやwebpackでES6やらをbrowserifyする系のワークフローです。
１．デフォルトのデータをカスタマイズ
作ったもののプレビューは、Chromeなどの外部ブラウザで基本的にプレビューします。
なので、デバッグやらAPI連携やらをやろうとしたら、吐き出されるHTMLやらJSやらを眺めて、
自力で改変しないと思い通りに組み込めません。
HTMLのテンプレートをみつめる
基本的に吐き出されるjsは一個だけで、[プロジェクト名].jsというものだけです。
つくった ムービークリップとかシンボル類をスクリプトで制御するならば、基本的にはActionの編集パネルからしか制御することは出来ません。
アニメーションやちょっとインタラクションがあるだけで完結する
広告バナーのようなコンテンツなら、そのまんまがが一番ラクかもしれないです。
以下が、吐き出されるテンプレートのデフォルトのもの。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="authoring-tool" content="$VERSION">
<title>$TITLE</title>
<!-- write your code here -->
$CENTER_STYLE
$CREATEJS_LIBRARY_SCRIPTS
$ANIMATE_CC_SCRIPTS
$SCRIPT_START
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("$CANVAS_ID");
anim_container = document.getElementById("$ANIM_CONTAINER_ID");
dom_overlay_container = document.getElementById("dom_overlay_container");
$CREATE_LOADER
$LOAD_MANIFEST
$PRELOAD_ASSETS
}
$HANDLE_FILE_LOAD_START
$HANDLE_FILE_LOAD_BODY
$HANDLE_FILE_LOAD_END
$HANDLE_COMPLETE_START
//生成されたプロジェクトのjsをココで実行
$CREATE_STAGE
//Tickerの設定
$START_ANIMATION
//Retinaサポートとか画面リサイズとか
$RESP_HIDPI
$HANDLE_COMPLETE_END
$PLAYSOUND
$SCRIPT_END
<!-- write your code here -->
</head>
<body onload="init();" style="margin:0px;">
<div id="$ANIM_CONTAINER_ID" style="background-color:$BG; width:$WTpx; height:$HTpx">
<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="position: absolute; display: $CANVAS_DISP; background-color:$BG;"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:$WTpx; height:$HTpx; position: absolute; left: 0px; top: 0px; display: $CANVAS_DISP;">
</div>
</div>
$PRELOADER_DIV
</body>
</html>
$が置換される関係か、$がつくものはすべて潰されます。
仕方がないのでjQuery("body").css({top: 0;});こんなかんじでjQueryは触ります。
でも正直このテンプレートをパブリッシュする度に調整して読み込み直すのは正直しんどいと思います。
このテンプレートはあくまでもプレビュー用に徹して、
後述するjsファイルのコンポーネント化をして、既存のプロジェクトに取り入れる方が取り回しがいい気がします。
jsのテンプレートを見つめる
イマドキ、上のhtmlみたいなグローバル汚染バリバリなのも気持ち悪い話で、
できれば、生成されたCreateJS用のスクリプトををコンポーネントとして扱えれば便利ですよね。
以下が、生成されるjsファイルのテンプレートです。
Actionパネル内のthisのスコープはlibに置き換えられて、そのなかにシンボルが格納されるようです。
(function (lib, img, cjs, ss, an) {
/*
いろいろ生成されたコードがずらずらと。
*/
})(lib = lib||{}, images = images||{}, createjs = createjs||{}, ss = ss||{}, AdobeAn = AdobeAn||{});
var lib, images, createjs, ss, AdobeAn;
上のvarでグローバルに宣言されているにくい奴らを、commonjsでexportできれば、
Animateで作ったアニメーションの素材をWebサイトに組み込みやすくなりますね。（CreateJS必須だけど。）
吐き出される前のjsのテンプレートが、Animate.app内のどこかに
あるかなと思って、ちょっと探したんですけど、
どうやら見当たらないので、吐き出された jsの文字列を置換するスクリプトををつくりましょうか。
置換の方法は色々あるとは思いますが、ぼくはES6で書きたかったので、browserify-replaceを使いました。
[
{
from: "var libs, images, createjs, ss, AdobeAn;",
to: ""
}, {
from: "(function (lib, img, cjs, ss, an) {",
to: "module.exports = function (lib, img, cjs, ss, an) {"
}, {
from: "})(libs = libs||{}, images = images||{}, createjs = createjs||{}, ss = ss||{}, AdobeAn = AdobeAn||{});",
to: " return { lib: lib, img: img, cjs: cjs, ss: ss, an: an };}"
}
]
置換用の設定ファイルはこんなかんじになります。
以下が、置換されたあとのスクリプトです。
export.default = function (lib, img, cjs, ss, an) {
/*
いろいろ生成されたコードがずらずらと。
*/
return { lib: lib, img: img, cjs: cjs, ss: ss, an: an }
}
すっきりですね。 これで、スコープは守られるでしょう。
import Flscript from "path/to/flscript.js";
FlScript(lib, img, cjs, ss, an);
こんな感じで呼び出してあげましょう。
-
libのなかに、シンボルのインスタンスやらが格納されている -
imagesは画像のImageオブジェクトが入ってる -
createjsはCreateJS -
ssはスプライトシートのpackerな情報 -
AdobeAnは何も入ってなかった。おそらくメタデータ入れる箱かな？
注意しなきゃいけないのは、プリロードする予定のアセットファイルは、htmlの方から読み込んで、このjsに渡す仕組みみたい。
だから、ちゃんとimagesとかssはデータ読み込んで渡してあげたほうが吉。
このへんのベスト・プラクティスはもうちょっと研究します。
あとは、先程のhtmlに吐き出されるscriptをそのまま、普段書いているように書き直すだけです。