Subscribe to Timeline Event

Saola Animate Support Questions
1

Hi,

I’m trying to implement Saola HTML 5 Pages into a System with own controls. (Play, Pause, get Updates from Timeline etc.)

I’ve found out, that there is an Timeline-Event called “update”.
How can I subscribe to that Event from the outside? Is it possible?
(AtomiSaola.topDocs[0].scene.timelines[0].addEventListener(“update”,…) is not working)

Can anybody give me a helping hand? :slight_smile:

2

Yes, it’s possible.

To subscribe/unsubscribe to an event, you can use bind/unbind method, for example:

myTimeline.bind("update", function(doc, event) {
  // doc: Saola document
  // event: the event, can be used to get some information such as target...,
  // or call some methods such as stopPropagation... (it depends on each type of event)
  // this: current target (myTimeline in this sample)
});
// or
var updateHandler = function(doc, event) {...};
myTimeline.bind("update", updateHandler);
myTimeline.unbind("update", updateHandler);

If you want to subscribe to an event from the outside, you must make sure that the event target (the timeline in this case) is already available. For example, you can listen to sceneactivate event of the Saola document, and subscribe to timeline update event inside this handler:

AtomiSaola.topDocs[0].bind("sceneactivate", function() {
  // check if current scene is the scene you're interested in (if your doc has more than one scene)
  if ( this.scene.name != "Scene_1")
    return;
  this.scene.getTimeline().bind("update", function(doc, event) {
  });
});

But why you don’t handle events directly inside Saola document for simplicity?

Regards

3

Wow thanks for the fast reply!
It’s working!!! :grinning:

The system will work with many Saola pages.
That is the reason why I want to handle the events outside of the Saola document.

I don’t want to set the triggers in every single Saola document.
This way I only have to write the eventhandler once and it will work for every page inside the system.

Thanks alot! :smiley:

1 Like
4

Unforuanelly the solution with binding to the update-Event is not accurate enough. The event is fired once every ~16-17 frames. Is there a way to tell Saola to fire an update-Event for every frame?

One other thing: When I inspect the Javascript-File which is generated when I publish to HTML5 I can see the Timestamps of some Triggers I placed in Saola. (e.g. “t”:[[0,[[103,2]]],[5000,[[103,2]]],[12500,[[103,2]]]])
2 should be the internal ID of my custom js Function and I guess 103 is some internal identifier to inform Saola that it is somekind of JS Code.
Is it possible to sideload this information from the outside during runtime? I want to insert the trigger at a specific timestamp (e.g. Everytime when a label is reached)

Thanks in advance! I can only imagine how much work has to be put in this kind of software and my questions are a little bit outside of the box. I can understand if its not possible to do something like that. So far your support was awesome. BIG THANK YOU!

5

Hi,

You can use the following code to insert a trigger at a specific timestamp:

var time = myTimeline.getLabelTimestamp('label name');
myTimeline.addTimingEvent(new AtomiSaola.TimingEvent([time, [function(doc, event) {
  // add code for your trigger here
}]]));

However, TimingEvent constructor is not a public function, so it may not work in future updates.

Regarding timeline update event, it’s fired for every frame. How do you see that it’s fired once every 16/17 frames?

Regards

6

Thank you for the snippet. I will give it a try :slight_smile:

For testing I do a console.log for every time the update-Event is fired.
In this log I display the current Timestamp:

grafik
grafik1044×443 4.04 KB

As you can see. It is not for every frame.
Maybe its a performance issue? I don’t know. Im using Firefox 69.

I hope that helps! :slight_smile:

7

Hi,

Timeline is updated on every animation frame, not every milliseconds.
The update rate is about 60 frames/second, or lower, depending on performance.
Your log shows that timeline is updated every 16-17ms, so the frame rate is 59-62 fps

Regards

8

Ok with the TimingEvent its working like it should! :slight_smile:
But for us this is a do or die feature.
Are there any plans to make this or something similar a public function?

It would be very bad if we would run into problems in the near future.

We are working in two teams and the Team which is building the animations in Saola is not able to do the programming part a.k.a write the code for the triggers.

So the other Team must be able to sideload such code.

9

If the function changes in a later version, but you don’t export your project again with that version, your output still works correctly. Otherwise, you need to update your code with the new function.
However, I think that this function will not be changed in a near future.

Regards