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