Access Saola Animate from outside

Saola Animate Support Questions
1

Hello,

for our Project we need to be able to access the animation and control it.
Usually tasks would be: pause the animation, resume the animation, jump to a specific label within the timeline.

I would also like to know if there is any timeline event which tells me when the timeline reaches any label.

Background information: The Saola Animation is running inside of an IFRAME and the HTML page on the “outside” need to be able to control the animation.

Is there a way fulfill als the tasks?

edit: I figured out how to pause and resume the animation from the outside. but i really need some sort of listener for the timeline.

2

Hi Kondrillo,

The timeline doesn’t fire any event when the it reaches a label. However, you can use a timeline Trigger for that purpose, as described in the following steps:

  1. Move the timeline playhead to the label position.
  2. Click the Insert Trigger tool on the left of the Timeline pane (the diamond shaped tool below the Insert Label flag shaped tool).
  3. Add actions for that trigger.

Regarding how to access Saola Animate document from outside, you already figured out but I still mention it here for other users to find it when needed.
To access Saola Animate document from outside, use global Saola Animate object AtomiSaola:

  • If there is only one document in the page: AtomiSaola.topDocs[0]
  • If there are many documents in the page: AtomiSaola.findDoc(containerId) (containerId is the id of the div tag in which the document is embedded)
  • If the document is embedded in a iframe, use iframeElement.contentWindow.AtomiSaola to get the global Saola Animate object in the iframe page. Please be noticed that the iframe page must have the same domain with the main page, or be configured to allow access from the main page.
  • After getting the Saola Animate document, please use its public APIs to control it. For example, theDocument.pause(), theDocument.play() to pause, resume animations in the main timeline.

Regards.

3

hi, can you kindly explain better how to call public APIs to interact with an animation from outside?

I’ve done something like (here pseudocode)

	<script type = "text/javascript">
		function link() {
			AtomiSaola.topDocs[0]
			AtomiSaola.showScene(my_scene)}
		</script>	

<button type="button" onclick="link()">Try it</button>

but got Uncaught ReferenceError: my_scene is not defined

thank you for your response and have a nice day

4

Hi,

The script inside the link function should be:

var SaolaDoc = AtomiSaola.topDocs[0];
SaolaDoc.showScene('your scene name here');

Regards

1 Like
5

Wow, it works and opens to me a lot of fun!
Have a nice day :slight_smile:

1 Like