Adobe Animateを初めて使ってみました。懐かしのFlashのような感じで、このアプリは好きかも。去年ぐらいにAfter Effectsをやってみましたが、アニメーションを作ろうとするとちょっと無理矢理感があってあまり馴染めなかったのですが、Animateは馴染めそうな気配。
とりあえず、制作したアニメーションをSVGアニメーションとして出力して、WordPressに貼り付けて表示することができたので、備忘録として残しておきます。
新規ドキュメントは、html5 canvasを選択しました。
アニメーションを作成。
これをパブリッシュすると、htmlとjsファイル、imagesフォルダにpngが作成されました。ただ、このままだと、jsファイルがpngを読み込むので、SVGのアニメーションではなく、pngのアニメーションになってしまう。そこで、パブリッシュ設定を変更しました。
「イメージアセットを書き出す」のチェックを外しました。これで、SVGのアニメーションになりました。あと、レスポンシブにしたかったので、色々チェックを入れたり外したり試行錯誤しました。
WordPressへの貼付けは、パブリッシュでできたhtmlの中身を使用しました。htmlの<head>内の<script>をコピーして、<head>に記述を追加するプラグインで挿入。htmlの<body>内の記述を、投稿へ書き込みました。それと、JSを「wp-content/uploads/canvas」に設置しました。
ちょっとてこずった部分は、<head>への記述内容。
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script><script>の1行目はそのままでOK。2行目はJSを設置した場所に変更が必要。
<script src="https://hoge.hoge.com/wp-content/uploads/canvas/hoge.js"></script>3行目から20行ぐらいはそのままコピペ。
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
.
.
.
fnStartAnimation();
}
</script>で、この次に以下を追加で記述。
<script>
window.onload = function()
{
init();
};
</script>
上記は、htmlの<body>に付いている<body onload="init();">を投稿部分に追加できないので、かわりに<head>に記述しています。
スマホでは、レスポンシブが効いて縮小されて表示できたのですが、どうしてもアニメーションが右に少しオーバーフローしてしまうのをCSSで調整しました。
初めてのアプリで、WEB制作は本業ではなく、結構てこずりましたが思った結果が得られ、我ながら「凄くない？」ってなりました。
