MdN Interactive

デザインとグラフィックスの総合情報サイト[エムディエヌ・インタラクティブ] MdN Interactive

2008/2/29 FRI 00:00

UPDATE

Silverlightコンテンツ制作にチャレンジ
PART2.Blendによるインターフェイス制作のポイント

廣氏がBlendで制作したインターフェイスを見る

前回、予備知識なしの状態から手探りで試したExpression Blend2の理解をもう少し深めて、ムービープレイヤーのインターフェイスを作成してみた。JavaScriptとBlend 2だけを使ってどこまでSilverlightのサイトづくりができるのか試していきたい。

映像、写真、アニメーションを見せる心地よい動きのブラウザ

今回はシンプルに映像・画像・アニメーションドキュメントなどのブラウズをするための簡単なインタラクティブなインターフェイスを作成してみた。ムービーが動作するエリア、写真を表示するエリア、インタラクティブなアニメーションを表示するエリアの3つで構成されており、それぞれがクリックされるとアクティブになって全面に表示される仕組みだ。

ムービーは通常のPLAY、PAUSE、STOPに加え、モニター全面に拡大表示する機能を設けてあり、画像のエリアは拡大すると関連するWebサイトへのリンク、ドキュメントではクリックでコントロールできるインタラクティブなアニメーションが拡大表示される。Blendの基本的な機能を活用したサンプルムービーだ。

作成したインターフェイス作品を見る(Silverlightが必要です)
こういうSilverlight作品ができました!

今回作成したインターフェイス作品。マウスを重ねたブラウザが少し大きくなりアクティブになる。その動きが心地いい。画面全面になったムービープレイヤーはSTOPボタンを押すと基の画面に戻る

廣 鉄夫氏の制作環境は?

Blendを使ったSilverlightコンテンツを制作するにあたって、どんなマシンスペックが必要なのか、読者も気になるところだろう。今回の廣氏が使用したマシン環境は主に以下のとおりだ。ただしこのために特別に導入したわけではなく、ふだん廣氏が業務を進めるうえで日常的に用いている環境とのこと。After Effectsなどのビデオ編集に使うためメイン機は少々パワフルなマシンをセレクトしている。ひとつの目安として参考にしてほしい。

・マシン:
メイン DELL XPS720 H2C(デスクトップ機)、
サブ DELL製ノートPC、プレビュー用 PowerMac G5
・ディスプレイ:
メイン 30inch、サブ 24inch
・メモリ:
4GB積んでいるが、32bitのVistaのためうち3GB分が稼働
・OS:
Windows Vista
・ネットワーク回線:
光フレッツ
  • 廣氏がBlendで制作したインターフェイス作品を見る
  • このインターフェイス作品制作のポイント【1】
  • このインターフェイス作品制作のポイント【2】