No timellines for the first Interaction (when I use 2 for the same button)

Question

I have 3 pages and one button (on page 1) that have (a) an OnClick "Play transition to page2" AND (same button) (b) an OnClick "Play transition to page3"...
The first transition (transition to page2) seems to play without any regards to the length (seconds) of the timelines that I set... it seems to do whatever it suppose to do but in a fraction of a second (like if I had set the timelines to 0 sec.). After, the second transition (transition to page 3) works fine (according to the number of seconds that I set in the timelines.
Is it a bug or a misunderstanding on my part?
Thanks

Answer 1

Thanks for posting your project, Roger.
What's happening here is this:
You have two interactions on the button: On Click > Play Transition to Page2, and On Click > Play Transition to Page3. You expected it to play Page1 > Page2, and THEN play Page2 > Page3, which is understandale, because that's sure as heck what the interactions panel LOOKS like it's going to do. Right?
Well, unfortunately, it doesn't work that way. Whenever you trigger a "Play Transition to State" interaction, it happens immediately, cancelling the current transition and starting the new one. So Catalyst is starting the transition Page1 > Page2, and then immediately interrupting it with Page2 > Page3.
You can corroborate my explanation by trying this: add another button with the interaction: On click > play transition to Page1 > Page2. When you click that button, the transition plays incorrectly.
I think there is a conceptual mismatch here. It seems that you're trying to use states like keyframes. In this case, Page2 is just an intermediate keyframe, and Page3 is the actual destination. Right? However, states are not keyframes. They are the various destinations, or endpoints, of your application. E.g. If your website has a "Home" and a "Products" page, those would be your states, regardless of how you choose to animate between them.
So, then, how do you do more elaborate, keyframe-like animations? There are basically two answers to this question:
A) FC's animation tools are for the simple transitions that typically happen in web applications. If you want sophisticated animation, you can use Flash Professional, which can create beautiful, incredibly complex animations. Flash Catalyst and Flash Professional are not tightly integrated at this point (you can embed a SWF created in either product in a project created in the other), so you'll need to make a judgment call for your particular project.
B) You can do somewhat more complex animations in FC by adding additional actions, other than the default ones, to your timelines. Here's a simplified example that will illustrate the technique:
1.  Create a new project
2.  Drag out a button from the Wireframe Components panel
3.  Duplicate state
4.  In Page2, move the button somewhere else
5.  Look at the Page1 > Page2 transition. You should see a 0-length "Move". Click "Smooth Transition" to make this take some time. Preview the transition. You should see a simple linear move. Select the move effect and Look in the properties panel. Notice the combo box that says "State Transition". Don't change it.
6.  With the button selected, in the Timelines panel, click "Add Action > Move". Select this move effect and look in the properties panel. Notice the combo box says "Relative", with X and Y beneath it.
7.  Drag the original move effect so that it happens AFTER the relative move. Preview the transition. You should see the button move to the relative position (by default, X and Y increase by 100px each), and THEN move back to the Page2 position.
8.  By changing X and Y of the relative move, you can get the button to go anywhere.
9.  Let me know if it works!
One caveat to this technique: make sure your moves are arranged down and to the right in the timelines panel. There is a bug that if you have two moves adjacent, and they are arranged up and to the left, they won't work correctly.
-Adam