AnimateCC html5 fileAPIとの連携
javascriptを使う案件が入ったのだがjavascriptなんて昔ちょっと触っただけで
正直いい思い出も無い。ろくでも無い使われ方しか昔してなかったのに。。
とりあえず昔ちょっと触ったtoolkitで書きだそうかと思いとりあえず手を出してみたが
Animateはもう少しちゃんとhtml5 canvasを書き出せる様になっており使い勝手が
非常にいい（昔に比べれば）多分adobeでもっと他にいいツール出来てんだろうけど
javascriptベタ書きなんて出来ないしそんな時間も無いのでAnimateにて書きだす。
依頼内容：ファイル読み込みボタンでローカルPC内の画像を読み込みそれをjavascriptの中のコンテンツに読み込みたい。htmlコンテンツは全てAnimateCCでつくらざるをえない。
とりあえず考えるべき事はまずファイル読み込みボタン。
これはちょろい。
<input type="file">
こんなタグ書いてりゃ勝手にファイル読み込みボタンが完成する。
fileAPIで出来るらしい。素晴らしい。これflash今出来ないんだよね。
あとはこれで読み込んだ要素を表示させる対象を指定すればいい。
しかしここからが問題。
AnimateCCで制作したhtml5コンテンツは何か分からないが通常のhtml5と違って
なんだかひと固まりっぽくなっており、確かにjsファイルとhtmlが書き出される。
だがhtmlファイルを見てもなんとも書きだした部分が塊でありいまいちベタ書きや
他のツールで制作したパーツと親和性が少ない。（ように思う）
前述のファイル読み込みボタンをベタ書きでhtmlに書いたが、このボタンとAnimateで
書きだしたコンテンツがどうも別々に出てる感満載。
AnimateCCのhtml5コンテンツは全て読み込み終わった後に表示されるが通常のhtmlコンテンツはパーツごとに読み込まれるのでAnimateコンテンツはとにかく表示が遅い。
その時差たるや、なんだ、どうした・・？壊れてるのかな？？と思うほどだ。
そしてもちろんファイル読み込みボタンで読み込んだ内容をAnimate側に表示させるのは一手間かかる。
AnimateCCのコンテンツ内の
root.hoge.fuga.test という場所にあるMCに表示させる場合は
AnimateCCの外側のhtmlコンテンツに
exportRoot.hoge.fuga.test=・・・みたいな感じで書く必要がある。
要はrootがexportRootに変わるだけだ。
これで外側からAninateCCの内部コンテンツにアクセスする方法が分かった。
では読み込んだ素材を内部の表示させてみよう。
//AnimateCCで書き出したhtmlコンテンツを開いて書き足す。
var file_image = document.getElementById('file-image');//ID変数に。
file_image.addEventListener('change', selectReadfile, false);//イベントリスナ登録。
//ファイルが選択されたら読み込む
function selectReadfile(e) {
var file = e.target.files;
var reader = new FileReader();
//dataURL形式でファイルを読み込む
reader.readAsDataURL(file[0]);
//ファイルの読込が終了した時の処理
reader.onload = function(){
var image = new Image();
image.src = reader.result;
var bitmap = new createjs.Bitmap(image);
exportRoot.main_f.phot_i.addChild(bitmap);//↑AnimateCCコンテンツのmain_f.phot_iにaddChildして表示させる。
}
}
//ボタンの方の処理ここまで
こんな感じ。
あとはhtmlのbody内に
<input id="file-image" accept="image/*" type="file">でもかいてりゃ動く。
ただ動くは動くんだけどどうしてもファイル読み込みボタンをAnimateCCの内部に入れたいんだがどうしても入らない。。
AnimateCCコンテンツで内部にhtmlを書ければ上手くいくのかもしれないがCSSしか出来ないし。。
というわけで出来るといえば出来るが無理矢理な感じですね。という連携でした。
