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?



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)


1 Like

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.


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.


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.


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?

That’s got to be it. Thanks!

Thank you for creating the Drag and Drop file (zip) June 18.

I want to create multiple draggable items that drop into a certain target areas. I copied and pasted your original drag element and drop target and gave them the names:


I then added the JS code for the scene as:

function onSceneActivated(doc, e) {
// init drag drop


I only want dragsource to fall into ONLY droptarget and dragesource_1 to fall into ONLY droptarget_1. What happens now is dropsource and dropsource1 can be dropped into either droptarget or droptarget1. Can you make a suggestion on how I might correct my JS so that different draggable items only drop into certain target areas?

By the way, I just purchased Saola and it is going to help me immensely as I transfer my material from Adobe Flash to Saola. Thank you very much.

Live, laugh, and love life,

Hi Steven,

You can use accept option of the droppable to control which draggable elements are accepted by the droppable.
The code will look like this:

function onSceneActivated(doc, e) {
  // init drag drop
  makeDroppable(doc.getElement('droptarget'), {
    accept: function(draggable) {
      return doc.getElement('dragsource').dom == draggable[0];
  makeDroppable(doc.getElement('droptarget_1'), {
    accept: function(draggable) {
      return doc.getElement('dragsource_1').dom == draggable[0];

Hey, toanis,

Thank you so much for the help with this.

With your help, I was able to create a quick drag and drop for 12 terms in the first lesson in economics (Factors of Production). I was able to create this within a half an hour. Thanks again.

Live, laugh, and love life,

1 Like

Hi, Toan Li,

Is there a way to drag and drop to a specific spot (x and y) rather than a specified area? I have been trying to find this through a google search with no such luck. Thank you if you can help me on this.

Live, laugh, and love life,


You can resize the drop target to make it small enough, but it’s difficult for the viewer to drop into a small area.

If you want to keep the drop target area but anchor the drag source to a specific point in that area, you need to add script to change the drag source position when it’s dropped. Please share your project if you need help in this case.


Hi, Toan Le,

I am trying my best to make a supply and demand graph move in Saola Animate similar to how it currently moves in Macromedia Flash. Here is my Flash graph: Notice how I can make both curves (supply and demand) move just by grabbing the mouse on any part of the supply or demand curve and moving them up or down. In my attached saola animate project, I can only graph the S on the supply curve and the D on the demand curve and move those to target areas. I want to be able to drop the S or the D at a specific spot inside the green target area. Any help would be appreciated. Thanks.DragDemandandSupply3.saola (77.3 KB)

Hi Steven,

Project file only (.saola) doesn’t contain resources, so in the next time, please send project package (File > Save As > Package) or entire project folder.

Saola Animate doesn’t allow to click through transparent area yet, so you can drag the S and D line. To fix it, please see this thread: Events of transparent areas

To make your project works the same as the Flash version, you need to write script to adjust position of S, D lines and their intersection when dragging. You can refer to the JQueryUI Draggable manual for writing the script.

Here’s your project updated: DragDemandandSupply3_fixed.saolapack (5.2 KB)


Hi, Toan Le,

You and Saola Animate are the MOST amazing individual and company. I cannot say enough GREAT things about you! Can I make a donation to you and/or Saola Annimate for helping me with this? My email address is:

Live, laugh, and love life,


1 Like

Thank you, Steven.
We don’t accept donations.
Please feel free to ask whenever you need help.