Adding HTML5 animations to your education content is an awesome way to demonstrate how things work. Using Adobe After Effects and some clever JavaScript it is now possible.
This may be a customised alternative to H5P.
How did we do it?
Step 1: Create a basic animation in After Effects.
Actually, what I did was use a design created in Illustrator as a vector image. Then import the vector image into After Effects. From after effects, I then animated the objects.
Step 2: Exported the animation using an Adobe After effects extension called BodyMovin. https://exchange.adobe.com/creativecloud.details.12557.bodymovin.html
Step 3: Copy the exported data file to a server aong with the Javascript player that is used to play the animation.
Step 4: Embed the animation in a Moodle page using JavaScript.
Step 5: Add additional JavaScript to add extra functions to the animation.
Result: You can embed the animation in a Moodle page and you can change the animation speed. I also added the ability to hide objects in the animation.
Note: To hide a component I had to modify the original Player Javascript to add ID tags to the models.
What you will need
- Adobe Illustrator
- Adobe After Effects
- BodyMovin extension for After effects.
- https://exchange.adobe.com/creativecloud.details.12557.bodymovin.html
- Javascript player called Lottie (this plays the BodyMovin data file. https://cdnjs.com/libraries/lottie-web
- The embed Javascript code
- Additional JavaScript to control the animation
Code to go into Moodle page.
<script src="https://ricoshae.com.au/animationdata/lottie2.js">
// this is the javascript player file
</script>
<script>
// the path file called data2.json is the animation data.
window.onload = function(e) {
var animation = bodymovin.loadAnimation({
container: document.getElementById('bm'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'https://ricoshae.com.au/animationdata/data2.json'
})
animation.setSpeed(2);
animation.onEnterFrame = function(e) {
if (e.currentTime > 10 && e.currentTime < 11) {
console.log('frame 10');
console.log(e.currentTime);
};
};
// everything below here is custom controling the animation
document.getElementById("speed1").addEventListener("click", function() {
animation.setSpeed(5);
});
document.getElementById("speedhalf").addEventListener("click", function() {
animation.setSpeed(2);
});
document.getElementById("speedfast").addEventListener("click", function() {
animation.setSpeed(10);
});
document.getElementById("pistonbtn").addEventListener("click", function() {
var obj = document.getElementById("piston");
if (obj.style.display == "none") {
obj.style.display = "";
} else {
obj.style.display = "none";
}
});
}
</script>
<div id="bm"> </div>
<button class="btn btn-secondary" id="speed1">Normal</button>
<button class="btn btn-secondary" id="speedhalf">Slow</button>
<button class="btn btn-secondary" id="speedfast">Fast</button>
<button class="btn btn-secondary" id="pistonbtn">Hide/Show piston</button>
Hey Chris!
This is some really cool information. It’s cool because you’ve laid out a workable plan- from vectors to getting the final animation product into a Moodle page! I’ve been doing a lot with Lottie files lately and found it a very efficient way to increase course engagement-especially in the age of microlearning. Usually, I put the GIF animations from Lottie in Adobe Captivate and lately I’ve been experimenting with how to put them inside of a Moodle page. So, this was the perfect solution and I look forward to experimenting even more! Thanks for delving into such a useful content development resource in an artful way!
Awesome. Thank you for your feedback. I will post some more experiments soon as I have tried a few more ideas since this one that I hope will make it easier to implement.
Hi Chris. I’ve been looking for info like this for some time. I’ve got a number of educational animations (electrical) that I created years ago using Flash 4 (I know right – they’re using ActionScript 1.0). I’ve managed to get one of them converted to HTML5 in Adobe Animate but now I’m struggling to move it into Moodle. Most of the forums and videos say to cut and paste the code into the web page html, but in Moodle I don’t appear to have access to the header (where the code needs to go). The code editor in Moodle seems to provide access to the tag area only. Any suggestions would be appreciated.
Hi Steve,
Welcome to the world of fun with Moodle 🙂
Awesome that you were able to convert flash to HTML5.
That is something I enjoy working with and did spend many years working in Flash too.
There are a few options.
1. You can just add the code into the page. If it references a JS file then that is ok to not have it in the header. What you will need to do is be careful with conflicts between your JS files and any Moodle JS files.
2. You can use the Generico plugin and add javascript and references to external JS files to Generico and then use the a short code to embed the activity in your page content. This can be a bit complex and requires admin access to the Generico templates.
3. You can also host the content somewhere else then IFrame the HTM page that includes all the required scripts. A bit like how H5P is embedded using an Iframe.
I am not a big fan of using Iframes both for accessibility and because of resizing to fit content issues.
I would normally just add the code straight into the page if you are allowed to add JS code into the editor. Admin can turn this function off)
I hope this helps but feel free to provide more details of how you are progressing and I can see if can be of more assistance.
Thanks,
Chris