The rectangle behind you

The movie premiere

I made a movie theatre audience of 100+ people spend three hours looking at a website.

No, seriously.

This is a screenshot of a website. I swear.

A few weeks ago, I rented a movie theatre in San Francisco and invited my friends to watch a classic ’80s Polish TV show, Alternatywy 4, subtitled in English and re-edited into a 2½-hour movie. The theatre rental contract offered various ways to play back my material (DVD, thumb drive), but I had something else in mind.

The movie theatre I rented.

Agenda for the event

Here’s how I planned the event:

• A handful of ’80s Polish music videos as people slowly trickled into the movie theatre, to set the mood (half an hour).
• A presentation on stage before the movie, to welcome people and provide context (10 minutes).
• An interactive clock counting down to the movie (1 minute).
• The first half of the movie (1½ hours).
• An intermission with music playing (15 minutes).
• The second half of the movie (1 hour).

I built all of the above as a… slide deck, in HTML (full-screen Safari), which could be controlled from my MacBook, connected to the biggest projector I’ve ever seen. The 2½-hour movie was just two rather long slides.

But why?

What led me to this decision? Some of the usual benefits of going interactive, and a few unique ones:

• I could add some interactive elements, such as a little slide deck for the introduction, an intermission countdown timer, and an “analogue” clock that showed the current time.

A clock counting down 15 minutes for the intermission so that people know exactly how much time they have

• I could actually “rig” that analogue clock a bit for dramatic effect (more on that in a bit).
• Being able to automate a few things — for example music videos advancing one by one, or the movie breaking into intermission at the right time.
• I could introduce a few options specific to this event: a separate volume for music videos (it didn’t affect the main movie volume), and a toggle between stereo and 5.1 sound.
• I could build extra safeguards in case something went horribly wrong.
• The promise of making it all seamless and magical, without switching apps or needing to jump into Finder, breaking the illusion you’re in a movie theatre.
• Familiarity, since I’ve done a lot of those before. (I briefly consider building a Mac app, instead of a website, but the combination of time constraints and prior experience led me the usual path.)

An example slide from my presentation deck before the movie.

Setup

It was a pretty typical setup in a pretty atypical space. My computer was connected to the projector and audio equipment using HDMI. We put the laptop up in the projection booth window so that me standing on stage could have a line of sight with the computer using my usual off-the-shelf presentation remote.

Testing the projection. This doesn’t look like much, but it’s a photo of my MacBook’s desktop on a huge movie theatre screen, viewed from a projectionist’s booth (a.k.a. “dream come true”).

Hoping for the best/Preparing for the worst

Even though most of movie theatre projections are nowaways digital files residing on computers, it was still frightening to plug in my own laptop to project from. I knew how volatile it was. What if there’s a low-battery warning, or a Java update pop-up in the middle of the movie? That’d be a small disaster.

I followed the usual practice of quitting all apps, enabling Caffeine, etc., but I also went above and beyond:

• Since I have never run a long movie from Safari, I was worried about the possible slowdowns or problems that’d appear later. I made sure to run the whole presentation at home, over and over again, end to end, connected to my TV pretending to be the projector.
• Even though I knew the resolution of the movie theatre projector (2048×1080), I made sure the presentation worked correctly in any other resolution. This paid off, since we eventually had to switch to 1920×1080 for technical reasons.

I also tried to anticipate other things that could go wrong:

• To make it harder to press or cancel anything by mistake, when the movie was playing you needed to hold Shift for any of the keyboard shortcuts (switching slides, changing volume, moving around in the movie) to work.
• The movie would save its progress continuously into localStorage. If something went wrong, I could restart the browser, reopen the presentation, and press a key to immediately resume from the last-played location.
• All the options (volume, sound type) were saved into localStorage as well, so I didn’t have to reset them in case a reload or reboot was necessary.
• I had a previously-tested backup computer at the ready (thank you, Noah!).
• I made sure to arrange an extra date a few weeks before to do a test run with the projectionist, and on the day of, to arrive a few hours early to test everything again.
• For testing, I rigged the presentation so just one keyboard shortcut (T) would jump straight into the middle of the movie so that we could easily adjust focus, test sound levels, without much fuss.
• I also printed out a list of keyboard shortcuts for the projectionist helping me out, so that he could take over if need be.

Interactive niceties

• Knowing that the computer will be in the projection booth, but I might be running around or sitting with the audience, I made sure many actions had visible updates appearing in the corner of the screen:

• Up until the last minute, I didn’t know whether the movie would play better in stereo (2.0) or surround (5.1). I prepared two movie files, and programmed in a toggle so that I could switch between them before or even as the movie was playing.
• I added a JavaScript/HTML recreation of an old Polish TV clock, to be shown just before the movie. I wanted the audience to experience my childhood thrill of waiting for the clock’s second hand to hit zero (I wrote more about the clock). I JavaScript-rigged the clock to show the current time, but always start at 17 seconds past minute when I advanced to its slide. This way, it’d feel real, but a 43-second delay would be guaranteed.

An example of the clock. That second hand is in cahoots with me.

How did it go?

It went really well. All of the preparations paid off, and I received some wonderful feedback from the audience.

If you ever considered renting a movie theatre and showing something, it is a fucking amazing experience. There’s a classic tongue-in-cheek design saying “if it’s big and ugly, it’s not big enough.” I hope my slides and the movie were not ugly. But even if they were, seeing them all on a huge screen in a packed movie theatre was, for a moviegoer like me, truly incredible.

And the fact that it was all just a website was just an icing on a cake. When I was putting together my first little site 20 years ago, who knew this is where it’d all lead?

The last message shown on the screen after the movie was over (Biergarten was the location on the after party.)

The rectangle behind you, a series of articles about interactive presentations.

By Marcin Wichary (@mwichary)