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.

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

A File Copy and Compress – PowerShell Script

Following on from my previous post. I’m creating a PowerShell script that takes an input of a file location via a dialog. Extracts some files through a copy action, and compresses them into an archive. As I will show in the 3rd post, the purpose is to extract out 2 files to help with deploying a SketchFlow project. Such a complex script is overkill for 2 files, but is easily extensible to handle a larger set of files.

Step 1 – User input of folder:
Create a function to launch a folder select dialog, this is achieved through a com object call.

function Select-Folder($message='Select a folder', $path = 0)
{
    $object = New-Object -comObject Shell.Application
            
    $folder = $object.BrowseForFolder(0, $message, 0, $path)
    if ($folder -ne $null)
    {
        $folder.self.Path
    }
}

Note: Could call this twice to prompt user for output location also.
OR
To speed up script execution supply input parameter(s) to the script [input (and output) directory].

To achieve this simply use $args[0] (and $args[1]) instead of the Select-Folder cmdlet call.

The Select-Folder cmdlet launches:

Browse For Folder Dialog

Browse For Folder Dialog

Step 2 – Extract (via copy) the deployable files:
There are 3 tricks here; first extracting only files via not PSisContainer, grouping them via their extensions (in order to easily process them in a copy loop) and matching only a list of valid extensions (in this case xap and html).

$types = ".xap", ".html"

$files=  Get-ChildItem $folder | Where-Object {-not$_.PSisContainer} | Group-Object Extension 

$files = $files | Where-Object {$types-contains$_.Name}

New-Item -itemType Directory -path $deploymentFolder -ea SilentlyContinue

$files | ForEach-Object { $_.Group | Copy-Item -destination  $deploymentFolder }

Tip: use Some-Cmdlet | Format-Table or its variants to output details to screen to help with debugging.

Step 3 – Compress
This last step in the script is a compression action. I got the compression functions from David Aiken’s MSDN blog post. The Add-Zip function was unable to take a file path containing a directory-up (\..\), so the final script has Move-Item cmdlet line to compensate.

function Add-Zip
{
    param([string]$zipfilename)

    if(-not (test-path($zipfilename)))
    {
        set-content $zipfilename ("PK" + [char]5 + [char]6 + ("$([char]0)" * 18))
        (dir $zipfilename).IsReadOnly = $false    
    }
    
    $shellApplication = new-object -com shell.application
    $zipPackage = $shellApplication.NameSpace($zipfilename)
    
    foreach($file in $input) 
    { 
            $zipPackage.CopyHere($file.FullName)
            Start-sleep -milliseconds 500
    }
}

The complete script file can be found here on Gist.GitHub.

The next step in this script could be to email the newly created zip file, but that’s something for a future post.

A Look Back at Discovering PowerShell

This is part 1 of a 3 part series, in which I will be creating a PowerShell script that accepts as input a folder location via a standard windows popup dialog and then performs some repetitive action. I’ll get to the details in the next post where I actually build the script. In the 3rd post will be putting it to use…

But first some background on PowerShell and some details on my awkward attachment to it, back in December 2007 I attended a Readify (RDN) session about PowerShell presented by Mitch Denny and was blown away by its potential and power, along with an attention grabbing demo of it running a Space Invaders game. I proceeded to adapt his demo and do my own investigation and the following month demonstrated the PowerShell concepts internally to my colleagues who specialise in the .NET development space.

I was trying to promote the use of PowerShell to replace a large collection of batch (.bat) scripts we were using at the time across many projects, to do things ranging from mass source control check-outs/check-ins to building deployments of production packages, yes **shudder**. Sadly more often than not, I did not make time to improve and replace all batch scripts I encountered either through the use of PowerShell or alternate approaches to running a script.

Double checking with this post on the MSDN PowerShell blog, I can confirm that at the time it was the first CTP release of PowerShell 2.0 that got my attention. With my switch now to Windows 7 and currently working on a new laptop it was fantastic to see an already installed out of the box PowerShell, which I simply searched for by typing into my start menu.

A few months back I discovered a site that got my attention again with little tips and video tutorials about using PowerShell, sadly a lot of their videos are no longer available, but I still subscribe to an almost daily newsletter with 1 single tip per day. So for a while I’ve been amassing the emails from PowerShell.com in one of my gmail accounts, labelling them thinking “oh that’s cool tip” but not having the time to test it out. Well the other day the “perfect” tip for a planned task came along to get me cracking on this script and blog posts.

In the next post I’ll be running through its actual creation.

Woo Hoo – 3D Video Effects in PowerPoint 2010

Full disclosure: This is way off topic for my blog and I just wanted an excuse to embed a Simpsons episode in a powerpoint presentation.

Inspired by this post on the PowerPoint MSDN Blog and its associated YouTube video, demonstrating the ability of PowerPoint 2010 to use DirectX and hardware support for its rendering engine. Great effects can be achieved smoothly. Like a lot of us (most unwilling to admit), I’m impressed by reflection of a video as it plays.

Slide Show Preview

Slide Show Preview

Setting up the 3D Rotation Effects were also easy:

Format Video

Format Video

Same goes for the Reflection effect:

Format Video Reflection

Format Video Reflection

Enjoy:

Reflection Overflow

Reflection Overflow

Now saving this pptx file showed me that in-fact the video file is embedded, so it’ll make moving the pptx file easy (so long as it doesn’t require to be emailed).

File Size

File Size

Once a video is added you can make use of it on several slides, and use the ‘Trim Video‘ feature to select a section of it for each slide.

Trim Video

Trim Video

2 Slides each with a segment of the video:

Reusing Video

Resuing Video

The presentation file along with the video that was embedded, there is only 1 copy of the video in the pptx file.

File Size of Multiple Video Copies

File Size of Multiple Video Copies

“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“.
TypingTextAnimationControls

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.

Update:
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

Update:
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.