“Typing” animation effect in SketchFlow

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.

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

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).

The 6 second value is based on how long your line of text is and how fast you want the “typing” to occur.

Here’s a more detailed breakdown…

Step 1 – Control Setup:

• Create an “existing text” textblock.
• Create a rectangle that matches the size of the text set at opacity 50% and appropriate grey (highlight colour).
• Create a white no border rectangle for the “wipe action”
• Create a “new text” textblock.

Controls List

Step 2 – Base state:

• Collapse the “hide text” white rectangle
• Collapse the “new text” textblock
• Set the opacity 0% on the “grey highlight” rectangle

Base State

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

Insert New Frame action

Step 3 – Animation of highlight:
Set the opacity to 50% in animation frame #1.

Grey Highlight

Step 4 – Animation of delete existing:
Set the collapse property for existing text and the grey highlight rectangle in animation frame #2.

Step 5 – Setup frame for new text:
Set the collapse property back to visible for the new text and white rectangle. The white rectangle is on top, so it appears as nothing has happened. So set this animation frame to something fast i.e. 0.1 seconds. This is animation frame #3.

Step 6 – Animate the wipe:
Set the width property to zero for the white wipe rectangle in animation frame #4. Set the transition to this frame to your magic number, in this case 6 seconds. This transition gives the illusion of the text appearing as if typed.

Four Frames of Animation

There you go, a 4 frame animation simulating a user typing some text.

*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.