The 3 things we learned while building an 8-screen interactive installation
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.
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:
- 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?
- 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!
- 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
The biggest challenge was how to display two minutes of animations on eight HD screens, and create beautiful moments where the animations are brought to life across all of the screens at the same time. Inside After Effects, we set up our main composition in three steps. Follow the process below:
Step 1: Setup the 8 screens
First, we created the same setup as the physical installation: eight compositions in both portrait and landscape mode. We can now animate our story inside each screen independently.
Step 2: Animations over the screens
Let’s add more fun and challenge to this setup! Say we wanted to animate a ball jumping from a screen to another. We needed to find an efficient workflow to avoid many hours of tweaks going back and forth inside each composition. The easiest way is to use the main composition as a giant canvas for our story and animate on top of all the screens.
Step 3: Setup cameras
We ended up with a great playground for our animations — let’s hit render!
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
Once the audience joined the meeting, we set up the initial interaction to feel like a Google Chat conversation happening between two people. We gave them some agency over the type of idea by having an audience member select three words on the Jamboard touchscreen.
Empower your interactive animations with Bodymovin
The Google universe is full of 2D shapes, color and smooth animations, which was a perfect playground to take advantage of Bodymovin. First, we created the story of these animations in After Effects to get the right look and feel.
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
We wanted to grab the attention of our audience at the very beginning. We created thirty seconds loops with seven character animations showing different actions: drinking coffee, playing with a phone, and a cat passing in front of the screen. At the center, a built-in webcam on the Jamboard to capture the reactions of the audience and invite them to start the experience.
From Illustrator to After Effects: The mystical capabilities of Overlord
We ended up with thousands of shape layers split between eight screens that were scheduled for two minutes of animations. To save time, we needed a fast and efficient portal between Illustrator and After Effects. Here is where Overlord comes into play.
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
Working on the G Suite Installation, we collaborated and pushed our limits to the next level. We’ve covered a lot of new challenges, combining conventional graphic design and animation with multiple synchronized screens to translate complex technology into a simple and approachable installation.
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.
