Hype is the new Flash?
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)
-HTML5 / Javascript
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.
Tumult Hype is essentially what Adobe Edge should have been and what Adobe Flash is (we think) trying to be. It spits out native html5 content, allowing developers to leverage a plethora of javascript libraries, hook seamlessly into web APIs, and build rich content using an object oriented, GUI driven approach. With Hype, you are working in native html format from start to finish, allowing you to get into the code as deeply (or shallowly) as you like. And for those of us who have a history working in Flash, Hype features Flash-like layers, timelines, and symbols to piece content together with fewer lines of code. Hype has a strong user base, solid documentation, and a price tag that belies its value.
HOWEVER.. as much as I love it personally, I can see it is not for everyone. Hype is only available for Macs and requires solid knowledge of JavaScript libraries and DOM tree manipulation to really leverage its true power. I think Captivate / Storyline and cloud solutions will continue to be the tools of choice for many learning media developers given their ease of use and educational bent. In my experience, importing Hype content into Captivate has not been necessary however it is nice to know that the two programs can be utilised in tandem (I am thinking tin can / SCORM integrations may benefit from this but have not looked into it). So if you don’t mind digging a little deeper than what the standard tools afford, I urge you to give Hype a try. You can get 50% off by following my affiliate link: that was a joke, I have no link :(
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.
Protein synthesis:
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.