In a recent memory game which I published here last wee, second variation of the game shows buttons which seem to rotate when clicked. Already a user asked how that was possible? The other 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 visible in a button based on a SVG:
Look at the lock symbol in the bottom right corner of the state on the stage. I added the Properties panel, Options tab where you see that all Transform options are 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 options.
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 to create several images (in this case in a vector application like Illustrator) to achieve the rotating button. Clicking the button should trigger an action ‘Change State…’ where the appropriate Custom state is replacing the Normal state. You cannot change the Rollover/Down states, they would have to be taken out or made ‘neutral’.
That type of cumbersome workflow (needed 4 images for each button, 3 extra to be created in Illustrator) reminds me of the old process to create image buttons, or the old captions. That is the reason I searched for an alternative which could 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 multistate object. The click box, invisible by definition, is used to trigger the ‘Change State’ command for the multistate object. Certainly possible, but why use two objects when it can be done with one. Another use of the ’empty Normal state’ which I will explain in another blog for static objects. This is the workflow step-by-step which I used for the rotating buttons in the game.
Step 1: invisible button
I used a SVG as button, but this can also be done with a transparent/shape button or eventually with a bitmap image used as button. As you can see in the screenshot below, the SVG (invisible) is in the state but I set Opacity to 0%. The default setting ‘Enable click in Bounding box’ was kept, to be sure that the ‘button’ had space for rotated versions of the SVG. For a bitmap image you can also use the Opacity approach. For a shape (or transparent) button set Opacity for Fill and Stroke Width both to zero.
Delete the Rollover and Down states in the Object State panel. Don’t be confused by the fact that the Actions tab is not appearing when in Object State view, this SVG was activated as button:
Step 2: Image in Normal state
Make sure you have the image(s) in the Library. Open the State view, and drag the image you want to be able to rotate to the Normal state. Use Align options to resize and align it with the invisible buttons. You may need to use the Arrange option to get the image to Front, to be able to recolor it as I have done:
Step 3: Duplicate state and Rotate image
In the Object State panel duplicate the Normal state to a Custom state. Generic name will be NewState1, you may rename it. Select the image, and since it is not locked (not a button) you can use the Options tab in its Properties panel to rotate the image.
Repeat this third step as many times as you need until you have all the required states (depend on the 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 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.