By Don Burnett

SketchFlow Technologies

Not just for Artists.. It’s a revolution in your workflow. So much so it’s a reason for everyone (not just designers) to go out and pick up Expression Blend 3.0 today.

Background

Expression Studio’s Blend 3 With SketchFlow is an amazing tool. I recently attended a talk at the Ann Arbor Dot Net Users Group on the Benefits of UML by Martin Shoemaker. It was an excellent talk. I have known about SketchFlow for a very long time (since March 2009, but under NDA couldn’t talk about it). Microsoft had worked on gathering idea for it and spent a lot time on the concept, from customer feedback as early as 2006-2007 (maybe even before that). It has been in the works for a very long time with a huge amount of planning on the Expression team’s part.

Anyway, at AADNUG I extremely enjoyed  Martin’s very excellent presentation on the benefits of UML.  UML can really reduce your costs, identify design issues and problems and help to flesh out details that wouldn’t normally get caught between the software design and development process was a very key speeding up software design and development processes.. During his talk I kept thinking about SketchFlow and it was all I could do just to not scream it out. While it is not UML it gives the same benefits and more. You can literally take a wireframe graphic to completed design all in the same tool. The player lets you share your work with your clients and fellow team members, let them mark up comments and make enhancements and changes and doesn’t require you to even be inside of blend. You could share it as a file (really a WPF based application)  or even on the web on a shared website using Silverlight.

Most of us today use a mixed bag of software design tools for engineering and creation.. Transitioning between these tools isn’t always been an easy process, but today with Expression Blend and Sketchflow you can help bring this all together. So let’s walk through a sample today and see how you can apply using Sketchflow to completely different technologies.

Storyboarding/Wire framing

There is a famous book about designing on the back of a napkin.. Everyone’s heard of it, people start companies from it. That is known in the industry as a wireframe.. In software design you have to create screens that represent on screen elements (such as controls) and map out their functionality  between screens and what is known these days as the “User Experience”. When Hollywood creates a Movie they do a lot of the same thing. It’s called “Storyboarding” which comes down to wireframes with scenes laid out direction and movement.

One Ring to Rule Them All…

What makes SketchfFow so very important is it isn’t just a feature of Expression Blend but a technology you can use elsewhere across the board in your development and designs. Whether you are doing 2D and 3D for a video game or you are doing Mobile phone development. SketchFlow isn’t dependent on you designing or developing for even the Windows platform.

Let’s take a fictitious project here from concept to finish..

Let’s take a look at how we could use this with some other tools..

XNA Game Studio 3.1 Development

While XNA Game Studio for Visual Studio is a great engine for developing 2D and 3D games for Windows, the X-Box 360 and Zune music player platforms, it isn’t always easy to visualize how a screen might get laid out or work.

What do people use today to created game storyboards? A Napkin? Visio, Photoshop? PowerPoint? If you ask someone they will tell you a number of different things. Everyone has a different concept of the work..

Let’s say I want to develop an arcade game where I have little  creatures running around trying to eat me. While I run around and hop up and down some platforms in a sort of maze while avoiding dangers.. We have all heard this story before right? Well let’s update this a little bit.. And work through the concept.

Where to start? My first option because I want to take this from start to completion is to open a blank XNA Game Studio Project in Visual Studio..

Next make a new Game  Project

save the game project.. That will use the XNA game template to create a new game template for us..

That ends our adventure in Visual Studio for a while so now it’s onto Expression Blend 3 to storyboard and prototype our game screens..

Open Blend 3 and go to File New Project..

At that point we can decide what type of project. Since we are making a game, we have to make a choice of which type of Sketchflow project we are making. This all depends a lot on your environment you wish to work with your client.

• If we choose WPF-Sketchflow to create a Windows Platform game we are limiting our prototype to a SketchFlow environment that is purely Windows. This also means we can support full 3D in our prototyping etc.
  

If we choose Silverlight- Sketchflow environment we are pretty much limiting our prototyping to a 2D environment, but the advantage of using Silverlight over the web to collaborate on projects is an environment is a positive thing for individuals and companies wishing to have design process feedback that isn’t platform specific over the web. However that limits asset options for the prototyping stages to 2D assets (unless you wish to render out 3D assets as 2d imagery.

For this venture lets choose WPF SketchFlow since we are designing a windows platform game at this time.

This will open our SketchFlow project.. Our next stop will be to add our XNA project back into the mix..Notice in the graphic below our project window is open with two combined projects and the Sketchflow screen map below..

In the projects Tab Select the main solution and select add an existing project..

Next we  select our XNA game studio project solution we made in Visual Studio.. and add it into our project (via Add existing Project..).

Our focus won’t be filling in the assets or XNA game logic at this point just prototyping a design. This could just as easily be a mobile application for your phone or a WPF or Silverlight game application, or some line of business program UI design. We can leave the XNA stuff to our coders later..

What we will be doing is design  and mapping out the screens in SketchFlow and possible interactions..

You have many choices on what comes next..

You could start with just text or a screen drawing or if you prefer to import drawings in from Adobe Photoshop or Illustrator if you want.  You can even choose to mock up your screens in power point to import them into your project if you wish. Most people at this point think that’s a little to early in the process to be doing and just want to decide what screens are even necessary in the project.

So lets get to Sketchflow and start defining what we know about the screens that will be required.

Let’s drill down into the SketchFlow Map, notice our start screen is defined up front for us, we can rename this to match what we decide to put as our startup screen. In most games, it’s called a “bumper” it describes the corporate information, copyrights, etc. It usually branches to a second screen, which is called an “attract” screen to get people interested in the game. This second screen is usually “animated” and representative of story or game play.

Let’s rename screen one and start defining and setting up our screens..

Left click on the “screen 1”  map icon.. select rename on the context menu.. Select “Rename”..  and Type in “Bumper” make sure that it is set as your start screen too.. You will know if it is by the little green arrow in the screen..

Depending on the type of screen you are defining you can also set the color of the box to indicate a type of screen. Navigation screens and component screens are two types of screens that are already defined for you..

Now let’s add the “attract” screen that we talked about either so left click on the “Bumper” screen to select it..

If we were doing a WPF application or game where we might re-use one onscreen element we could select make the color “green” and designate it as a component . This allows us to later make that screen into a re-usable on screen element into a “user control” that can be re-used in other screens or on it’s own as a part of another screen. Some other industry programs call this reusable library element a “clip” sometimes as well. For the moment we’ll just leave it be as to what it is.

So lets now create a “connected screen” which will be our “attract mode” screen..

Now are SketchFlow map will look like this.. We should have also renamed this screen “Attract Mode” since this is still a navigational aid screen we will leave it tagged with the color blue as well..

Let’s check over at our project and the “Solution” you will see there are some screens defined now over there as well..

Next we’ll add a game mode options screen, the actual game screen and a game ending screen.. if the replay game is chosen we shall connect back to the game screen to play again.. To do this, we hover with our mouse over the replay quit screen and select the second icon from the drop down on the box to loop back to the game screen.. and connect the line to it by clicking on the “game” screen which we are connecting back to..

Now we have just created our game loop..

We also want to connect up our game loop back to the attract screen as well..

This finishes up defining our screens for the moment and our initial flow..

Next we will design these screens and start importing assets for approval and look at some cool options..

Next part of the process will be defining those screens with the client, to do this we simply open the screen..

Let’s walk thru this process a bit..

Sketchflow has a lot of options for this.

If you have been mocking up your screens with some other tool the work flow is a bit of a different path..

The PowerPoint import option

If you are in PowerPoint and you are taking someone else’s screen content already made in Microsoft PowerPoint you can actually just import the file and it will automatically generate all of the screens that we just worked on defining...

After importing all of the slide content are generated into connected screens and completely editable.. (my example screen is an actual presentation but it could easily be a screen mockup with graphical assets that someone created to demonstration a concept in front of a group or crowd).

The Photoshop PSD Import Option

This option unlike our previous one which imports connected screens this option let’s us import to one screen..

Let’s import some art into our attract mode screen.. First select the screen we want to import art to to in our project by double clicking on it in either the project tab or the SketchFlow map tab..  Then from the file menu select import photoshop file and select the .PSD layered art file  at that point it let’s us select which layers of the image to import. We can select one or multiples or a compatibility view with everything..

Here is the final import... from Photoshop..Notice things like the text are still imported as a text object and can be edited..

 Importing Adobe Illustrator Artwork

From the file import menu we can also import illustrator artwork. Since this is already vector art (not vector and bitmap like PSD files we have been looking at in the example above) there is not need to work with layers on import, the file will simply import into our layout tree view as regular objects.

So let’s go back to the “bumper” screen and import some art to show how this works..

After working with the client on the art and getting approvals, we can then place it into the placeholder artwork of the bumper screen that we had already designed. If you look below you will notice we used the drawing tools (you can use a pen, graphics tablet, a mouse for sketching, whatever works for you). There are also some pre-built style components (called SketchStyles) that will let us create menus and buttons etc. In this case we are only going to import artwork..

It’s important when considering replacing artwork and these rough sketches that we delete them or at least make sure we have selected the main layout container and all previous items are removed from below. Otherwise you can have mixed up art with problems. Select the main layout container like the picture below by selecting the “LayoutRoot” container before  importing.

After selecting the file from the file-> import –> Adobe Illustrator menu..

We will see the art in the designer surface..

Importing 3D assets into a Sketchflow WPF  Application

This option isn’t available from Silverlight at the moment because Silverlight only supports 2D with Perspective (sometimes called “Perspective 3D”. Also this option will only work from a WPF Sketchflow application..

Let’s take a look at one possible solution to importing 3D assets into the storyboards and game screens we have developed..

Let’s look at making some models and mock up a scene in Blend using WPF 3D. First we have to get the models from somewhere. My favorite option for doing this is with a now Microsoft owned product that they have out there for free called TrueSpace.. You can download the 7.6 version directly from the TrueSpace Website. Since this article isn’t how to really show you how to use TrueSpace we are only going to talk about how to import models (meshes) in from this as part of our process, so that we can mock up opening scenes from our game play sample..

From within TrueSpace we can select the model we want to export as an asset..

Next from the file menu we save out the object… We’ll just call our guy Alien..

from the TS6 Files menu select Save –> Object

Now you have several saving file format options here that we can work with..

Some really good options including Autocad .DXF, 3DStudio, and DirectX .X format We’ll select DirectX, so we can easily import this later into xna game studio as well..

Notice now there is a settings button on the export.. It also gives us some cool options including saving as ANIMATIONs. TrueSpace is great option that a lot of game development houses focused on DirectX and XNA game development have used and continue to use…

For our sample here we need to go into settings and set some options for export.. The changes I make in the defaults include exporting textures with the Inline Materials selected (so we have painted meshes with textures). Note I am also deselecting the animations check box so any animations aren’t carried over..

Next I am saving out (exporting) the model.

after the export on my drive I should have a file called alien.x. At this point in the process we don’t care much about the precise looks of the model just that we have an on-screen representation. However this is where we’d tweak those settings should we want to return to it in the future.

There is a commercial product by Electric Rain called Zam3D which will do much the same thing as our process here, and it is much more user friendly, However this facility is just fine for this demonstration and not necessary to our purposes..

To convert the DirectX Meshes to WPF3d we will now invoke a utility that only exist as source code and can be found here (http://www.interact-sw.co.uk/iangblog/2004/11/25/dxmesh2xaml2).

Editors’ Note:I had hoped to see this import in Blend 3, but WPF 3D isn’t used much as a feature by many at this point, and the focus is more on Silverlight features and those features that work both places. However someone at Microsoft has written code to accomplish this..  There is one out there that is free and command line based..  To do the conversion and update this utility from the 1.1 source code you also must have the latest DirectX SDK installed with the managed DirectX .dll’s present and referenced in the utility’s project.

A working project looks like this:

The code for the conversion is quite small and requires direct x for most of the work..

Check out Ian Griffith’s blog for more details on this utility..

Our next step after we pipe the alien.x file into the utility via command line is to take the exported xaml back into the editor and place in our screen mock up page..

ALTERNATE OPTION 3DS EXPORT

If this last item is too  difficult for you or you don’t have visual studio, I might suggest just exporting the model to 3D Studio format and then using the converter found at:

http://www.wpf-graphics.com/Reader3ds.aspx

for an overview of how this works check out this video..

ZAM 3D

http://www.erain.com/products/zam3d/DefaultPDC.asp

By far the easiest option here is to save our object in TrueSpace as a .3DS file or as a .DXF mesh file. After we have done so we can load it up in ZAM 3D and re-export it as XAML..

after we have loaded it looks something like this above.. Now to export..

Go to the File –> Export Scene to XAML menu and select this menu item..

Next we select our settings..

We have a few options like giving the storyboard it’s saving the name to an event name (for the event handler) the default is to use the OnLoaded event..

We can also specify the control type. It gives us three options..

ViewPort3D is can be thought of as the complete 3D container in which our entire scene and objects can reside in..

Viewbox, a control that makes the content resize to the size of the view box, helpful if you have limited space or need to resize and have multiple viewport3Ds.

And Canvas which is a layout type that puts things wherever they originally were, unlike a grid which is a defaul layout control, this one leave this as is..

Each of these elements can export to a template, leave all their internal elements as “inline” leaving everything in the code area not broken up) or putting elements into the scene as resources that are reusable and repurpose able.

You can also decide to export the scene or object that you are converting to the clipboard for direct cut and past into xaml. as a file (like a resource dictionary, or a Visual Studio project..

Most likely you will want to export to a ViewPort3D or a Viewbox (the resizable option) and export as a control template.

However for this demo to keep things simple we will export as a ViewPort3D with inline elements and to the clipboard..

So we now click on the “ok” button and export the file or send it to the clipboard in this case..

Next we Enter back into Blend where we are going to select our Mock Game Screen. We could easily just leave this in WPF and not convert over to XNA, but the idea here is to work with the developer and his tools and give him something to go by and work from with guidance.. So We will mock up the game scene (or a portion of it).

open Blend again to the game play scene by double clicking on it in the sketchflow window in Expression Blend.

Now let’s add a blank viewport3d control in the window.. We do this by dragging an empty viewport3d window onto from the assets panel onto the design surface of the game screen..

Now we open up the xaml window and paste in the ViewPort3D code.

Next we open the split view so we can replace the just dropped ViewPort3D element with our alien we exported in XAML3D. Since we chose EXPORT to the Clipboard as an option we can just cut and paste it right in..

Select the Viewport3D element in the XAML and paste it right in..

After this you can see our alien asset is imported into the scene, where we could add motion, lights and anything we wish.. We have full control over size perspective rotation and can transform any element in the ViewPort3D.

We can move our character around the scene all inside the design surface.. Using our tool..

What we get at the end of the process..

A completed navigable application map..  That we can give to teams or clients for feedback, that includes an option to navigate between screens for approvals and comments..

Feedback enabled screens with mark up.. That can be reset, saved or exported..

This will help you along in your client process whether the assets and the final results are in an XNA game, a website,  a mobile application or anywhere. Because you aren’t just marking up a document, it’s actually a working application. Feedback in a Sketchgflow player application is saved as a .feedback file, which when exported can be sent to the designer as a separate file.

There is also another new feature also available to the designer that can be exposed in a Sketchflow player and that is the ability to leave a design note or Annotation for the reviewer. . You can leave notes for yourself and others, or track feedback from other team members while working in Design view. Annotations can be hidden for easier viewing of the current project, and then made visible when you want to review them.

Removing the SketchFlow player and rebuilding as a production application:

To build this as a production mode application:

<ExpressionBlendPrototypingEnabled>false</ExpressionBlendPrototypingEnabled>
<ExpressionBlendPrototypeHarness>true</ExpressionBlendPrototypeHarness>

<ExpressionBlendPrototypingEnabled>false</ExpressionBlendPrototypingEnabled>
<ExpressionBlendPrototypeHarness>true</ExpressionBlendPrototypeHarness>

[assembly: Microsoft.Expression.Prototyping.Services.SketchFlowLibraries("MyProject.Screens")]

this.Startup += (sender, args) => this.StartupUri = new Uri(@"pack://application:,,,/ Microsoft.Expression.Prototyping.Runtime;Component/WPF/Workspace/PlayerWindow.xaml");

this.StartupUri = new Uri(@"pack://application:,,,/MyProject.Screens;Component/MyFileName.xaml");

<ExpressionBlendPrototypingEnabled>false</ExpressionBlendPrototypingEnabled>
<ExpressionBlendPrototypeHarness>true</ExpressionBlendPrototypeHarness>

<ExpressionBlendPrototypingEnabled>false</ExpressionBlendPrototypingEnabled>
<ExpressionBlendPrototypeHarness>true</ExpressionBlendPrototypeHarness>

[assembly: Microsoft.Expression.Prototyping.Services.SketchFlowLibraries("MyProject.Screens")]

this.RootVisual = new Microsoft.Expression.Prototyping.Workspace.PlayerWindow();

this.RootVisual = new System.Windows.Controls.Frame() { Source = new Uri("/MyProject.Screens;component/MyFileName.xaml", UriKind.Relative) };

Another huge benefit of SketchFlow is automated generation of specifications.. from the File menu select Export to Microsoft Word.. You can even export to a Word document that uses a specially formatted template that you create for your own company’s branding purpose complete with table of contents, SketchFlow  screen maps,  screen definitions and detail..