Starting animation while preloading in background

Saola Animate Support Questions
1

Hello, I’d like to know if there is any mechanism to load resources while already having started a timeline. E.g. would it be possible to have a scene being preloaded and already being played while another scene is still loading?

Or is there any other way to start an animation before the preloader finished?

Thanks!

Martin

2

Yes. If you change the preloader from default to custom in the document panel and select edit, you can create a custom animation that occurs while the resources are being preloaded.

3

Hi Martin,

You can start the main document before the preloader finished by using the following script in a custom preloader event:

function eventInCustomPreloader(doc, e) { /* e.g. Item Complete event */
  // make sure the loading document (the main document) is ready
  this.loadingDoc.ready(function() {
    // hide the preloader document
    this.preloader.loaderDoc.show(false);
    // start the main document
    this.start();
  });
}

@mackavi: creating animation directly in the custom preloader is a nice workaround.

Regards

4
  1. Can you elaborate on how to add custom script…

Which function do we add and which event (Scene_1) and trigger (Scene activate?) do we tie this function to?

image

image

image

  1. Can we avoid a pre-loader altogether?

Thanks!

@clkdiv – Thanks for asking. Had similar query!

5

The first line of Toanis’ code suggests using an Item Complete Event which will generate a document type function.

This event is in the preloader, so you need to change the preloader type to custom and click edit.

1
1371×534 60.4 KB

Then select the event handlers button and choose the type you want.

2

6

Our goal is to NOT show the preloader and for the page to load as quickly as possible, allowing early elements to load sooner and the rest in the background.

Is this correct?

image
image1739×779 46.3 KB

Anything else I can do to for quick page loading with early events loading first and later events load later – like “lazy loading” (https://en.wikipedia.org/wiki/Lazy_loading)?

Thanks so much!

7

Start event occurs when the preloader starts loading the first resource.
If you want to start the main document after loading some resources, you can use Progress event.
For example:

// start the main document after loading 30%
function onLoadingProgress(doc, e) {
  if (this.getProgress() < 0.3)  // getProgress() returns value from 0 to 1
    return;

  // make sure to start the main document once
  if (this.mainDocStarted)
    return;
  this.mainDocStarted = true;

  // make sure the loading document (the main document) is ready
  this.loadingDoc.ready(function() {
    // hide the preloader document
    this.preloader.loaderDoc.show(false);
    // start the main document
    this.start();
  });
}

Please be noted that Saola Animate preloads resources in the order they are imported into Resources pane, so you should import resources used in the first scene first.

Regards

8

Just what I was looking for.

  1. So, to load the main doc when 30% of resources are loaded, you add this code to the PreLoader / Event Handler / Start … Is this correct? Or is it Item Complete (I’m not sure).

image
image1647×814 58.6 KB

  1. I assume that if you make 0.3 into 0, it will load the document immediately, correct?

Thanks

9

You should add this code to Progress event as I mentioned.
Start event only occurs once when the preloader start loading.

If you want the main document to start immediately, you can change the progress from 0.3 to 0.
Another method is adding the code in my first answer to Start event.

Regards

1 Like