After Effectで作るオリジナルローディングアニメーション
Webサイトで別ページに移動するとき、アニメーションが入ると、ページを読み込んでいることがわかりますよね？ローディングアニメーションは、サイト離脱を防ぐ、一つの手段になります。
CXG DESIGNのWebサイトでもアニメーションが流れます。以前のブログでも紹介しましたが、オリジナルのアニメーションを作成しました。
これは、主にAdobe After Effectで制作しました。今回はこのローディングアニメーションの作り方について、After Effectの簡単な使い方とともに説明していきたいと思います。
1.ロゴデータを用意する。
まず、イラストレーターのロゴデータをAfter Effectで読み込み、動画編集出来るデータにします。
画面サイズをアニメーションの出力サイズにし、アルファベットのCXGをそれぞれ別レイヤーに移動し尚且つ、色をブラックとグレーに分けます。このままAIファイルで保存します。
2.After Effectで新規プロジェクトを作成し、データを読み込む。
After Effectを開き、ファイル＞新規＞新規プロジェクトをクリックし、プロジェクト名を入力し、任意の場所に保存する。画面中央の新規コンポジションをクリックし、サイズ(AIと同じ。幅:500px 高さ:500px)、フレームレート(1秒間のフレーム数。今回は、24に設定)、秒数(2秒。デュレーションに200)を入力。
ファイル>読み込み＞ファイルをクリックし、1.で作成したAIデータをフッテージで読み込みを選択。次にコンポジションで読み込み、レイヤーサイズを選択し読み込みます。フォルダに、レイヤーごと分かれてAIデータが読み込まれました。
3.タイムラインにデータを読み込む。
下にあるタイムラインに、フォルダごとをドラッグしてデータを配置します。上にブラックのCXG、下にグレーのCXGデータが配置されるようにします。すべて中央に寄って配置されているので、CとGを左右に移動します。この時、ブラックとグレーのC、Gがずれないように、レイヤーを同時に選択して移動します。
次にブラックのCXGレイヤーを編集＞複製で複製し、グレーの下に移動します。
4.放射状ワイプをかける。
まず上の6レイヤーを選択し、エフェクト＞トランジッション＞放射状をクリックします。これで放射状ワイプが使えるようになります。
ブラックのCXGのCレイヤーの＞をクリックし、エフェクト＞放射状ワイプの＞をクリックします。タイムラインが０:00:00:00であることを確認し、変換終了の左にあるストップウォッチマークをクリック。次に、タイムラインに100を入力し、０:00:01:00(1秒)になっていることを確認し、ストップウォッチをクリック。変換終了のパーセンテージを100%にします。0°になっているワイプ開始位置を30°にズラしたいので、開始角度を0x+30.0°にします。これで、ブラックCのワイプが完成です。同じように0から1秒でブラックのX、Gをそれぞれ開始角度220°、120°でワイプをかけます。
次にグレーのワイプを1から2秒でかけます。開始角度はC、X、Gそれぞれブラックと同じように30°、220°、120°にします。
これでアニメーションの完成です。ループアニメーションになっているか、スペースキーを押して再生し確認します。
5.Adobe Media EncoderでGIFアニメーションに書き出し。
ファイル＞書き出し＞Adobe Media Encoder キューに追加をクリック。Media Encoderが起動ます。右側にAEで作成したファイルが表示されるので、書き出し形式をアニメーションGIF、透明度のあるアニメーションGIFで書き出ます。
これでGIFアニメーションの完成です。
6.WordPressのプラグインLoading Pageでローディング設定。
ざっくりですが、プラグインの設定方法を説明します。WordPressのプラグインからLoading Page with Loading Scrfeenをダウンロード、有効化します。
ダッシュボードの設定から、Loading Pageを選択します。設定画面の中程にある、Select the logo image (or any other image)からBrowseボタンを押します。メディアライブラリが開くので、そこに制作したGIFアニメーションをドラッグして、選択します。
Select background colorで、背景色を設定。Display loading percentのチェックボックスを外し、パーセンテージのカウンターの表示を消します。
CXG DESIGNでは、オリジナルのローディングアニメーション作成に対応しております。Webサイト制作に関するお問い合わせは、コンタクトフォームよりお問い合わせください。
