動かしてみる
エレメント作成までの基本的な操作を学んだので、いよいよアニメーションを試してみます。
タイムラインパネルを使いこなす
ここまで手順に沿って操作したのであれば、現在タイムラインパネルには、何も無い状態になっていると思います。もし何かある場合、タイムライン上のトランジションをまとめて選択してからDeleteキーで削除してください。
トランジションを作成する前に、この作業で必要なタイムラインパネルの各要素について説明します。
-
Auto-Keyframe Propertiesボタン
赤いアイコンのボタンは、Auto-Keyframe Propertiesボタンです。トグルボタンになっていて、クリックするたびにON/OFFが切り替わります。このボタンがONになっている時にエレメントのプロパティを変更すると、トランジションが作成されます。ただしPreview 4では、起動直後に限って、このボタンがONになっていても、一旦OFFにして再度ONにするか、後述のCurrent Valueマーカーをドラッグしない限りはトランジションが作成されないようです。これまでのステップでトランジションが作成されていないのはこのためです。この動作が意図されたものかどうかはわかりません。
-
Current Frameマーカー
目盛りの上にある、下向きと上向きの二つの鉛筆のような型のマーカーのうち、下向きになっている長い方のマーカーはCurrent Frameマーカーです。現在表示中のフレームを示します。
-
Current Valueマーカー
上向きになっている短い方のマーカーは、Current Valueマーカーです。トランジションを作成する際に、対象エレメントの現在の値のフレームを指定します。詳しくはこの後操作しながら説明します。
それでは、トランジションを作成します。Current Frameマーカーを、右側に0:01のあたりまでドラッグします。起動して一度もCurrent Valueマーカーを操作していない場合、Current Valueのマーカーも一緒に動いてしまうことがあります。この場合はCurrent Valueマーカーを0:00の位置に戻して下さい。
マーカーを動かしたら、今度は最初に描画した矩形を選択し、プロパティパネルで水平Skewの値を-89、Opacityの値を0に指定します。タイムライン上の下向きマーカーと上向きマーカーの間に、トランジションが作成されました。
ここまでできたらプレビューしてみます。プレビューは、Ctrl+Enterです。矩形が横に捻れて消えていくトランジションが再生されました。
今の手順は、まず初期状態があり、そこからトランジション完了後の状態を指定する方法でした。では、今度は逆の方法でやってみます。最初の状態をトランジション完了後の状態とし、トランジション前の状態を後から指定する方法です。
Current Valueマーカーを0:02の位置までドラッグします。ドラッグしたら、今度は二番目に作成した円を選択して、プロパティパネルから垂直Skewの値を89、Opacityの値を0に指定します。ここまでできたら、再度プレビューしてみます。先ほど作ったトランジションの後に、矩形とは逆のパターンで円が現れてくるトランジションが再生されました。
Current ValueマーカーとCurrent Valueマーカーの位置関係によって、どちらのトランジションになるのかが変わります。この機能によって、最初に画面の完成形を作った後で、フェードインとフェードアウトのトランジションを後付けするといった使い方が可能になります。Flashのトゥイーンの作り方とはかなり手順が異なるので、筆者は慣れるのに少し苦労しました。
イージングを試す
今作った二つのトランジションは、時間の経過と共に対象の値が線形に変化する単純なものでした。今度は、もう少し変わった動きをさせてみます。Edgeには、多くのイージング関数が予め用意されています。イージング関数とは、時間の経過に対して対象の値をどのように変化させるかを定義した関数です。
それではまず、先程作ったテキストエレメントを、0:00から0:02の間に360度回転させるトランジションを作ります。回転は、プロパティパネルのRotateで設定します。トランジションを作ったら、タイムラインパネル上でトランジションをクリックして選択します。選択されたトランジションがオレンジ色になり、プロパティパネルにトランジションのプロパティが表示されました。
プロパティパネルのEasingのドロップダウンリストから、easeOutBounceを選択してプレビューします。テキストが、バウンドしながら回転するトランジションが再生されました。他にも様々なイージング関数があるので、色々試してみてください。
シンボル化
シンボルとは、クラスベースのオブジェクト指向言語で言うクラスのようなものです。残念ながら継承等は行えませんが、シンボル化しておけば、そこからインスタンスをいくつでも作成できます。また、シンボル化されたエレメントは、ステージとは独立したタイムラインを持つという特徴もあります。シンボルの概念はFlashとほぼ同じなので、Flashを使い慣れたユーザーであれば、使いこなすのは簡単です。
では、先程作成したテキストエレメントをシンボル化してみます。選択ツールでテキストエレメントを選択して、右クリックから［Convert to Symbol...］を選択すると、シンボル作成ダイアログが表示されました。
任意のシンボル名を入力してOKボタンをクリックすると、ライブラリパネルにシンボルが追加されました。これをステージ上にドラッグ＆ドロップするたびに、シンボルのインスタンスが作成されます。
作成したシンボルインスタンスをダブルクリックすると、シンボルを編集できます。ここで行った変更は、他のインスタンスにも全て適用されます。
その他の便利な機能
今タイムライン上には、これまでの手順で作成したトランジションが並んでいると思います。実はこれらのトランジションは、マウスでドラッグすると、タイムライン上の任意の時間の場所に移動できます。また、トランジションの最初と最後にある◇マークをドラッグすると、トランジションの長さを変更できます。この◇マークはキーフレームと言って、トランジションの基準点となるフレームを表しています。トランジションの開始フレーム・終了フレーム・長さは、プロパティパネルから直接編集することもできます。
また、初期状態ではタイムラインの目盛は0.25秒刻みになっていますが、もっと短い、または長いトランジションを作りたい場合は、タイムラインパネル下部のスライダーを調整することで、タイムラインの縮尺を変えることができます。スライダー左側の虫眼鏡アイコンのボタンをクリックすると、作成したトランジション全てが丁度画面内に収まるように自動縮尺されます。
この他にも様々な機能があります。Edge起動画面の［Learn More］ボタンをクリックすると、英語ですが動画で操作デモが見られます。ここまでのステップを実践した上で動画を見れば、より理解しやすいと思います。
おわりに
今回は、Edgeのごく基本的な使い方を解説しました。個人的な感想になりますが、この解説を執筆するにあたって、Edgeの使い方を色々と試しながら触っているうちに、まだ学生の頃にFlashを初めて触って、試行錯誤してアニメーションを作って遊んでいた時のことが思い出されました。現段階でのHTML5およびEdgeは、長い歴史を持つFlash Platformに比べて、まだまだ出来ることが少ない感じです。しかしFlashも、最初から今のように多くの機能があったわけではありません。初めてFlashを触ったときに感じた楽しさや今後の可能性のようなものは、確かにEdgeからも感じられました。
今回紹介しきれなかった機能もまだ多くあります。近々また、これらについて解説させて頂ければと思います。
