Expression Blendの続きです。
今度はコードを記述せず、イベントとアニメーションの基礎をやりたいと思います。
前回と同じように、ボタンとラベルを配置します。
前回はボタンオブジェクトを選択して、右側にある[プロパティ]パネルにある雷マークのついた「イベント」をクリックして、イベント・ハンドラを定義しました。
Expession Blendでは、トリガという機能を使うと、コードを記述しなくてもUI部分の動作をさせることができます。
例えば、ラベルの文字を変えたり、ボタンを色を変えたりすることが、コードを記述しなくてもできるのです。
トリガは2種類あります。
イベント・トリガとプロパティ・トリガです。
イベント・トリガは、ボタンをクリックしたりとかイベントが発生したときに実行されるもの。
プロパティ・トリガは、プロパティの値が変更されたときに実行されるものです。
次の例は、ボタンをクリックしたときに実行されるイベント・トリガです。
まず、アートボードに配置した、ボタンオブジェクトを選択します。
イベント・トリガを作成するには、［組み合わせ］パネルの［トリガ］にある［＋ イベント トリガの追加］ボタンをクリックします。
トリガのオブジェクト（ボタンとかウインドウとかラベルとか）と、対応するイベントがドロップダウンリストで選択できます。
選択したボタンオブジェクトと、イベントにClickを選択することで、ボタンをクリックした際に実行されるトリガになります。
ドロップダウンリストの右下にある、プラス記号のマーク（［新しい値の追加］ボタン）をクリックして、このトリガに対するアクションを追加します。
「使用できる、またはコントロールできるタイムラインが存在しません。タイムラインを1個作成します。」というダイアログが表示されますので、[OK]をクリック。
メニュー・バーの［ウィンドウ］－［アニメーションワークスペース］を選択して、タイムラインを見やすくします。
[タイムライン]パネルの下にある［タイムラインズーム］で、目盛りの幅を調節できます。
黄色い線（［再生ヘッド］）をドラッグして、希望するタイムライン上に移動。
右の[プロパティ]パネルで、配置したボタンやラベルのプロパティをいじります。
アニメーションをすべて設定し終えたら、［アートボード］の左上にあるタイムラインの記録をオフにするボタンを押し、メニュー・バーの［ウィンドウ］－［デザインワークスペース］を選択して通常のウィンドウ・レイアウトに戻します。
［オブジェクトとタイムライン］の一番上にあるドロップダウンリストを、「OnClick1」から「既定」に戻すことで、タイムラインを設定するモードから通常のデザインを行うモードに切り替わります。
メニュー・バーの［プロジェクト］－［プロジェクトのテスト］を選択すると、タイムラインに沿って設定したプロパティどおりにアニメーションします。
コメントする