Web技術トピック&コラム

Design Topic 2014.09.04 (Thu)

Adobe Flashアニメーション制作のHow to

スマホ環境で再生されないなどの理由で、Flashの出番は激減しましたが、弊社では、動画制作、アプリ開発で多用しているので、簡単なFlashアニメーションのノウハウ公開します。(元々は、社内用のマニュアルで制作したものですが。)

画像の書き出し

書き出す方法はいくつかあります。

  • フォトショップでpngで書き出す
  • イラレでswf形式で書き出す
  • イラレでオブジェクトをコピーしてフラッシュでペースト

昔は、データ容量も考慮する必要がありましたが、今はそこまで気にすることもないので、基本的にはpng形式で書き出す形がベストだと思います。

ただ、イラレから書き出したデータは「ベクターデータ」なので、拡大しても画質が荒れないという利点もあ ります。逆に欠点としては、グラデーションなどが正しく表示されない、パスが複雑なデータはアニメーショ ンの処理が遅くなるなどのがあります。
時と場合によっては、イラレからの「ベクターデータ」の利用もすべきでしょう。

データをFlashに読み込む

「ステージに読み込み(Ctrl+R)」でフラッシュにpngデータを読み込みます。
読み込んだ画像は、F8でムービクリップ化します。

  • ※右クリックからの「レイヤーに配分」複数オブジェクトを1オブジェクト1レイヤーに自動で振り分けてくれます。

読み込んだ画像は「スムージング」化

ライブラリのpng画像を右クリック「プロパティ」で、「スムージング」をONにしておくとよいです。ONにすることによって回転・拡大縮小しても、画像が滑らかに表示されます。

  • ※逆に動かす必要がないオブジェクトはOFFにしておいた方がくっきり綺麗に表示されます。
  • ※png画像をまとめて選択して、「プロパティ」を選択すれば、一括して変更できます。

CS6以降、一括して変更できるようになりました。以前は、1つずつ変更が必要だったので、大変でした…。

ステージ上に配置

ステージ上にレイアウト通りに画像を配置していきます。
ポイントなのが、配置の座標(X,Y)の数値を小数点をつけないことです。
例えば、適当にドラッグして配置すると座標は、(X120.5 Y85.7)とかになります。
これをプロパティの「位置とサイズ」から(X120 Y85)のように小数点を消します
小数点がついていると、わずかですが画像がぼやけてしまいます。

アニメーション作業

動く絵本や童謡の場合は、先にナレーションやBGMを配置して、全体の尺の流れを作ります。
それぞれのシーンの尺に合わせて、アニメーションをさせます。
ユーザーを飽きさせないように間を埋めるアニメーション手段は下記などがあります。

  • 全体のズームアップ、ズームダウン
  • 全体のズームアップ後の左もしくは右にスクロール(パン)
  • カットイン(アップ画像にパッと切り替える)
  • ※また印象に残したいシーンでは「フィルター」機能の「ぼかし」などをオブジェクトにかけて、フェードイン させるとよいでしょう。
  • ※Flashでアニメーションさせる設定には3種類あります。
  • モーショントゥイーン
    CS5から採用された基本的なアニメーション設定。
  • シェイプトゥイーン
    フラッシュ内で描画されたベクターデータのアニメーション設定。
    扱いは難しいが、うまく使えば丸から四角へ変形させたりできます。
  • クラシックトゥイーン
    CS4以前の基本的なアニメーション設定。

個人的には昔からFlashを扱っていたこともあり、「クラシックトゥイーン」を使用しています。

多深層のムービークリップ アニメの基礎

ムービークリップ アニメの中に入れ子でムービークリップ アニメをつけると、複雑な動きを制御できます。

ルート階層のムービークリップ:シーン全体を横にスライドする動き

図:シーン全体を横にスライドする動き

2階層目のムービークリップ:キャラ全体が上下にジャンプする動き

図:キャラ全体が上下にジャンプする動き

3階層目のムービークリップ:キャラの各パーツ

図:キャラの各パーツ

4階層目のムービークリップ:手を振る動き、頭を振る動きなど

図:手を振る動き、頭を振る動きなど

  • ※アニメーションさせた後、位置を変更したい場合、「複数フレームを編集」というタイムラインウインドウ の下にあるボタンを押して、範囲を選択した後、オブジェクトを移動させます。

実際のサンプルアニメーション

Adobe Flash Player を取得

Web技術トピック&コラムの一覧へ