Is it possible to load scene, change text, then play from external Javascript?

Saola Animate
1

I have found out how to play a scene from external Javascript, but I am struggling to change text from either internal Javascript or external Javascript. I can run internal function from external Javascript, but I cant quite nail the API so that it changes the correct text parameter in the element. I have managed to change the InnerText, InnerHTML, outerHTML element properties with the .setText() function, but none of them are represented in the web page output.

Please help, I think this tool could be very useful for a project where I have previously hand crafted css animations!

2

Hi Simon,

Yes, it’s possible to do that. You get Saola Animate’s document then call Saola Animate’s API. This thread might be helpful: Access Saola Animate from outside - #2 by ToanLS
And here is also an example about how to integrate Saola Animate with ActivePresenter: How to Integrate ActivePresenter with Saola Animate? 

Regards,

3

Hi,

Thanks for replying, I have read the "[ Access Saola Animate from outside] " thread, and can do simple things such as start the timeline.

However I am not using active presenter but a custom made UI for triggering animations.

From this I can trigger a function created with the “Normal Functions” area of Saola, however in this function I don’t know how to access text objects.

4

I am trying this:

var doc = AtomiSaola.topDocs[0];
var scene = doc.getScene('Scene_1') ;
var element = scene.getElement('Line2Text');
element.setText("GRRRR");

but I dont seem to be able to get to the scene.

I get this error:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'doc.getScene')
5

Thanks for your response.

To access scenes and elements in Saola Animate, keep in mind that it only supports retrieving the current scene directly with doc.getScene(). You can’t access other scenes directly, like doc.getScene('Scene_1'). However, you can still retrieve elements within the current scene using doc.getElement('element name').

Saola Animate doesn’t support getting elements from scenes other than the current scene. If you need to do this, please follow these steps:

  1. External Script: Save the text element to doc, for example: doc.elementLine2Text = "GRRRR";
  2. Scene Activate Event: Add a script to the Scene Activate event of the scene that includes that element, and call doc.getElement('Line2Text').setText(doc.elementLine2Text);

Regards,

6

I think I need to learn a little bit about the AtomiSaola object, and how to use it.

I now have something that works:

function saolaAnimate(nameText) {
	(function(Saola) {
		var li = {"color":"#2090e6","density":9,"diameter":60,"range":1,"shape":"oval","speed":1};
		var doc = AtomiSaola.findDoc("lower3rdHomePlayerDiv")
		if (!doc) {
			Saola.openDoc('/saolas/l3rd.js', 'lower3rdHomePlayerDiv', {paused:true, preloaderOptions: li, center: 'horizontal'});
			doc = AtomiSaola.findDoc("lower3rdHomePlayerDiv")
			doc.getElement("Line2Text").setText("Grrrr")
		} else {
			console.log("else")
			scene = doc.getScene("Scene_1")
			scene.getElement("Line2Text").setText(nameText)
			scene.getElement("NameText").setText(nameText)
			stamp = doc.getTimeline().getTimestamp()
			duration = doc.getTimeline().getDuration()

			if (stamp == duration) {
				scene.seek(0)
			}
			
			scene.play()

		}
	})(AtomiSaola);
}

The original code was adding a new div every time it was animated, and I think it was changing the text, but it was hidden underneath, anyway. I am now getting somewhere!

1 Like