Hey all, I've read similar discussions on these forums related to passing data between an embedded web object, and a variable in Storyline, but those don't apply exactly to this use case. I have HTML5 animated learning content from an animation tool such as After Effects or Adobe Animate. I can bring it into Storyline as a Web Object, and out of the box, there is no communication between Storyline and the Web Object. I've read of other cases where Javascript can be utilized to pass data between the two, but is it at all possible to control the timeline of an HTML5 animation using Storyline's built in controls (seek, play/pause, rewind)?
Attached is a zip file of a sample Storyline project I've built.
Interesting challenge. It might be possible. But you'd probably want to setup your animation file with the connector. Storyline isn't aware of this type of media embeds. The media isn't aware of the player. Fortunately, most libraries like this offer some type of player API.
In the case of your example, it's using lottie. Lottie offers some options in their player API for pause, play, gotoAndStop, get the number of total frames, set speed, etc.. Pretty nice array of options.
lottie.getRegisteredAnimations()[0].totalFrames will return the total number of frames. lottie.goToAndStop(15,0,0) should send the animation to frame 15. lottie.play() should play the animation
All of the ingredients are there for what you'd want to link up the seek bar and the play / pause buttons. It might play a little buggy since the seek bar is wired up to Storyline's timeline.
The next trick is figuring out how to get the animation to "listen" for Storyline player events. I haven't dug into this but it should be possible.
Thanks so much for the info, Steve. I'll see what I can do with Lottie. If you're able to dig into this a little more, it would be much appreciated. This is a bit outside my comfort zone but I'm encouraged that you say it should be possible.
3 Replies
bump
Hi Tim -
Interesting challenge. It might be possible. But you'd probably want to setup your animation file with the connector. Storyline isn't aware of this type of media embeds. The media isn't aware of the player. Fortunately, most libraries like this offer some type of player API.
In the case of your example, it's using lottie. Lottie offers some options in their player API for pause, play, gotoAndStop, get the number of total frames, set speed, etc.. Pretty nice array of options.
lottie.getRegisteredAnimations()[0].totalFrames will return the total number of frames.
lottie.goToAndStop(15,0,0) should send the animation to frame 15.
lottie.play() should play the animation
All of the ingredients are there for what you'd want to link up the seek bar and the play / pause buttons. It might play a little buggy since the seek bar is wired up to Storyline's timeline.
The next trick is figuring out how to get the animation to "listen" for Storyline player events. I haven't dug into this but it should be possible.
Thanks so much for the info, Steve. I'll see what I can do with Lottie. If you're able to dig into this a little more, it would be much appreciated. This is a bit outside my comfort zone but I'm encouraged that you say it should be possible.