JavaScript
Animate
AnimateCC

AnimateCCで生成したファイルの画像をbase64化する方法


概要

ゲームの広告だがそのゲームの一部を疑似体験できる、プレイアブルアドという代物を実装することになった。

アプリ上のwebviewで表示されるので、ターゲットブラウザはsafariとchrome。

通常のhtml,css,jsでイケるのだが、複雑なことになると工数かかりそうだなーと思っていたがAdobe AnimateCCという持て余しまくっているツールのことを思い出したので、それで作ってみた。快適快適。

が、とある広告プラットフォームの入稿のフォーマットは単一htmlのみ。

画像のパスをbase64にすれば良いだけの話がいたくハマったので、解決策をここに記す。


間違い

animteCCから書き出されたjsにこんな記載があります。

lib.properties = {

id: 'CBE7D0B014C34055B50EB7B1A2F1A211',
width: 640,
height: 1136,
fps: 24,
color: "#FFFFFF",
opacity: 1.00,
manifest: [
{src:"images/test_atlas_.png?1551178733007", id:"test_atlas_"}
],
preloads: []
};

これだけ見ると、srcの中身をbase64化したものに変えるだけで良いと思うが、全然動きません。

理由は、裏でPreloadJSが動いているから。

animateCCは基本的にCreateJSにおんぶにだっこなので、マニフェスト内の画像はPreloadJSによって事前ロードされます。

なので、base64をhtml内のimgタグに書き、jsでそいつを読み込んであげてanimate内の画像管理部分に紐づけてあげる、までを自前でやる必要があります。


htmlに追記する

html内にimgタグでbase64を書いちゃいましょう。

<img id="test_atlas_" style="display:none" width="2048" height="2048" title="" alt="" src="data:image/png;base64,iVBORw0K...">

canvasの下あたりにimgタグを追加します。display:noneにしておくことを忘れず。

idは、上で紹介したmanifestのidと同じ名前にしましょう。


jsを改造する


animateでエクスポートしたjsに変数を追記

最後のほうで、グローバル変数を定義している部分があるので、createjs, AdobeAn,に続き、「images」を追加します。

})(createjs = createjs||{}, AdobeAn = AdobeAn||{});

var createjs, AdobeAn, images;


htmlのインラインjsでpreloadの記載を修正

init()の上からすぐに見つかると思うので、この5行をコメントアウトします。

// var loader = new createjs.LoadQueue(false);

// loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
// loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
// var lib=comp.getLibrary();
// loader.loadManifest(lib.properties.manifest);

そして、下記を追加します。

images変数を初期化し、htmlにべた書きしたbase64の画像と、manifestのidを紐づけています。

images = images||{};

var manifest = lib.properties.manifest;
for (var i=0, l=manifest.length; i<l; i++) {
var id = manifest[i].id;
var img = document.getElementById(id);
if (img != null) {
images[id] = img;
}
}
handleComplete(comp);


もうちょい修正

loaderの記述のすぐ下のほうに、handleCompleteという関数があります。

修正前はloaderのcompleteイベントも一緒に渡していたのですが、loader使わないので引数を修正します。

//function handleComplete(evt, comp) {

function handleComplete(comp) {

さらにすぐ下のほう、この一文もいらないのでコメントアウト。

// var queue = evt.target;

最後です。さらにすぐ下のほう。for文でloaderから画像の本体を引っ張ってくる部分を、loaderではなく自前で用意したimagesに置き換えてあげます。

for(i=0; i<ssMetadata.length; i++) {

// ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [images[ssMetadata[i].name]], "frames": ssMetadata[i].frames} )
}


終わり

これで画像をソース内に入れ込むことができました!

cdnから読んでるcreateJSもインラインに含めてしまえば、立派な入稿用単一htmlが完成しました!

プレイアブルアドの実装を考えている方の参考になれば幸いです。ニッチすぎる!!!!

現場からは以上です。

参考(これしかなかった)

https://www.reddit.com/r/createjs/comments/4dfldb/how_do_i_use_base24_instead_of_external_library/