懐かしのFlashを使ってSVGアニメーションを作ってみた話

弊社サービス「BaseStation」のLP制作にあたり、ロゴデザインを一新しました。
そのロゴマークをジングル的にアニメーションさせてみたいと思い制作してみました、その過程を今回はご紹介します。

簡単なアニメーションを制作する時のツールでまず思いつくのがAfterEffectでした。
ロゴマークのジングルアニメをムービー(mp4など)で作っても、動画の中で使用するにはもちろん問題ないのですが、
そのロゴだけをサイト上で表示したい時に、使い勝手が悪いなぁと思いjsやcssで表現できないかなと考えました。

それであれば’SVGアニメが最適かなと思い色々調べたのですが、今回アニメさせたいロゴマークは形の拡大縮小やtweenだけのアニメではなく、pathを制御したりmaskを使用したかったり、まずコードベースで書ける代物ではないな、、と。
パスを使ったアニメーションならFlashがあるじゃないか!と、ここ数年とんと使っていなかったFlashでSVGアニメが作れる方法を試してみました。

Adobe Flashってなんですか?

そんな昔のソフト知りません。いまはAnimateっていう名前になってゲームやらHTML5やらiOSなんかに色々書き出せるんだぜっていうことらしいので、早速いにしえの知識を活用しIllsutratorでパスを起こし、Animete(HTML5 Canvasで作成)のステージにペースト、タイムラインでトゥイーンを作成し、⌘ + enterでプレビュー・・・
するとブラウザに切り替わり、ロゴマークのアニメが再生されました!

なんか、汚いんですけど。。

プレピューだからかな、、パブリッシュしてみます。
ふむふむ、htmlとjsファイルができました。imageフォルダも、、、ってpngじゃーん、パスでトゥイーン作ってるのに書き出したらpngになっています。
htmlをブラウザで開き、canvas部分をみてみます。canvasをscaleプロパティで拡大縮小してみます。
うーん、、汚いです。。それでは書き出されたpngをsvgにしてみたらどうだろう。
Illsutratorでトレースしてsvgで書き出して、pngに差し替えてみます。ダメですね、表示されません。

Animated SVG Exporter

さらに調べてみると「Animated SVG Exporter」という、AnimeteからSVGが吐き出せるエクステンションがあるじゃないですか。
早速エクステンションを追加してみます。
こちらは、ドキュメントが「ActionScript3.0」でないといけないようなので、先ほどのHTML5 Canvasで作成したタイムラインをコピーして、プラットフォームタイプをAS3で作成したタイムラインにペーストします。

いざ、パブリッシュ・・・遅っそ。。なるほど単体のsvgファイルになるんですね。
扱いやすくていいじゃないですかー・・・って、タイムラインの一番下の1レイヤーしか書き出されてないじゃん。
しかも、その1レイヤーでさえ途中オブジェクトのトゥイーンがうまく書き出されてなくて一瞬消えたりしています。
うーん、使えないな。。

Snap.svg Animator

さらに調べてみると「Snap.svg Animator」という、ほぼ開発が終了したという代物があるじゃないですか。
なんでも、AdobeからのDLはもうできないようで、Githubから落とすという感じです。
こちらの方の記事を参考に「v1.2」というバージョンをエクステンションに追加してみます。

こんどは、ドキュメントを「SnapSVGAnimator」で作成ということなので、先ほどのActionScript3.0で作成したタイムラインをコピーして、SnapSVGAnimatorで作成したタイムラインにペーストします。

今度はどうでしょう。パブリッシュしてみます。
htmlとjs、あとjsonファイルが書き出されます。なむふむ、jsonにアニメーションのコードが入っているんですね。
おお、綺麗に出来ています!動きもスムーズでなめらか、fpsもjsで後から制御できます。いいですね!

しかし、一つ問題が。
アニメーションがループしてしまいます。ロゴがアニメーションで描かれて、最後にビシッと決まったままにならず、また1から再生してしまいます。
jsで制御できるのかなと、色々調べたのですが、start()やstop()はできるのですが、最終フレームでstop()が出来ません。。

さらに調べていると、こちらの記事を見つけました。
なんとActionScript?が使えるじゃないですか。インタラクティブ(マウスホバーやクリックなど)な制御もScriptで書けるようです。
それなら、タイムラインの最終フレームに「this.stop();」を書けばいいですね。
さっそく、、、あれ、「アクション」パネルが触れません。
先ほどの記事ではキャプチャー付きでアクションパネルにコードを書いている説明があります。なぜでしょう。。

v1.2じゃダメなんです

散々悩んだあげく、もしかしてと思いSnapSVGAnimatorの「v1.2.1」のバージョンに入れ替えてみました。
するとどうでしょう、ちゃんと「アクション」パネルが使えるじゃないですか。
めでたく意図するものが作成できました。SVGなので拡大縮小してもキレイです!

ちなみに、今回ロゴマークを黒(#000)で作りましたが、

// 大きさ
svg {
  transform: scale(.5);
}

// カラー
svg path {
  fill: #0dbd97;
}

このこのように、cssでカラーや大きさを変更できるので、デザインや配置に合わせて使いまわしができます。出来上がりのイメージはこちらです(中心をクリックで再生します)↓

flasherのみなさん、久しぶりにFlash(Animate)を引っ張り出して、サイト作りに活かしてみてはいかがでしょうか?

  • f
  • t
  • p
  • h
  • l
  • n