単純なアニメーションの作成

  • [アーティクル]

Microsoft Expression Blend では、どのようなビジュアル要素でもアニメーション化できます。

単純なアニメーションを作成するには

  1. Expression Blend で、プロジェクトを開くか、新しいプロジェクトを作成します。

    詳細については、「新しいプロジェクトを作成する」を参照してください。

  2. F6 キーを押して、[アニメーション] ワークスペースに切り替えます(F6 キーは、ワークスペースを切り替えるキーです。アニメーション ワークスペース では、[オブジェクトとタイムライン] パネルはアートボードの下に配置されます)。アニメーションにするオブジェクトを作成します。

    Cc294948.alert_tip(JA-JP,Expression.30).gifヒント :

    Expression Blend では、オブジェクトという用語はアートボードにあるアイテムを指します。たとえば、[ツール] パネルから [四角形] ツール Cc294948.81ffc148-cf5c-4faf-bd3f-f38d3073a12c(JA-JP,Expression.30).png を選択してアートボードに四角形を描画した場合は、四角形オブジェクトを作成したことになります。オブジェクトとコントロールの詳細については、「オブジェクトおよびプロパティの使用」と「インタラクティブ コントロールの選択と使用」を参照してください。

  3. [オブジェクトとタイムライン] パネルの [新規作成] Cc294948.86937695-03dd-44ea-aa30-28d4029b3ad0(JA-JP,Expression.30).png をクリックします。

    [ストーリーボード リソースの作成] ダイアログ ボックスが表示されます。

  4. [リソース名 (キー)] フィールドにタイムラインの名前を入力し、[OK] をクリックします。Expression Blend がタイムライン記録モードに入り、再生ヘッド Cc294948.5626c9eb-40bb-450a-9ca1-3678e5abe429(JA-JP,Expression.30).png が 0 秒のマークに置かれます。記録モード中は、プロパティを設定すると、タイムラインに自動的にキーフレームが記録されます。

    Cc294948.alert_tip(JA-JP,Expression.30).gifヒント :

    既定では、ドキュメントのルートに新しいタイムラインを作成すると、[トリガー] パネルに Window.Loaded イベントのイベント トリガーが追加されます。このトリガーによって、アプリケーションが起動すると同時にストーリーボードが開始されます。シンプルなインタラクティブ機能を作成する場合は、イベント トリガーを選択し、[トリガー] パネルの下半分で次のように指定します。

    When object.PreviewMouseDown is raised

    上の object は、アプリケーション内のオブジェクトの名前です(トリガーを変更するときに [トリガー] パネルの下半分にオブジェクトを表示するには、オブジェクトを選択しておく必要があります)。これで、オブジェクトをクリックしたときにアニメーション タイムラインが開始されます。

  5. [オブジェクトとタイムライン] パネルで、アニメーションにするオブジェクトを選択します。

  6. 選択したオブジェクトを現在の位置と外観で開始する場合は、[キーフレームの記録] Cc294948.e8ec61d4-c8e8-465a-85a7-70bf787a67de(JA-JP,Expression.30).png をクリックして、オブジェクトを 0 秒のマークで記録します。タイムラインの選択したオブジェクトに対応する行にキーフレーム Cc294948.fa3c696d-5463-4000-8a6b-650fe6759bf7(JA-JP,Expression.30).png が表示されます。

  7. [オブジェクトとタイムライン] パネルで、アニメーションが終了する時点に再生ヘッドをドラッグします。

  8. アニメーションの終了時の外観をアニメーションの開始時と同じにする場合は、[キーフレームの記録] ボタンをクリックします。

  9. タイムラインのプロパティを変化させる場所に再生ヘッドを移動します。

  10. オブジェクトの位置、色、サイズなど、選択したオブジェクトのプロパティを変更します。プロパティの変更を記録するためのキーフレームがタイムライン上に自動的に表示されます。

    Cc294948.alert_tip(JA-JP,Expression.30).gifヒント :

    オブジェクトのノードを展開すると、個々のプロパティのキーフレームを表示できます。オブジェクト全体ではなく個々のプロパティのキーフレームを移動する場合に便利です。

  11. 作成したアニメーションを表示するには、[オブジェクトとタイムライン] の上部にある [再生] ボタンをクリックします。

    Cc294948.alert_tip(JA-JP,Expression.30).gifヒント :

    タイムライン記録モードを終了するには、[ストーリーボードを閉じる] Cc294948.4c066464-3a41-452d-b2e9-e95f6c5659ff(JA-JP,Expression.30).png をクリックします。現在のスコープ内のすべてのオブジェクトが初期状態に戻ります。

関連項目

タスク

ストーリーボードのテスト

ストーリーボードの実行タイミングの制御

試してみよう : ハンドオフ アニメーションとそれ以外のアニメーションの操作