懐かしの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