Using the Symbol Editor > Using More Features of the Symbol Editor > Working with Interactors > Applying Interactors to Multiple Objects

Interactors change the value of a parameter or condition following mouse events on symbol objects. Use the change in parameter value to coordinate state change for multiple symbol objects. For example, you can create a button whose background color and text change when the button is clicked, or a button with multiple rotating images.

Creating a Push Interactor for Multiple Objects

Push interactors in the Symbol Editor are used to fulfill a state in a condition. Once the condition has been fulfilled, the object to which the condition is bound changes representation. When a Push interactor is added to a symbol, the condition can be reused by other objects to make coordinated symbol transformation. To do this:

  1. In the Symbol Editor, open the symbol created in Creating a Push Interactor.
  2. Right-click the Text object in the Symbol Outline pane.
  3. Select New Condition in the shortcut menu. The New Condition dialog box opens.
  4. Select [click="BUTTON_DOWN"] in the Other conditions defined for this symbol pane.
  5. Click OK. The condition is selected under the Text object in the Symbol Outline pane.
  6. Select the Paint tab in the Styling Customizer.
  7. Enable Stroke On.

When you run this symbol in Preview mode, the Text object is outlined when the mouse is pressed on the Shape object.

Creating a Rotation Interactor for Multiple Objects

A rotation interactor changes the value of a parameter. As the value of the parameter changes, the objects bound to it are transformed. By binding more than one object to a rotation parameter, you create synchronized movements in a symbol. To rotate multiple objects, do the following:

  1. In the Symbol Editor, create a new symbol. For more information, see Making a New Symbol.
  2. Add a Rotation interactor on the Text object bound to a float parameter. Use the method explained in Creating a Rotation Interactor.
  3. Create an ellipse object to the left of the Shape object.
  4. With the new ellipse object selected, click the Transform tab in the Styling Customizer.
  5. Bind the Angle field to the rotation parameter. To do so, set the following values in the Transform Element Using Parameter dialog box:
  6. Enable Center Relative to base.
  7. Test this symbol by clicking the Preview button.
  8. Save this symbol.

When you rotate the mouse over the Shape object, the ellipse rotates in the opposite direction to the text object.

images/diasym_interactorrotate.png

Figure 2.16 Rotating Multiple Objects.