Internet Explorer and Lionsgate: Bringing “The Hunger Games” to Life with Exclusive Movie Content

“May the odds be ever in your favor.” If you know what that means, then you are probably one of the millions of readers of Suzanne Collins’ wildly popular novel series, The Hunger Games. The Hunger Games has spent more than 180 weeks – over three consecutive years – on The New York Times bestseller list since publication in September 2008, and is the #1 selling Young Adult series of 2011. And we know many fans are eagerly anticipating the upcoming movie release.

Today, we are excited to announce those fans don’t have to wait for March 23rd to immerse themselves in the Capitol and to see exclusive clips from The Hunger Games and explore environments such as the Control Room and the Avenue of the Tributes.

captour1

Microsoft and Lionsgate, along with leading design and developer agencies the Nerdery and Ignition Interactive, have partnered to bring fans The Capitol Tour, a truly immersive companion site to the movie that extends the film to the web and includes exclusive content from director Gary Ross and the movie itself. Take the Capitol Tour at http://thecapitoltour.pn.

“We wanted to create a breakthrough online experience for fans of The Hunger Games. We are so excited at what we’ve been able to create with the team at Microsoft by tapping into the power of Internet Explorer and the investments they’ve made in their product to bring web content to life,” stated David Hayes, Vice President of Digital Marketing at Lionsgate. “We’re thrilled to show off the Capital Tour to Hunger Games fans around the world.”

HTML5: The Power to Bend the Browser

In January, the release of HTML5 Cut the Rope stretched the boundaries of gaming on the web, creating plugin-free online experiences that are just as rich and engaging as their native counterparts. With the release of the Hunger Games Capitol Tour, we are now seeing how HTML5, coupled with the innovations of Internet Explorer 9, can bring to life one of the most anticipated movies of the year.

captour2

What is truly unique is that it’s all built from top to bottom using only HTML5 and other modern web standards. Unprecedented for movie sites, which are almost 100% Flash based today, The Capitol Tour is plug-in free. The site demonstrates that not only can you create immersive, innovative experiences online with standard-based markup, but that — when coupled with a truly modern browser like IE9 with advanced hardware acceleration capabilities — the experience is fast and fluid.

The Web is preparing for the 74th Hunger Games

When we first partnered with Lionsgate, our goal was simple: through the power of HTML5 and IE9, create an extension of the movie and novel experience that delivers a unique interactive world that would bring the fans of The Hunger Games deep into the world of Panem. As part of this, we were honored to work closely with director Gary Ross to recreate his vision for the movie on the web. As a result, the experience heightens the experience of the Hunger Games by adding visual elements to the story that haven’t been in traditional companion sites, and exclusive content that Hunger Games fans will be seeing for the first time, including footage of Effie at the Reaping, Katniss and Peeta in the Capitol and a new message from President Snow.

In addition, there are several elements that allow you to interact with the content in a new way. One of these is the Facebook personalization which is integrated into The Capitol Tour. Start by registering for the tour using Facebook Connect. After that, you’ll start to see aspects of the experience light up in new ways specific to you. For example, as you navigate around you may notice your friends appearing on monitors as they arrive in the Capitol. It really helps to make the experience feel more unique to each individual.

captour3

For the more technical citizens among you, you will also notice some really neat developer touches like skewed HTML5 video, procedurally generated particle effects, and cinemagraphs – which is a technique of blending the effects of images and videos.

If you want to see some really inspiring technology in action, check out the behind the scenes technical tear-down for the Hunger Games Capitol Tour. There’s a short video on the development and a sandbox code environment where you can play with the prototypes that went into creating the experience.

 

More goodness to come:

We’ve had a fun time working closely with Lionsgate, the Nerdery, and Ignition Interactive to reimagine how movie sites can come to life, and are excited that Lionsgate saw the potential in HTML5 over Flash to create the Capitol Tour.

If you’re a fan of the Hunger Games, report to the Capitol for the tour at http://thecapitoltour.pn/. By pinning the site, you’ll be notified of any new content – and trust us, you’ll want the notifications. The site will just get more and more awesome as we get closer to the release of the movie on March 23, including the additions of a training center where visitors can see Hunger Games competitors exercising and preparing for the games, and a memorabilia center where visitors can explore artifacts and weapons used in previous Hunger Games.

If you’re a developer interested in testing out HTML5, visit http://www.beautyoftheweb.com/#/startdeveloping and http://ie.microsoft.com/testdrive/.

Ryan Gavin

General Manager, Internet Explorer