I miss DVD-ROMs. Back in the 1990s, I spent the early part of my career working on multimedia projects, delivered on DVD discs, for viewing on computers. Macromedia Director let you include videos, interactive quizzes, and regular text-based information too — without loading, buffering or needing a network. Today, with ubiquitous networks and digital distribution, the DVD-ROM has disappeared, but left a hole — how do you deliver high quality video and interactive content without the delay and unreliability of a network?

Of course, you make an app, and if it’s for public consumption in a museum-style environment, you make a touch-based app for an iPad. Here, I’ll show you how I approached the problem, massaged the content and produced a finished app.

A Real-World Project

The town of Blackall, in outback Queensland, is celebrating their sesquicentennial with the B150 celebrations. As part of that, an old pub named “The Bushmans Hotel” has been renovated and filled with tales of its past, becoming “The Bushmans Gallery”. My role was to help plan and create the digital components of the exhibit (as well as to create other work like The 360° Blackall Trail I’ve written about previously). 

Here’s The Bushmans Gallery on its opening night — photo courtesy Lisa Alexander Photography http://lisaalexanderphotography.com.au

The installation includes a projector that fills a large chunk of a wall with over a hundred names of people who used to visit the pub. That non-interactive video was created with Motion and Yanobox Nodes, and it also includes a background soundtrack that helps recreate the atmosphere of the pub in its heyday.

These people all had something to do with the pub

A local photographer (http://lisaalexanderphotography.com.au) captured the people of the town, and a wall is dedicated to those photos. The photographic subjects also told their stories to a local videographer, (http://marikimedia.com) who produced 28 individual videos, each with a tale from Blackall’s history: The Marble King, Early Mobile Phones, Riding a Wild Bill Goat. To let visitors explore the videos at their own pace, three independent iPads each contain the same 28 digital stories. So how do you create that interactive experience? Let’s dig in.

These photos look great on this wall, but they need to move — Photo courtesy Lisa Alexander Photography

Development Tools

iBooks Author is an excellent option for interactive books, but doesn’t quite offer enough flexibility for kiosk-based delivery — it’s too easy for a user to exit the book viewer, and it doesn’t export to a standalone app. Similarly, Keynote has a brilliant “links-only” presentation mode, but you can’t stop people from leaving that mode on an iPad. It’s a real shame, because Keynote would be the perfect tool if you could just stop people from pinching to exit presentation mode.

On the Mac, you can stop people leaving, but no luck on the iPad

That means we’re back to DIY solutions, and to keep it simple, I decided to build in HTML (flexible, ubiquitous) and then package the resulting code in a native iPad app. Creating the HTML is actually the hard part; I’ve discovered the secret sauce for app packaging and have used it a few times already. Details later!
For complex interactive work, you’ll want a dedicated authoring tool. Adobe Animate CC does support HTML output, but it has a few issues, it’s carrying 20 years of baggage, and there are more targeted tools out there. Edge Animate was great, but has been discontinued. Enter Tumult Hype.

Tumult Hype is a great way to make fancy HTML and much more besides 

Hype To The Rescue

This excellent Mac-only HTML authoring package has been around for a few years, and remains a fantastic way to produce interactive projects. It’s got full animation support, allows developers to utilise common interactive behaviors like taps and swipes, has first-class video and audio support, and supports multiple scenes like old-school Flash did. Animate CC doesn’t support scenes for HTML export, and would have made this project much more difficult.

Gathering The Media

Videos were supplied via Dropbox in high quality MP4 format, from FCP X. I imported them all into my local copy of FCP X for audio and color tweaking, then exported them again. (The small quality loss from this process wasn’t significant.) The videos were then compressed once more with Handbrake, to Full HD at a data rate of 2000Kbps, giving significantly smaller good-looking files than is possible with FCP X or Compressor.

These are the Handbrake settings I used to create 2000Kbps MP4 files

Apple’s tools produce good looking large files very quickly, but don’t look great at low data rates. This extra recompression step isn’t needed for online delivery, because YouTube/Vimeo/Facebook/etc will squeeze it themselves, and you need to maintain the best possible quality in the files you send them. But if you’re the final link in the chain and need a small file, Handbrake is quick and free.
So far so good — Hype can embed the videos and they play just fine on an iPad. How to bring it all together?

Designing For Ease Of Use

Many of the tourists who make it to Blackall are “Grey Nomads”, retired caravan owners trekking around the outback, and so the interface had to be direct and simple. Still, a scrolling list of thumbnails doesn’t engage anyone. Instead, I recreated the wall of photos itself, and made it directly tappable.

Are there enough layers? Is it suitably non-destructive? Yes, and yes. Is it huge? Yes.

Using Photoshop, the individual photos, and photos of the real wall in the museum, I composited a very wide image — it’s a long wall! This proved trickier than anticipated, and needed careful dead-on photography of each window in the wall, correction with Adaptive Wide Angle, and manual assembly (as Photomerge couldn’t put the pieces together). With non-destructive techniques and a lot of Smart Objects, the final source file is 1GB, but hard drive space is cheap, right?
In Hype, the home scene shows the wall. However, the wall is too wide to fit on an iPad’s screen, so I grouped that large image, then made the group scroll from left to right automatically, and then reverse when it reached the end. Even better, Hype let me link swiping the group to controlling that main timeline, so dragging your finger across the screen scrolls it. Perfect.

The movie scrolls itself when it plays, and swiping controls movie playback

Inside the group, I added interactivity. On top of each photo on the wall is an invisible outline box: not hidden, but with 1% opacity. Tapping the box above a photo takes you to its linked video, each of which lives in its own scene. Each scene is built from the same base, and includes a giant cross in a box in the corner as a universal symbol to exit. To keep authoring easy, I put that cross in a Symbol, which turned out to be a good move.

Hands to tap and swipe are an easy way to show people what to do

Back on the home scene, to teach new users what to do, I added some hand animations showing people they can swipe anywhere and tap on photos. These animations had to be palindromes, because they play both forwards and backwards, but that wasn’t a problem. And so as not to obscure the 28 invisible boxes that jump to the videos, the hand animations had to be placed lower down in the stack — but still in the scrolling, swipeable group.

Making The App

Hype lets you test directly on an iPad with the free companion app Hype Reflect, and early test builds as a real app went just as well. How to put it in an app? While the full app-building process is more complex than I can cover here, you can summarise it as:

From Hype, export to HTML, named “index.html”, producing a file and a matching support folder.

Drag those two items to your Xcode project, copying where necessary.

Your Xcode project’s ViewController.swift file should contain this code:
import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
        override var prefersStatusBarHidden: Bool {
            return true
       }
    override func viewDidLoad() {
        super.viewDidLoad()

        let webConfiguration = WKWebViewConfiguration()
        webConfiguration.mediaTypesRequiringUserActionForPlayback = []
        let webView = WKWebView(frame: .zero, configuration: webConfiguration)
        let htmlPath = Bundle.main.path(forResource: "index", ofType: "html")
        let folderPath = Bundle.main.bundlePath
        let baseUrl = URL(fileURLWithPath: folderPath, isDirectory: true)
        do {
            let htmlString = try NSString(contentsOfFile: htmlPath!, encoding: String.Encoding.utf8.rawValue)
            webView.loadHTMLString(htmlString as String, baseURL: baseUrl)
        } catch {
            // catch error
        }
        webView.navigationDelegate = self
        webView.scrollView.bounces = false
        webView.scrollView.isScrollEnabled = false
        view = webView
    }
    
}

If you have the target iPad to hand, connect it, press the Play button, and you’re done. For a real app, you’ll then need icons, a developer account, to know how to use iTunes Connect, screenshots for the App Store, probably a splash screen, and more. TestFlight also allows distribution to “internal testers” without waiting for review. Excellent.

This “close” symbol includes its action, so changing the action in one spot fixed the whole app 

Fixing Bugs

However, testing uncovered a fatal bug: if you watch too many videos, eventually no more videos will play. It turns out that any videos played were being kept in memory, and eventually it filled up. A quick fix: rather than returning to the home scene, reloading the project by jumping to “index.html” means that memory is constantly cleared. Because the close button (and its action) is packaged in a Symbol, I could fix this throughout the project by changing a single item. Yay for Symbols!

The launch of The Bushmans Gallery, where you can see some iPad kiosks to the left of center — Photo courtesy Lisa Alexander Photography

Conclusion

With the tools available today and great content from talented creatives, it’s once again possible to create engaging interactive work, without buffering. While it’s best experienced in Blackall itself, as an app, anyone can download it and share these stories more widely. And because it’s HTML under the surface, it’s entirely possible to deliver this in other ways too.

Digital stories are worth making, and packaging them together in an app makes them easier to find and enjoy. If you have the chance to work on a community project like this, jump at it. Preserving the stories of the past and presenting them in a new way is a not just a rewarding way to spend your time — it can stand alone long after you’re done. Huge thanks to everyone involved in this project.

The finished app that sits on the kiosks in the gallery