今年のトレンドは、RIA。現状ではSilverlightとAIRのどちらが勝つか分からない以上、二股をかけるのが妥当かと。
とりあえず、Silverlightから制作に入ったわけです。
前工程はデザイナー、後工程はコーダーとスクリプターという流れは、HTMLによるサイト制作と何ら変わりませんが、photoshop職人だと Silverlightの前工程を担当できません。Illustrator職人がベクタグラフィックスを作成する必要があります。
デザイナーが作成したaiファイルをスクリプターが受け取り、パーツ毎に分解し、xamlに変換します。
オーサリングは、Expression Blend 2 December Previewで行います。
BlendでSilverlightを新規作成するとhtmlファイル×１、jsファイル×２、xamlファイル×１が作成されます。フル Silverlightの場合、htmlのbody内に最低限のコードを打ち込み、実際の作業は、xamlファイルと*.xaml.jsファイルで行いま す。
最初に、xamlファイル内にオブジェクトを配置します。
xamlに変換したベクタグラフィックスを<canvas>内に配置しデザイナーのチェックを受けて完了。
次に、マウスアクションを組み込みます。
<Canvas>内にMouseEnter,MouseLeave,MouseLeftButtonDownとCursor="Hand"を 書き込み、各マウスアクションの内容を*.xaml.jsに書き込みます。*.xaml.jsは、普通にJava Scriptでfunctionで書きます。jsからは直接xamlを制御できません。js内のfunctionでsender.findName ("*").begin()を実行し、xamlのStoryboardを呼び出します。
StoryboardはCanvas.Resources内に書き込みます。
デバックが完了したらデザイナーのチェックを受けて完了。
最後にイニシャルアニメーションを作成します。
イニシャルアニメーションは、Canvas.Resources内には書きません。Canvas.Triggers内に記述します。
Canvas.Triggers内でイベントトリガEventTrigger RoutedEvent="Canvas.Loaded"をBeginStoryboardで指定すると、その内部のStoryboardがイニシャルアニメーションになります。
この作業もデバックが終了したらデザイナーのチェックを受けて完了。
以上、完成。
FTPでアップして作業終了。
追伸
この記事の内容を理解できた方は、是非面接へお越しください。\n
