In a recent memory game which I published here last week, second variation of the game shows buttons which seem to rotate when clicked. Users ask me how I made this possible? The InBuilt states of a button (Rollover, Down, Visited) and the custom states have their location and size locked to the Normal state. You can see this in a screenshot where the Rollover state is selected in a button created from a SVG:
Watch the lock symbol in the bottom right corner of the state on the stage (marked by a red circle). You see the Properties panel, Options tab: Transform options are all dimmed. That remains the case even if you click the lock symbol a couple of times: it will disappear but you will still not have the Transform possibilities.
It IS possible to replace the image in a state using the style tab, as illustrated in this screenshot:
However using this possibility for a rotating button would mean creating multiple images (in this case in a vector application like Illustrator) for the different states of the button to be rotated. Clicking the button should trigger an action ‘Change State…’ where the appropriate Custom state is replacing the Normal state. You cannot replace the Rollover/Down states, they would have to be taken out or have a ‘neutral’. appearance
That type of cumbersome workflow (for the game 4 images for each button, 3 extra to be created in Illustrator) reminds me of the old processus for creating image buttons, or the old captions where you needed a graphics application and a text editor. That is the reason I looked out for an alternative to be done entirely in Captivate.
Secret = Empty Normal state
Lot of developers escape the problem by using a click box on top of a static (non-interactive) multi-state object. The click box, invisible by definition, is used to trigger the ‘Change State’ command for the multi-state object. That is functional, but why use two objects when it can be done with one. Another use of the ’empty Normal state’ which I will explain in a future blog for static objects. Here you find the workflow step-by-step used for the rotating buttons in the game.
Step 1: invisible button
Delete the Rollover and Down states in the Object State panel using the right-click menu. Don’t be confused by the fact that the Actions tab has disappeared when in Object State view, this SVG was activated as button:
Step 2: Image in Normal state
Step 3: Duplicate state and Rotate image
Repeat this third step as many times as you need until you have all the required states (depends on the wanted rotation angle of course).
Step 4: action and test
For the button use the simple action ‘Go to next State’ to be triggered by the On Success event of the SVG-button. Deactivate the option ‘Continue playing Project.
Test using F11, Preview HTML in Browser (non-responsive project). SVG as button is only supported for HTML output. If you want to test in a Fluid Boxes project, you’ll need to use a static fluid box to be able to add the image to states.
You will not see the rotation as effect, because effects are not possible in states. If you really want to mimick such a rotation, make the rotation angle smaller and use a While loop.
In fact this workflow is similar to using a Click box on top of a multi-state object: the role of the click box is taken over by the invisible SVG, and the static multi-state object is replaced by custom states in the button. It is not really necessary of course to use the same image for the invisible button and the added images. I just find it easier because you have a reference frame which is the bounding box of the invisible SVG. You have to be sure that clicking the SVG image in any position will be in the bounding box of the invisible button.
As you probably already understood, this workflow is only possible when the bounding box requirement is fulfilled. It is not a solution when you move the button to another location using a motion path. If you are on the most recent release (11.5) have a look at the Quick Start projects which have a horizontal accordeon layout. You'll see how complicated the advanced actions are due to the fact that you cannot move a button.