What tools do you use to create interactive learning objects?
Adobe Captivate is a useful tool which benefits from a shallow learning curve, however it tends to rely heavily on imported content for anything beyond basic interactions (drag and drop, slide navigation, media display). There are some promising cloud based solutions however these tend to be feature limited and packaged with subscription-model-strings attached.
I was recently tasked with creating a series of genetics simulations for the School of Science & Technology (UNE). Simulation-style interactions on the web typically present in one of two forms:
-Adobe Flash (SWF format)
It has been a slow death, however I think we can all agree that Flash SWF is no longer a viable option for browser-based media as it will not work on phones and tablets. Steve Jobs famously restricted support for SWF content on iOS devices, and for good reason - actionScript (Flash’s programming language) had been through three iterations, and the technology presented a bunch of security issues. Since the death of SWF, Adobe’s Flash team continue to seek ways to carve out a market space for their software. It is as though nobody can decide whether to consider Flash a tool for web media creation, a shadow for Adobe Flex, or an animation tool that (honestly) will never be as good as After Effects. Indeed, the Flash software (recently rebadged as ‘Adobe Animate’) can now output to device-friendly html5 and webGL formats, but in my experience the output was slow and clunky and left me unconvinced that Flash could be used effectively as a tool for creating html5 content. Time will tell.
So while Flash Adobe Animate is taking a trip down struggle street, we are left pondering- what software offers the most robust tools for creating HTML5 content? Adobe pushed their own solution, Adobe Edge, however the software is no longer actively maintained. I am not convinced Adobe made a wise choice in killing off Edge, they claimed that their users were seeking simpler, more 'all in one' solutions (i.e. Captivate) however you only need to look on the web to see that there is need for real ultimate power that Adobe currently doesn’t afford us. Writing such content from scratch can be time consuming. Some would argue this is the best approach but the budgets can be significant and writing pages of code can be a hair pulling experience. This led me to explore other options, and I settled on (and grew to love) a software program called Hype.
Another consideration worth noting is whether to use a DOM-based or Canvas/webGL-based approach. For the purpose of comparison, this is a bit like the old 'vector vs raster / Photoshop vs Illustrator' chestnut. Captivate and Flash favour the canvas element, while Edge and Hype favour DOM manipulation. For my money, DOM is where it's at. Canvas being a raster format suffers visually, particularly when rendering text. Creating everything in 'the DOM', on the other hand, gives us native SVG and crisp (subpixel-rendered vector) text. Additionally, DOM based workflows typically handshake nicely with accessibility requirements.
Nerd session is over. Here is a sample of the simulations I built for Nicholas Andronicos and the School of Science & Technology. Answers are provided so you can step through each if you like.
This one combines 3D animation with drag and drop. 3D elements were made in Blender3D then separated into draggable elements and video files
Build an RNA strand / Build template strand /Build DNA nucleotides
Our production team included: Nick Andronicos, Peter Holford, Iain Mackay, Trish Donald and myself.