atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その18:SketchFlowを使ってみるー画面遷移編ー

Expression Blendの強みの1つであるSketchFlow
SkechFlowはアプリケーションのプロトタイプを作るためのプロジェクトです。これはVSではできません。
早速やってみましょう。

1.プロジェクトを作ります。

2.アートボードが出来ました。が普通と少し違いますね。

3.下方にあるSketchFlow Mapをみてみましょう。ここはページの遷移図が表示されます。
ページを増やすためには、SketchFlow Mapを右クリック、Create Screenを選択します。

4.今回はScreen2という画面を作りました。するとxamlファイルが生成されました。
[
5.Screen 1にボタンを置いてみました。ボタンのスタイルがSketchFlow用のスタイルになっていますね。
こういったへたうまUIじゃないと「もうできてるじゃない」と言われるそうですw

6.ボタンを右クリックして、Screen 2に遷移するように設定します。

7.するとSketchFlow MapにScreen 1から2へと矢印が引かれました。

8.ビルドしてみましょう。いろいろ表示されてますが、左のメニューはあとで説明します。
とりあえずボタンをクリックしましょう。Screen 2に遷移します。

あとは画面を作れば、SketchFlowを使ってプレゼンができますね。
次回はSkecthFlowでアニメーションを見せる方法を。
次々回はSkecthFlowを使ったフィードバックを説明します。