The Educational Animation Editor is an online programming tool (open source) for creating educational animations.
Don’t be discouraged by the fact that it’s a code-based tool without drawing capabilities. You can easily import images as SVG files (or optionally as PNG files).
The finished animations can be exported as HTML files and then embedded on any website or used locally.
The editor is based on the PixiJS framework (originating from the gaming field) and several other open-source frameworks, without which this tool wouldn’t exist.
One advantage of this tool is that it includes many predefined and well-tested classes. For example, if you want to create GUI elements, just a few lines of code are usually enough.
Here you will find some background information on the development of the tool.
Getting Started
After starting the application, you will see the following view:
On the left side, you’ll find various templates. These templates allow you to quickly explore what’s possible with this software. There is a template for every object. With small experiments, you’ll quickly get the hang of it. If you prefer a systematic introduction, there’s also a software reference.
After opening a template, it looks like this:
The right area displays the animation content. On the left, you see the code that generates the animation.
At the top left, you can see the name of the current tab.
You can open as many tabs as you like—for example, to open more templates or create small drafts.
In the upper right toolbar, you’ll find options to open and save files. Here you can also export animations as HTML files.
In the lower left corner, you’ll find buttons you’ll use frequently. After changing the code, you can refresh the animation here. You can also search for strings and display messages.
To generate a message, enter the following code in the editor:
console.log("Hello World");Note: These messages are stored in your device’s RAM. If there are many messages (e.g., repeated outputs), the animation may noticeably slow down.
Last but not least, in the lower right corner, you’ll find two buttons to take a screenshot and switch to full-screen mode.
The Code Editor
When you look at some of the available templates, you’ll sometimes notice an info icon at the edge of a line.
These icons appear when a class is already predefined. When you click on the icon, a form is displayed.
The form contains all the information about the object. You can also modify the initialization parameters here. The form therefore serves both as a reference and a quick editing option.
Final Remarks
You will find at least one template for every predefined class. This allows you to learn the tool in a playful way. A complete overview of all classes can be found at the following link:
Note: The editor is currently still in beta mode. Please let us know if something doesn’t work as expected.