『眠リ知レズ 夜々 オフィシャルサイト』の制作方法の解説記事も今回でいったん最終回となります。
今回はAnimateCCでの制作の後編として主にAnimateCCで出力したHTML5CanvasのCreateJSでのアニメーション制御方法について説明してきます。
Spineで制作したアニメーションデータの取り込み方法等は前回の記事で解説していますので、そちらをご覧ください。
出力されたHTMLファイルの名称変更
まず、AnimateCCから出力されたHTMLファイル名を変更します。（index.htmlなどに変えると良いかと思います。）
これはAnimateCCで修正を行い、HTML5Canvas書き出しするたびにファイルが上書きされてしまい、追記したコードが削除されるのを回避するためです。
画像追加等ファイル構成を変えた場合の変更は、基本的に書き出されるJSファイルの方に反映されますので、基本的にHTMLファイルは名称変更さえしておけば、AnimateCCで修正を加えても問題なく動作します。
CreateJSでのアニメーション制御
AnimateCCからHTML5Canvasでのパブリッシュ時に自動的に追加されるJSに、実装するアニメーションのコードを追加していきます。
今回はの夜々さんサイトでは基本的に以下のように実装をしています。
(1)アニメーション呼び出し関数追加
fnStartAnimation = function() {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//HTML5Canvasアニメーション設定
startAnimation();
}
パブリッシュ時に出力されたfnStartAnimation関数の中に独自のアニメーション関数[startAnimation()]の呼び出しを追記します。
(2)startAnimation関数の中身
startAnimation関数の中に実装したいアニメーションをCreatJSで記述していきます。
まずAnimateCCで制作したインスタンスと同名の変数を定義し、使用するとわかりやすいかと思います。[mc_marie/mc_leafs 等]
次に上記で定義した変数にAnimateCCで出力したオブジェクトを入れ、アニメーションさせたいプロパティの初期値(位置や透明度等)を設定します。
この際にAnimateCCで出力したタイムライン上のオブジェクトを操作するためには[exportRoot]で設定する必要があるので注意してください。
ex.[mc_leafs = exportRoot.mc_leafs;]
たとえば、Spine連番データ切り替え前のマリーであれば、以下のようにアニメーションを設定しています。
【マリーのアニメーション設定】
初期値として透明度：0、Y軸の位置を別変数に保存後、上方向に50px移動させています。（上からふわっと降ってくる動きにしたいため）
初期値の設定ができたら、実装したいアニメーションのタイミングに合わせてTweenを実行して、アニメーションを追加します。
また、マリーの場合はメインの動きはSpine連番データ[mc_marie_spine]で制作していますので、コールバックで[marie_change]の関数を呼び出して、この中でmc_marie_spineとの切り替え等の処理を実装しています。
上記コードをまとめると以下となります。
//マリーの初期設定
mc_marie = exportRoot.mc_marie;
mc_marie.alpha = 0;
//Y軸位置の設定
mc_marie_base_y = mc_marie.y;
mc_marie.y = mc_marie_base_y - 50;
//マリーのアニメーション設定
createjs.Tween.get(mc_marie)
.wait(7000)
.to({
y: mc_marie_base_y,
alpha: 1
}, 1000, createjs.Ease.backOut )
.call( marie_change);
//コールバック関数[Spineアニメーション切り替え等]
function marie_change() {
createjs.Tween.get(mc_marie)
.to({
alpha: 0
}, 250, createjs.Ease.circIn);
createjs.Tween.get(mc_marie_spine)
.to({
alpha: 1
}, 250, createjs.Ease.circIn);
//mc_leafs(茂み)の伸縮する動きの設定
mc_stretch_updown(mc_leafs, 1000);
}
//上下の小さな伸縮モーション ※{loop:true}：繰り返しのアニメーション設定
function mc_stretch_updown(target_mc, duration) {
createjs.Tween.get(target_mc, {loop:true})
.to({ scaleY: 1.1 }, duration, createjs.Ease.quadOut)
.to({ scaleY: 1.0 }, duration, createjs.Ease.quadIn)
.to({ scaleY: 0.9 }, duration, createjs.Ease.quadOut)
.to({ scaleY: 1.0 }, duration, createjs.Ease.quadIn);
}
アニメーションの方向性としては、個人的にモーショングラフィックス的に比較的早い動きで、動きの流れを見せるアニメーションが好みなので、オブジェクトそれぞれの実行タイミングと速度感を納得いくまで調整し、試行錯誤しながらアニメーションを制作しています。
http://yoyo-x-x-x.com/marie/
またアニメーション制作経験のある方であれば常識的なことかと思いますが、適切なイージングを設定することにより、動きのクオリティは大きく変わります。
アニメーションの動きの考え方やイージングについてICSさんの記事でとても分かりやすく解説されていますので、そちらを参考にされるとかなり勉強になるかと思います！
今回のCreateJSでのアニメーション実装方法のサンプルファイルを制作しましたので、以下GitHubのリポジトリにあげておきます。
※なぜ[FlashProfessional]バージョンのファイルを使用しているのかは、前回記事をご参照ください。
参考にさせていただいたCreateJS関連の記事や書籍リンクも学習用に載せておきます。
www.amazon.co.jp
全4回で説明させていただいた『眠リ知レズ 夜々 オフィシャルサイト』の制作方法については、今回でいったん終了となります。
Spine＋AnimateCCを使用した基本的なWebアニメーションの作り方を説明させていただきましたので、同じようなクリエイティブなコンテンツを作りたい方にとって少しでも参考になれば幸いです(^人^)
もし「何かこの部分はどうやって作っているの？」とか、コメントいただければ追加で解説するかもしれません。
次回からは、現在私が未経験からWebフロントエンドの勉強をし始めたところなので、まずはGit等フロントエンド必須のスキルについて、学んだことを覚書としてまとめていきたいな！と考えています。