AnimateCC(Flash)で「Animated SVG Exporter」を使ってSVGアニメーションを作成した話

公開日:2019-03-24
最終更新:2019-05-26

2019/5/26 追記
・AnimateCCの使用バージョンについて訂正しました。
・キーフレームアニメーション以外でも作成できる場合があるので追記しました。

はじめに

知人のポートフォリオサイトにちょっとしたアニメーションを入れることになり、
今回はAnimateCCで作成することにしました。

AnimateCCはHTML5のcanvasで動作するアニメーションを作成してくれますが、
作成されるjsファイルがES6形式ではないため、
WebpackやVue.jsなどに組み込むのが思ったより大変なことになりました。。

もっと手軽に使いたい!!
と思い調べていくと、AnimateCCはSVGアニメーションが書き出せるとのこと。
今回はこれを使うことにしました。

やりたいこと

  • 星画像をクリック→星が弾けるアニメーション→画面遷移
  • Vue CLIで作成したプロジェクトにSVGアニメーションを入れる

今回つくったものはコチラ

困ったこと

「Snap.svg Animator」が使えない?

AnimateCCでSVGアニメーションを作る場合、
拡張機能の「Snap.svg Animator」を使用する方法が多いのですが、
2019年3月時点で拡張機能が使えなくなったのか、インストールができませんでした。。

そこで、同じくSVGアニメーションを書き出してくれる
Animated SVG Exporter」を使用します。

拡張機能の導入から書き出しまで

1「Animated SVG Exporter」をインストール
上記リンクから「Animated SVG Exporter」をインストールします。

2 AnimateCCを起動
※CC2015がオススメ!
AnimateCCを起動し、上部の[ウインドウ]→[エクステンション]を選ぶと、「SVG Animation」が追加されています。

こちらをクリックすると、小窓が開いて「Animated SVG Exporter」が使えるようになります。
また、「Animated SVG Exporter」を使用時はCC2015がオススメです。
なぜかというとCC2019ではアニメーションがうまく書き出せなかったから。。。
CC2015だと正しく動作するようです。ちなみにCC2015はAnimateではなくFlash Professionalになります。
※2019/5/26 追記
Adobeのブログにて、最新メジャーバージョンの2つ前までがダウンロード可能となることが発表されました。
これによりCC2015は使用できなくなります。
最新バージョンでも正常に書き出せる場合がありますのでお試しください。(クラシックトゥイーンで作成した場合にて確認)

3 アニメーションのflaファイルを開く
アニメーション作成ではCCのバージョンはいくつでも大丈夫です。
ただし、以下の設定・作業が必要です。

  • 新規作成時の種類はActionScript3.0にすること
  • 最終的にキーフレームアニメーションにすること
    ※2019/5/26 追記
    キーフレームアニメーションにしなくても正常に作成できる場合があります。(クラシックトゥイーンで作成した場合にて確認)
    通常通り作成してうまく書き出せない場合はキーフレームアニメーションもお試しください。

4 SVGアニメーションの書き出し
「Animated SVG Exporter」の「Output Format」のtypeが「Animated SVG」になっていることを確認しましょう。
OKであれば「Export」ボタンを押すと、flaファイルと同じ名前のsvgファイルが書き出されます。

「Animated SVG Exporter」の下のほうにある「Preview」では、
更新ボタンを押すことで、書き出されたSVGアニメーションが確認できます。

Vue.jsに組み込む

  • 星画像をクリック→星が弾けるアニメーション→画面遷移

VueファイルにSVGアニメーションを組み込みます。
今回は以下のような作りにしました。

  • Vue Routerを導入し、最初のページに星画像(SVG形式)とSVGアニメーションを配置
  • 画面クリックでSVGアニメーションが始まり、アニメーション終了後に$router.pushで画面遷移

コードについて

画面をクリックしたらSVGアニメーションが書かれたコンポーネントを表示します。
objectタグからsvgファイルを呼ぶこともできますが、読み込みに時間がかかるためコンポーネントに直書きすることにしました。
また、SVGアニメーションの終了を検知する方法がわからなかったので、setTimeoutで遷移先に飛ばしています。

以下は星画像とSVGアニメーションを配置するコード。

<template>  
  <div class="pages-top" @click="animation">  
    <div class="svg-anim-area star" v-if="!isClick">  
      <img :src="require('../assets/svg/star.svg')" width="400" height="400">  
    </div>  
    <components-top-effect  
      class="svg-anim-area topeffect"  
      v-if="isClick"  
    >  
    </components-top-effect>  
  </div>  
</template>  

<script scoped>  
import ComponentsTopEffect from '../components/TopEffect.vue';  

export default {  
  components: {  
    ComponentsTopEffect  
  },  
  data () {  
    return {  
      isClick: false  
    };  
  },  
  methods: {  
    animation: function () {  
      if (!this.isClick) {  
        this.isClick = true;  
        setTimeout(() => {  
          this.$router.push('/test');  
        }, 200);  
      }  
    }  
  }  
};  
</script>  

以下はSVGアニメーションを配置したコンポーネント(TopEffect.vue)。
書き出されたSVGファイルをほぼコピペして置いています。
ただし、書き出されたSVGファイルの最初には
<?xml version="1.0" encoding="utf-8"?>とあるので、ここだけ除いてください。
また、flaファイルではステージサイズを100x100にしていましたが、組み込み時に小さかったので
width="400" height="400" viewBox="0 0 100 100"と入れて大きさを調整しました。

<template>  
    <div id="components-top-effect">  
      <svg id="topEffect" image-rendering="auto" baseProfile="basic" version="1.1" x="0px" y="0px" width="400" height="400" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
      ...  
      </svg>  
    </div>  
</template>  

できたもの

コチラ

所感

ちょっと無理やりなところもありますが、やりたいことを実現できたのでよかったです。
SVGアニメーションなら小さめにつくっても大きさ調整できてしかもキレイなのでありがたいですね。
これを使ってwebサイト内に気軽にアニメーション入れていきたいです!

参考サイト

拡張機能Snap.svg Animatorを使ってAnimate CCからSVGを書き出そう
FlashでSVGアニメ

記事が少しでもいいなと思ったらクラップを送ってみよう!
54
+1
@jskymの技術ブログ

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする