Playing Timelines

You may play a timeline from within the Mattercraft visual editor, or with custom scripts.

For more information about adding interactivity to your Mattercraft projects, consider reading our Adding interactivity article.

Playing a Timeline with Behavior actions

Playing a Timeline with the Play Layer Clip Behavior Action

You add a timeline behavior by using the following instructions:

1. Find the Node you wish to activate the Timeline with inside the Hierarchy Panel and select it
2. Head to the Behavior Actions Panel and click on the + (plus) icon
3. Find the Animation Actions category and use either of the following Behavior actions to play the Timeline:

Behavior action	Description
Toggle Layer Clips	Toggle between two clips. Useful for turning timelines ‘on’ or ‘off’ with one node.
Set Layer Off	Resets the chosen layer to whatever values are specified for the Off state.
Play Layer Clip	Plays any timeline clip inside a layer.

Playing a Timeline with Script

To activate a timeline with script, it must be in a layer. You can then locate a specific timeline clip and use the following functions to control it:

Function	Description
.play()	Plays the timeline along it’s track. Will play from whatever Time is currently set to.
.pause()	Pauses the timeline. Unless reset or played from the start, the timeline will play from this point.
.seek()	Sets the Time along the timeline where timeline Clip should play from. Useful if you want to replay a particular section of a timeline clip.
.stop()	Stops the timeline from playing and sets the timeline Time to 0 (the start of the timeline).

An example custom behavior for playing a timeline might look like this:

// Register that this node should be listening to an event,
// in this case onPointerDown (on click or tap)
this.register(this.instance.onPointerDown, evt => {

  // Play the timeline by finding the layer containing the
  // timeline; and then the timeline itself
  this.zcomponent.animation.layers.myLayer.clips.myTimeline.play();

});

See Mattercraft’s full API documentation here.