Flashがとうとう検索からも除外されるということで、
AnimateCC(旧Flash)の活用方法を考えてみました。
今回のレシピ
- PixiJS(v5) & Animate CC & Nuxt.js
- Lottie & Animate CC & Nuxt.js
PixiJS(v5) & Animate CC & Nuxt.js
１つ目はAnimate CCからタイムラインアニメーションをスプライトシートとして書き出し・利用する方法です。
Animate CCから最適化されたスプライトシートとjsonファイル、Canvasに描画するのにPixiJS(v5)をつかうと、
スプライトの座標を気にすることもなく実装できます。
素材編
- AnimateCCで素材を用意します。
1.stageにmcという名前をつけたMovieClipに配置。
2.タイムラインアニメーションを作成します。
3.スプライトシートとして書き出す。
インスタンスを選択して、右クリックから「スプライトシートを作成」を選択すると
スプライトシートを作成のダイアログがでますので、任意の場所に書き出します。
今回はNuxt.jsを使うので/assets/下に書き出します。
jsonファイルと.pngが書き出されます。（今回はファイル名mc.jsonとしています。）
ソースコード編
<template>
<div>
<canvas ref="mycanvas" width="600" height="600"></canvas>
</div>
</template>
<script>
import * as PIXI from 'pixi.js'
export default {
props:{
option:Object,
sprite:String
},
mounted() {
const canvas = this.$refs.mycanvas;
const app = new PIXI.Application({
width : canvas.offsetWidth,
height : canvas.offsetHeight,
view : canvas,
antialias : false,
transparent : true
});
const container = new PIXI.Container();
app.stage.addChild(container);
const baseTexture = PIXI.BaseTexture.from(this.sprite);
const spritesheet = new PIXI.Spritesheet(baseTexture, this.option);
spritesheet.parse(() => {
const textures = Object.keys(spritesheet.textures).map((t) => spritesheet.textures[t]);
const animatedSprite = new PIXI.AnimatedSprite(textures);
animatedSprite.play();
app.stage.addChild(animatedSprite);
})
}
}
</script>
Pages側
<template>
<div class="container">
<PixiWp :option="pixiData" :sprite="pixiImg" />
</div>
</template>
<script>
import PixiWp from '~/components/PixiWp'
//Pixjs用
import pixiData from '~/assets/mc.json';//AnimateCCから書き出したjsonファイル
import pixiImg from '~/assets/mc.png';//AnimateCCから書き出したスプライトシート
export default {
components: {
PixiWp
},
data(){
return {
pixiData :pixiData,
pixiImg :pixiImg
}
}
}
</script>
めっちゃ簡単に作成できました。🎉
※ループが変な瞬間があるのはQiitaに乗せるためにgif化したためです。
Lottie & Animate CC
つぎはLottieを使いAnimate CCからタイムラインアニメーションをjsonとして書き出して、
SVGでタイムラインアニメーションを作成する方法です。
Lottieとは
Adobe After Effectsのから書き出したjsonファイルをもとに、簡単にSVGアニメーションを使用できるようにするライブラリです。After Effectsから書き出す利用する方法はいろんな方がブログやQiitaなどに紹介されていますので割愛します。
今回はAnimate CCから書き出してみます。LottieをAnimateCCから書き出すためにAnimate-Lottie-Pluginを使います。
Animate-Lottie-Pluginを有効にする手順
- ExtensionManagerをインストール
https://install.anastasiy.com/ - Lottie Pluginをダウンロード
https://github.com/Jaswant99/Animate-Lottie-Plugin/tree/master/Lottie - ExtensionManager を使って Lottie Plugin ZXP をインストール
- Animate CCを起動しカスタムプラットフォームからLottie(Beta)プラットフォームを選択
AnimateCC素材編
1.stage直下にタイムラインアニメーションを作成する。
AfterEffectのLottieを使うときと同じように作成。
作成のポイントは下記
* シェイプレイヤーであること
* MovieClipやグラフィックシンボルはつかわない
* ステージ直下に配置する
* トゥイーンはシェイプトゥイーンのみ
2.パブリッシュする
ファイルメニューやショートカットからパブリッシュすると
jsonファイルが書き出されます。素材の準備は以上です。
ソースコード編
Page側
<template>
<div class="container">
<LottieWp :option="lottieData" />
</div>
</template>
<script>
import LottieWp from '~/components/LottieWp'
import lottieData from '~/assets/lottiedata.json';//Animate-Lottieから書き出したjsonファイル
export default {
components: {
LottieWp
},
data(){
return {
lottieData :lottieData
}
}
}
</script>
コンポーネント側
<template>
<div>
<div ref="animationConatainer" class="svgWp" />
</div>
</template>
<script>
import lottie from 'lottie-web'
export default {
data(){
return{
lottiePlayer:null
}
},
props:{
option:Object
},
mounted() {
const animationContainer = this.$refs.animationConatainer
this.lottiePlayer = lottie.loadAnimation({
container: animationContainer,
renderer:"svg",
loop:true,
autopla:false,
animationData:this.option
})
},
}
</script>
書き出し結果はこちらです。
一見うまくいっているように思えましたが、
よくみると顔が壊れてしまいました。😭
左:AnimateCCからパプリッシュしたもの
右:タイムライン上のもの
Animate-Lottie-Pluginからのjson書き出しでは
svgが崩れてしまうことがあるようです、
その他にも解析できないタイムライン構成の場合Animate CCが落ちてしまうこともありました。
Animate CCからのLottie書き出しは今後のアップデートに期待し
おとなしくAfterEffectsで作成したほうがよさそうです。
最後に
ありがとうFlash。👍
FORK Advent Calendar 2019
7日目 前の日の記事のタイトル @izanari
9日目 Vuetifyのdatepickerを使って【和暦】＋【年度/月】pickerを作ってみた @BigFly