Digital Innovation from E3: A New Kind of 3D Interactive Brochure
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)
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.
- 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.
Filed under: Creative, Internet-Digital, Technology, web site design | 3 Comments
Tags: 3D rendering, Cinema 4D, interactive online brochures