ホーム > Expression Blend > 0からはじめるExpression Blend再入門

その18:SketchFlowを使ってみよう-画面遷移編-

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square[著], わにちゃん@ExpressionTech.jp[編集]
2011年5月13日 from Atelier:Mitsuba

はじめに

Expression Blendの強みの1つであるSketchFlow

SkechFlowはアプリケーションのプロトタイプを作るためのプロジェクトです。これはVSではできません。

早速やってみましょう。

操作方法

  1. プロジェクトを作ります。
    f:id:c-mitsuba:20110510154616p:image
  2. アートボードが出来ました。が普通と少し違いますね。
    f:id:c-mitsuba:20110510154614p:image
  3. 下方にあるSketchFlow Mapをみてみましょう。ここはページの遷移図が表示されます。

    ページを増やすためには、SketchFlow Mapを右クリック、Create Screenを選択します。
    f:id:c-mitsuba:20110510154613p:image
  4. 今回はScreen2という画面を作りました。するとxamlファイルが生成されました。
    f:id:c-mitsuba:20110510154612p:image
  5. Screen 1にボタンを置いてみました。ボタンのスタイルがSketchFlow用のスタイルになっていますね。

    こういったへたうまUIじゃないと「もうできてるじゃない」と言われるそうですw
    f:id:c-mitsuba:20110510155256p:image
  6. ボタンを右クリックして、Screen 2に遷移するように設定します。
    f:id:c-mitsuba:20110510155255p:image
  7. するとSketchFlow MapにScreen 1から2へと矢印が引かれました。
    f:id:c-mitsuba:20110510155254p:image
  8. ビルドしてみましょう。いろいろ表示されてますが、左のメニューはあとで説明します。

    とりあえずボタンをクリックしましょう。Screen 2に遷移します。
    f:id:c-mitsuba:20110510155711p:image

さいごに

あとは画面を作れば、SketchFlowを使ってプレゼンができますね。

次回はSkecthFlowでアニメーションを見せる方法を。

次々回はSkecthFlowを使ったフィードバックを説明します。

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ