The 3 things we learned while building an 8-screen interactive installation

Anthony Méric
Jun 22, 2018 · 5 min read

In late 2017, Stink and Google partnered up to create a series of demos showcasing how to push the limits of Google Cloud technology. This was an an invite-only event for some of the world’s top C-suite executives (sorry, all!).

One of these installations demonstrated the wide range of collaboration possibilities with G-Suite. We wanted to create something that showcased the birth of an idea through its final delivery using interactive moments across eight screens, including a Jamboard.

As the centerpiece of the demo, we have a Jamboard, a giant 4K digital whiteboard designed for workplace collaboration.

When I was originally approached by Olivier and Erica about this installation, I thought they were crazy. Excited about the possibilities, I knew we had some challenges ahead:

  1. How do you animate eight screens in After Effect without real-time feedback? How do you make the set-up shareable for other animators on the team?
  2. How do you make the interactive moments work? How do you pass assets to the dev team? What is the setup gonna be? This isn’t flash or HTML, ya’ll!
  3. We wanted characters to come alive during the experience, which meant finding ways to bring them to life in a short time frame.

1. How to set up After Effects to handle the eight screens efficiently

Step 1: Setup the 8 screens

Step 2: Animations over the screens

Step 3: Setup cameras

Actually, this is the tricky part. At this stage, if we wanted to render the story inside each composition, we wouldn’t get the ball jumping from screen to screen because they are animated outside of the compositions. We needed a last magic trick: After Effects camera 🎥. We added a camera in front of each screen. When we were ready to render, we just had to select the right camera as the Active Camera and that was it. This is how we captured all the animations that were displayed inside and outside the screen.
So much win! 👊

During the process, we quickly realized that the installation would have to be interactive to give the audience a stake in the product. This is how we arrived at…


2. Setting up the interaction and seamlessly sharing it for accurate implementation

Empower your interactive animations with Bodymovin

Then, we teamed up with Sylvain Reucherand to find the best way to transform these animations into interactions. Based on the three words the audience picked for the first interaction, the dynamic conversation was recreated in code while we exported the complex fireworks of shapes using Bodymovin. Below a short example showing how to transfer animations data from After Effects into a json file.

After the first idea was born, guests got to follow the next part of the story from Docs, to Slides, to Sheets, and then finally tapping “send” at the end to launch the idea into the world.

Interactivity and animation are synced, now let’s bring the whole story to life!


3. Characters setup and animations

From Illustrator to After Effects: The mystical capabilities of Overlord

Overlord offered the opportunity to transfer thousands of shapes with one click. We didn’t need to waste time with repeated tasks (file organization, importing, converting to shape layers or redrawing), we just worked with the shapes, not files! Another bonus, the tool supported Ray Dynamic Color, which allowed us to dynamically use the Google color palette.


The animated piece


Conclusion

This is just the beginning. There’s a lot to be excited about using these new techniques and we’re looking forward to working on the next ones.

We hope you enjoyed the reading. Please check out our case study to discover the full project and the other Google Cloud interactive demos.

ready for the next challenge 👊

Team Stink

Words and thoughts from Stinkers around the globe.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store