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