*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.
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.
- 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.
- Create a “simulated_typed_text” textblock, fill this with the text you want to appear as being typed.
- 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.
- Create a “wipe_action_rectangle” white no border rectangle for the animation effect action. This is a rectangle that will cover “simulated_typed_text“.
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.
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)
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.
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.
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).
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.