Edge Animateでコードを使わずにスライダーを作る方法

Pocket

WebサイトでスライダーといえばjQueryの独壇場みたいなもんですよね。プログラミングできる人は、自作したりして自分好みの挙動にすることができますが、なかなかこれが難しい。なんか違うんだよな〜と思いながらプラグインをそのまま使ってる方も多いのではないでしょうか。

そんな、プログラミングよ〜わからん!という方のためにAdobe Edgeを使って簡単にスライダーを作ってみる方法を紹介します。
なんと!Edgeを使えばいっさいコードを書かずに、インスピレーションの掻き立てるままにオシャレでクールなスライダーを自作できるのです。

Edgeのダウンロードとインストール

まずはAdobeの公式サイトからCreativeCloudに登録してソフトをインストールしましょう。

レッスンで練習

ソフトを起動するこんな画面が出てきます。

初めて使うときは、「EdgeAnimateを学ぶ」でレッスンをやりながら使いかたを簡単んに学ぶことが出来ます。

スライダーを作ってみよう!

ではさっそくスライダーを作ってみましょう。今回は簡単なスライダーを作るため必要なパーツは以下のようになります。

  1. ページ送りのための左右のボタン
  2. 表示したい画像

まずはオブジェクトの配置

「ファイル」→「新規作成」で新しくファイルを作成し、左上にあるツールからオブジェクトを作成していきます。今回は4枚の画像を切り替えるスライダーを作りたいので同じ大きさの四角形を4つ作ります。

左右のボタンも円ツールで作って配置、四角形の違いが分かるように色を変えておきます。

スライドのアニメーションを作る

では作った四角形にアニメーションを付けていきます。今回は右から左へスライドしてくるようにしたいので以下のように設定します。

  1. 四角形の幅を0にして右のほうへ閉じる
  2. 0.5秒でもとのサイズにもどる
  3. 同様にして次の四角形がもどる

では実際に設定してみましょう。まずは全ての四角形を幅0にして右の方へ閉じます。

次に0.5秒で元に戻るアニメーションをタイムラインで作成します。
まず、タイムラインの上にある黄色いヘッドをダブルクリックして、ピンを立てます。

ヘッドをドラッグし0.5秒の位置へ移動させ、その状態で最初の四角形をもとのサイズに戻します。

あとは同じ要領で4つの四角形を順にもとのサイズに戻していきましょう。

停止位置のトリガーをセット

このままだと0.5秒ごとにどんどんアニメーションしていくだけなので、画像ごとに停止するようにしたいと思います。それぞれの四角形のアニメーションが終わった位置にヘッドを移動させ、タイムラインの横の「トリガーを挿入」ボタンを押します。コードパネルが表示されるので、右の機能一覧から停止を選択します。

これで一つ目の停止位置を設定できたので2つめ以降も同じように設定しましょう。

ボタンにトリガーセット

次はボタンに次のアニメーションを再生する機能を付けます。
画面右上のエレメントパネルに作成した四角形や丸の一覧があります。ここから左右のボタンの左横にある「アクションを開く」をクリックし、アクションパネルを開きます。パネルの左にアクションの一覧から「click」を選択肢、丸ボタンをクリックすると発動するように設定します。

次に、右ボタンなら次の画像を再生、左ボタンで逆再生にしたいと思います。アクションパネルの右側にある一覧から、右ボタンなら「再生」左ボタンなら「逆再生」を選択します。

完成!

これで簡単なスライダーの完成です。「ファイル」→「ブラウザでプレビュー」でプレビューしてみましょう。イージングもなければ、フェードアウトもない、なんとも祖末なスライダーですが一応ボタンを押して次の画像を表示するという機能を付けることができました。

このようにEdgeを使うと非常に簡単にアニメーションを作成することができます。さらにここで作ったものはFlashではないので、PCはもちろんスマートフォンでも再生することができます。さらにコードの記述もできれば複雑な機能を実装することもできます。スライダーだけでなくいろんなアニメーションを使ってリッチなUIを作ってみましょう。