上村 陽介(うえむら ようすけ)
株式会社 ディー・ディー・エフ
取締役兼Webグループ統括
Webプロモーションを得意とし,インタラクティブコンテンツ制作を主軸にDrupal(オープンソースCMS)によるWebアプリ構築,最近は不動産事業など展開。

 FLASHコンテンツのSilverlight 2化を試みるこの連載。お待たせしておりましたが,やっと形になりました。すべてそっくりとはいきませんでしたが,大体は移植できたかと思います(Webページはこちら )。

 キモは,アニメーションの整理です。ストーリーボードで作り込む部分とTweenedで作り込む部分に分けて準備します。

 このときの注意点は,Tweenedの場合はアニメーションを事前に登録しておく必要があるということです。また,アニメーションが終了したときの飛び先メソッドの引数の書き方が,Tweenedからの場合とストーリーボードからの場合では違いますので気をつけてください(リスト1)。

リスト1●アニメーション終了後にbbbというメソッドを呼ぶ場合

■ストーリーボードの場合
void aaa()
{
  myStoryboard.Begin();
  myStoryboard.Completed += bbb;
}

void bbb(object sender, EventArgs args)
{
  アニメーション終了後の処理
}

■Tweenedアニメの場合
void aaa()
{
  myTween.Start();
  myTween.TweenCompleted += new Tween.StoryboardComplete(bbb);
}

void bbb(Tween sender, object freeReference)
{
  アニメーション終了後の処理
}

 プログレスパーは,このプロジェクト全体で一番最初に呼び出されるアニメーションです。実はこの点が,使う素材を限定する原因になりました。素材がすべてベクターデータ(XAML化できる形式,という意味)でないとうまく動いてくれないからです。

 具体的には,HTML上でローディング用のXAMLとイメージの読み込み両方の完了を知らせるイベントが取れないので,XAMLからイメージデータをロードしているうちにローディングが終わってしまうのです。つまり,ローディング用XAMLの読み込みが完了次第,関連付けられたイメージデータがあっても,そのイメージデータの読み込みと表示を待たずにローディング中のイベントが発生してしまうわけです。

 さらに,ローディングを始める前のアニメーション(プログレスバーがフェードインするとか)は付けられませんでした。待たずにローディングを始めてしまうからです。これは,もうちょっと調べてみないと・・・です。

 あとローディング終了後,読み込んだコンテンツがすぐにスタートするので,XAPではローディング後からプログレスバーが消えるまでのフェードアウト用アニメーションを最初に呼び出しています。

 ボタンサウンドはSilverlight 1の時と同じように簡単でした。まず,勝手に再生しちゃだめ( AutoPlay="False")の設定にします。XAMLは


<MediaElement x:Name="btn_sound" Source="sound.mp3" AutoPlay="False" />
です。

 C#(TOPページの「詳しくはこちら」ボタンのマウスオーバー時)は,


private void top_more_btn_dumy_MouseEnter(object sender, MouseEventArgs e)
{
  btn_sound.Stop();//先頭に戻しつつ
  btn_sound.Play();
}
でOK。

 プロジェクトの構成として今回は,TOPページと中面ページの計2ページ分なので,一つのXAMLにしましたが,分けて作った方がいいかもしれないですね。

 ちなみに,ブラウザの一番下ぎりぎりの部分(フッター)のボタンに与えたボヨヨーンアニメは以下の方法で設定しました。


Tween FooterBtn1ExpandAnimY;

<中略>

FooterBtn1ExpandAnimY = new Tween();
var footerBtn1AnimY = new TweenDoubleDescription(footer_btn1_mark, TweenableProperties.Y, TweenedEquations.EaseOutElastic, 1.5, 0, 30.0);
FooterBtn1ExpandAnimY.AddSequences(footerBtn1AnimY);

<中略>

FooterBtn1ExpandAnimY.Start();

 このボタンに付けた水滴マーク(footer_btn1_mark)を現在位置から30px下からスタートして1.5秒かけて終点0pxまで,イージング(EaseOutElastic)しながら移動。というアニメーションを登録しておいて,ボタンマウスオーバーの所にアニメーションをスタートする命令( FooterBtn1ExpandAnimY.Start();)をおけばOK。

 今回は 完全に自己流でTweenedライブラリを使ってSilverlight2コンテンツを作ってみました。もちろんストーリーボードだけでも表現できますし,もっと簡単で汎用性の高いクラスやライブラリも探せばきっと見つかると思います。

 これからSilverlightでコンテンツを作ってみようと思われる方は,参考にしていただければ幸いです。