デジタルでビジネスを最適化TRENDMARKETINGTECHNOLOGYVARIOUSft懐かしのFlashを使ってSVGアニメーションを作ってみた話FlashFrontendsvgSVGアニメTECHNOLOGY2019.08.28弊社サービス「BaseStation」のLP制作にあたり、ロゴデザインを一新しました。そのロゴマークをジングル的にアニメーションさせてみたいと思い制作してみました、その過程を今回はご紹介します。簡単なアニメーションを制作する時のツールでまず思いつくのがAfterEffectでした。ロゴマークのジングルアニメをムービー(mp4など)で作っても、動画の中で使用するにはもちろん問題ないのですが、そのロゴだけをサイト上で表示したい時に、使い勝手が悪いなぁと思いjsやcssで表現できないかなと考えました。それであれば’SVGアニメが最適かなと思い色々調べたのですが、今回アニメさせたいロゴマークは形の拡大縮小やtweenだけのアニメではなく、pathを制御したりmaskを使用したかったり、まずコードベースで書ける代物ではないな、、と。パスを使ったアニメーションならFlashがあるじゃないか!と、ここ数年とんと使っていなかったFlashでSVGアニメが作れる方法を試してみました。Flashってなんですか?そんな昔のソフト知りません。enterでプレビュー・・・するとブラウザに切り替わり、ロゴマークのアニメが再生されました!なんか、汚いんですけど。プレピューだからかな、、パブリッシュしてみます。ふむふむ、htmlとjsファイルができました。imageフォルダも、、、ってpngじゃーん、パスでトゥイーン作ってるのに書き出したらpngになっています。htmlをブラウザで開き、canvas部分をみてみます。canvasをscaleプロパティで拡大縮小してみます。それでは書き出されたpngをsvgにしてみたらどうだろう。Illsutratorでトレースしてsvgで書き出して、pngに差し替えてみます。ダメですね、表示されません。Exporter」という、AnimeteからSVGが吐き出せるエクステンションがあるじゃないですか。エクステンションを追加してみます。Canvasで作成したタイムラインをコピーして、プラットフォームタイプをAS3で作成したタイムラインにペーストします。いざ、パブリッシュ・・・遅っそ。単体のsvgファイルになるんですね。扱いやすくていいじゃないですかー・・・って、タイムラインの一番下の1レイヤーしか書き出されてないじゃん。その1レイヤーでさえ途中オブジェクトのトゥイーンがうまく書き出されてなくて一瞬消えたりしています。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」のバージョンに入れ替えてみました。するとどうでしょう、ちゃんと「アクション」パネルが使えるじゃないですか。めでたく意図するものが作成できました。#0dbd97;}このこのように、cssでカラーや大きさを変更できるので、デザインや配置に合わせて使いまわしができます。正章フロントエンジニアハイベロシティでフロントエンドを中心にお仕事をしております。PC歴25年オーバーのオジサン(見た目はオジサンじゃないよ)ですが日々の技術革新に頑張ってついていきたいと思います。Commerceファンコマースファンとのダイレクトなコミュニケーションを実現して「感動体験」をビジネスに結びつけます。Marketingデジタルマーケティング未来を創造する価値ある「顧客体験」を実現する仕組みづくりを提案。Emailを入力してください。