The LTS version

The following sections describe what's new in the LTS version of Coherent Prysm and how to migrate to it.

The goal of Coherent Prysm LTS is to provide workflows similar to the workflows of Flash. It's also our aim to make it possible to extend the generated content of Prysm with custom functionality easily. We feel like the introduction of frame scripts and custom JavaScript classes suits that goal as they provide multiple plugin points for an extension.

Major changes

1. All Prysm animations are now generated in JavaScript. CSS animations are not generated.
2. All Prysm related JavaScript functionality resides within the window.prysm namespace.
3. The runtime behavior of timelines is now identical to the runtime behavior of timelines in Flash. Symbols are spawned and despawned correctly.
4. Frame scripts are now supported.
5. The JavaScript classes assigned to symbols can be overridden with custom classes.
6. Frame labels are now contained in the movie clip instances. The global animation collections are removed.
7. The behavior of all timeline seeking methods (play, stop, gotoAndPlay(), gotoAndStop(), playFromTo()) are now well defined.

Minor changes

1. Filters applied to frames now work correctly in all scenarios.
2. The cl-labels-key attribute is removed.
3. All prysm generated scripts are now prefixed with CLPrysm.
4. All prysm generated scripts are now implemented in a module-like fashion.

To find our more about how the JavaScript animation library is implemented go here.

Removed features

Legacy components have been removed.

The components exported by Prysm are a superior alternative.

Animation options have been removed.

All animation options aside from the play state have been removed, as they are incompatible with frame scripts and can be substituted with them.

Animation direction

The animation direction property can be substituted with the playbackRate property of timelines. self.playbackRate = -1 makes an animation go in reverse.

1. normal is the default behavior for timelines (self.playbackRate = 1);
2. reverse is implemented via (self.playbackRate = -1). We have implemented UI that starts animations in reverse.
3. Setting it through a frame script causes a flicker on the first draw, as the timeline will be drawn at frame 0 and then have its frame scripts executed.
4. alternate is implemented by a frame script at frame 0 that has self.playbackRate = 1 and a script at the end of the animation (check node0 that has self.playbackRate = -1).

5. alternate-reverse is implemented like alternate but with the animation started in reverse.

6. Animation iteration count

Frame scripts are JS, hence random data can be attached to the self and this objects. Iteration count is implemented via a counter in the last frame.

if (self.iterationCount === undefined) {
    self.iterationCount = 5;
}
--self.iterationCount;
if (self.iterationCount === 0) {
    self.stop();
}

Animation fill mode

1. none isn't defined in Animate. self.gotoAndStop(time) can move you to any frame.
2. forwards - There are multiple variations, so we describe just a few.
3. When the direction is normal (self.playbackRate > 0), forwards is implemented either by extending the animation with 1 frame and adding a self.stop() script or by adding a self.gotoAndStop(lastFrame) in a frame script one frame after the animation duration
4. When the direction is reverse (self.playbackRate < 0), forwards is implemented with a frame script self.stop() at frame 0.
5. backwards - There are multiple variations, so we describe just a few.
6. When the direction is normal (self.playbackRate > 0), backwards is implemented via a self.gotoAndStop(0) at the end of the animation.
7. When the direction is reverse (self.playbackRate < 0), backwards is implemented via a self.gotoAndStop(self.duration - 0.1) script placed at frame 0.

Reworked features

Event actions

1. The play action no longer has an iteration count and wait to finish options.

The intent of the play action is to resume playing a stopped timeline, therefore, the iteration count and wait to finish options were redundant.

1. The Goto and play action no longer has an iteration count and wait to finish options.

Similar to the play action, the Goto and play action seeks a timeline and resumes playing it. An iteration count and wait to finish parameters aren't well defined in that scenario.

Changes to the CLAnimations script

In the LTS version, all animation methods are defined on the prysmInstance.timeline member of DOM elements. Therefore, the CLAnimations script has been reworked and is now a script with utility methods. Our motivation was to be as backwards-compatible as possible. The following changes have been made:

• The file is now named CLPrysmAnimations.js to match the naming convention of the other generated scripts.
• Only the play, pause, gotoAndPlay, gotoAndStop and playFromTo methods are left in the API.
• The animationIterations and callback arguments are removed from the play and gotoAndPlay methods.
• These methods did not work correctly in previous iterations and are ambiguous. Therefore, to match the behavior of Scaleform we have removed them.
• In some situations a frame script can be used to implement a gotoAndPlay with an iteration count and/or callback.
  • The addMethod method can be leveraged to add dynamic frame scripts.

Misc

Note: By default all animations are now infinite. A way to make them iterate a fixed amount of time is to add a self.stop() at the last frame of an animation.