Triggering of SVG Animations

Remote Control

It might be desirable for the main media not to start over each time it is reopened. In this case, two scenarios are possible: The main media resume its playback, as if paused during the alternative content.

The main media continue playing, as if playing in the background during the alternative content.

The first scenario can be controlled using the Resume where left parameters of the menu_media.svg template. Settings

this parameter to 'on' will prevent the main media from restarting each time it is opened. For the second scenario, the main media must be placed in a schedule file. It is also possible to use the spx:begin attribute on the <svg> element of

the main media.

For more advanced effects, you can design your custom SVG document to include animations that will be triggered remotely over the network. To do this, you design the animations as if triggered by time, but use indefinite as the begin

attribute.

In a <script> element you can then instantiate a shared variable for remote control and install an update listener on the variable. From this callback, you can use the beginElement() or beginElementAt() methods of the smil::ElementTimeControl interface to trigger the animation.

In the sample document below, a rectangle is set to move through the screen from left to right when the “kick” variable is set to “go”.

<?xml version="1.0" encoding="UTF-8"?>

<script><![CDATA[

var anim=document.getElementById( "anim" ); var v=createSharedVariable( "kick" ); v.addUpdateListener( function () { anim.beginElement(); } ); ]]></script>

</svg>

You can also use the content of the shared variable to modify the document on the fly. In the example below, a rectangle will flash for once second each time the variable is updated and its color is set to the content of the variable.

<?xml version="1.0" encoding="UTF-8"?>

<script><![CDATA[

var anim=document.getElementById( "anim" ); var rect=document.getElementById( "rect" ); var v=createSharedVariable( "kick" ); v.addUpdateListener( function ( sv ) { rect.setAttribute( "fill", sv.value ); anim.beginElement();

});

]]></script>

</rect>

</svg>

44	Inspired XPress - Programming Guide