「VSはわかるけどBlendまったくわかんねーよー」
なんてのをハンズオンや勉強会でよく聞きます。
一方でSilverlight5の発表に伴い、Microsoft Expression Blend Preview for Silverlight 5が公開されました。
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=22feb67c-4f65-4ced-97cf-5f8ada296445
このバージョンではXAMLをGUIで編集できるだけでなく、画面設計用に使うSketchFlowも使えます。
これから気が向いたら、Expression Blend 4再入門の連載エントリーを書いていこうと思います。
今回の試用版Expression BlendはSilverlight 5にのみ対応しています。
なので、Silverlight 5の開発環境を整えましょう。
１．まず、Visual Studio 2010 SP1か、Visual Web Developer 2010 Express SP1をインストールしてください。SP1を当てていない場合はこの段階で当てておいたほうがいいでしょう。
http://www.microsoft.com/downloads/details.aspx?FamilyID=75568aa6-8107-475d-948a-ef22627e57a5&displayLang=ja
結構時間がかかります。
１．【Silverlight 5 Tools for Visual Studio 2010 Beta】をインストールします。
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=41c85cc4-de12-4bdb-a60f-f120266e9780&displaylang=en
このとき、正しい言語のVS SP1を入れてくださいと言われたら、そのまま言語が間違えてるか、あるいはSP1が当たっていません。
インストール完了！
成功すると、Silverlightプロジェクトを作成する時に、version 5を選択することができます。
２．次に主役の【Expression Blend Preview for Silverlight 5（英語版)】をインストールしましょう。
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=22feb67c-4f65-4ced-97cf-5f8ada296445&displaylang=en
プレビュー版でSketchFlowも付いてるなんてお得！
特に注意せずにぽちぽちOKすればインストールできます。
これで開発ができます！簡単ですね！
一番最初に、プロジェクトを作ってみましょう。
1.スタート＞すべてのプログラム＞Microsoft Expression＞Microsoft Expression Blend Preview for Silverlight 5を起動します。
2.New Projectをクリックします。
3.今回はSilverlight Application + Websiteを選択しましょう。
Silverlight ApplicationだとOut-of-Browser(ローカルで使えるアプリみたいなもの)を開発できます。
回数が進めば、下のSketchFlow（UI設計用プロジェクト）についても紹介します。
4.すると、こんな感じの画面になります。アートボードみたいなものですね。
ここで画面をつくっていきます。
5.とりあえずそのままビルドしてみましょう。F5キーを押します。VSと一緒ですね。
6.すると、Microsoft Expression Developer Serverが立ち上がって、ブラウザが開かれます。
7.どこでもいいので右クリックしてみましょう。Silverlightと表示されます。
8.Blend Previewで作ったプロジェクトはデフォルトであれば、ここにあります。
確認してみましょう。
C:\Users\ユーザー名\Documents\Expression\Blend Preview for Silverlight 5\Projects\プロジェクト名
次回から、コントロールをぽちぽち使っていきましょう。
お疲れ様でした。
Expression Blendでハローワールドしてみましょう。
1.Blendを立ち上げます。
2.左のバーに表示されているコントロールからテキストブロックを選んで、ダブルクリックします。
3.すると、Objects and TimelineパネルにTextBlockが表示されます。
同時にアートボードにテキストが表示されます。
4 ver.アートボード.
表示されたテキストをダブルクリックして[TextBlock]から[Hello Expression Blend]に変えましょう。
ダブルクリックします。
[Hello Expression Blend]と入力します。
どこでもいいからアートボードをクリックします。
4 verプロパティパネル.
表示されたテキストブロックを選択して、右側にあるCommon PropertiesパネルのTextを[TextBlock]を[Hello Expression Blend]に変更します。
Common PropertiesのText
これを変更します。
アートボードが変更されます。
5.このままではサイズが小さいので大きくしましょう。
Textパネルからフォントサイズを20ptにしました。
すると、アートボードには以下のように表示されます。
上が見切れていますね。移動させましょう。
6.Selection Cursor（黒い矢印）を選択します。
7.テキストボックスをドラッグして移動させます。
適当なところに表示させてみました。
8.移動させると、LayoutパネルにあるMarginの値が変化します。
これはGridコントロールのLayoutRootからみたMarginです。
9.ビルドしてみましょう。見えるところに大きくHello Expression Blendと表示されます。
XAMLにはボタンやカレンダーなど様々なコントロールがあります。
どんなものがあるか、具体的に触ってみましょう。
●Rectangle
Rectangleをダブルクリックするか、選択してアートボードでドラッグします。
すると、アートボードにRectangleが表示されます。
黒矢印で位置やサイズを調整できます。
Shiftキーを押しながらドラッグすると、縦横比保持。
Altキーを押しながらドラッグすると、中心点が基準位置になって拡大縮小できます。
Brushパネルで面の色や輪郭の色、太さなどを編集できます。
グラデにしたり、画像をテクスチャとして使うこともできます。
●Ellipse
コントロール右下に白い三角形のちょぼが付いてるボタンを長押しすると、似たようなコントロールが表示されまうす。
例えば、Rectangleを長押しすると、Ellipseがでてきます。
では、円を書いてみましょう。
似たコントロールなので、使い方は同じですね。
前回はRectangleとEllipseを紹介しました。
今回はそれらで使えるグラデーションのおはなしです。
まず、Rectangleを置いて、Fillをグラデーションにします。
グラデーションの色味を変えてみましょう。
グラデーションのバーのチップをクリックして、Editorで色を変更します。
バーチップを増やしたいときは、バー上をクリックすれば、その位置にチップが増えます。
グラデーションを反転させたい時も、Reverse gradient stopsボタンで一発です。
円状のグラデーションもボタン１つですね。
では、グラデーションの向きを変えてみましょう。
この状態に戻してください。
左のメニューバーから、Gradient toolを選択します。
Rectangleが選択した状態でRectangleをドラッグしてみましょう。
ドラッグした方向にグラデーションが引かれました。
また、BrushTransformといったものもあります。
これを使うと、グラデーションをメッシュのように操作することができます。
おつかれさまでした。
きっと一番よく使うであろうコントロールはボタンでしょう。
今回はボタンを設置してみます。
左のバーからボタンを選択します。
アートボードにドロップします。
もちろん、色味も変えられます。
ボタンを押したらイベントが走ってほしいですよね。Blendでもイベントハンドラを登録できます。
Propertyパネルからイベントをクリックします。
すると、そのコントロールで登録できるイベント一覧がでてきます。
Clickイベントを設定したいときは、ここにイベントハンドラの名前を書きこむか、空欄をダブルクリックします。
すると、イベントハンドラに自動的に名前がついて.csファイルにコードを生成してくれます。
もちろん、Blendでcsもかけますし、インテリセンスも効きます！
private void Button_Click(object sender, System.Windows.RoutedEventArgs e) { // TODO: Add event handler implementation here. }
もちろんXAMLにもイベントが登録されます。
<Button Content="Button" Height="116" Margin="0,101,8,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" Background="Red" HorizontalAlignment="Right" Width="233" Click="Button_Click" />
Blendにはとっても便利なビヘイビアというものがあります。
ビヘイビアはちっちゃなコードの塊で、ドラッグ＆ドロップで挙動を定義できます。
ビヘイビアの一覧を見るには、左のメニューバーからAssetを選んで、Behaviorsタブをクリックします。
これを使えば、パネルを設定していくだけでアニメーションを動かしたり、音を鳴らしたり、などなど色んなことが簡単に行えます。
次回ではアニメーションを、さらに次回では動画やSEをビヘイビアを使って操作してみます。
ビヘイビアを紹介したところで、アニメーションをやってみましょう。
まずは、Rectangleを置いてみます。
今回はこのRectangleにアニメをつけてみます。
アニメを付けたいコントロールには名前が付いている必要があります。
なので、オブジェクトパネルの[Rectangle]をダブルクリックして、Rectangle1としました。
ちなみに、自分でつけなくても、アニメを付ければ勝手に付けてくれます。
SilverlightやWPFではアニメーションのことをStoryboardといいます。
このボタンをクリックして新規にStoryboardを作成します。
Storyboardのなまえを決めます。
するとオブジェクトパネルがタイムラインに変化します。
これでは見にくいので、上のメニューのWindows>Workspace>Animationを選択するか、F6キーを押してください。
操作のしやすい画面になりました。
Rectangle1を選択して、Storyboardの０秒にキーを打ちましょう。
クリックすると
こんなふうにキーが打てます。
２秒のところにもキーを打ってみましょう。
すると、白い帯ができます。これがアニメーションされている間ということですね。
２秒のキーフレームのところで、Rectangle1の青色を変えてみましょう。
すると、白から青に変化しているのがわかりますね。再生ボタンでアニメが再生されます。
また、一度とじたStoryboarはここをクリックして、もう一度編集することができます。
Storyboardで出来るアニメーションはほとんどのプロパティを操作することができます。
たとえば、回転させてみたり、大きさを変えてみたり、z軸に回したり、エフェクトをつけたり、透明度をかけたりなどなど、いろいろ遊んでみましょう。
イージングは物理演算を使った計算になるのかな？
アニメーションに緩急をつけたりすることができます。
Flash/FlexでいうTweenerですね。
まずは、Rectangleにアニメをつけて、左から右に動かしてみましょう。
こんなかんじですね。どこからどこまで移動するのか点線で表示されます。
再生すると、のそーーーっと四角形が動きます。
ちょっとつまんないですね。
そこでイージングの出番です。
後ろのキーフレームをクリックします。
すると、右のパネルが変わりました。
まっすぐな斜め線にNoneと書かれていますね。これがイージングです。
このNoneは、選択したキーフレームまでを等速で動かすということです。
クリックしていろいろ変えてみましょう。
例えばBounce Outを選択すると、Rectangleが壁にぶつかって跳ねるような動きをしますね。
さらに同じBounce Outでも下のパラメータを変えることで、動きが変化します。
パラメータを変えると、それに見合ったグラフに変化するので、だいたいイメージが掴めそうですね。
イージングを使って、自分のお気に入りのアニメーションや、心地良いアニメーションを作ってみてください。
その８，９でだいぶアニメーションに慣れたと思います。
しかし、まだ一度もStoryboardを実行していませんね。
今回はビヘイビアを使って、ボタンクリックでStoryboardを実行させましょう。
１．まず、適当なアニメーションを作ってください。
２．次にボタンを設置します。
3.左のメニュー>Asset>Behaviorsから、ControlStoryboardAction選択して、アートボードのボタンにドロップします。
すると、オブジェクトパネルにビヘイビアが表示されました。
4.このControlStoryboardActionを選択します。すると、右のパネルが変化します。
ここで、なにをしたらどれをどうするか、というのを定義します。
5.今回はクリックしたらアニメーションを終了させたいので、
EventName をClickに（クリックしたら）
ControlStoryboardOptionをPlayに（再生します）
StoryboardをStoryboard1に(Storyboard1を)
ということですね。
F5キーを押して、ビルドしてみましょう。
ボタンを押せば、Storyboard1が実行されます。
