electric beach

Christian Schormann

Friday, July 10, 2009

SketchFlow Map: A Mini Tutorial, Part I

This is a very brief tutorial on how to use the SketchFlow Map. If you don’t know yet what SketchFlow is: SketchFlow is a fun, informal, flexible, quick and powerful way to sketch and prototype rich, dynamic interactivity with Expression Blend.

I hope you have had a chance to read my previous blog post on SketchFlow concepts. If you haven’t, you probably want to at least skim the section about the SketchFlow Map – it will make it easier to understand this post.

First, let’s create a new project. If you just started Blend for the first time, you should see the Welcome screen:


Select New Project… In the dialog that follows, Select Silverlight 3 SketchFlow Application, as shown below, and click OK.


This is how Blend looks right after you start a new project:


There is a lot of UI around the art board that we really don’t need for our first prototype. Blend has new workspace management that allows you to make your own workspace. In this tutorial I want to work with one that hides away everything we don’t really need. See here how to set up a minimal workspace. This is how it looks:BlendAll

Adding Screens

This is how the SketchFlow Map looks like when you just start a new project with SketchFlow:


The blue rectangle represents a screen, and as you can see from the emptiness around it, it is currently all alone. With every screen in SketchFlow there is of course the content that goes with it, which you edit on the Blend art board.

Before we give that lonely screen some company, let’s put some content in it. Remember, from the concepts post that it is often useful to treat the screens informally like white boards in a fresh prototype. So, we’ll just stick a sticky note on this one.

Click on the >> icon in the toolbar to pop up the asset tool:


Open the SketchFlow category, and the the Styles sub-category, and click on “SketchStyles” (see the arrow in the picture). This is the list of Sketch-styled controls you get:


Drag the “Note – Sketch” item (marked with an arrow) onto the art board. You’ll get an area you can type in:


Type something, for example “Hello World – a sticky note for my first prototype” and press the Escape key to exit the text editor (return just gives you a new line):


Let’s return to the lonely screen in the SketchFlow map. To create a new screen, we have basically two options. Let’s try them both. The option that is most fun is to use a little fold-out UI on the screen itself to drag out a new screen. Hover with your mouse over the screen:


Drag out a new screen by pressing the mouse on the icon to the left and dragging away:


And this is what you see while dragging – a new screen ghosted to the first one:


Let go of the mouse and – voila – you have a second screen, happily connected to the first one with a blue solid arrow, a navigation connection (please see the concepts blog post to understand the concept of navigation connections).


You can also see that the new screen is now selected (white glow), and that the art board now shows the empty fresh screen.

To recapitulate, by dragging from the left-most icon on the fold-out menu of a screen, we have created a second screen, connected to the first one with a navigation connection.

To illustrate what this means, let’s first add some content to this second screen. Grab the pencil tool and just scribble something. The pencil tool is here:


Select it and scribble away:


Note: If you just started Blend fresh, by default the Pencil tool creates filled shapes. That does not make too much sense for the pencil tool, but if what you get looks like pieces are cut out, you might want to select all your scribbles and set the Fill in the property inspector to “No Brush”. You can select all by pressing Ctrl-A, as usual. The Fill property is here:


In my beautiful drawing, the way I made it, it was not really necessary to do this, but just in case you run into the issue.


Ok, so far we have two screens, one with a sticky note, the other with some scribbles. Let’s run this amazing prototype: Hit F5 or select Project>Run Project…

This is your micro-prototype showing up in Internet Explorer:


The player provides extra UI on the left that lets you navigate and explore your prototype, even if it is, as in our case, just a couple of screens without any actual UI.

Back to the Map

Let’s return to the Map. I said earlier that there are two basic ways to create a new screen. One is dragging away from an existing node. The second method is to create a new, completely unconnected node using the Map toolbar:


The result looks like this:


As you can see to the right, a new unconnected screen got created and appeared in the middle of your Map viewport (it only looks like the right in our screenshot because we cut it off). You also see the screen is selected.

Use the opportunity and quickly drop another sticky note on it, just to say “hi!”.


Next Station: Connections Here

In a connected world, we don’t want to leave this new screen all by itself. Of course we can connect it to the screens we already have. Again, there are two ways to do it.

We begin with the shortcut.

Press the mouse over screen 3 and drag it around in the map. As you can see, a ghost of it moves with the mouse:


Now, look what happens if you drag the ghost over an existing screen:


The ghost is replaced with a white ghost connection, telling you that you’ll get a connection if you just let the mouse go. Or in other words, you can just connect screen 1 to screen 2 by dragging screen 1 onto screen 2. The result looks like this:


Now for the second method. Remember the little fold-out menu for the screen?


Well’ to connect to screens, we can use the 2nd menu entry from the left:


Try this from Screen 1 and drag towards Screen 3:


Drag onto a screen that is not already connected in the same direction, and you’re done.


Just for completeness, try to connect back from Screen 3 to Screen 1:


As a result, you get two parallel connectors, one for each navigation direction, from screen 1 to screen 3, and one back.

Colors and Other Display Options

Before we close for the day, here a couple of other useful bits:

Screens and Connections can have different colors. To set a color for a node, bring up the hover menu and use the item at the very right. A color palette pops up:


You can also change the default colors. Go to Project>SketchFlow Project Settings


Also, you can dim connections and screens so that the Map is clearer and easier to read. Basically, what this function does is dim all connections that do not begin or end with the selected node automatically, for example:

DimOff DimOn

With dimming on, the twin connections between Screens 1 and Screen 3 are much darker. In complex Maps this makes a big difference.


So much for today. I hope you enjoyed this little tutorial. We’ll continue next time with Component screens!

posted by cs at 14:00  


  1. [...] Read more: SketchFlow Map: A Mini Tutorial, Part I [...]

    Pingback by SketchFlow Map: A Mini Tutorial, Part I | Rapid Prototype Info Blog — July 10, 2009 @ 17:42

  2. [...]       (0 votes) Tags: SketchFlow , Tutorials , Expression Blend 3 , Silverlight 3 Christian Schormann has posted a very brief tutorial on how to use the SketchFlow Map. [...]

    Pingback by SketchFlow Map: A Mini Tutorial, Part 1 — July 10, 2009 @ 23:49

  3. [...] SketchFlow Map: A Mini Tutorial, Part I and Creating a Minimal Workspace for SketchFlow (Christian Schormann) [...]

    Pingback by Dew Drop (Weekend Edition) – July 11-12, 2009 | Alvin Ashcraft's Morning Dew — July 11, 2009 @ 18:25

  4. [...] SketchFlow Map Tutorial [...]

    Pingback by Coffee’s World » SketchFlow — July 15, 2009 @ 08:50

  5. [...] Christian Schormann’s post “SketchFlow Map: a mini tutorial part 1”  [...]

    Pingback by 3’ on Blend 3 – #2: SketchFlow Introduction | ASP Scribe — July 20, 2009 @ 18:30

  6. Christian,
    Is it difficult for you to do video tutorials? That would be so much more helpful!


    Comment by Sam — February 7, 2010 @ 19:23

  7. [...] Electric Beach – A blog by Christian Schormann [...]

    Pingback by You..STUDENT! Develop a mock-up WP7 app and win a Windows Phone! « DiggTheDrazen — June 29, 2011 @ 07:34

RSS feed for comments on this post. TrackBack URI

Sorry, the comment form is closed at this time.

Powered by WordPress