風景を動かしてサイトに奥行きと躍動感をプラス

このチュートリアルでは、Edge Animateを使用して、南アフリカへの観光誘致を題材としたアニメーションバナーを作成する方法を紹介します。HTML、CSS、およびJavaScriptベースのグラフィックスやアニメーションを作ります。つまり、作成したアニメーションは、デスクトップ上でもiPadを含むモバイルデバイス上でも、あらゆる最新のブラウザーで動作するということです。

開始前に、このチュートリアルのアセットをダウンロードしたことと、最新バージョンのEdge Animateがインストール済みであることをご確認ください。まずは、Edge Animateで新規プロジェクトを作成します。そして背景用のグラフィックを読み込んで配置し、前景の草にぼかし効果を適用します。このチュートリアルおよびプロジェクトの作成者はPaul Traniです。

プロジェクトを作成
  • シェイプを描く(1:46)
  • グラフィックを読み込む(3:06)
  • フィルターを追加する(5:21)

テキストの入力とスタイル設定

テキストとフォントの使用
  • テキストを追加する(0:23)
  • テキストのサイズを設定する(0:41)
  • Edge Web Fontsを使用する(1:03)

見栄えの良いバナーになったら、次はテキストの追加です。サイズやカラーといったテキスト要素のプロパティを編集してテキストの書式を調整する方法や、Edge Web Fontsを使用して魅力的な(無償の)Webフォントを選択する方法を紹介します。

プロジェクトに動きをプラス

アニメーションを追加
  • タイムラインを使用する(0:36)
  • 複数のアイテムを動かす(2:09)
  • フィルターをアニメーション化する(4:53)

魅力的な印象のバナーができていますが、完全に静止したままです。ここでは、タイムラインを使用してバナーにアニメーションを簡単に追加する方法をお見せします。Edge Animateは、キーフレームやトランジションなどの必要なアイテムを自動的に追加してアニメーションを作成します。

ここで作成するアニメーションには、パララックス効果と呼ばれる、前景のアイテムが背景のアイテムよりも速く動くように見せるビジュアルエフェクトの一種を採用します。また、モーションだけではなく、要素のフィルターやプロパティをアニメーション化する方法を紹介します。そして最後に、いわゆるイージングを追加し、より滑らかで自然に見えるアニメーションに仕上げます。

アニメーションはこれで完成。Edge Animateのさらなる機能を紹介

滑らかに動く素敵なアニメーションが出来上がりました。引き続き、 ユーザーがインタラクティブに操作できるバナーの作成方法を紹介する続編チュートリアルをぜひお試しください。Edge Animateに用意されているシンプルな定義済みの関数を用いて、ユーザーのマウス操作に反応するアクションを要素に追加する方法をご覧に入れます。また、クリックや操作が可能なアイテムであることを閲覧者に示すために、要素上に配置したカーソルの見栄えを変化させる方法も紹介します。