Post by runes on Jun 15, 2017 8:45:12 GMT
I thought I'd share this.
Articulate Storyline is one of the most widely used E-learning production tools. While it has many usefull features it falls short on animation features (in my opinion).
It has the ability to display webpages in an iframe and for some tasks that's fine. But the possibility to use Storylines player features (seekbar, pause, play) are lost when you do that.
This script makes a Hippani animation follow the seekbar/progressbar of a Storyline 360 html5 output (it doesn't work in Storyline 2 unfortunately). put it in OnUpdate script in Hippani:
if(parent.parent.document.querySelector('[aria-label="Seekbar"]')!=undefined){ //If there's a seekbar on the slide this code runs. Otherwise the animation plays as normal
var progress=parent.parent.document.querySelector('[aria-label="Seekbar"]').value; //Get's the progress of the seekbar as a number between 0 and 1
var TotalTime=300; //This must match the total number of frames in your Hippani animation. The timeline in Storyline must match this duration in seconds (in this case 300frames/12frames per second=25 seconds). Otherwise the animation will play too fast or too slow
SetTime(progress*TotalTime);
}
I think this is pretty cool since it gives you the ability to time animation closely to other content added in Storyline. I've tested on desktop and mobile devices and it runs smoothly and unproblematic in both cases. If you try this please report any problems back to me
Notice that most browsers block javascript between iframes when viewing offline so in that case the animation doesn't play. IE works for me though.
Articulate Storyline is one of the most widely used E-learning production tools. While it has many usefull features it falls short on animation features (in my opinion).
It has the ability to display webpages in an iframe and for some tasks that's fine. But the possibility to use Storylines player features (seekbar, pause, play) are lost when you do that.
This script makes a Hippani animation follow the seekbar/progressbar of a Storyline 360 html5 output (it doesn't work in Storyline 2 unfortunately). put it in OnUpdate script in Hippani:
if(parent.parent.document.querySelector('[aria-label="Seekbar"]')!=undefined){ //If there's a seekbar on the slide this code runs. Otherwise the animation plays as normal
var progress=parent.parent.document.querySelector('[aria-label="Seekbar"]').value; //Get's the progress of the seekbar as a number between 0 and 1
var TotalTime=300; //This must match the total number of frames in your Hippani animation. The timeline in Storyline must match this duration in seconds (in this case 300frames/12frames per second=25 seconds). Otherwise the animation will play too fast or too slow
SetTime(progress*TotalTime);
}
I think this is pretty cool since it gives you the ability to time animation closely to other content added in Storyline. I've tested on desktop and mobile devices and it runs smoothly and unproblematic in both cases. If you try this please report any problems back to me
Notice that most browsers block javascript between iframes when viewing offline so in that case the animation doesn't play. IE works for me though.