3 Replies Latest reply on Sep 30, 2009 11:38 AM by NickDF__

    Play entire transition duration within component state

    clonberger

      Is it possible to play the entire designed transition instead of canceling out of the condition changes?

       

      ie:  Over -> Down grows a button... but if user lets go of mouseDown the animation will cease and retrigger the defined down->over transition.

       

      I essentially want to instruct FC to play a transition entirely once it's triggered, not just while the condition (over/down/up) is valid.

       

      Thanks guys...

        • 1. Re: Play entire transition duration within component state
          Tvoliter Adobe Employee

          Very good question. I have run into this problem with some of my own designs as well.

           

          The design of the transition mechanism interrups a transition playing on a component when the component changes state. I'd like to see Catalyst add a feature to control this, but for now you will need to use a work-around

           

           

          I played around with Catalyst for a while and found a bit of a hack to make this work. I've attached an example file. Here is what I did:

           

          1. Create a button

          2. Double click to edit the button in place

          3. In the "Over" state resize the button to make it larger

          4. Smooth the transition from "Normal > Over" and "Over > Normal"

           

          Now if you run the project at this point you will notice that if the mouse exits the bounds of the button as the transition Normal > Over is playing, then the transition reverses mid-transition and plays Over > Normal. The trick I found is to temporarily make the bounds of the button really big so that the mouse can't leave the mouse. This prevents the button from changing back to the Normal state during the transition. I acommplished this by making a rect with 0 opacity become visible at the beginning of the transition and then invisible at the end of the transition. Since it has 0 opacity you can't see it, but because it is visible it prevents the mouse from rolling out of the button.

           

          Here is how to build this trick

          5. While still editing the button in place in the Over state, draw a really large rectangle that is the size of the stage. We are going to use this rect to "block" the mouse from rolling out of the button during the transition

          6. In the Layers panel, rename the large rect you drew to "blocker rect"

          7. In the Timeline panel, edit the "Normal > Over" transition as follows:

          8. Select "blocker rect" on the artboard and choose Add Action > Set Property. You should now have a "Set Property" action in the "blocker rect" track of the Timeline panel

          9. In the Properties panel, make it so Set Property sets "visible" to "true"

          10. choose Add Action  > Set Property again. Make this action set "visible" to "false" in the Properties panel

          11. Now you have two "Set Property" actions in the timeline. Drag the 2nd one which sets visible to false so that it occurs at the end of the transition. Leave the 1st one which sets visible to true at the beginning.

           

          Run the project and you will see the that the "block rect" appears at the beginning of the rollover and disappears at the end of the rollover. However, we still see "block rect". The last step is to make it transparent

           

          12. Select "blocker rect" in the "Over" state and set the opacity to "0" in the Properties inspector

           

           

          You can check out the project I built for an example. To see what is going on, set the opacity of "blocker rect" back to 100.

           

          - Ty

          • 3. Re: Play entire transition duration within component state
            NickDF__

            this seems extremely interesting and helpful. If I can make it work I will solve one of the problems that kept me awake for 24 hours. thanks.