デザイン

Flintoイントロアニメーションの作り方【応用編】

Flintoを使ったイントロアニメーションの作り方を説明をします。
この記事を見れば下記の動画ようなイントロアニメーションを手軽に作れるようになります。これが理解できれば表現できるアニメーションの幅も広がるのでぜひトライしてみてください。

事前準備

Flintoデータのサンプルを用意しました、こちらからダウンロードをお願いします。
また、Flintoの基礎が知りたい方は下記の記事を参照してください。

イントロアニメーションの作成

では、早速イントロアニメーションを作成していきます。

1.グループ化

まず、アニメーションを作成する要素をグループ化します。
要素を選択して(command+G)

2.アニメーション変化前の設定

ここではアニメーションの変化前の状態を作っていきます。

キャッチコピー部分の設定

キャッチコピー部分の設定をします。

  1. キャッチコピーのレイヤーを選択。
  2. Y軸を「422」に設定。
  3. 不透明度を「0%」に設定。

灰色と青色のオブジェクトの設定

灰色と青色のオブジェクトの設定をします。

  1. まず、灰色のオブジェクトを選択。(注意:グループではなくRectangleを選択)
  2. サイズ設定の幅を「0」に設定。
  3. 青色のオブジェクトも同じように設定。

3.ビヘイビアを追加

ビヘイビアの設定をしていきます。ビヘイビアとはオブジェクトの動作のことです。

  1. 1.で作成したグループを選択。
  2. 「ビヘイビア追加」を選択し、その後、新規ビヘイビアを選択。

4.新規状態を追加

プラスマークを押し、新規状態を追加します。

5.アニメーションの変化の設定

ここからアニメーションの変化を設定していきます。

キャッチコピーの設定

キャッチコピー部分のアニメーションを設定します。

  1. キャッチコピーのレイヤーを選択。
  2. Y軸を「322」に設定。
  3. 不透明度「100%」に設定。
  4. クラシックを選択。
  5. 時間を「500ms」に設定。
  6. 遅延を「1000ms」に設定。

時間=アニメーション時間
遅延=アニメーションの開始を設定した秒数分を遅らせる設定。

灰色のオブジェクトの設定

灰色のオブジェクトのアニメーションを設定します。

  1. 灰色のオブジェクトを選択。(注意:グループではなくRectangleを選択)
  2. サイズの幅を「1000」に設定。
  3. クラシックを選択。
  4. 時間を「500ms」に設定。
  5. 遅延を「500ms」に設定。

青色のオブジェクトの設定

青色のオブジェクトのアニメーションを設定します。

  1. 青色のオブジェクトを選択。(注意:グループではなくRectangleを選択)
  2. サイズの幅を「1000」に設定。
  3. クラシックを選択。
  4. 時間を「500ms」に設定。

6.タイマーリンクの設定

ここでは作成したアニメーションがしっかり動作するように、どういう条件でアニメーションが発火するのかを設定します。今回はタイマーリンクという設定で、表示されてから何秒後にアニメーションが開始するか設定します。

  1. 「初期状態」を選択。
  2. タイマーリンクを選択。
  3. タイムアウトを「0ms」に設定。
  4. ターゲットを押し、プルダウンメニューから「新規状態」を選択。

7.保存

「保存して閉じる」を押します。

8.プレビューで確認

「プレビュー」を押してアニメーションを確認します。

下記の動画と同じ動きになっていたら完了です。

イントロアニメーションの説明は以上になります。

イントロアニメーションまとめ

イントロアニメーションを考える際は、事前にどんなアニメーションをしたいのか明確に考えておくとスムーズに作成できます。
今回作成した内容で数値をいじってみたり、まだ使っていない機能を試してみると理解も深まると思います。まずは慣れることが大事なので色々作成してみましょう

今回はこんな感じで終わろうと思います。最後まで読んでいただきありがとうございます。
次回はスクロールアニメーションに関しての記事を書くので読んでいただけると嬉しいです。

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です