http://www.lepracaun.info/blog/

WebクリエイターLepracaunのサイトです。 Ajax、Flash、Silverlightなど、RIAを実現するためのツールやスクリプトについての話題を取り上げていきます。

« Silverlight Streamingの準備 | メイン | Google Ajax Feed API にFeedControlクラス追加 »

2007年6月 1日

Expression Blend:タイムラインとプロパティ

Expression Blendの続きです。

今度はコードを記述せず、イベントとアニメーションの基礎をやりたいと思います。
前回と同じように、ボタンとラベルを配置します。
前回はボタンオブジェクトを選択して、右側にある[プロパティ]パネルにある雷マークのついた「イベント」をクリックして、イベント・ハンドラを定義しました。

Expession Blendでは、トリガという機能を使うと、コードを記述しなくてもUI部分の動作をさせることができます。
例えば、ラベルの文字を変えたり、ボタンを色を変えたりすることが、コードを記述しなくてもできるのです。

トリガは2種類あります。
イベント・トリガとプロパティ・トリガです。

イベント・トリガは、ボタンをクリックしたりとかイベントが発生したときに実行されるもの。
プロパティ・トリガは、プロパティの値が変更されたときに実行されるものです。

次の例は、ボタンをクリックしたときに実行されるイベント・トリガです。

まず、アートボードに配置した、ボタンオブジェクトを選択します。
イベント・トリガを作成するには、[組み合わせ]パネルの[トリガ]にある[+ イベント トリガの追加]ボタンをクリックします。

トリガのオブジェクト(ボタンとかウインドウとかラベルとか)と、対応するイベントがドロップダウンリストで選択できます。

選択したボタンオブジェクトと、イベントにClickを選択することで、ボタンをクリックした際に実行されるトリガになります。

ドロップダウンリストの右下にある、プラス記号のマーク([新しい値の追加]ボタン)をクリックして、このトリガに対するアクションを追加します。

Image2_070531.jpg

「使用できる、またはコントロールできるタイムラインが存在しません。タイムラインを1個作成します。」というダイアログが表示されますので、[OK]をクリック。

メニュー・バーの[ウィンドウ]-[アニメーションワークスペース]を選択して、タイムラインを見やすくします。

Image3_070531.jpg

[タイムライン]パネルの下にある[タイムラインズーム]で、目盛りの幅を調節できます。
黄色い線([再生ヘッド])をドラッグして、希望するタイムライン上に移動。

右の[プロパティ]パネルで、配置したボタンやラベルのプロパティをいじります。

アニメーションをすべて設定し終えたら、[アートボード]の左上にあるタイムラインの記録をオフにするボタンを押し、メニュー・バーの[ウィンドウ]-[デザインワークスペース]を選択して通常のウィンドウ・レイアウトに戻します。

[オブジェクトとタイムライン]の一番上にあるドロップダウンリストを、「OnClick1」から「既定」に戻すことで、タイムラインを設定するモードから通常のデザインを行うモードに切り替わります。

メニュー・バーの[プロジェクト]-[プロジェクトのテスト]を選択すると、タイムラインに沿って設定したプロパティどおりにアニメーションします。

投稿者 lepracaun : 2007年6月 1日 00:03このエントリーをはてなブックマークに追加 Save This Page to del.icio.us このエントリーをlivedoorクリップに追加 このエントリーをニフティクリップに追加 このエントリーをECナビ人気ニュースに追加 このエントリーをBlogPeople Tagsに追加 このエントリーをBlogPeople Instant Bookmarkに追加 このエントリーをPingKingポッケに追加 このエントリーをFC2ブックマークへ追加

トラックバック

このエントリーのトラックバックURL:
http://www.lepracaun.info/mt4/mt-tb.cgi/41

コメント

コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)