Digital Innovation from E3: A New Kind of 3D Interactive Brochure

15Jul10

Think you are hip to all the latest interactive technology for online demos? Consider Flash demos to be passé? Well at least one E3 Network agency may have one-upped you in the area of inventiveness when it comes to producing online brochures – in 3D no less.

At E3’s Annual Meeting in Denmark, Chris Ongarello of Tangram, presented an innovative new interactive brochure format that used some clever “hacks”(if you will) to existing 3D animation technology. The results were really impressive.

Bringing Insurance to Life

 

What was especially interesting about the brochure was the way the use of 3D technology was able to bring a topic as potentially mundane as insurance to life. The client, Lichtenstein Life, is a high-end insurance firm that was trying to capture new business in the area of entrepreneurs, across several countries including Switzerland, Lichtenstein, Germany and Italy. The brochure not only saves trees by replacing high-end paper production, it’s quite entertaining, as well.

Chris and graphic designer Sandra Boeni say they got the idea from seeing TV ads with 3-D pop-up animation. “I had never seen it done as an interactive format online,” Chris said. “And maybe I was bored, or wanted to try something new, but I was up for the challenge.”

Chris was kind enough to share his secrets about how the brochure was created. You can check out the brochure live online here:

(Note: ‘click’ on the Interactive Broschure link on the right side of the home screen.)


How they did it (the techie bits)

 

(How we made the LLA 3D interactive brochure – A technical overview, from Chris Ongarello, Tangram).

Warning: Please use caution when reading the following description, as it is not meant for tech-shy audiences. 😉

1. The book was first modeled in Cinema 4D; using bones to animate the cover and moving pages and Expresso to control the movement between cameras.

2. The scene was then lit, materials applied, and fully rendered with the Advanced Renderer.

3. This was then exported as a multi-pass render file through to After Effects for animation of the pop up elements and compositing.

 
4. On completion of the keyframing/compositing, the project was then exported via the Render Queue as an .flv file and brought into Flash as an embedded element movie clip. The main trick was saving a keyframe every frame to have sharp image movement in the Flash movie.

Navigation, interactive and forward/backward page flipping were controlled with Actionscript 3.0 and the Caurina Tweener Engine.

Care had to be taken through every step of the pipeline to optimise performance so we didn’t end up with a massive flash site that would take 10 hours to load.

The project was completed in a little over 200 hours including concept, design and programming.

Some notes:

  • Entire book was animated over 7 seconds in Cinema 4D and controlled in Flash with Actionscript 3.0
  • After Effects project contained 151 composited layers.
  • Over 2000 lines of Actionscript controlling all interactive elements.
  • The multi-pass rendering in Cinema 4D for 7 seconds of animation took around 3 hours

Check it out live now at http://www.lla-group.com and ‘click’ on the Interactive Broschure link.

Advertisements


3 Responses to “Digital Innovation from E3: A New Kind of 3D Interactive Brochure”

  1. I like the valuable info you supply to your articles. I will bookmark your blog and take a look at once more right here regularly. I’m fairly certain I’ll be informed lots of new stuff right here! Good luck for the following!

  2. wonderful issues altogether, you simply gained a emblem new reader.
    What might you suggest about your publish that you simply made some days
    in the past? Any positive?

  3. I am genuinely grateful to the holder of this website who has
    shared this enormous paragraph at at this place.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: