1 person found this helpful
Here is how I recommend building this:
1. Draw with the wheel artwork, select it all, right click, and Convert to Custom Component
2. Double click the new custom component to edit it
3. Select each part of the wheel and convert it to a button (this is so we can assign click interactions later)
4. Click "Duplicate State" several times. You will want a state for each position on the wheel
5. Now you need to edit the rotation of the wheel in each state to put the "active" bubblle in the right location.
Go to each state and use the Transform tool to rotate the entire wheel. Each state will remember this rotation
6. Now select each button on the wheel, and in the Interactions panel create a "On Click Play Transition to State X" interaction
Lastly, you need to handle the animation:
7. Since you rotated the wheel in each state, Catalyst automatically generated effects for you in the timeline, but they don't have a duration. Shift-select all the transtions in the left side of the Timeline panel and then click the "Smooth Transitions" button. This will smooth everything in one go.
Thanks so much! That is totally working.
But I am still having a problem. In addition to the rotation I would like to have a new group of images appear in each state, like a popup -- i have attached an image. I understand how to do this in the transition timing, but when I click the button i have created to fade out the new images (popup) the wheel buttons no longer function.
1 person found this helpful
Glad to hear that got you going.
I am guessing now you have a custom component with a whole bunch of states. In each state the wheel is rotated to a different position and you have an additional graphic in each state for the bubble. For each transition you have a Rotate effect that moves the wheel and then a Fade In effect that shows the bubble. If I understand right, after the bubble is dismissed by clicking on the "x" the wheel doesn't work?
I am curious, are you changing visibility or alpha on the bubble to hide and hide it? I ask because if you set alpha=0, then the object is not visible, but it will get mouse clicks. If it is on top, then it will prevent clicking on objects underneath. Make sure you are using visibility (the eyeballs) then when the popup disappears the wheel will be clickable.
By the way, if you have 10 or so different popups and you want it so that clicking the "X" closes them, here's an efficient way to do this. Create a single "X" button. Create an interaction for this button "On click play action sequence". You now have an action sequence in the timeline. Now shift select all the popups in the layers panel, and in the Timeline choose Add Action > Set Property. In the properties inspector adjust the Set Property effect so it sets visibile to false. Now the x will hide all popups, so you can reuse this X for every state.
You are understanding -- and thanks for being so helpful.
I am a bit confused by your questions wether I am changing the visibility or the alpha. For my "close" buttons I am using a fade action and setting the transparency from -- to 0. Perhaps there is a cleaner way to accomplish this. . . The trouble with using the eyeballs is i want the "popups" to appear when the new state loads and only disappear when the "X" is clicked (but be able to reload when that state is loaded again). I am not sure how to use the eyeballs in an action sequence or if that is even possible.
Your tip about creating one "close" button is much appreciated. I have attempted it, but I do not see where to see how to set the property effect to visible false. When I select "set property" from the "add action" menu the only options I can see in the properties inspector are property (which has the options Alpha or Enabled).
I think there is a problem with the way I am "closing" the popups, but I am not sure the best way to fix it. . .
My mistake, it looks like the "Set Property" action in the timeline doesn't current offer "visible" as a settable attribute. I have a bug in the works to fix that for the next release.
Here is a work-around. Make a custom component out of the item you are using as the popup. Make the popup custom component have two states, one where the content is visible, the other where it is not. Then in the action sequence in the application that closes the popup you can use the "Set component state" action to set the popup custom component to the state in which it is invisible.