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.

4 thoughts on “Keep SketchFlow Animation States Simple

  1. […] Keep SketchFlow Animation States Simple « [NickJosevski(Blog = ".NET")] – view page – cached #RSS 2.0 [NickJosevski(Blog = ".NET")] » Keep SketchFlow Animation States Simple Comments Feed [NickJosevski(Blog = ".NET")] WCF Beginners Series A Simple and Quick Animated Dialog Action in SketchFlow — From the page […]

  2. My main problem is when you are in the green state and select ActivateState to “go to red” for example, using the same button in each states.
    When you change the environment to the red state the ActivateState is still selected to “go to red”, and if you change it it will change in red state, and vice-versa.

    • Hi Tito,
      Thanks for your comment, but sorry I haven’t been using Sketch Flow or similar tools for over a year now, so I’m very rusty, you’ll have better luck asking a direct question on about ensuring the current state reflects what’s currently displayed, or more specific details to the problem you’re trying to solve.

      Good luck 🙂

Leave a Reply

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

You are commenting using your 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