I have a relatively simple two-part UI animation that I am trying to prototype using Edge Animate. It is a button that has both a hover state and a "clicked" state. I am using color transitions for the hover and rotation for clicked.

Here's a simple video of me scrubbing through the timeline, illustrating the transitions.


As you can see I have set up the timeline with four labels, one for each state. Tweens between the labels represent transitions. I've placed stop() calls on the timeline at the end of the transitions ... so that the animation stops! =)

In order to capture all transitions I need to use both play() and playReverse() from certain labels. So depending on the button state I may call play("SH") or playReverse("SH") for instance.

The problem I'm having is in playing from a label that also has a stop() applied. This screenshot might make that more clear.

enter image description here

I want to avoid complicating the timeline the a bunch of extraneous labels. Any suggestions on a good way to do this?

  • Is this a question about coding an interaction or designing an interaction? – dnbrv Feb 24 '15 at 18:35
  • Neither. =) It's a question about using a UI prototyping tool to mock up an interaction. – Mark Hazlewood Feb 24 '15 at 18:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.