ActivePresenter Saola Animate Pricing Download

Calling Functions & Drag-n-drop tips


Before I try and re-invent the wheel, does anybody have any tips for using the following:

I want to call the same function from several elements, but each element needs to pass a unique value. Normally, I’d pass it as a parameter but cannot see an option to do this.

And also, I use drag and drop a lot. Before I start, are there any existing examples of this or is it planned for future releases?


(Toan Le) #2


Besides event handler functions which have fixed list of arguments, Saola Animate also supports normal functions with arbitrary arguments. You can create normal functions and call them in other functions (both normal and event handler functions) by taking the following steps:

  1. Show the Functions pane if it’s hidden: Click View > Functions
  2. In the Functions pane, click New Function button > Normal Function
  3. Define the function: name, arguments, body.
  4. Click OK.
  5. Now you can use the new created function.

Regarding drag and drop feature, it’s already in our TODO list but we still don’t have a fixed plan for it. However, you can use a third-party JS library such as Jquery UI to create drag and drop. Just add the library files or URLs to the Resources pane so that you can use it.

Please check the attachment for a sample of normal functions (makeDraggable, makeDroppable) and drag-n-drop (using jQuery UI). (2.3 KB)



Thanks for answers, I’ll have a play with the jQuery today.

I think I must be doing something wrong with the normal function. I can create that with parameters, but when I add an event handle to a rectangular DIV - I can’t see how to call the function as it doesn’t appear in the run JS dialogue

Also, I came across two issue:

  1. Clicking the auto button for the cursor only displays part of the pop-up the rest appears off-screen when the UI is maximised.

  2. When I add audio or video to a scene and then change scene, I get a console error of Invalid URI. Load of media resource failed.

(Toan Le) #4


As mentioned, normal functions have custom argument list so you can’t use it directly as event handlers. Instead, you must create event handlers and call normal functions inside handler functions. For a sample, please see the onSceneActivated handler in my previous attachment.

Regarding the two issues:

  1. Do you use multiple monitors? If so, it may be a bug when working with multiple monitors. We’ll try to fix it in the next update.
  2. It’s the warning message in Firefox when setting audio/video source to empty. It’s incorrect behavior of the browser, you can ignore it.



Cheers, will checkout the sample - got side-tracked as I’ve found sprites :smile:

Yes, I have multi monitors. And yes, using Firefox Developer.



Thanks for the jQuery UI example. This is really brilliant and works effortlessly with Saola - opening up all sorts of possibles.

I had a look at the normal function but don’t think it is the solution.For example; say I want to create a simple shopping game for schools.

I would add ten pictures of food to the canvas and clicking on any item would add the cost of that item to the overall cost which is display on screen.

At the moment, it looks like I would have to create a new function for every item of food to add the different prices.

Currently, I can see two ways of solving this.

Firstly, use the and a switch case to call a single function and filter the object / element based on the name set in the UI.

Secondly, on scene activate - use getElement for all the items to set a property value containing the price which can then be accessed by a single function using the event object property.

While both of these work, would it not be possible to have a simpler solution such as:

  1. Functions called directly from an event trigger in the UI can pass parameters:

function fName (dom,e, param1, param2, etc) {}

  1. Or and maybe better, elements in the UI on the canvas could have user defined properties added. IE where name , class name and title are - we could add user values that get stored on the object alongside the existing properties and are passed with the event object.


(Toan Le) #7

Thanks, we’ll consider your suggestions. The ability to set user data to an element directly from the UI would be nice.
Just a comment for your current workarounds: On scene activate, creating a name - value map may be faster than getting all elements to set their corresponding values, e.g.

doc.foodCost = {
   potato: 100,
   bread: 50

Then, on element click:

updateCost(doc.foodCost[]); // this is the same as e.currentTarget



Much simpler.


(Ron) #9

The file was very helpful for me. I was able to modify it, but when trying to recreate it something was not working. I copied the scene onSceneActivated function, the makeDraggable function, and the makeDroppable functions. I also created 2 divs labeled dragsource and droptarget. I used all of the default settings that I could find, and those all seemed to match what was in the dragdrop file. I’m missing something but I’m just not sure what it is. Any idea what that might be?


Did you add the jQuery and jQuery UI files to the resources?

(Ron) #11

That’s got to be it. Thanks!