HAniS Example 1f - Three HAniS animations on one page - with one controlling the other two, including zooming and roaming

Example 1f: Three HAniS animations on one page with one controlling the other two, including zooming and roaming

Extending the previous example, we now also want to control the zooming and roaming as well...and more scenes, as well.

Yes, you do need a tiny bit more JavaScript to accomplish this!

Also note that in the right two images, we must not specify any "zoom" options in the controls or parameters.

The HTML inside the <body> first sets up three <div> elements for the animations, and then defines three "instances" of HAniS for each of the animations, followed by the JavaScript functions needed to connect the "master" animation to the other two:

<div id="handiv" style="display:inline-block;width:500px;"> </div>
<div id="handiv22" style="display:inline-block;width:200px;"> </div>
<div id="handiv33" style="display:inline-block;width:300px;"> </div>

<script>

var c = new HAniSF();
var b = new HAniSF();
var a = new HAniSF();

function aready() {
   a.frameChanged(changb);
   a.zoomChanged(zchangb);
}
function changb(frm) {
  b.showFrame(frm);
  c.showFrame(frm);
}
function zchangb(z) {
  b.showZoom(z);
  c.showZoom(z);
}
function init() {

  a.setup('hanist1.txt','handiv', aready )

  b.setup('filenames = TIR1.GIF, TIR2.GIF, TIR3.GIF \n imagecan_style=border-radius:30px; \n start_looping=false \n' + 
  'overlay_nonewdiv=t \n overlay_filenames=TMAP.GIF \n controls = overlay \n' + 
  ' overlay_labels=Map \n window_size=200,200 \n buttons_style = flex:auto;margin:2px;' , 'handiv22'); 

  c.setup('filenames = TSFC1O.gif, TSFC2O.gif, TSFC3O.gif \n imagecan_style=border-radius:30px; \n start_looping=false \n' + 
  'overlay_nonewdiv=t \n overlay_filenames=TMAP.GIF \n controls = zoom,overlay \n' + 
  ' overlay_labels=Map \n window_size=300,300 \n buttons_style = flex:auto;margin:2px;' , 'handiv33'); 
} 

window.onload = init();
</script>

(Note also in the last two instances, the overlay_filename (TMAP) need only be given once, since it applies to all frames.)

Also, for illustration, note that the 3rd animation has an "independant" zoom control; however, any zooming or roaming in the main window will immediately over-ride any independent zooming/roaming/reset done in this 3rd window.

Go To Front Page
Next Example