Objects / Button across Scenes

Saola Animate Support Questions
1

Is there a way to add a button or text (e.g. Menu, Sound player, Content title) that is present across multiple scenes and therefore does not “load” every time there is a transition from one to another?

Thanks!

2

Hi Shawn,

You can convert your element to a symbol, and make that symbol show across multiple scenes.
To show a symbol across multiple scenes, please add the following code to the main document Ready event:

function onDocReady(doc, e) {
  // show symbol across scenes:
  // 1. Create dom element for embedding symbol
  var div = document.createElement('div');
  // 2. Set position & size for this dom element
  var divStyle = div.style;
  divStyle.position = 'absolute';  
  divStyle.left = '50px';
  divStyle.bottom = '50px';
  divStyle.width = '200px';
  divStyle.height = '100px';
  // 3. Set z-index so that this dom element is above any scene
  divStyle.zIndex = 1;
  // 4. Append to doc
  doc.dom.appendChild(div);
  //  5. Embed symbol doc to this dom element
  // replace 1 in doc.getResource(1) by the symbol id
  // symbol id can be found by hovering over symbol resource in Resources pane
  var symbolDoc = Saola.openDoc(doc.getResource(1), div, {parentElement: doc, paused: false});
  Saola.topDocs.push(symbolDoc);
}

Attached sample: element_across_scenes.saolapack (3.9 KB)

Regards

1 Like
3

Thanks – I will give it a shot!

4

I tried to create my own symbol, a blue box by drawing it on the canvas (and would prefer not having to put the position in the JS code if I don’t have to). I changed the doc.getResource(1) to doc.getResource(3) for my symbol. However, something not right as it remains only on Scene 1 …?

element_across_scenes1.saolapack (5.3 KB)

5

Hi Shawn,

The symbol element you inserted into Canvas on Scene 1 will only shown in Scene 1, please delete it.
The symbol element you inserted by using JavaScript will show across multiple scenes.
You just need to update its position and size in the script so that it can be displayed properly.
In your sample, you can set its position at 0, its size to 100%:

divStyle.left = '0';
divStyle.top = '0';
divStyle.width = '100%';
divStyle.height = '100%';

Regards

6

Got it – thank you!