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

7 thoughts on ““Typing” animation effect in SketchFlow

  1. One other option is to make a behavior for the type-on effect. I just created a simple sample on my blog:


  2. Great stuff Christian, thanks for a great alternate approach post. I hadn’t worked with custom behavior yet, great way to go about implementing this kind of feature.

    I tried it out and it worked great.

    I also put up your code sample on GitHub at this location: http://gist.github.com/174336 as it took me a few steps to extract it from your blog post. I’ll update my post with a link to your post and the code file.

  3. […] “Typing” animation effect in SketchFlow « [NickJosevski(Blog = ".NET")] nickjosevski.wordpress.com/2009/08/25/typing-animation-effect-in-sketchflow – view page – cached #RSS 2.0 [NickJosevski(Blog = ".NET")] » “Typing” animation effect in SketchFlow Comments Feed [NickJosevski(Blog = ".NET")] WCF Beginners Series Keep SketchFlow Animation States Simple — From the page […]

  4. […] “Typing” animation effect in SketchFlow « [NickJosevski(Blog … […]

  5. I found this guide *VERY* hard to follow, very little diagram and description on the steps. Could you please re-write this or update this?? Like how do we set the collapse property or the wipe animation??

    • Thanks for the feedback Ricky, you are very correct, coming back to my own instructions over a year later they are not descriptive enough to follow to work through this.

      I have created a solution on GitHub (public repository, that I will update the post with) where you can access the working sample of this animation.

      Having done this action a-new I will update the steps in the post with more details too.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s