Please enable JavaScript to view this site.

The actions that you can assign to objects (see Object Links, Actions & Data) include the ability to call scripts. In addition to entering your own JavaScript code, you can also call the methods listed below made available by the HelpXplain object.

Attaching scripts to elements

To attach a script to an element, first select the element. Then select Execute a script  in the Link & Interaction options in the Shape Properties panel on the right and enter the script in the Script: field.

This reference is for methods for individual objects

Note that that this reference is to scripts attached to individual objects. See Global Scripts in the Developers chapter for details on scripts used globally for your entire Xplain.

The target attribute:

Target element the script is attached to:

If you want the script to work on the element it is attached to, the target attribute of the methods used must always be "this", otherwise the script will not be applied to the selected element. Don't use the name of the element in this case.

Example: xplain.animateTo(this, 2, {x:100, y:200, delay:0.5})

Target a different element:

To target a different element, enter the name of the element in all lower case and preceded by a hash character (#) and enclosed in quotes.

Example: xplain.animateTo("#element2", 2, {x:100, y:200, delay:0.5})

HelpXplain methods that you can call

The xplain object exposes the following object methods. See Global Scripts for the global methods that apply to all the animations in the current slide (i.e. the entire animation sequence).

Important note on using the delay: option

The delay option available in the vars object cannot be included in the timeline, so if you use one you need to make allowance for that in the rest of the timing of your slide. We recommend using short delays to make this easier.

Object animation methods

xplain.animateTo(target:this, duration:Number, vars:Object)

Animates properties of an object to the specified destination values from the current values.

target: this

The target is always this when you are attaching a script to an element.

duration: Number

Duration in seconds

vars: Object

An object (normally a literal object defined with curly braces) defining the end value for each property that should be animated and the optional easing method to be used and an optional delay.

Easing and delay

The easing and a delay before execution are included in the vars object using the syntax ease: name, and delay: xx, where xx is the number of seconds.

Example:

xplain.animateTo("#logo", 5, {x:100, y:200, ease: Quad.easeInOut, delay: 0.5})

Animates the element with the ID "logo" to x100 and y200. The animation takes 5 seconds, starts after a delay of 0.5 seconds and uses the Quad easing, with additional easeIn and easeOut. (See further below for a list of the available easings).

xplain.animateFromTo(target:this, duration:Number, fromVars:Object, toVars:Object, delay:Number)

Animates the properties of an object from value 1 to value 2. This allows you to define both the starting and ending values of the animation, instead of using the current position of an object as the starting value. The syntax is exactly the same as animateTo(), just with an additional vars object for the starting values.

target: this

The target is always this when you are attaching a script to an element.

duration: Number

Duration in seconds

fromVars: Object

An object (normally a literal object defined with curly braces) defining only the starting value for each property that should be animated. This object does not include the easing or delay settings. The easing must be in the second, toVars object, and the delay comes as the last parameter.

toVars: Object

An object (normally a literal object defined with curly braces) defining the end value for each property that should be animated and the optional easing method to be used.

Easing and delay

The easing and a delay before execution are included in the toVars object using the syntax ease: name, and delay: xx, where xx is the number of seconds.

Example:

xplain.animateFromTo("#logo", 5, {x:0, y:0}, {x:100, y:200, ease: Quad.easeInOut, delay: 0.5})

Animates the element with the ID "logo" from x:0 and y:0 to x100 and y200. The animation takes 5 seconds, starts after a delay of 0.5 seconds and uses the Quad easing, with additional easeIn and easeOut. (See further below for a list of the available easings).

xplain.set(target:Object, vars:Object, delay:Number)

Changes the properties of an object without animation. This is exactly the same as animateTo() but without any animation. A delay before setting can be defined in the vars object, however.

target: this

The target is always this when you are attaching a script to an element.

vars: Object

An object (normally a literal object defined with curly braces) defining the values to be set and an optional delay inserted as the last parameter.

Example:

xplain.set("#logo", {x:100, y:200, delay:0.5})

Changes the position of the element with the ID "logo" to x100 and y200. The change is applied after a delay of 0.5 seconds.

Audio methods:

xplain.audioenabled()

Returns TRUE if audio is currently on (not muted), and FALSE if audio is muted.

xplain.enableaudio(enable:Boolean, volume:Number)

Enables or disables audio and changes the audio volume.

enable: Boolean

This parameter is required. True unmutes (enables) audio, false mutes audio.

volume: Number

This parameter is optional. It changes the volume between 0 and 1 in decimal steps. A value of 0.5 sets the volume to 50% of current user audio volume.

xplain.playmedia(target:String, command:String, position:Number, playAcrossSlides:Boolean)

Interacts with an audio object and starts, pauses or stops playback.

target: String

The name of the audio object, which should be animated. This must be in all lower case letters (all names are downcased on export). You can get the audio target name from the Objects list in the left panel of the HelpXplain screen.

This parameter can also be this (without quotes) but only for audio objects. Using this on any other object will raise an error.

command: String

The audio command to execute. Possible values are 'play', 'pause' and 'stop'. This parameter is optional. If undefined, the audio object will toggle between play and pause.

You can achieve a 'rewind' command by combining 'play' or 'stop'. with setting the position to 0.  

position: Number

Sets the current position of the audio playback in seconds. This parameter relates to the HTML Audio/Video currentTime property. This parameter is optional. If undefined, the audio object will start at the current playback position.

playAcrossSlides: Boolean

Boolean value to keep an audio object playing, if the current slide changes. By default, audio objects stop playing when the current slide changes. This parameter is optional.

Examples:

xplain.playmedia('audio1', 'play', 0, false)

Starts playback of the audio object named "Audio1". When the user changes to another slide, the audio object will automatically stop playing.

xplain.playmedia('audio1', 'play', 38)

Sets the current position of "Audio1" to 38 seconds and starts playback.

xplain.playmedia('audio1', 'stop')

Stops playback of the audio object named "Audio1". The current playback position is reset to 0 seconds (start).

Available easings for animations

The following easings are available to modulate the behavior of the animation while it is being performed. The standard easings can be combined with .easeIn, .easeOut or .easeInOut for additional starting and ending transitions for the animation.

Standard:

Linear, Power0, Power1, Power2, Power3, Power4, Quad, Cubic, Quart, Quint, and Strong

Syntax: ease: name

Example vars object: {x:500, ease: Cubic}

These standard easings can all be combined with .easeIn, .easeOut, and .easeInOut methods

Syntax: ease: name.method

Example vars object: {x:500, ease: Cubic.easeInOut}

Special:

Elastic, Back, Bounce, SlowMo, SteppedEase, Circ, Expo, and Sine

Syntax: ease: name

Example vars object: {x:500, ease: SloMo}

These cannot be combined with in/out methods.