Create the Fill and Clip Evaluations

  1. With the rectangle selected, navigate to the Evaluation Editor.
  1. From the Property drop-down menu, select Fill.
  1. From the Type drop-down menu, select Discrete.
  1. 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.
  1. Enter the conditions as follows:
  • Condition: 1 Value: Blue
  • Condition: 2 Value: Red
  • TIP: To add a condition, click the Insert New Condition icon in the bottom of the view.
  1. With the rectangle element still selected, create a Linear evaluation for a Clip top property that will animate the rectangle to rise and fall.
  1. From the Property drop-down menu, select Clip top.
  1. From the Type drop-down menu, select Linear.
  1. In the Expression field, type : dp
  • You will use this text to test the evaluations in the next procedure.
  1. Make sure the Auto-Range checkbox is not selected.
  1. 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.
  • 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;