CLAnimations

Overview

The purpose of CLAnimations.js is to help the user play some animation created in Animate using custom JavaScript. This file is automaticaly generated on export and it contains all label names and their start times grouped per scene.

What is more, this file contains methods for playing animations present at times specified by the labels.

More about the label frames - Here.

Make sure there are no duplicated label names in one layer.
Make sure that all the layers with labels in one timeline have different names.

Methods

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 a HTMLElement.

  • optional : object, optional

    • Object with optional parameters.

  • optional.labelLayer : string, optional

    • Specific layer where the label is located.

  • optional.callback : function, optional

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

Example

Let 'Label_1' is defined at the 500ms. A 1000ms 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', 'Scene_1', {
    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 an 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 a HTMLElement.

  • optional : object, optional

    • Object with optional parameters.

  • optional.labelLayer : string, optional

    • Specific layer where the label is located.

  • optional.callback : function, optional

    • Callback funtion which will be executed after the animation is stopped.

Example

Let 'Label_1' is defined at the 500ms. A 1000ms 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_1', 'Scene_1', {
    callback: onFinishCb
});

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 a HTMLElement.

  • optional : object, optional

    • Object with optional parameters.

  • 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 funtion which will be executed when animation ends.

Example

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

Executing the following code:

CLAnimations.playFromTo('Label_1', 'Label_2', 'Scene_1', {
    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.

InstanceAnimations JSON

All the label names and times are exported in JSON named InstanceAnimations. They are grouped by: * Global timelines(Scene timelines) -> Layers -> Array with labels. * Symbol timelines -> Layers -> Array with labels.

InstanceAnimations may looks like this:

const InstanceAnimations = {
    "global_animations": {
        "Scene_1": {
            "Layer_1": [{
                    "Label_1": 0
                },
                {
                    "Label_2": 0.5
                }
            ],
            "Layer_2": []
        },
        "Scene_2": {
            "Layer_1": [{
                    "Label_1": 0
                },
                {
                    "Label_2": 0.5
                }
            ],
            "Layer_2": []
        }

    },
    "Symbol_1": {
        "Layer_1": [{
            "Label_1": 0.2
        }]
    },
    "Symbol_2": {
        "Layer_1": [{
            "Label_1": 0.2
        }],
        "Layer_2": [{
            "Label_1": 0.5
        }]
    }
};

Playing an animation from label in different layer

Let 'Label_1' is defined at 0ms in 'Layer_1', 'Label_1' is defined at 500ms in 'Layer_2'. A 1000ms 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', 'Scene_1', {
    labelLayer: 'Layer_2'
});

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

Playing the animation of a HTML DOM element

Instead of passing a string as a target for the CLAnimations methods you can pass a 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. Value of the attribute should be a symbol name which will link the preferred Symbol labels to the generated element.

Example

In this example we will use the result from the "gun sight" sample which is located in the Overflow section Here.

Enter in the "element" timeline.

Then create a Motion tween animation on the green dot:

alt text alt text alt text

The expected exported result must look like this:

alt text

So how you can use CLAnimations to play DOM element?

Let say you want to play the element with index 2. To achieve this you can add a new "click" event in the document tab and add a handler with javascript code. In the JS panel type the following:

const thirdElement = document.querySelectorAll('.element')[2];

CLAnimations.playFromTo('big', 'smallAgain', thirdElement);

alt text

This will play the animation of the third generated element from "big" label to "smallAgain" label.

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 automaticaly 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.

alt text alt text