PR

特殊効果(Radial Blur)を伴った画像の切り替え

2011年5月16日(月)
PROJECT KySS

まず初めに、このプログラムで実装する機能の動作を、下記に解説しておきます。

画面上の[]ボタンをクリックすると、Radial Blur特殊効果を伴って、画像が前の画像、次の画像に切り替わります。クリックしたボタンには、現在の画像の順番が表示されます。Radial Blurは、放射状に伸びる光線のようにBlurを適用する効果です(図1)。

3

図1:ボタンクリックでRadial Blur特殊効果を伴って画像が切り替わっている。ボタン上には現在の画像の順番が表示されている(クリックで拡大)

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

新規プロジェクトの作成

早速サンプルを作っていきましょう。本稿では開発言語にVisual Basicを用います。

VS 2010のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]を選択します。次に、「Silverlight アプリケーション」を選択して、「名前(N)」に任意のプロジェクト名を指定します。ここでは「SL4_ImageTransitionShow」という名前を付けています。

ソリューションエクスプローラー内にImageというフォルダを作成して、画像も追加しておきます。また、画像のファイル名を記録したリスト1のXMLファイルも追加しておきます。XMLデータはLINQ to XMLで処理するため、「プロジェクト(P)/参照の追加(F)」からSystem.Xml.Linqを追加しておきます。

ダウンロードされたサンプル・ファイルには画像やXMLファイルは追加済みです。

リスト1 画像ファイル名を記録したXMLファイル(Photo.xml)

<?xml version="1.0"?>
<画像>
  <情報>
  	<画像名>おしろい花.jpg</画像名>
  	<画像名>サルビア.jpg</画像名>
  	<画像名>ベゴニア.jpg</画像名>
  		~<画像名></画像名>繰り返し~
  </情報>
</画像>

Silverlightユーザーコントロール(ImageShowSilverlightControl.xaml)の作成

VS2010のメニューから「プロジェクト(P)/新しい項目の追加(W)」と選択し、「Silverlightユーザーコントロール」を作成します。「名前(N)」には「ImageShowSilverlightControl.xaml」と指定し、[追加(A)]ボタンをクリックします(図2)。

3

図2:Silverlightユーザーコントロールを作成する(クリックで拡大)

XAMLコード内の要素のWidthに680、Heightに520と指定します。ツールボックスからImageコントロールを1個配置します。プロパティの[レイアウト]パネルにあるWidthに640、Heightに480と指定します。これはImageフォルダに取り込んだjpg画像の実寸サイズです。そして[可視性]パネルにあるOpacityプロパティに0を指定し、透明化しておきます。

次に、ソリューションエクスプローラー内の、ImageShowSilverlightControl.xamlを選択し、マウスの右クリックで表示されるメニューの、「Expression Blendを開く(X)」を選択し、Blend4を起動します。

Blend4でのTransitionEffectの設定

「状態(S)」パネルの「状態グループの追加」アイコンをクリックし(図3)、さらに「状態の追加」アイコンをクリックします(図4)。

「●VisualState状態 記録オン」に変わり、アートボード上の画面全体が赤の枠線で囲まれます。この状態でタイムラインの記録が可能になります。

「ImageTransitionShow」という名前を入力します(図5)。「タイムラインを表示する」アイコンをクリックして、タイムラインを表示します(図6)。

3

図3:「状態(S)」パネルの「状態グループの追加」アイコンをクリックする

3

図4:「状態の追加」アイコンをクリックする

3

図5:「ImageTransitionShow」という名前を入力する(クリックで拡大)

3

図6:タイムラインを表示する(クリックで拡大)

状態の作成

状態を作成します。「オブジェクトとタイムライン(B)」内のImage1を選択します。

黄色の再生ヘッドが「0」の位置で、プロパティの[外観]パネルにあるOpacityの値に100を指定します。自動的に100%となりImageの透明化が解除されます (図7)。

3

図7:タイムラインを表示する(クリックで拡大)

次に、「切り替え効果の追加」をクリックします(図8)。

3

図8:「切り替え効果の追加」を選択する

表示される項目から、「★→ImageTransitionShow」を選択します(図9)。

3

図9:「★→ImageTransitionShow」を選択する(クリックで拡大)

fxアイコンをクリックするとTransitionEffectの一覧が表示されますので、Radial Blurを選択します。時間には1秒を指定します(図10)。

3

図10:TransitionEffectの一覧からRadial Blurを選択し、時間に1秒を指定する(クリックで拡大)

ここで、図10の「●ImageTransitionShow状態記録オン」の●をクリックして、記録オフにします。

図4~図10の手順で、もうひとつ、ImageTransitionShow2という状態を追加します。状態の作成もImageTransitionShowの時と全く同じです。「状態(S)」の中にImageTransitionShowとImageTransitionShow 2という2つの状態が追加されることになります(図11)。

3

図11:ImageTransitionShowとImageTransitionShow 2という2つの状態が追加された

TransitionEffectの設定は以上で終わりです。Blend4を終了しVS2010に戻ります。

Think IT会員限定特典
  • 「特殊効果(Radial Blur)を伴った画像の切り替え」サンプル

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています