Visibility/Position animation

The Visibility/Position animation allows you to move an object horizontally and/or vertically during run time.

On the Graphics tab, in the Animations group, click Visibility/Position to add the animation to an object. Double-click on the object to open its Object Properties dialog.

Figure 1. Object Properties: Visibility/Position
Web Studio Help dialog objectproperties position Visibility/Position animation

Use the dialog to configure the following properties:
  • Visibility box: Configure a tag/expression in this box to control the visibility of the object. When the value of the tag/expression is 0 (FALSE), the object is hidden, and when the value is non-zero (TRUE) or the box is left empty, the object is visible.

    Objects that are hidden cannot be clicked/tapped and therefore cannot execute any Command animations applied to them.

    For some types of screen objects (i.e., all Shapes, Standard-style Buttons, and Linked Pictures), Visibility controls not just the visibility but the opacity of the object, and the value (from 0 to 1) of the tag/expression determines the percentage of opacity. For example, a value of 0.8 would give the object 80% opacity. The value can change during run time, so you can use it to make objects appear to fade in and out. Please note that you must have Enable Enhanced Graphics selected in the project settings in order to use this feature. For more information, see Project Settings: Viewer.

  • Horizontal and Vertical: Configure these settings to determine how the object moves in the screen:
    • Tag/Expression boxes: Configure a tag/expression that will determine the position of the object during run time; as the value changes, the object is moved in the screen. Whether you can configure a tag or an expression depends on whether the Slider/Gestures option (see below) is selected:
      • If the Slider/Gestures option is not selected, then configure either a tag or an expression in this box.
      • If the Slider/Gestures option is selected, then configure only a project tag (Integer or Real type) in this box. When the end user manually moves the object, the new value is written back to the tag.

      For the horizontal position, the value increases as the object moves to the right and it decreases at the object moves to the left. For the vertical position, the value increases as the object moves to the bottom and it decreases as the object moves to the top.

    • Value range boxes: Enter the minimum and maximum values for the tag/expression. If the actual value goes outside of its range, then the value is ignored and the limit is used instead.
    • Position boxes: Enter values to specify how far (in pixels) the object can move from its starting position. The starting position is equal to “0,0″. Values greater than 0 allow the object to move right and down, and values less than 0 allow the object to move left and up.

      During run time, the object’s position is proportional to the tag/expression value within its range. For example, if Position is 0 to 100 and Range is 0 to 10, then each increment in the value will move the object 10 pixels. This is true for both Horizontal and Vertical.

    • Reference drop-down lists: Select a reference point on the object. The following table shows how your selections for Horizontal and Vertical work in combination:
        LEFT CENTER RIGHT
      TOP Web Studio Help illus position top left Visibility/Position animation Web Studio Help illus position top center Visibility/Position animation Web Studio Help illus position top right Visibility/Position animation
      CENTER Web Studio Help illus position center left Visibility/Position animation Web Studio Help illus position center center Visibility/Position animation Web Studio Help illus position center right Visibility/Position animation
      BOTTOM Web Studio Help illus position bottom left Visibility/Position animation Web Studio Help illus position bottom center Visibility/Position animation Web Studio Help illus position bottom right Visibility/Position animation

      This reference point is meaningful only if you have the Resize animation added to the same object. The position of the object is always based on this reference point, regardless of the size or shape of the object.

  • Slider/Gestures: When multi-touch gestures are enabled, the end user can use one- or two-finger “slide” gestures to move this object during run time. The changes in position are written back to the project tags configured in the Tag/Expression boxes above.
    • Enable option: Select to enable gestures on this specific object.

      Please note that Multi-Touch must also be enabled for the project and screen.

    • Inertia option: Select to apply inertia to this object, so that it slows down naturally rather than stops abruptly when the end user stops touching it.
    • Disable box: Configure a tag/expression. When its value is TRUE (i.e., not 0), then gestures are disabled on this object.
    • Security box: Type the minimum security level that the end user must have to use gestures on this object.

    For more information, see About using Multi-Touch in your project.

Visibility/Position animation