Animator 1.3 Sencha Docs

Custom JavaScript

While Animator has a number of default actions, it is also possible to insert custom JavaScript code that is executed when the event occurs. To do this, select Custom JS option from the pull-down menu next to an action, and click Edit or Edit Externally to edit the code in the editor of your choice.

Animator JavaScript Editor

The Animator JavaScript editor incorporates code auto-completion for several objects:

  • controller. This object is used to access all objects currently on the stage and for basic scene manipulation.
  • console.
  • ormma. For accessing and manipulating ORMMA properties.
  • mraid. For accessing and manipulating MRAID properties.

The editor also incorporates auto-substitution for certain words:

  • object_id. Lists all objects in the current scene.
  • scene_id. Lists ids of all scenes.
  • scene_name. Lists names of all scenes.
  • mraid_event. Lists all possible choices for valid MRAID events. Choosing an event from the list substitutes mraid_event.

It is also possible to add additional code completion and substitution to the Animator JavaScript editor with a configuration file. Be sure the file contains valid JSON and uses the suffix .animcomplete, then place it in the application folder in a subfolder called user_config. The location of the subfolder will vary according to your operating system, as follows:

  • OS X: Users/<username>/Library/Application Support/Sencha, Inc./Sencha Animator/user_config/

  • Windows XP: C:\Documents and Settings\<username>\Local Settings\Application Data\Sencha, Inc\Sencha Animator\user_config\

  • Windows Vista/7: C:\Users\<username>\AppData\Local\Sencha, Inc\Sencha Animator\user_config\

  • Linux: ~/.local/share/data/Sencha, Inc./Sencha Animator/ yourUserFolder/Library/Application Support/Sencha, Inc./Sencha Animator/user_config/

Download a sample configuration file.


To easily manipulate the objects on the stage, access them through the root controller object.

Once an object is retrieved through controller, all regular DOM properties can be accessed and manipulated.

W3Schools JavaScript and HTML DOM Reference



object_id - the id of object to return, as defined under Object Properties -> General -> ID. Type object_id to see the list of valid choices.

Returns the object. Only the objects in the current scene can be retrieved.


asset_name - name of the asset in the library.

Returns a relative URL of the asset that was imported in the project library.


Starts the scene that follows the current scene. If there is no next scene nothing occurs.


Starts the scene that precedes the current scene. If there is no previous scene nothing occurs.


url - a valid URL.

Redirects the current browser window to the given URL.


Restarts the current scene.


scene_id - ID number of the scene to be started. The scene numbers are automatically generated depending on the scene order and visible in the scenes panel. Type scene_id to see the list of valid choices.

Starts the scene with the given ID number.


scene_name - name of the scene to be started. The scene names can be changed by double-clicking in the scenes panel. Type scene_name to see the list of valid choices.

Starts the scene with the given scene name.