The story, called Start With a Balloon, ended up having 15 pages, or passages. After finishing the storyline and all the text and design and all the links, etc. I made 15 little audio files, one per passage. I used a Shure SM57 microphone attached to a USB converter/pre-amp and recorded directly into Audacity for editing and exporting as mp3's. I set up a folder in Google Drive to host all the audio clips and the Twine story (which outputs as an html file). I discovered that, thank God, Twine's html was already responsive.
Ultimately I would like to change all the audio clips to little videos. I did finish four of them, for the first four passages. I used Moovly (which is pretty fun) to make the animated videos, attached the audio files, downloaded the videos and did a little more editing in Filmora.
Then came a real battle - what to do with the video files? I experimented with hosting the videos in Google Drive, which meant using the browser's video player to play the video. This turned out to be really slow and wonky on my various devices. So I uploaded the video files to YouTube (which has its own wonkiness) and then discovered that YouTube's embedded video player is notorious for not being responsive! I discovered a crazy workaround (using html and css) which actually worked.
UPDATE August 15, 2017
This project just keeps growing! It has played a role in two different courses, and I am now working on it independently. It has also been influenced by a third course - the so-called "Captivate" course. Making a self-paced learning module with Captivate allowed me to understand how this project (and almost any digital interactive program I create) is based on or informed by all the principles I learned in that course.This summer I had to address the fact that Google Drive no longer hosts html files. I needed to find a solution and update my entire base camp/portfolio. The solution ultimately was to move files over to Google Cloud and host from there. It's not free, but it's not expensive either - so far it has cost me 1¢ of my free-trial $300 budget.
Then I discovered that Moovly was changing its platform and pricing, and that the animations I had made were not going to be available anymore. Of course, the video files belonged to me, and I had those up on YouTube, but I wasn't going to be able to make any more of the same animations. I would have to start from scratch. A couple of things had bothered me about Moovly. The animations themselves were never downloadable (and thus didn't really belong to me), and the application that made the animations had to be accessed and worked with online. I prefer having an application sitting right on my machine, so I don't have to worry about the quality or cost of my internet connection. And I definitely want my work product available for me to archive where I want. Yes, I had the videos, but not the original animations. The change at Moovly freed me to consider other options.
It turns out that Google is experimenting with creating html animations, and has a free download available called Google Web Designer. It is marketed as a design application for creating animated advertisements to use in your Google ad campaigns. Of which, of course, I have none. But using a drag-and-drop interface quite similar to Moovly, Google's Web Designer creates animations and outputs them as html files. I can't begin to tell you how cool this is, and fun to work with (if you think animating is fun - a professional animator I know calls animation "the slowest fun you'll ever have"). You don't have to worry about how to host or play the video file, or what format or codec to use, because there is no video file. The animation can stand free as a web page, and is playable on any modern browser (HTML5 compliant). Or it can be inserted in any web page in an iframe. There are tricks to make the output responsive, but for anything complicated you'll have to dig in and make changes to the css.
The application development is in the beta stage, so it still has growing pains. Though the interface is drag-and-drop, it definitely helps to understand how html and css interact. So it's not nearly as simple to use as Moovly. But there's so much more control. And it's HTML!
By now I've duplicated the four animations I had made with Moovly and am working on more. Heaven knows how long this will take. In the meantime, I'll leave the audio files in place.
