Create the Fill and Clip Evaluations

  1. With the rectangle selected, navigate to the Evaluation Editor.
  2. From the Property drop-down menu, select Fill.
  3. From the Type drop-down menu, select Discrete.
  4. From the Type drop-down menu, select Script and then type or copy-and-paste the script, at the end of this topic, in the Expression space.
  5. Enter the conditions as follows:
    • Condition: 1 Value: Blue
    • Condition: 2 Value: Red
  6. TIP: To add a condition, click the Insert New Condition icon in the bottom of the view.
  7. With the rectangle element still selected, create a Linear evaluation for a Clip top property that will animate the rectangle to rise and fall.
  8. From the Property drop-down menu, select Clip top.
  9. From the Type drop-down menu, select Linear.
  10. In the Expression field, type : dp
  11. You will use this text to test the evaluations in the next procedure.
  12. Make sure the Auto-Range checkbox is not selected.
  13. Enter the Range values as follows:
    • Min: -30 Value: 90
    • Max: 80 Value: 0
      NOTE: The range to which the Clip is set determines how much of the element is covered. When the Clip value = 0, the element is 100% uncovered (i.e. fully visible); when Clip = 100, the element is 100% covered (i.e. completely hidden). Configure this evaluation to have 10% of the element visible at the minimum value.
  1. Copy the script below for Step 4:
    var ActualValue = Read("{*}");

    var FillColor = 0

    if (ActualValue <=10)

    {{ FillColor = 1; }}

    else if (ActualValue >=50)

    {{ FillColor = 2; }

    FillColor;