Making interactive diagrams with Hype

I’ve been dabbling again with making my own animations to use as teaching aids. I say ‘again’ because I remember how excited I was to create a crude, two-dimensional animation of photosynthetic electron transport in my first year at OWU. I used Flash for that, when it was still produced by Macromedia (before Adobe bought them).

Instead of Flash or some other complicated authoring tool, I’ve been using Tumult Hype, which does its magic with only HTML5 and Javascript. The web has changed a lot since the early 2000’s, including the introduction of greater support for animation in the browser with HTML5, making it possible to bypass the plugins altogether. I’m still learning my way around the software, but I’ve managed to realize a couple of simple animations already — one demonstrating osmosis, one on meristem-driven growth, and one on cell expansion. They are, admittedly, not much to look at, but I think I spent all of 15 minutes on each. The design goal (if you could call it that) was to create the equivalent of a chalkboard sequence of drawings, and I think they accomplish that much.

In my opinion, even though Hype seems to be designed with web professionals in mind, it is perfect for this kind of activity. It has a mode in which you can ‘record’ an animation by simply dragging objects around and advancing the timeline. Alternatively, you can also control each object and animation sequence with manual controls, which I used for the cell division and growth example to obtain pixel-precise layout of each new cell. I’ve barely scratched the surface of the interaction capabilities thus far, only creating buttons on my examples for replaying or jumping to a new scene, but there is massive potential here for allowing students to explore the impact of changing different variables, for example.

One of the great benefits of the output format is that I can embed the animations on web pages and, using the same output, bundle them into a widget and insert them into iBooks Author projects, where they can become fully interactive diagrams. As I’ve written recently, I’m interested in exploring the creation of interactive books with iBooks Author, and having a simple tool for creating animations is an important complement to that process. I’m looking forward to tinkering with Hype more, and I’ve set my sights on remaking my old photosynthetic electron transport animation, which promises to be a bit more involved than growing squares.

Have something to say about this?