Package-up a SketchFlow Project

A key objective of using SketchFlow in the prototyping phase is to gather feedback from key users. So once you have your prototype to a state where you would like users to start exploring it, you can package up the project.

File Menu Select Package SketchFlow

File Menu Select Package SketchFlow

Then select a name and location:

Package Name and Location

Package Name and Location

This exports a compiled Silverlight application file (a XAP).

Making use of the PowerShell script I created in my previous post it will extract the HTML and XAP file from the package folder and zip them up.

It is then ready to send off to eager users, who simply open the html file in their browser of choice (with Silverlight installed).

Note 1: In more sophisticated or larger SketchFlow projects the process of only extracting out the XAP file may remove functionality within the prototype so it is highly advised that you test each screen in your prototype.

Note 2: If you’re pedantic about details, the HTML page can be renamed to be more detailed about the project instead of it’s project filename.

    <title>My Prototype 1 - Design Phase</title>

“Typing” animation effect in SketchFlow

*Update 3 [16-Oct-2010 – Step Improvements]:
Thanks to some feedback from Ricky (in the comments section), I was made aware that my original steps to perform this effect are not detailed enough to follow, I too struggled to follow my own steps 1 year later with a new version of SketchFlow. I have created a demo application and put the source code up on my GitHub account.

I updated the steps below with more details, and consistency in the naming of the controls these animation actions need to be performed on.

*Update 2 [30-Aug-2009 – Just to clarify]:
After seeing this post summarized up on several Silverlight blog aggregation sites in 2-4 sentences it became clear that part of my intended meaning of “a solution that works ok” can be interpreted negatively.

A useful (but not the only) way SketchFlow can be used to to create quick (and rough) animated/transitioning sketches as part of a prototyping phase. In order to get more visual information across to key stakeholders or for designers to experiment. In this kind of scenario a quick “works ok” solution is generally acceptable as it’s not a polished end product that is being built. It allows a design concept to be created quicker and get people discussing it sooner.

*Update 1 [25-Aug-2009 – First Feedback]:
Thanks to Christian Schormann of Electric Beach with a great alternate approaching using a custom behavior in his post Type-On Text For Sketchflow With A Behavior.
Extracting code from WordPress is sometimes a little tricky, so I uploaded Christian’s behavior code class on Gist.GitHub.

On to the post:

After searching for a while I was unable to find an answer to how you would go about:

Simulating a user typing text in a SketchFlow Animation

So I came up with a solution; that is kind of crude, but works “ok”*. The definition of ok is very subjective in this situation. I also describe steps to animate a highlight effect on some text. So if you’re reading this and have a better/easier solution let me know.

I’ve also asked a StackOverflow question, so will see if that yields any useful tips, or alternate approaches.

The steps outlined below are a combination of animating typing and performing a “highlight” and delete action. Making use of frames in the SketchFlow Animation builder.

To summarise first:

This animation effect is a N second transition on a resizing of a white rectangle. The rectangle goes from covering all the text, to a final width of zero. This “wipe” action simulates text being typed (i.e. slowly coming into view).

In this sample the 9 second value is based on how long the text block is and how fast you want the “typing” to occur.

Here’s a more detailed breakdown…

Step 1 – Control Creation:
For this you need 4 controls, the number order describes how they need to be stacked over each other. 1 and 3 are used together in the first part of the animation. 2 and 4 are used together to achieve the typing effect. All these 4 controls need to have the same X and Y (top/left) position.

  1. Create an “existing_typed_text” textblock, this contains the text that you see first before the animation begins. It represents text that exists on load.
  2. Create a “simulated_typed_text” textblock, fill this with the text you want to appear as being typed.
  3. Create a “highlight_rectangle” rectangle that matches the size of the “existing_typed_text” text box set at opacity 50% and appropriate grey (highlight colour). This acts as the “highlight” action when you click on the text box and all the text is highlighted.
  4. Create a “wipe_action_rectangle” white no border rectangle for the animation effect action. This is a rectangle that will cover “simulated_typed_text“.

Controls List

Step 2 – Control set up (still not animating yet):
Here we set up how it is to begin with. Items 2, and 4 above need to be not seen, this can be achieved by toggling their ‘visible state’ to ‘collapsed’. We also want to have the select text action fade in (“highlight_rectangle” – the grey rectangle item 3), so set that item to have an no opacity (0%). The order in which you perform these is not important as we’re still setting up.

Appearance - Visibility - Collapsed

Appearance - Visibility - Collapsed

Set up actions (order does not matter):

  • Collapse the “simulated_typed_text” textblock. (Item 2 above)
  • Set the opacity 0% on the “highlight_rectangle” rectangle. (Item 3 above)
  • Collapse the “wipe_action_rectangle” white rectangle. (Item 4 above)
Base State

Base State

Step 3 – Animation of highlight:
This is where we start the animation process. In this first frame, the action is the “click” so we want the grey box to show up, as if we’ve clicked inside a textbox and all the text has been automatically selected for us (in order to type over it and replace).

Frame 1: Set the opacity to 50% of the “texthighlight” rectangle. So it moves from the starting opacity of 0% to 50% in this frame. Choose an appropriate time span, I left it as 0.5 seconds. Remember you’re selecting the animation time between the frames.

Grey Highlight

Grey Highlight

Step 4 – Animating a “delete existing” action:
Here we’re animating as if the user has pressed the delete key, or has just begun typing the first letter, any action that causes the text to be removed/overwritten. This frame can be a quick action, as we just want the text to disappear, so I have it set to 0.0 seconds (instantaneous).

Tip: Right click to insert frames between steps, or at end.

Insert New Frame action

Insert New Frame action

Frame 2: Two actions. Set the collapse property for existing text and the grey highlight rectangle in animation frame #2. (Appearance -> Visibility -> Collapsed as in the image earlier). The order here doesn’t matter. Timing 0.0 seconds.

Step 5 – Setup frame for new text:
This frame sets up the text we want to appear in the visible state (no longer collapsed), we don’t actually see this step but we need to to occur quickly, another 0.0 second animation. We see nothing because the white rectangle is on top covering up the text still. These are items 2 (“simulated_typed_text“) and 4 (“wipe_action_rectangle“) from the setup list.

Frame 3: Set the collapse property back to visible for the new text and white rectangle. The order here doesn’t matter. Timing 0.0 seconds.

Step 6 – Animate the wipe/typing effect:
This frames transition gives the illusion of the text appearing as if typed.

This is the real work step that simulates the typing effect via a simple “wipe action” where text “appears” of the length of this animation frame. To achieve this we perform a drag-resize of the “wipe_action_rectangle” rectangle from left to right. The text appears slowly as the rectangle shrinks – as if it’s being typed.

Note: because it’s just a rectangle and resizes smoothly it’s not exactly 1 character at a time appearing, but if it’s quick enough the user won’t really notice or care. This frame animation time is your own magic number, in this case I chose 9 seconds based on the length of my text.

Frame 4: Resized the top most rectangle “wipe_action_rectangle” starting from it’s left side, dragging to the right. Only animating the white covering rectangle. Timing 9 seconds (adjust for your own text length).

Four Frames of Animation

Four Frames of Animation

Done. There you go, a 4 frame animation simulating a user typing some text. The link again to the source code sample. As a further exercise you can have a fake cursor image move via animation before Frame 1 to show the user clicking (activating) the textbox causing the highlight.

Keep SketchFlow Animation States Simple

After a 2 hour headache dealing with attempting to create a complex configuration of SketchFlow states with multiple nested (‘Add Transition’) states for the simplest of toggling animation states.

Additional Sub States

Additional Sub States

I discovered that complexity was not necessary for a toggling action. The desired output was basically the equivalent of a button with a standard and pressed state. Including the reverse action.

State flow of controls

State flow of controls

The Initial State (left) is the base state. On the click of the red x transition to the Second State (right). Vice-Versa on the click of the green tick.

This is simply achieved with 2 clicks on the ‘Add State’ button, and setting the transparency on the 3 objects.

States For Rectangle Transition

States For Rectangle Transition

State 1

  • Rectangle – Appearance, Opacity = 100%
  • Red X – Appearance, Opacity = 100%
  • Green Tick – Appearance, Opacity = 0%

State 2
1. Set Default transition duration to 1.5 seconds
2. Set ‘Make Transparent’ with the following settings:

  • Rectangle – Appearance, Opacity = 20%
  • Red X – Appearance, Opacity = 0%
  • Green Tick – Appearance, Opacity = 100%

Then on the red x select ‘make transparent’ and on the green tick select ‘_default’.

Select Transition on Controls

Select Transition on Controls

The issue I was having with complex sub-states was the elements not persisting the end of their animation when it’s time duration completed. i.e. not staying transparent on the red x click. So it was obviously a conflicting set of transitions.

Lesson Learnt: Keep it simple.

Found this great video tutorial from Jose Fajardo on a post at Cynergy Systems Blogs. It’s about states and transitions, fluid layout and deign time transition preview. There’s more to come from him, I’m looking forward to seeing more.

A Simple and Quick Animated Dialog Action in SketchFlow

I wanted to create a confirmation dialog in SketchFlow as quickly as possible, with these main objectives:

  • Reusable – therefore also only have to change it in one location.
  • Quickly – aside from hiccups with z-order.
  • Efficiently – point of contention, there may be a simpler way.

So I came up with this approach. Following on from my post the other day about creating re-usable components. I spawned a new reusable screen. With a simple grey background, some text and 2 buttons.

Basic dialog screen

Basic dialog screen

This logout component screen is then associated with another component screen which happens to be my reusable header section, as a common logout button at the top right of every screen. This 2 step embedding of the dialog screen allows it to be automatically added to each of the screens in the SketchFlow application.

Logout Button on Reusable Header

Logout Button on Reusable Header

To launch the dialog from any screen the ‘logout’ button on the header screen activates the show dialog animation. But first the logout component screen is positioned below the header component screen, so when it is made visible on the application screens it appears centralised. The ‘Base’ state of the header screen has the logout component screen not-visible.

Header Section with Logout Dialog

Header Section with Logout Dialog

Important Tip: The header section will need to be added to all your application screens last to ensure the position of the popup on the z-axis is topmost.

Back to the Logout Dialog:

The animation action for the “No, Stay” is a 2 second fade out on all the components of the dialog. Of course here you can perform any transitions you like. It simply returns the dialog to its hidden state.

Hide Logout Dialog State

Hide Logout Dialog State

The ‘Hide’ state simply sets the visibility at the 2 second keyframe. The ‘* -> Hide’ action performs the fade effect via altering its transparency.

The animation action for the “Yes, Logout” is the same fade as the “No, Stay”. But also has a ‘Navigate To’ action for the home/welcome page of the application (or wherever your logout action will take you).

Navigate & Animate for Logout

Navigate & Animate for Logout

I hope that’s simple enough to follow along. In summary:

  • 2 Components screens: header and logout
  • 2 animations: show logout, hide logout
  • 1 ‘navigate to’ action: on the ‘yes’ click

The logout fade being 2 seconds may look strange when ‘Yes’ is clicked as the Navigate-To action will happen instantly, so a new animation state with a faster fade makes it look less awkward.

Using SketchFlow First Impressions

I’m kicking off a new personal project, and I thought this would be a good opportunity to plan out it’s flow of operation using SketchFlow (get a 60 day trial of Expression Blend 3 here). I intend to develop the application in ASP.NET MVC, not Silverlight. So what I will be outputting from Blend will only be used to refine the UI and get initial feedback from colleagues and friends.

The power of SketchFlow is to create quick informal sketches of screens and to start mocking up interaction through animation (transitions, visual effects). It’s not designed to create final polished artifacts, existing tools already do this well, such as Adobe PhotoShop. So far it seems to be working well.

So I thought I would summarise some initial tips and issues I’ve already had to deal with in the form of questions (and answers).

What if controls in design mode aren’t behaving as you expect?
This was a simple issue, I had forgotten I had placed a transparent rectangle (factor 20%) over a a few groups of controls. Once I adjusted their z-order using Order.. send backwards/forwards, it was working fine. I chalk this up to it having been a while for me in using a tool like this. When controls overlap, you can select controls behind them but not perform all the actions you would like via mouse actions, i.e. resizing is blocked. So either un-overlap them to resize, or use the property windows.

How do you set the default screen size in SketchFlow?
The screens I’m sketching are for a website, I wanted to sketch them down the page so needed a larger Y pixel range. I wanted to adjust the default size of new screens so I wouldn’t have to manually change each new screen. I was unable to find a setting that is per project, only an application wide setting via menu: Tools… Options…

Setting the Default Screen Size in SketchFlow

Setting the Default Screen Size in SketchFlow

For my use I would have liked to see new screens spawning off an existing screen set to match it’s height and width, tho a feature like that may upset users who want default setup screens every time.

How do you create reusable components in SketchFlow?
The approach I’m using is to create “Component Screens” that can then easily be dragged onto other screens. I’m doing this initially for my heading/navigation. But instead I’ll demo creating a reusable login component (the steps are identical).

Create the components on any screen (new or existing), and select them individually via the “Objects and Timeline” window or on the screen itself (if a new blank screen CTRL+A works the fastest).

Objects and Timelines window

Objects and Timelines window

Then right click on the collection either on the screen or in the “Objects and Timeline” window and select “Make Into Component Screen…”

SketchFlow right click action - make into component screen

SketchFlow right click action - make into component screen

That brings up a dialog, so just give your component a name:

Make Into Component Screen Dialog

Make Into Component Screen Dialog

Now you have a new “green object” on your SketchFlow Map, you can simply drag it onto other existing screens, or use the little drop down menu below it to select “Insert a Component Screen” which will add it to the existing screen you drag it to.

SketchFlow Map Insert a Component Screen

SketchFlow Map Insert a Component Screen

Am I enjoying using SketchFlow… Will I keep using it… Will I keep blogging about this…


Sketching an actual solution.

It’s been a while since I’ve posted, project commitments have been drowning me. But the tide has now receded.

Last night (Tue 30th of June) I attended the Melbourne Silverlight Designer and Developer Network (SDDN) event, always great fun and interesting and always has free pizza (if you get there early).

With presentations from Mahesh Krishnan @ about new features in Expression Blend 3. The most interesting to developers of business systems being; sample data generation, and IntelliSense support.

Which was followed by a great demo of SketchFlow – A rapid prototyping tool (that works) by Shane Morris a User eXperience (UX) guru from Microsoft.

SketchFlow looks to fill a gap well for designing something that can actually be played with and fine tuned by designers, users and business analysts. Having been involved in projects where UI’s left up to the control of developers have resulted in lots of rework when clients begin to use them as part of UAT such a tool if used properly should improve the process greatly.

Some of the great uses for SketchFlow are to quickly explore possible flow paths in an application, screen layout design and actually begin to setup associated actions such as animations and transitions. The deal-maker being it’s ability to create actual, usable code. Without the designer/business analyst writing code. This code can then be “harvested” out when development begins. It also includes a feature designed for testers and other lovers of long documents, it can output a word document of the screen designs, annotations and possibly feedback elements. The feedback element of the system allows a redistributable (via silverlight package or central web location) for users to navigate around the application screens, and draw and add notes. With the most typical example of a “simple request” – *big circle around logo* with the text: “can we make our company logo bigger?!”.

There should be a Beta release coming soon, so get a hold of it to actually witness it’s potential. It’s worth checking out the AU Remix 09 videos including the key note where SketchFlow is mentioned.

I won a copy of ‘Sketching User Experiences: Getting the Design Right and the Right Design’ (Interactive Technologies) available at Amazon. I hope to get a chance soon to start reading parts of this, and may make a post out of it.

I won the book by raising a question about how one could go about using SketchFlow to help design a “Version 2.0” of an existing system. Attempting to incorporate actual real world looking components from the real operational system side by side with new additions, including mixes and matches for modifications/overhauls on existing system screens. The flexibility of the tool seems to lend itself to using it in a variety of scenarios and project types.

Update (10 Jul 2009): Download Blend 3 RC & SketchFlow Release Candidate here.
Update 2: That link isn’t a wise choice… Stay tuned to :