The Animation Editor feature allows you create your own animation components using your own image frames. This works for any type of points. Once created, they can be like any of the built-in components. You can bind a point and it should animate automatically or create a program to control them.
If creating a custom program to control them, be sure to remove the basicBinding, ductComponent, and ductProgram tags so that they don't conflict with your program when controlling them.

Before Using Animation Editor

Make sure the images exist in Desigo Optic database files so you select them through the Animation Editor.

You can upload the images two ways:

  • You can select all images from the desktop or wherever they are located and drag-and-drop on the Graphics Builder world. Once dropped, they automatically get added to the Files system.
    You can delete the images dropped into the GraphicsBuilder world.
  • Navigate to Folio App > Files and upload each one there directly.

Once they exist in the Files system, you can access them through the tool to use in the Graphic Builder app.

Using Animation Editor

  1. Navigate to the equipment and open the graphic you want to add an animation component to.
  1. In the Graphics Builder right menu, under Advanced, select Animation Editor.
Animation Editor
  1. In the slider menu, select one of the two options:
  • New - Create a new animation component
  • Delete - Delete an existing animation component


  1. When you select New, the Animation Editor dialog box displays.
  1. Select a category from the drop-down and then click Apply. This allows you organize custom components.
    Categories are sections within the Components pane.

You are creating your own custom category, not applying to the built-in category.

  1. After you have created a new category, the Animation Editor dialog box displays, allowing you to choose a name.
    If you are selecting an existing category, it automatically skips to the step for the Component Name and Animation Type.
  1. The Animation Editor dialog box displays, allowing you to select a name for the component and image type.
  • Numeric - These are components controlled with a numeric point.
    Example: Damper or coil component.
  • Boolean - These are components controlled with a boolean point.
    Example: Light bulb, fan, or pump.
  • Enum/String - These are components controlled with an enum or string point.
    Example: Fan or pump.

All types support single or multiple images. If a single image is selected for a particular value, there is no animation. If multiple images are selected for a particular value, they animate evenly between the selected.


  1. When you select Delete, the Animation Editor dialog box displays.
  1. Select an animation component to delete from the drop-down menu.
  1. Click Apply and then click Delete.
  • A confirmation displays.
  1. Click Delete.