• 株式会社AliveCastはプライバシーマークを取得してます。
  • 福岡市インキュベート認定マーク福岡県子育て応援宣言登録マーク
  • 株式会社AliveCastは国の認定を受けた異分野連携新事業(新連携事業)に取り組んでいます。
  • FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • JTBビジネスイノベーターズ Travel・Fintechビジネスコンテスト 最優秀賞 受賞
  • AEON Financial Service Innovation 2017 特別賞 受賞
  • 第17回MIT-VFJビジネスプランニングクリニック&コンテスト 正会員特別賞・マイクロソフト賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業
  • 特許第6372856号
  • 特許第6316654号

伝わるデザインついて、瞬時に判断していくための知識を書き綴ります。デザイン探索

2020年10月26日(月曜日)  (村本 友梨)

Adobe AnimaiteによるGIFアニメーション作成

皆さんこんにちは。
クリエイターの村本です。

今回、サイトで使用するGIFアニメーションを作成するために
「Adobe Animate」を利用しました。
これまでにもGIFアニメーション自体は作成したことはあったのですが
「Animate」の利用は初めてだったので、
今後のために手順や注意点をまとめておきたいと思います。

---------------------------------
■ 前提
・簡単な「イラストアニメーション」を作りたい方
・Illustrator、Photoshopは使ったことあるけどAnimaiteを使うのは初めてな方向け

---------------------------------
■ 作業全体の流れ
[XD]…Adobe XD
[AI]…Adobe Illustrator
[AN]…Adobe Animaite

0.Animateのヘルプから確認できる『実践チュートリアル』をみて基本を学ぶ

1.[XD]カンプのイラストを、書き出す画像ごとにAIファイルに変換
2.[AI]でイラストの調整
  ※この時、動かしたいオブジェクトと、動かさないオブジェクトをグループ分けしておく
3.[AN]でアニメーションを作成し、gif形式で画像を書き出す
  →詳細は下記参照
4.画像のファイルサイズを圧縮する
  ※アニメーションGIFは、動きが複雑になるとサイズが大きくなってしまいます。
   アニメーションGIF用のファイル圧縮サイトなどの利用がおすすめです。
5.HTMLでjpg、pngと同様に実装する

---------------------------------
■ Adobe AnimaiteによるGIFアニメーション作成

1.[AN]を起動し新規作成する。
2.「ファイル>(ステージに)読み込み」をクリックして、
  作成する元画像の[AI]ファイルのデータを取り込む。
3.タイムライン上でアニメーションの設定を行う。

  ① 動かしたいオブジェクトだけを別レイヤーにしておく
  ② 動かすレイヤーの初期フレームを選択して、オブジェクトを初期状態に調整する
  ③ 調整したオブジェクトを選択して「シンボル」にする
  ④ オブジェクトを選択してアニメーションの基準点を設定する
    (これを忘れると、上手く動かないので注意)
  ⑤ 全レイヤーの終了位置を選択して「キーフレーム」を作成する
    (初期状態と同じ設定のオブジェクトがコピーされる)
    ※動きをループさせることを意識しておく
  ⑥ タイムラインの真ん中を選択して「キーフレーム」を作成する
    この時、アニメーションの動きに合わせてオブジェクトを移動させる
  ⑦ 作成したキーフレームの間を選択して「トゥイーン」を選択し、エフェクトを設定する
    ※キーフレーム間のアニメーションパターンを設定する
  ⑧必要な場合、マスク用のレイヤーを作成する
   (通常通りレイヤーを追加し、右クリックで「マスク」を選択すると
    マスク用のレイヤーになる)

4.「ファイル>書き出し>アニメーションGIFを書き出し」をクリックして画像として書き出す。
  ※画像に透過部分がある場合
   ステージの色=透過部分と判断されるようです。
   [AN]はステージの色がデフォルト#FFF(白色)になっています。
   ですので、イラスト自体に白色を使っていると、その部分まで透過で書き出されてしまいます。
   透過にしたくないときは、ステージの色を変更することで解決できます。

--------------------------------
■まとめ
まずは、Animateのヘルプから確認できる『実践チュートリアル』を試してみてください。
Adobe Illustratorの基本が使える方なら、なんとなく理解できます。
あとは、実際に使ってみてアニメーション特有のツールに慣れるだけです。

私も今回初めて使ってみましたが、2時間ほどで
チュートリアルの確認と、画像の書き出しまでできました。
アニメーションが作れると、表現の幅も広がります。
ツールを使えば思ったより簡単にできるので、興味がある方は試してみてはどうでしょうか。

AliveCastIPのみ表示されます

OK

管理側

残り

javascript css html VIEW側

php matchルーチン