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

 FlashバナーをベースにSilverlight2のバナーを作成しようというこの連載。前回は,静止画状態のSilverlight2ファイルからタイムライン・アニメーションを作成しました。でも,アートボードのサイズからデザインがはみ出しているなど,まだ修正が必要です。

 今回はいよいよ,バナーを完成させます。Silverlight2のアニメーションをクリッカブルにして指定ページにジャンプさせるようにした後,バナーのサイズに合わせてアニメーションの表示エリアを変更します。

クリッカブルにしてリンク先を設定

 最初に,バナーのエリア全体にクリックイベントを設定して,ページ・ジャンプさせるコードを追加しましょう。

 まず,Flashバナーで使う透明ボタンと同じものを作ります。表示エリアすべてがクリッカブルになるよう,300×250pxの四角形をアートボードに配置して,名前を「clear_btn(任意の名前)」,カーソルを「Hand(手のカタチ)」に設定し,透明度(Opacity)を0%にします。

図1●透明ボタンを作る手順
図1●透明ボタンを作る手順
[画像のクリックで拡大表示]

 その四角形を選択した状態のまま,ストーリーボードのアニメーションをスタートさせるイベントを埋め込んだ時と同じ方法でイベント一覧を開きます。すると「MouseLeftButtonDown」の欄があるので,ダブルクリック。自動的に名前が与えられ,同時にVisual Studio 2008が開きます。

図2●MouseLeftButtonDownをダブルクリックすると,自動的にイベント名が付く
図2●MouseLeftButtonDownをダブルクリックすると,自動的にイベント名が付く

 Visual Studio 2008のコードエディタで,clear_btn_MouseLeftButtonDownの個所にリンク先のURLをリスト1のように記述します。

リスト1●C#のコード
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
 
namespace sampleBnr
{
  public partial class Page : UserControl
  {
    public Page()
    {
      // 変数を初期化するときに必要となります
      InitializeComponent();
    }
 
    private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
    {
      Storyboard1.Begin();
    }
 
    private void clear_btn_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
      HtmlPage.Window.Navigate(new Uri("http://www.ddf.ne.jp"), "_blank");
    }
  }
}

 で,Blend2に戻って「ソリューションのテスト」をしてみると・・・・。出来ましたー。動きましたー。クリックで別ページにジャンプもできましたー。