ここから本文です。

Silverlight 2 チュートリアル

Silverlight でバナー広告を制作する

このチュートリアルでは、主に Expression Blend 2 を使用し、Silverlight 2 によるバナー広告を制作する手順をご紹介します。

操作の流れ

制作するバナーについて確認する

Silverlight の特性を考慮しつつ、デザインパーツを準備する

Silverlight 2 プロジェクトを作成する

デザインパーツをレイアウトする

Storyboard を作成する

各パーツにアニメーションを適用する

アニメーションを開始する C# コードを記述する

バナー領域へマスクを適用する

バナー全面のリンクボタンを設定する

使用するツール

Microsoft Expression Blend 2

Microsoft Expression Design 2

Microsoft Visual Studio 2008

ダウンロード

このチュートリアルで使用する素材およびソース コードは以下よりダウンロードいただけます。

→ blend_banner_tutorial.zip (3.09 MB)

制作するバナーについて確認する

このチュートリアルでは、Microsoft Arc Mouse を訴求するバナーを制作します。バナーは約 10 秒のアニメーションを再生後に静止します。また、バナー領域をクリックすると「Microsoft Arc Mouse 特集ページ」を新規ウィンドウで表示します。

完成版はこちら
(→ 新規ウインドウで開く)

アニメーションは以下の流れとなります。

シーン 1: マウスが閉じた状態で現れる

シーン 2: 線画状態に切り替わる

シーン 3: マウスが少し開き、キャッチコピー 1 を表示

シーン 4: マウスが開ききり、キャッチコピー 2 を表示

シーン 5: マウスが実写となり、光るエフェクトが入る

シーン 6: 画面が反転し、マウス頭部が持ち上がる

シーン 7: 他の 2 色 (青・赤) が現れ、最後にロゴを表示して止まる

Silverlight の特性を考慮しつつ、デザインパーツを準備する

Silverlight での制作にはいくつかの制限や特徴があります。それらを意識して、デザインのパーツを作成する必要があります。
ここでは、Silverlight におけるバナー作成において特に関係のある制限や特徴について、Flash と比較して見ていきます。
機能
Flash
Silverlight
画像
JPEG、GIF、PNG、BMP
JPEG、PNG
(PNG 形式はグレースケールや 8bit 透過形式をサポートしていません)
エフェクト (ぼかし、ドロップシャドウなど)
可能 (プラグインのバージョンによる)
不可能のため、エフェクトを画像で取り込む必要がある
パスアニメーション
可能
不可能
アウトラインデータ
Adobe Flash に Adobe Illustrator(.ai) ファイルなどを直接インポート可能
Expression Design などを使用し、XAML ファイルに変換した後に Expression Blend 2 に取り込む必要がある

これらを踏まえ、以下のパーツを用意します。

メモ変換元となるファイルは、ダウンロード ファイル内の [blend_banner_tutorial_asset] フォルダ - [Image] フォルダに収録しています。

画像パーツの用意

全ての画像は背景を透過させたいため、PNG32 ビット形式とします。



Arc Mouse の開いた状態 × 3 色
Arc Mouse の閉じた状態 (ブラックのみ)
光エフェクトの画像 (全 4 種)
影画像
キャッチコピーの画像 (全 2 種)
Arc Mouse ロゴ
マイクロソフト ロゴ (白・黒)

アウトライン パーツの用意

Adobe Illustrator 形式で作成されたマウスのアウトラインデータを Silverlight で使用するため、XAML 形式へ変換します。

メモ変換元となるファイルは、ダウンロード ファイル内の [blend_banner_tutorial_asset] フォルダ - [ArcMouseOutline.ai] です。
  1. Expression Design 2 でアウトラインデータを開きます
  2. [ファイル] メニューの [エクスポート] をクリックします。
    → [エクスポート] ウィンドウが表示されます。
  3. [形式] ボックスを [XAML Silverlight キャンバス] を選択します。
  4. [ファイル名] ボックスを "ArcMouseOutline.xaml" とし、 [すべてをエクスポート] ボタンをクリックして、XAML ファイルを作成します。

Silverlight 2 プロジェクトを作成する

ここから実際のバナー制作を進めていきます。最初に Silverlight 2 プロジェクトを作成します。

  1. Expression Blend 2 を起動します。
  2. [プロジェクト] タブの [新しいプロジェクト] を選択します。
    → [新しいプロジェクト] ダイアログボックスが表示されます。
  1. [Silverlight 2 アプリケーション] を選択し、名前ボックスを "ArcMouseBanner" と入力します。
  1. [OK] ボタンをクリックします。
    → 新規プロジェクトが作成されます。
新規プロジェクトが開かれた状態

デザイン パーツをレイアウトする

  1. Silverlight の縦横サイズをバナーサイズに変更します。
    [オブジェクトとタイムライン] タブの [UserControl] を選択し、[プロパティ] タブで以下のように設定します。
プロパティ
値
Width
300
Height
250
  1. バナーは固定サイズのため、レイアウトの行いやすい "Canvas" コントロールを使用してレイアウトしていきます。はじめに最上位のコントロールを [Grid] コントロールから [Canvas] コントロールに変更します。
    [オブジェクトとタイムライン] タブで [LayoutRoot] を選択し、右クリックし、[レイアウトの種類の変更] - [Canvas] をクリックします。
  1. バナーの背景色を設定します。[オブジェクトとタイムライン] タブの [LayoutRoot] を選択したまま、[プロパティ] タブで以下のように設定します。
プロパティ
値
Background
単色ブラシ
#FF000000

※ [R] [G] [B] [A] のプロパティを個別に設定することでも可能です。

  1. アニメーションのシーンごとの状態をレイアウトしていきます。まず、シーン 1 の枠となる Canvas コントロールを配置します。
    ツールボックスから [Grid] を長押しし、 [Canvas] を選択します。
    さらに [LayoutRoot] が黄色い枠の付いたアクティブ状態となっていることを確認し、Canvasコントロールがエリア全体になるように配置します。そして名前を "Scene1" と設定します。
    この一連の操作で、プロパティパネルが以下の設定になっていることを確認します。
プロパティ
値
Name
scene1
Width
300
Height
250
Left
0
Top
0
  1. デザイン画像ファイル一式を Silverlight プロジェクトへ追加します。ダウンロードファイル内の [素材] フォルダ ＞ [Image] フォルダをエクスプローラ上でコピーし、Expression Blend 2 画面の [プロジェクト] タブの [ArcMouseBanner] 上で右クリック - [貼り付け] を選択して、Image フォルダごとプロジェクトに追加します。
  1. シーン 1 のレイアウトを作成します。[オブジェクトとタイムライン] タブの [Scene1] をダブルクリックで黄色い枠の付いたアクティブ状態にした上で、 [プロジェクト] タブから [Image] フォルダ - [Img_ArcMouse_Closed.png] をダブルクリックして、画像を配置します。そのとき、画像は左上に配置されますので、適宜レイアウトにあわせて移動してください。
    シーン 1 についてレイアウトした状態は次のようになります。
    (※ロゴは別途配置します)

  1. シーン 2 の Arc Mouse のアウトラインデータを配置します。Expression Design 2 で書き出したXAMLファイル [ArcMouseOutline.xaml] をエクスプローラ上でコピーし、Expression Blend 2 画面の [プロジェクト] タブの [ArcMouseBanner] 上で右クリック - [貼り付け] を選択して xaml ファイルを追加します。
  1. マウスのアウトラインデータをバナー本体の xaml へコピーします。追加された [ArcMouseOutline.xaml] を開き、[オブジェクトとタイムライン] タブで最上位の [ArcMouseOutline] を右クリック - [コピー] をクリックし、 [Page.xaml] の [LayoutRoot] がアクティブになっていることを確認して右クリック - [貼り付け] をクリックします。
  1. アウトラインデータは、貼り付けた段階ではバナー領域よりも大きいため、デザインに合わせてアウトラインデータのサイズを調整します。この時ステージ上のつまみを操作した場合、アウトラインを囲んでいる Canvas コントロールのサイズが変わるだけなので、拡大率を変更します。
    [オブジェクトとタイムライン] タブの [ArcMouseOutline] を選択した状態で [プロパティ] タブの [変換] グループ - [拡大縮小タブ] - [X] および [Y] を調整し、さらに Scene1 で配置した画像とマウスの前部分が重なるようにします。プロパティを以下のよう設定します。
プロパティ
値
Left
-270
Top
-14
拡大縮小: X
0.41
拡大縮小: Y
0.41

※ 完成サンプルにおける参考値です。
     レイアウトの位置により、値が前後します。

  1. [ArcMouseOutline] の初期状態では、その領域内のみ表示されるように設定されているため、マウスを開閉する動きの時に切れてしまいます。これを防ぐため、設定を解除します。
    [プロパティ] タブ - [その他] グループ－ [Clip] プロパティの右側の白い点をクリックし [リセット] を選択します。
  1. マウスが閉じた状態になるように変更します。[オブジェクトとタイムライン] タブで [MouseTail] を選択し、回転の中心点となる位置をマウスの継ぎ目の位置までドラッグで移動します。(同様の設定は [プロパティ] タブ - [変換] グループ - [中心点] タブ - [X] および [Y] プロパティでも可能です。)
    その状態で、[プロパティ] タブ - [変換] グループ - [回転] タブ - [Angle] プロパティを変更すると、マウスが開閉する動きを実現できます。
    同様の方法で、2 つの軸パーツ [MouseAxis1] [MouseAxis2] の中心点と角度を調整します。その結果、設定プロパティは以下のようになります。

[MouseTail]

プロパティ
値
Angle
119
中心点: X
0.628
中心点: Y
0.3

[MouseAxis1]

プロパティ
値
Angle
105
中心点: X
0.628
中心点: Y
0.3

[MouseAxis2]

プロパティ
値
Angle
2
中心点: X
0.628
中心点: Y
0.3

以上で、シーン 2 までの準備ができました。引き続き、シーン 3～7 の準備をしていきます。

  1. シーン 3～7 のレイアウトを作成します。シーン番号に合わせ、[Scene3] ～ [Scene7] の Canvas をステップ 4 と同様に作成し、各シーンのパーツを配置します。配置する位置は適宜調整してください。配置作業では [オブジェクトとタイムライン] の [隠す/表示する] [ロック/ロック解除] ボタンを活用することで作業しやすくなります。
    各シーンはそれぞれ以下の状態となります。

○シーン 3 [Scene3]

マウスのアウトラインは、シーン 2 のものを利用します。

● 配置オブジェクト
文字 1 画像 [Img_Text1.png]

○ シーン 4 [Scene4]

マウスのアウトラインは、シーン 2、シーン 3 のものを利用します。

● 配置オブジェクト
文字 2 画像 [Img_Text2.png]

○ シーン 5 [Scene5]

マウスの反射は、反転して、透明度 20% にしていた画像です。

● 配置オブジェクト (配置順)
光エフェクト画像 3 [Img_Flash_Circle03.png]
開いたマウス画像 [Img_ArcMouse_Opened.png]
開いたマウス画像 [Img_ArcMouse_Opened.png] (縦方向反転、透過 20%)
光エフェクト画像 1 [Img_Flash_Circle01.png]
光エフェクト画像 2 [Img_Flash_Circle02.png]
光エフェクト画像 4 [Img_Flash_lightpath.png]

○ シーン 6 [Scene6]

マウス画像は前シーンのものを利用します。(※ 分かりやすいように背景を白にしています。実際の背景の反転はアニメーションで行います。)

● 配置オブジェクト
影画像 [Img_Shadow.png]

○ シーン 7 [Scene7]

黒カラーのマウスとその影は前シーンまでのものを利用します。(※ 分かりやすいように背景を白にしています。実際の背景の反転はアニメーションで行います。)

● 配置オブジェクト
影画像 [Img_Shadow.png]
マウス青画像 [Img_ArcMouse_Blue.png]
マウス赤画像 [Img_ArcMouse_Red.png]
Arc Mouse ロゴ画像 [ArcMouse_Logo.png]

○ Microsoft ロゴ [MsLogo]

白と黒のロゴ画像を同サイズで同位置に配置します。

● 配置オブジェクト
Microsoft ロゴ画像 (黒) [Logo_Microsoft.png]
Microsoft ロゴ画像 (白) [Logo_Microsoft_w.png]


  1. これでそれぞれのシーンのレイアウトが完了しました。ここではアニメーションで順次表示させるために、シーン 1 ～ 7 の全てのオブジェクトを透明度 0 に設定します。
    [オブジェクトとタイムライン] タブにおいて、Ctrl キーを押しながら対象のオブジェクトを選択します。(右画面を参照) そして [プロパティ] タブの [Opacity] プロパティに "0" を入力します。

"Microsoft" ロゴのみ見えている状態となります。

Storyboard を作成する

レイアウトがされたそれぞれのパーツをアニメーションさせ、一連のバナームービーを制作します。オブジェクトのアニメーションをするためのStoryboard(Flash などではタイムラインと呼ばれています) を作成します。

メモレイアウトまで行ったソースを、ダウンロードファイル内の [blend_banner_tutorial_finalsource] フォルダに収録しています。
  1. [オブジェクトとタイムライン] タブの [+] ボタンをクリックします。
    → [Storyboard リソースの作成] ダイアログボックスが表示されます。
  1. 名前 (キー) ボックスに "BannerAnimation" を入力して [OK] ボタンをクリックします。
  1. Storyboard が作成されると、Storyboard の編集状態となります。編集状態になると、タイムラインが表示され、[タイムライン 記録オン] と赤円が表示されます。
    この状態で行ったオブジェクトの位置や色などの変更が、アニメーションの対象となります。Storyboard 編集状態でなく編集すると、予期しない動きとなりますので注意してください。 [×] ボタンをクリックすると、Storyboard の編集状態は解除されます。
    再び、Storyboard 編集状態とする場合は、コンボボックスをクリックし、目的の Storyboard を選択します(このチュートリアルでは、 [BannerAnimation] を選択します)。

また、赤丸部分をクリックすると [タイムライン 記録オフ] とグレーの円表示になります。この状態で行う編集は、アニメーション対象ではなく、Storyboard 編集状態を解除して行った編集と同じものになります。
今回のアニメーションのように、初期状態では透明のオブジェクトについて初期位置を微調整したいような場合、タイムラインで目的のオブジェクトが見えるシーンまで移動し、編集状態を解除してプロパティを編集するといった使い方ができます。

各パーツにアニメーションを適用する

  1. それでは、実際にアニメーションを定義していきます。まずシーン 1 までの動きです。
    基本的なアニメーションの設定手順は、
    (1) アニメーション開始のキーフレームを設定
    (2) アニメーション終了のキーフレームを設定
    という流れになります。 シーン 1 までの動きは、シーン 1 のレイアウトパーツ (閉じたマウスの画像) の透明度を 0% から 100% までアニメーションして、フェードインさせます。 タイムラインのカーソルを 0.5 秒に移動した状態で、 [Scene1] 内の画像を選択し、[Opacity] を仮の "1" とします。

  1. [Opacity] を変更することで、タイムラインにキーフレーム (グレーの楕円) が設定されました。あくまでアニメーション開始のキーフレームを設定することが目的なので、再び [Opacity] を "0"とします。

    この操作でキーフレームが消えないことを確認します。

  1. 次にアニメーション終了のキーフレームを設定します。タイムラインのカーソルを 1.0 秒に移動し、[Opacity] プロパティに "100" を設定します。これでアニメーション終了のキーフレームが作成されました。この状態でタイムライン上部の再生ボタンをクリックすると、マウスがフェードインで現れる動きが確認できます。
  1. 以上が基本的なアニメーションの制作方法です。これを参考に、バナーの一連のシーンが繋がるようアニメーションを制作してみてください。

○ シーン 1 [Scene1]

→ マウスが閉じた状態で現れる

フェードイン
● 閉じたマウス画像 [Img_ArcMouse_Closed.png]

○ シーン 2 [Scene2]

→ 線画状態に切り替わる

フェードアウト
● 閉じたマウス画像 [Img_ArcMouse_Closed.png]

フェードイン
● マウスのアウトライン [ArcMouseOutline]

○ シーン 3 [Scene3]

→ マウスが少し開き、キャッチコピー 1 を表示

アニメーション
● マウスのアウトライン [ArcMouseOutline] が少し開く

フェードイン
● 文字 1 画像 [Img_Text1.png]

○ シーン 4 [Scene4]

→ マウスが開ききり、キャッチコピー 2 を表示

フェードアウト
● 文字 1 画像 [Img_Text1.png]

アニメーション
● マウスのアウトライン [ArcMouseOutline] が完全に開く

フェードイン
● 文字 2 画像 [Img_Text2.png] をフェードイン

○ シーン 5 [Scene5]

→ マウスが実写となり、光るエフェクトが入る

フェードアウト
● マウスのアウトライン [ArcMouseOutline]

フェードイン
● 光エフェクト画像 3 [Img_Flash_Circle03.png]
● 開いたマウス画像 [Img_ArcMouse_Opened.png]
● 開いたマウス画像 [Img_ArcMouse_Opened.png] (縦方向反転、透過 20%)
● 光エフェクト画像 1 [Img_Flash_Circle01.png]
● 光エフェクト画像 2 [Img_Flash_Circle02.png]
● 光エフェクト画像 4 [Img_Flash_lightpath.png]

○ シーン 6 [Scene6]

→ 画面が反転し、マウス頭部が持ち上がる

フェードアウト
● 光エフェクト画像 3 [Img_Flash_Circle03.png]
● 開いたマウス画像 [Img_ArcMouse_Opened.png] (縦方向反転、透過 20%)
● 光エフェクト画像 1 [Img_Flash_Circle01.png]
● 光エフェクト画像 2 [Img_Flash_Circle02.png]
● 光エフェクト画像 4 [Img_Flash_lightpath.png]
● Microsoft ロゴ画像 (白) [Logo_Microsoft_w.png]

アニメーション
● 開いたマウス画像 [Img_ArcMouse_Opened.png] のマウス頭部が持ち上がる
● [LayoutRoot] の背景色を白にする

フェードイン
● 影画像 [Img_Shadow.png]

○ シーン 7 [Scene7]

→ 他の 2 色 (青・赤) が現れ、最後にロゴを表示して止まる

フェードイン
● 影画像 [Img_Shadow.png]
● マウス青画像 [Img_ArcMouse_Blue.png]
● マウス赤画像 [Img_ArcMouse_Red.png]
● Arc Mouse ロゴ画像 [ArcMouse_Logo.png]

  1. アニメーションを制作する時には、フェードイン/アウトだけでなく、上下左右の移動や、複数パーツの出現タイミングをずらすといった工夫をすることで、メリハリのある動きにすることができます。また、イージング設定をすることも有効です。
    イージングを設定するには、アニメーション終了のキーフレームを選択し、 [プロパティ] タブで編集することができます。右上と左下にある黄色の円をドラッグして変更します。

    基本的なイージングの設定を紹介します。

設定なしの状態で、一定の速度でアニメーションします。
徐々に加速するアニメーションになります。Flash では「イーズイン」と呼ばれる動きです。
徐々に減速するアニメーションになります。Flash では「イーズアウト」と呼ばれる動きです。
はじめに加速し、終わりに従って減速する動きです。

アニメーションを開始する C# コードを記述する

Storyboard を Expression Blend 2 上で定義できましたが、このままでは実行しても、アニメーションは自動的に再生されません。Silverlight バナーが Web ブラウザに読み込まれたと同時にアニメーションを再生させる命令を記述する必要があります。

  1. LayoutRoot に Loadedイ ベントを定義します。 [オブジェクトとタイムライン] タブで [LayoutRoot] を選択し、 [プロパティ] タブ - [イベント] ボタンをクリックして、イベント表示状態にします。
    （もとのプロパティ表示状態にするには、その右側の [プロパティ] ボタンをクリックします。）
  2. [プロパティ] タブ (イベント表示状態) の [Loaded] の右側の空欄をダブルクリックします。
    → Visual Studio 2008 がインストールされている環境では、Visual Studio 2008 が起動し、Page.xaml.cs ファイルの編集画面となります。
    Visual Studio 2008 の環境をお持ちでない場合は、ダイアログが表示されますので、[OK] ボタンをクリックします。ダイアログに従い、Page.xaml.cs をメモ帳などで開き、ペーストしてください。
  1. Page.xaml.cs にて、LayoutRoot_Loaded メソッドに、以下の 1 行を追記します。(青太字)
public partial class Page : UserControl
{
        public Page()
        {
                // 変数を初期化するときに必要となります
                InitializeComponent();
    }

        private void LayoutRoot_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
                this.BannerAnimation.Begin();
        }
}
  1. Page.xaml.cs を保存し、Expression Blend 2 画面から実行します。 [プロジェクト] メニュー - [ソリューションのテスト] をクリックします。
    → Web ブラウザが開き、アニメーションが再生されます。

バナー領域へマスクを適用する

Web ブラウザで実行したところ、バナー領域 (300px × 250px) を超えて表示されてしまいましたので、バナー領域に対してマスクを適用します。

  1. [オブジェクトとタイムライン] タブで [LayoutRoot] が黄色い枠で囲まれたアクティブ状態になっているのを確認し、ツールボックスから [四角形] ツールを選択して、バナー領域一杯に四角形を配置します。
  1. 配置した四角形を選択した状態で、[プロパティ] タブの [Stroke] プロパティを [ブラシなし] に設定します。
  1. 前のステップで描いた四角形を右クリックし、ショートカットメニューの [パス] - [クリッピングバスの作成] を選択します。
  1. [クリッピング パスの作成] ダイアログボックスで [LayoutRoot] を選択し、[OK] ボタンをクリックします。
  1. 再度 [プロジェクト] メニュー - [ソリューションのテスト] をクリックして実行すると、領域がマスクされているのが確認できます。

バナー全面のリンクボタンを設定する

バナークリック時にリンクするためのボタンを配置します。

  1. [オブジェクトとタイムライン] タブにおいて、[LayoutRoot] が黄色い枠のついたアクティブ状態であることを確認し、ツールボックスから [Button] ツールを選択し、バナー領域一杯にボタンを配置します。
  1. 今回はバナーのクリックを取得のみに使用するのでボタンを透明状態にします。[プロパティ] タブの [Opacity] プロパティを 0% に設定します。
  1. ボタンのクリックイベントを設定します。配置した Button コントロールを選択した状態で [プロパティ] タブ (イベント表示状態) において、[Click] の右側の空欄をダブルクリックします。
  1. Page.xaml.cs にて、Button_Click メソッドに、以下の 2 行を追記します。(青太字)
public partial class Page : UserControl
{
        public Page()
        {
                // 変数を初期化するときに必要となります
                InitializeComponent();
        }

        private void LayoutRoot_Loaded(object sender, System.Windows.RoutedEventArgs e)
        {
                this.BannerAnimation.Begin();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
                 Uri linkUri = new Uri("http://www.microsoft.com/japan/hardware/mouse/arc_mouse/special/");
                System.Windows.Browser.HtmlPage.Window.Navigate(linkUri, "_blank");
        }
}
  1. 以上でチュートリアルは終了です。[プロジェクト] メニュー - [ソリューションのテスト] をクリックして実行します。バナーをクリックすると「Arc Mouse 特集ページ」が新規ウィンドウで表示されることが確認できます。
このチュートリアルは、株式会社セカンドファクトリーさまに作成いただきました。
セカンドファクトリーさまでは、UX コンサルティングや UX トレーニングを展開されていますので、あわせてご覧下さい。
セカンドファクトリー様ホームページ
ページ TOP
サイト共通フッターです。