digitalartwork » Flash

Behind the Scenes of LENS

Zach Wise — Mon, 01 Jun 2009 21:59:52 +0000

A few people have been asking me how the LENS Blog on The New York Times site came to be and what software it was built on. I thought I’d shed a little light on the development process and answer some of these questions.

Why does it scroll sideways?

When we started this project many months ago, The Big Picture was obviously one of the successful models for a photo blog, not just in terms of traffic but also in terms of presenting photographs in my favorite way. BIG.

When you go as big as The Big Picture, you can run into big problems. Depending on your monitor, the photos can’t fit on your screen. Scrolling through many large photos causes you to have scrolling precision and dexterity for an optimal viewing experience. Slide-shows on the other hand are easy to view. The scroll position remains the same and the photos scroll. We started to think of the LENS blog as a slide-show, and slide-shows within slide-shows. We fell in love with the idea of being able to stay on one page and have a mass consumption of images.

Mock-ups and Design Evolution

My first crack at a mock-up was fairly traditional and was concerned with finding a way to make the image as large as possible

As our thinking evolved to the side-scrolling approach, we mocked-up some quick Fireworks working pages so we could see what it would feel like.

WordPress, Flash and XML Driven

All of the NYTimes’ blogs are produced in WordPress. WordPress has a great API and allows you to customize the data from posts for things like RSS feeds and XML feeds without much effort.

For the homepage of LENS we built a Flash presentation that takes a custom XML feed from wordpress. The real reason we went with Flash for the front-end presentation was because of it’s full screen ability.

You can see in the spec screen-shots on the right, that we are using existing wordpress variables to construct the feed for flash. You may also notice a “custom field“. This is where we link to the slide-show, and video xml feeds exported by existing tools we use on NYTimes.com everyday.

Obviously this is a quick overview of how LENS came together and how it works. If you have specific questions, hit me up in the comments and I’ll try and answer them as best I can.

Thirst in the Mojave

Zach Wise — Mon, 05 Jan 2009 20:05:30 +0000

The Thirst in the Mojave piece is my attempt at making video interactive and contextualizing its content. Video on the web is great but it lacks many web-centric features or enhancements.

The advantage of web video over traditional video has typically revolved around the ability to share with friends and time-shift watching content. Thirst in the Mojave tries to bring a little more web mentality to video but still utilize the linear narrative strengths that make video such a great storytelling tool.

I completed the project before I left the Las Vegas Sun back in August and for reasons I’m not sure of, it finally launched.

Features of Mojave

Interactive geo-coded video

Each scene in the story is geo-located to where it was shot or what you are seeing. A GPS data-logger was used on every shoot for the project and GPS coordinates were logged for each shot and photograph made.

Lower-Third Bios

Every “lower-third” for the people speaking is brought in using flash and allows you to always know who is currently speaking. If you click on the name of the person, you can see a short bio including information relevant to what they are speaking about. The idea here was to contextualize or qualify their voice of authority.

More Info!

The more info box is triggered by the video playing to bring up context specific data, facts, graphics, links or videos. This is a great way to provide content that is informative and relevant but could slow down the main narrative.

Transparency is a great tool of truth.

Another use of the more info box in this project was transparency. An example of this is a scene in part 3 where Pat Mulroy is talking about the pipeline project on Face to Face with Jon Ralston. In the narrative you see several clips from the program but in the more info box you can watch the entire Face to Face show that those clips came from. Any viewers who might be skeptical that those clips were taken out of context can watch the program and see that the clips were selected appropriately.

All together, about 20 hours of footage were shot and edited down to 22 minutes for the main narrative.

The main narrative video content is divided into 5 parts for the web. The piece was also edited for TV by cutting it into 4 parts for commercial breaks with a total run time of 22 minutes.

60 minutes of extra footage

I can’t tell you how many times I’ve edited an interview and had to lop off some really interesting information because it strayed from or didn’t fit the tight narrative I was working on. Now the viewer is in control and can let their curiosity of a subject drive them to discover more on their own. Facts spoken in the video can have links citing sources, or where to go for more info.

Curiosity

There is also approximately another 60 minutes of extra footage that shows up in the more info box during the piece. Dozens of infographics were created for the piece. Between the geocoded map items, info box extras and bios there are about 145 extra pieces of information shown.

Interactive Water Use Map

We thought this topic was strong enough to go even further. We built a database of water usage from public water records for over 1/2 a million single family homes in the valley. We then built a “water use app” to allows viewers to search a map of the Las Vegas Valley to find out how much water they’ve used in the last year. They can then compare their usage to their neighbors. On top of the search functionality we also visualized water usage density and swimming pool density on the map. Approximately 70% of the water problem falls on outdoor residential water use, I think this app is a real asset towards understanding that problem and hopefully doing something about it.

Coolris and Flickr make an easy Photowall

Zach Wise — Fri, 26 Dec 2008 21:28:20 +0000

The Wall Street Journal really went all out this year on their Year in Pictures presentation. It probably took me all of thirty seconds to do the same presentation here. It did alert me to how cool this Cooliris thing is though.

My Flickr stream Cooliris

Hybrid Flash Soundslides/Video Player

Zach Wise — Fri, 02 Mar 2007 04:59:20 +0000

I recently finished work on a flash hybrid player for the Nashua Telegraph which will play both video and soundslides presentations. It is loosley based on my Music in Athens piece. The player was designed to be modular, customizable and size independent. The player has the ability to display chapters, which is extremely useful for larger projects or a series that deals with both audio slideshows (soundslides) and video. It also features the ability to show a pre-roll ad before the first piece plays and when the piece is finished it will bring up related links and a description of the piece you just watched. There is also a feature specific to a soundslides presentation that will display a thumbnail gallery.

To show how customizable the player is, check out the two versions below. The first one is a multimedia gallery of recent work I’ve done and has no pre-roll ad. The other one is from Nashua and features a pre-roll ad and is customized to fit their site’s style. I’ve got them pretty much bulletproof but if you notice something funky, post a comment.

Recent Multimedia Work

Nashua Telegraph Example