The Silence of War

The Silence of War is a transmedia storytelling project about a small group of African American Vietnam Veterans from rural Eastern North Carolina. Their stories are told through interviews, photos, videos and other media.

The project was created by faculty and students at Wake Forest University. I was a co-director and also led the web development and design.

The technical side of things

One of the fun things about the project for me was creating the web framework. It’s a single-page application designed for the presentation of rich media. And it’s based entirely on front-end technologies: HTML5, CSS, and Javascript. It was refreshing since I usually do a lot of backend programming.

The framework is built for storytelling. Stories are created with a series of slides that contain all kinds of rich media. Video, audio, images, text, gradients, and more can be layered in interesting ways and navigated with smooth transitions in between. There are lots of interesting techniques I used to help with things like positioning text, creating rich full-screen backgrounds (including video backgrounds), overlaying transparent vignettes and gradients, and creating smooth background audio transitions.

In order to deal with all of the large video files and other media I created a custom lazy-loader in javascript. The lazy-loader basically downloads large media files just before they are needed, rather than trying to download everything at once. It looks ahead to see what slides the viewer can potentially view next and downloads only the media for those.

Building the framework gave me some new ideas and changed the way I think about storytelling on the web. Background audio is especially interesting to me in this type of application and I’m planning on doing more with it in the future.

View the The Silence of War.