Animations - CLAnimations

Overview

The purpose of CLAnimations.js is to help the user play some animation created in Animate using custom JavaScript. This file is automatically generated on export.

What is more, this file contains methods for playing animations present at times specified by the labels. It can be used when you want to customize the playing of the animations when the event actions that are animation based are not enough.

More about the label frames - Here.

Also per each scene are generated all the label names, their start times, and their keyframe indexes grouped per timeline.

Make sure there are no duplicated label names in one layer. If there are then the last label time, name and index will be exported.
Make sure that all the layers with labels in one timeline have different names. If there are with the same names then the last layer name will be exported.

Methods

play

Description

  • Method is used to play an animation. This method will play the whole animation - from the beginning to the end.

Parameters

  • target : string | HTMLElement

    • Target element which contains children with animations.
    • The target is either a name of a scene, an instance name, a symbol name, or an HTMLElement.

  • optional : object, optional

    • Object with optional parameters.

  • optional.nestedAnimations : boolean, optional

    • If the nested animations of the target should be played too.

  • optional.animationIterations : number, optional

    • Number that specifies how much times the animation should be played. A number lower than 0 will loop the animation forever until stopped.

  • optional.callback : function, optional

    • Callback function which will be executed when the animation ends.

pause

Description

  • Method is used to pause an animation. This method immediately stops the animation.

Parameters

  • target : string | HTMLElement

    • Target element which contains children with animations.
    • The target is either a name of a scene, an instance name, a symbol name, or an HTMLElement.

  • optional : object, optional

    • Object with optional parameters.

  • optional.nestedAnimations : boolean, optional

    • If the nested animations of the target should be played too.

gotoAndPlay

Description

  • Method is used to play an animation from the time of the provided label until the end of the animation.

Parameters

  • label : string

    • Label name from where the animation will start.

  • target : string | HTMLElement

    • Target element which contains children with animations.
    • The target is either a name of a scene, an instance name, a symbol name, or an HTMLElement.

  • optional : object, optional

    • Object with optional parameters.

  • optional.nestedAnimations : boolean, optional

    • If the nested animations of the target should be played too.

  • optional.animationIterations : number, optional

    • Number that specifies how much times the animation should be played. A number lower than 0 will loop the animation forever until stopped.

  • optional.labelLayer : string, optional

    • Specific layer where the label is located.

  • optional.callback : function, optional

    • Callback function which will be executed when the animation ends.

Example

Let 'Label_1' is defined at the 0ms, 'Label_2' is defined at 1000ms. A 2000ms animation is also created on an element with instance name 'Instance_1' located in the timeline of 'Scene_1'.

Executing the following code:

function onFinishCb() {
    console.log('Animation finished!');
}

CLAnimations.gotoAndPlay('Label_2', 'Current scene', {
    callback: onFinishCb
});

will play all animations from the time of 'Label_1'.

When the animations finish, the onFinishCb method will be called.

gotoAndStop

Description

  • Method used to stop the animation at the passed label time.

Parameters

  • label : string

    • Label name where the animation will stop.

  • target : string | HTMLElement

    • Target element which contains children with animations.
    • The target is either a name of a scene, an instance name, a symbol name, or an HTMLElement.

  • optional : object, optional

    • Object with optional parameters.

  • optional.nestedAnimations : boolean, optional

    • If the nested animations of the target should be stopped too.

  • optional.labelLayer : string, optional

    • Specific layer where the label is located.

Example

Let 'Label_1' is defined at the 0ms, 'Label_2' is defined at 1000ms. A 2000ms animation is also created on an element with instance name 'Instance_1' located in the timeline of 'Scene_1'.

Executing the following code:

CLAnimations.gotoAndStop('Label_2', 'Current scene');

will draw the frame of all animations at the time of the label and stop the animations.

playFromTo

Description

  • Method used to play an animation between two label times.

Parameters

  • fromLabel : string

    • Label name from where the animation will start playing.

  • toLabel : string

    • Label name where the animation will stop.

  • target : string | HTMLElement

    • Target element which contains children with animations.
    • The target is either a name of a scene, an instance name, a symbol name, or an HTMLElement.

  • optional : object, optional

    • Object with optional parameters.

  • optional.nestedAnimations : boolean, optional

    • If the nested animations of the target should be played too.

  • optional.animationIterations : number, optional

    • Number that specifies how much times the animation should be played. A number lower than 0 will loop the animation forever until stopped.

  • optional.fromlabelLayer : string, optional

    • Specific layer where the fromlabel is located.

  • optional.tolabelLayer : string, optional

    • Specific layer where the tolabel is located.

  • optional.callback : function, optional

    • Callback function which will be executed when the animation ends.

Example

Let 'Label_1' is defined at 0ms, 'Label_2' is defined at 1000ms, 'Label_3' is defined at 2000ms. A 3000ms animation is also created on an element with instance name 'Instance_1' located in the timeline of 'Scene_1'.

Executing the following code:

function onFinishCb() {
    console.log('Animation finished!');
}

CLAnimations.playFromTo('Label_2', 'Label_3', 'Current scene', {
    callback: onFinishCb
});

will play all animations from their respective times at 'Label_1' to their respective times at 'Label_2' and stop there.

getElementLabels

Description - Returns all labels of the given timeline.

Parameters

  • target : string
    • The target is either a name of a scene, an instance name or a symbol name which is equivalent to the HTML class of the element.

Labels collection

A CLAnimations_${documentName}_${sceneName}.js file is created for each scene of the document. The file contains data used to control the animations of the document. It consists of all labels from the scene and the FPS of the document.

Variable Purpose
InstanceAnimations Maps labels to their time.
AnimationsIndexes Maps labels to their index.
DocumentFPS The FPS of the document.

The label data is in JSON format.

The label files are not generated for documents that don't contain animations.

Playing an animation from a label in a different layer

Let 'Label_1' is defined at 0ms in 'Layer_1', 'Label_1' is defined at 1000ms in 'Layer_2'. A 2000ms animation is also created on an element with instance name 'Instance_1' located in the timeline of 'Scene_1'.

Executing the following code:

CLAnimations.gotoAndPlay('Label_1', 'Current scene', {
    labelLayer: 'Layer_2'
});

will play all animations from the time of 'Label_1' located in 'Layer_2' (from 1000ms, not 0ms).

Playing the animation of an HTML DOM element

Instead of passing a string as a target for the CLAnimations methods, you can pass an HTML DOM element which is generated on export.

CLAnimations methods can play DOM elements only if they have the cl-labels-key attribute. This attribute is used to find the corresponding labels of this element.
cl-labels-key is added to a DOM element if this element corresponds to a Symbol in Animate. Value of the attribute is the corresponding symbol name.
If you generate a DOM element via JavaScript and want to play its animations using CLAnimations methods with DOM element and labels first you need to add the cl-labels-key attribute to this element. The value of the attribute should be a symbol name that will link the preferred Symbol labels to the generated element.

Where you can use it

You can use it in in your JavaScript code by simply calling some of the following methods:

    CLAnimations.gotoAndPlay
    CLAnimations.gotoAndStop
    CLAnimations.playFromTo
    CLAnimations.getElementLabels

The file is automatically included in the exported HTML pages so you don't need to include it yourself.

Furthermore, you can use it in the Prysm Player's debugger.

Last but not least, you can use it from the Prysm panel in Adobe Animate by adding a JavaScript handler and typing in your code in the JS editor.