キーフレームを使って曲線の軌跡を持たない動きを設定する手順は以下の通りです。
- エレメントを選択して、［プロパティ］パネルで任意のプロパティの「♦」ボタンをクリックします。
- タイムラインにそのプロパティのレイヤーが作成され、キーフレームが設定されます。
- 再生ヘッドをアニメーションの終了位置へ移動します。
- 以下のいずれかの方法で
1) ステージ上のエレメントを直接移動する。
2) タイムライン上のプロパティの値をドラッグ操作する。
3) タイムライン上のプロパティの値をダブルクリックして、直接入力する。
すると、新たなキーフレームが自動作成されアニメーションが完成します。
なお、エレメントの動きはスペースバーを押してプレビューでき、[Ctrl］+［Enter］キーを押すと、ブラウザ上でもプレビュー可能です。
タイムラインの左上には、2種類のアニメーション記録モードボタンがあります。
- ［自動キーフレームモード］：オンの場合、エレメントの移動などを行うと、その操作を反映したキーフレームが自動的に作成されます。
- ［自動トランジションモード］：自動キーフレームモードがオンの状態で、このモードもオンの場合、直前のキーフレームの値から、作成したキーフレームの値まで、徐々に変化させるアニメーション（トランジション・アニメーション）が作成されます。オフの場合には、そのキーフレームの位置でプロパティの値がパッと変更するアニメーションが作成されます。
初期状態は両モードともオンになっています。両モードともオフの場合、エレメントの状態が変わるだけでアニメーションは作成されません。