Expression Blend で Drawing Brush Group

複数のブラシ要素をまとめたDrawing Brush Group Object の Expression Blend での作成方法です。 2つのブラシ要素(ここでは画像と半透明の塗りつぶし)を用意します。これを重ね合わせてGridなどでグループ化します。 あとは、作成したGridを選んで「ツール」→「ブラシリソースの作成」→「Drawing Brush」でブラシリソースを作成します。 以上で完成です。作成したブラシは塗りつぶしの要素として利用できます。 XAMLのコードをみるときちんと、DrawingGroup が出来ているのがわかります。 <DrawingBrush x:Key="DrawingBrush1" Viewbox="0,0,168,127" ViewboxUnits="Absolute">     <DrawingBrush.Drawing>         <DrawingGroup>             <ImageDrawing Rect="0,0,168,126">                 <ImageDrawing.ImageSource>                     <BitmapImage CacheOption="OnLoad" CreateOptions="IgnoreImageCache" UriSource="/Dock.jpg"/>                 </ImageDrawing.ImageSource>             </ImageDrawing>             <DrawingGroup Opacity="0.425">                 <GeometryDrawing>                     <GeometryDrawing.Brush>                         <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">                             <GradientStop Color="#FFFF0000" Offset="0"/>                             <GradientStop Color="#FF000000" Offset="1"/>…

1

Expression Design 2

今日はExpression Studio 2 のプレス向け説明会ということで、話してきました。 製品担当というわけではないのですが、まぁ、比較的使っているほうということもあって、Expression Blend 2 と Expression Desin 2 を担当してきました。尾聞き苦しい点は申し訳なかったです。 それにしても Expression Design 2。これはいいツールになりましたね。 標準的なドローツールの機能は持ち合わせながら、各種エフェクトとライブエフェクトによって策がツールとしての機能が非常に良くなっています。また、スライスツールによってオブジェクトのエクスポートがかんりもふくめ非常にやりやすくなりました。XAMLエクスポートも充実しているのでこれは見逃せません。 これからWPF/Silverlight でアプリを構築する人は、ぜひこの Expression Design 2 をデザインツールとして使えるよう遊んでおいてほしいものです。正直四の五の言わずに、デザインしたものをコピー&ペーストでBlendに配置できる、そんなお手軽さがたまらなく魅力です。


画面サイズに追従するWPF

WPFアプリケーションはGridレイアウトなどを使って画面レイアウト、特にサイズ変更時の画面レイアウトをコントロールできる。 しかし、複雑なオブジェクトをインポートすると、コンテナとなるGridとの関係で画像が破たんすることがある。それを防ぎたい場合はオブジェクトを絶対座標で指定する Canvas パネルを使う。Expession Design からエクスポートする場合によく用いられる。しかし、Canvas パネルはサイズの自由が利かない。どうしたものか… …要は フラッシュのSwf をブラウザで開いた時みたいに、画面サイズに合わせてサイズは変わるけど縦横比やレイアウトは維持してほしいんだよね。という時。 そんな時には ViewBox パネルを使う。 通常、Expression Blend などでWPFプロジェクトを開くと、Windowの下にLayoutRoot(=Grid Panel) が配置されている。 で、LayoutRoot の代わりにViewBoxパルを置く。 この場合、Windowには通常1つのパネルしか置けないので LayoutRoot の代わりに ViewBoxが置き換わる。 そして、メインとなる Canvas Panel を置く。Canvas パネルはViewBoxの中に置くので、あらかじめきちんとViewBoxを選択してから(黄色い枠になってから)配置しなけばならない。さもないと、せっかくおいたViewBox の代わりにCanvasパネルが置き換えられてしまいます。 あとは、Canvasパネルを設定したいサイズに変更すればOK。サイズを変えても画面上ではサイズは変わらない。(形が変わるだけ)CanvasパネルをViewbox内内で最大表示しているためである。 これを実行すれば、画面サイズに合わせてCanvas部分もサイズは変わるがその中の状態は維持しくれる。     これでよし!


Flash Player v10 Beta

Flash Player v10 のベータが出てきましたね。 WPF 的な機能やWPFでも実装できない機能などがありますね。テキストレイアウトは特定分野では結構いい部分だと思います。また、対応OSが多いのも強みですね。 オブジェクトを3D空間上で移動/変形できる3D Effects 独自の画像エフェクトが利用可能に GPUの機能を使ったオブジェクトの描画 テキストの縦書きレイアウト・字間設定 対応OSは 98/Me/2000/XP/2003/Vista GPUに依存すると考えると考えるのが、どこにターゲット層をおくかということ。GPU内蔵のチップセットを持ったNoteなのか、最近のデスクトップか、はたまた古い98までにするのか?GPUがあるから、といって描画を重くすると非力なPCでは高付加になりますし、逆に作成者は悩むところですね。 それにしても、ActiveX あたりを通ってきた世代から見ると、Webだけとブラウザがインターフェースというだけで、もう何を持ってWebアプリというのかわかりませんね。ランタイムというなの小さなフレームワークが動作していてブラウザというフレームで動いている今のRIA。Webでないといけない理由はもう一度ちゃんと考えて見る必要があります。 Silverlight と WPF と常に比較される Flash / Air。そして Director もあります。 自分もちゃんと勉強しないとな、と思ってしまう今日この頃です。とりあえず、会社でMacromedia Studio と Illustrator / Photoshop を買ってほしいな♪ おいっ!


Seadragon

Silverlight の Deepzoom のベースとなったテクノロジサンプルです。 最後のほうの画像は、PowerPoint を画像として出力して使ってみています。

1

Classic でつかうWindows Vista

まぁ、通常はAeroで使っていただくのがベストだとは思いますが、フラットデザインが好きな方にはこんなのもいいのかもしれません。 Aero をOFFにするとサイドバーは完全に不透明のグレーになるので見苦しくなります。そこでサイドバーがジェットの使うものだでフロートさせて、あとはサイドバーを非表示に。 壁紙をすっきりするとだいぶイメージも変わりますね。 マシンによってはこういうのもいいかも♪


セッション終了 ありがとうございました。

MSCでのセッション終了しました。 朝一の早い時間でしたが、多くの方にご参加いただき本当にありがとうございました。 正直もう1つ2つお見せしたかったデモなどもあったのですが時間の関係でどうしても盛り込めず断念。それでもいろいろ新ネタを織り交ぜながらがんばってみました。 UX, WPF, Expression Blend に何かしらご興味を持っていただければうれしいです。 さて、やることは山積みだ。

1

コンテンツとしてのSilverlight / WPF

先日コンテンツビジネスを展開せいている企業の方とお話をすることがありました。 プラズマディスプレイにCMのようにコンテンツを流すサービスは最近あちこちで見られるようになりましたが、そのコンテンツです。 現在はやはりFlashを使ったコンテンツや、動画などを使って流しているようですね。ホストアプリケーションが一定時間で表示するコンテンツを切り替えるイメージでしょうか?こういったことをSilverlightで行おうとするとメリットデメリットが出てきます。 Good! 動画ストリーミング Good!サーバと連携したフレキシブルなコンテンツ Bad! ファイルがパッケージ化されない Bad! 作れる人が少ない Bad! ってかまだベータだし WPFになるとスペック的な部分も変わってきますが、見方によってはメリットが出てきます。 Good! 多彩な表現力 Good! フレキシブルなコンテンツ Good! exeアプリでパッケージング Bad! 環境限定(でも組み込みなら問題なし) Bad! 作れる人が少ない というわけで、これはこれで面白いかな?と。 WPFをデザイナーが作った場合、プログラマチック名部分が壁となりますが、たとえば60秒コンテンツなら、そんなことをしなくてもOKです。(もちろん、一部の機能はプログラムが必要な部分もありますが) こういった、パッケージされたコンテンツを簡単にBlendで作れるようなコントロールがいろいろ出てくると面白いかもしれません。もしくはそういったコミュニティがほしいですね。 いろいろな方と話すといろいろ新しい側面、使い方が広がって楽しいです。自分の時間はどんどんなくなりますがw


【Silverlight】Silverlight Mobile

いぜん、アルファバージョンを動かしてみる機会がありましたが、今はどういうステータスになっているのか見えず(言えずw) 依然動かしたときは、1.0ベースでフルスクリーンで動いていました。ブラウザというよりも専用アプリのためのランタイムといった感じです。ブラウザ+silverlight という組み合わせはあまり考えないほうがいいのかもしれません。画面が限られるので専用のものを作るべきでしょう。 日本の携帯への対応は微妙、ないし苦しい。とりあえず、Windows Mobile 6には対応するとは思いますが、それ以外のプラットフォームは先日発表したNOKIA。System 60 や Series 40 への対応のみで、おなじSymbian とはいえ、ほかのプラットフォームへは難しそうです。 使い方はいろいろあると思いますが、モバイルの限られた画面をうまくリッチに使う方法を提案したいですね。


DeepZoom

先日MIXで発表された、DeepZoom。Silverlight の新しいコントロールを含むテクノロジです。 複数の画像を組み合わせた巨大な画像のズームを実現するDeepZoom。どう使うか思案中です。 ちなみにこちらは簡単に、1枚の画像だけのパターン。 URL: http://joestegman.members.winisp.net/DeepZoom/ なお、Silverlight 2.0 のランタイムをインストールする必要があります。2.0のランタイムを入れた場合、1.1 のアプリケーションが動かなくなるので注意してください。 さて、どう使ったら良いでしょうかね?