2D HTML5 Animation in Moodle

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.

[et_pb_section fb_built=”1″ _builder_version=”4.7.7″ _module_preset=”default” custom_margin=”||-23px|||” custom_padding=”0px|||||”][et_pb_row _builder_version=”4.7.7″ _module_preset=”default”][et_pb_column type=”4_4″ _builder_version=”4.7.7″ _module_preset=”default”][et_pb_code _builder_version=”4.7.7″ _module_preset=”default” custom_padding=”20px|20px|20px|20px|false|false” border_radii=”on|5px|5px|5px|5px” border_width_all=”1px” border_color_all=”#d6d6d6″]
[/et_pb_code][et_pb_text _builder_version=”4.7.7″ _module_preset=”default”]

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. 

[/et_pb_text][et_pb_video src=”https://youtu.be/dQQkb_5FHpQ” _builder_version=”4.7.7″ _module_preset=”default”][/et_pb_video][et_pb_video _builder_version=”4.7.7″ _module_preset=”default”][/et_pb_video][et_pb_text _builder_version=”4.7.7″ _module_preset=”default”]

What you will need

[/et_pb_text][et_pb_dmb_code_snippet title=”Code to go into Moodle page.” code=”CjxzY3JpcHQgc3JjPSJodHRwczovL3JpY29zaGFlLmNvbS5hdS9hbmltYXRpb25kYXRhL2xvdHRpZTIuanMiPgovLyB0aGlzIGlzIHRoZSBqYXZhc2NyaXB0IHBsYXllciBmaWxlCjwvc2NyaXB0Pgo8c2NyaXB0PgogIC8vIHRoZSBwYXRoIGZpbGUgY2FsbGVkIGRhdGEyLmpzb24gaXMgdGhlIGFuaW1hdGlvbiBkYXRhLgogICAgd2luZG93Lm9ubG9hZCA9IGZ1bmN0aW9uKGUpIHsKICAgICAgICB2YXIgYW5pbWF0aW9uID0gYm9keW1vdmluLmxvYWRBbmltYXRpb24oewogICAgICAgICAgICBjb250YWluZXI6IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdibScpLAogICAgICAgICAgICByZW5kZXJlcjogJ3N2ZycsCiAgICAgICAgICAgIGxvb3A6IHRydWUsCiAgICAgICAgICAgIGF1dG9wbGF5OiB0cnVlLAogICAgICAgICAgICBwYXRoOiAnaHR0cHM6Ly9yaWNvc2hhZS5jb20uYXUvYW5pbWF0aW9uZGF0YS9kYXRhMi5qc29uJwogICAgICAgIH0pCiAgICAgICAgYW5pbWF0aW9uLnNldFNwZWVkKDIpOwogICAgICAgIGFuaW1hdGlvbi5vbkVudGVyRnJhbWUgPSBmdW5jdGlvbihlKSB7CgogICAgICAgICAgICBpZiAoZS5jdXJyZW50VGltZSA+IDEwICYmIGUuY3VycmVudFRpbWUgPCAxMSkgewogICAgICAgICAgICAgICAgY29uc29sZS5sb2coJ2ZyYW1lIDEwJyk7CiAgICAgICAgICAgICAgICBjb25zb2xlLmxvZyhlLmN1cnJlbnRUaW1lKTsKICAgICAgICAgICAgfTsKCiAgICAgICAgfTsKLy8gZXZlcnl0aGluZyBiZWxvdyBoZXJlIGlzIGN1c3RvbSBjb250cm9saW5nIHRoZSBhbmltYXRpb24gICAgICAKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInNwZWVkMSIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKSB7CiAgICAgICAgICAgIGFuaW1hdGlvbi5zZXRTcGVlZCg1KTsKICAgICAgICB9KTsKICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgic3BlZWRoYWxmIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpIHsKICAgICAgICAgICAgYW5pbWF0aW9uLnNldFNwZWVkKDIpOwogICAgICAgIH0pOwogICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJzcGVlZGZhc3QiKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCkgewogICAgICAgICAgICBhbmltYXRpb24uc2V0U3BlZWQoMTApOwogICAgICAgIH0pOwogICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJwaXN0b25idG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCkgewogICAgICAgICAgICB2YXIgb2JqID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInBpc3RvbiIpOwogICAgICAgICAgICBpZiAob2JqLnN0eWxlLmRpc3BsYXkgPT0gIm5vbmUiKSB7CiAgICAgICAgICAgICAgICBvYmouc3R5bGUuZGlzcGxheSA9ICIiOwogICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgb2JqLnN0eWxlLmRpc3BsYXkgPSAibm9uZSI7CiAgICAgICAgICAgIH0KICAgICAgICB9KTsKICAgIH0KPC9zY3JpcHQ+Cgo8ZGl2IGlkPSJibSI+IDwvZGl2Pgo8YnV0dG9uIGNsYXNzPSJidG4gYnRuLXNlY29uZGFyeSIgaWQ9InNwZWVkMSI+Tm9ybWFsPC9idXR0b24+CjxidXR0b24gY2xhc3M9ImJ0biBidG4tc2Vjb25kYXJ5IiBpZD0ic3BlZWRoYWxmIj5TbG93PC9idXR0b24+CjxidXR0b24gY2xhc3M9ImJ0biBidG4tc2Vjb25kYXJ5IiBpZD0ic3BlZWRmYXN0Ij5GYXN0PC9idXR0b24+CjxidXR0b24gY2xhc3M9ImJ0biBidG4tc2Vjb25kYXJ5IiBpZD0icGlzdG9uYnRuIj5IaWRlL1Nob3cgcGlzdG9uPC9idXR0b24+” _builder_version=”4.7.7″ _module_preset=”default” header_font=”|700|||||||” header_font_size=”18px” header_line_height=”3em”]CjxzY3JpcHQgc3JjPSJodHRwczovL3JpY29zaGFlLmNvbS5hdS9hbmltYXRpb25kYXRhL2xvdHRpZTIuanMiPgovLyB0aGlzIGlzIHRoZSBqYXZhc2NyaXB0IHBsYXllciBmaWxlCjwvc2NyaXB0Pgo8c2NyaXB0PgogIC8vIHRoZSBwYXRoIGZpbGUgY2FsbGVkIGRhdGEyLmpzb24gaXMgdGhlIGFuaW1hdGlvbiBkYXRhLgogICAgd2luZG93Lm9ubG9hZCA9IGZ1bmN0aW9uKGUpIHsKICAgICAgICB2YXIgYW5pbWF0aW9uID0gYm9keW1vdmluLmxvYWRBbmltYXRpb24oewogICAgICAgICAgICBjb250YWluZXI6IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdibScpLAogICAgICAgICAgICByZW5kZXJlcjogJ3N2ZycsCiAgICAgICAgICAgIGxvb3A6IHRydWUsCiAgICAgICAgICAgIGF1dG9wbGF5OiB0cnVlLAogICAgICAgICAgICBwYXRoOiAnaHR0cHM6Ly9yaWNvc2hhZS5jb20uYXUvYW5pbWF0aW9uZGF0YS9kYXRhMi5qc29uJwogICAgICAgIH0pCiAgICAgICAgYW5pbWF0aW9uLnNldFNwZWVkKDIpOwogICAgICAgIGFuaW1hdGlvbi5vbkVudGVyRnJhbWUgPSBmdW5jdGlvbihlKSB7CgogICAgICAgICAgICBpZiAoZS5jdXJyZW50VGltZSA+IDEwICYmIGUuY3VycmVudFRpbWUgPCAxMSkgewogICAgICAgICAgICAgICAgY29uc29sZS5sb2coJ2ZyYW1lIDEwJyk7CiAgICAgICAgICAgICAgICBjb25zb2xlLmxvZyhlLmN1cnJlbnRUaW1lKTsKICAgICAgICAgICAgfTsKCiAgICAgICAgfTsKLy8gZXZlcnl0aGluZyBiZWxvdyBoZXJlIGlzIGN1c3RvbSBjb250cm9saW5nIHRoZSBhbmltYXRpb24gICAgICAKZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInNwZWVkMSIpLmFkZEV2ZW50TGlzdGVuZXIoImNsaWNrIiwgZnVuY3Rpb24oKSB7CiAgICAgICAgICAgIGFuaW1hdGlvbi5zZXRTcGVlZCg1KTsKICAgICAgICB9KTsKICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgic3BlZWRoYWxmIikuYWRkRXZlbnRMaXN0ZW5lcigiY2xpY2siLCBmdW5jdGlvbigpIHsKICAgICAgICAgICAgYW5pbWF0aW9uLnNldFNwZWVkKDIpOwogICAgICAgIH0pOwogICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJzcGVlZGZhc3QiKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCkgewogICAgICAgICAgICBhbmltYXRpb24uc2V0U3BlZWQoMTApOwogICAgICAgIH0pOwogICAgICAgIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJwaXN0b25idG4iKS5hZGRFdmVudExpc3RlbmVyKCJjbGljayIsIGZ1bmN0aW9uKCkgewogICAgICAgICAgICB2YXIgb2JqID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoInBpc3RvbiIpOwogICAgICAgICAgICBpZiAob2JqLnN0eWxlLmRpc3BsYXkgPT0gIm5vbmUiKSB7CiAgICAgICAgICAgICAgICBvYmouc3R5bGUuZGlzcGxheSA9ICIiOwogICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgb2JqLnN0eWxlLmRpc3BsYXkgPSAibm9uZSI7CiAgICAgICAgICAgIH0KICAgICAgICB9KTsKICAgIH0KPC9zY3JpcHQ+Cgo8ZGl2IGlkPSJibSI+IDwvZGl2Pgo8YnV0dG9uIGNsYXNzPSJidG4gYnRuLXNlY29uZGFyeSIgaWQ9InNwZWVkMSI+Tm9ybWFsPC9idXR0b24+CjxidXR0b24gY2xhc3M9ImJ0biBidG4tc2Vjb25kYXJ5IiBpZD0ic3BlZWRoYWxmIj5TbG93PC9idXR0b24+CjxidXR0b24gY2xhc3M9ImJ0biBidG4tc2Vjb25kYXJ5IiBpZD0ic3BlZWRmYXN0Ij5GYXN0PC9idXR0b24+CjxidXR0b24gY2xhc3M9ImJ0biBidG4tc2Vjb25kYXJ5IiBpZD0icGlzdG9uYnRuIj5IaWRlL1Nob3cgcGlzdG9uPC9idXR0b24+[/et_pb_dmb_code_snippet][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_3,1_3,1_3″ _builder_version=”3.25″ min_height=”229px” custom_padding=”18px|||||” saved_tabs=”all” global_module=”4465″][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://ricoshae.com.au/wp-content/uploads/2020/09/Screenshot-at-Sep-24-16-37-17.jpg” title_text=”Screenshot at Sep 24 16-37-17″ url=”https://ricoshae.com.au/3panelultimateguide37″ align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”4.6.3″][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://ricoshae.com.au/wp-content/uploads/2020/09/Screenshot-at-Sep-24-16-33-53.jpg” title_text=”Screenshot at Sep 24 16-33-53″ url=”https://ricoshae.com.au/capimricoshae” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”4.6.3″][/et_pb_image][/et_pb_column][et_pb_column type=”1_3″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://ricoshae.com.au/wp-content/uploads/2020/09/Screenshot-at-Sep-24-16-37-00.jpg” title_text=”Screenshot at Sep 24 16-37-00″ url=”https://ricoshae.com.au/3panelaccessallareas” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” _builder_version=”4.6.3″][/et_pb_image][/et_pb_column][/et_pb_row][/et_pb_section]