What is Screenlife?

Localization for most U.S. films and shows means the dialogue is dubbed and subtitled for a given non-English market. But what do you do when the entire movie is a collage of websites, app windows, chat bubbles, and mouse clicks? Missing is a “Screenlife” movie, and 100% of its run-time plays out on computer screens and phones.

Imagine looking over someone’s shoulder while they’re using their laptop. We can intuit what they’re thinking when they browse through their tabs, ignore a notification, or type in a search term. We can fake this experience by framing different parts of the screen and animating the mouse manually. Check out the trailer so you can get a feel for the effect. One of the slogans the directors have used is, “If you had enough time, you could make a movie like this only using an Adobe subscription and a phone camera.” 

The computer desktop environments are completely simulated in Illustrator. The mouse cursor, website animations, and typing are all roughed together in Premiere and then fabricated in After Effects. There are lots of subtle finishing effects that bring it all together, but it really is that simple. Here is a great behind-the-scenes interview with the editors. Peeking inside the project files is wild. The number of layers is brain-melting! And it was my team’s job to translate every website, every app, every time it appears on-screen. Every. Single. Word.

Step 1: Templating

So let’s say a Gmail window was actively being used by the character. I would pull up the associated Illustrator file that contained the Gmail designs for that shot. I created a clean plate graphic where I hid all the text in Illustrator. Then we brought over text boxes from Illustrator into After Effects using Overlord by Battle Axe. 

Everything in user interfaces, websites, or other apps have buttons, backgrounds and spaces that automatically adjust in the real world. But in our fake world we need to think ahead to what this editable text might do to the stuff around it or under it when it changes shape. Some things can be fudged or masked out in After Effects, but the safest thing to do is also Overlord any graphics that are dependent on word length.

We call plugging different elements into each other so that they have a movement relationship “rigging.” So we would rig all kinds of things together. One of our common reused rigs was website navigation. I could program the new text areas to make room for the new language and space links or buttons out appropriately and automatically. 

The template is complete when all the important text is now an After Effects text layer. One crazy thing about these project files is that they’re already dense. By reconstituting editable text, we were taking files with 500 layers (conservative guess) and blowing them up to easily contain five times as many.

Step 2: Importing New Languages

We used Text2Spreadsheet by Mamoworld to scan an entire After Effects project file for text layers, and produce a clean spreadsheet listing each line individually. You can manipulate this spreadsheet in any way you want and then * poof * you can re-import all those text values back into the project. 

Preparing the spreadsheet properly was just as important as rigging the text and graphics. If I templated a section, I was ultimately responsible for its translation document. One row in the spreadsheet could represent one word, or multiple paragraphs. And my craziest section produced a spreadsheet with 2,600 ROWS.

Before we sent our official section spreadsheet off to the translators, we inventoried what text went where. For instance 25 text boxes in the Facetime app window got turned into 25 spreadsheet rows. I would then label those rows with “Facetime,” color-code them, and name the corresponding screenshots so that they would be intuitive to use.

Step 3: Cleanup

Quality control was the most intense phase of the workflow. Without listing the many silly, funny, and crazy-making instances of stuff we needed to smooth out, suffice to say we went googly-eyed staring at tiny details that were noticeable on screen. 

Our templates covered as much as we could humanly anticipate, but there were always designs, text, and surprising elements that just broke when we imported a new language. One really common gotcha was text boxes that were set to “paragraph text” rather than “point text.” 

Another thing we did was rig text too well. There are several scenes where the character is scrolling a page of search results, hovers over one, and clicks it. Not too bad, right? Well… if that paragraph and all the preceding paragraphs are 1.5 times as long because the translation expanded them all… and the spacing between paragraphs was perfectly maintained because you’re so good at rigging… well… the mouse clicks into a random space in the middle of the screen. Whoops! Easy to fix, hard to predict.

There were also funny goofs that just snowballed and glaringly showed up as we were all doing final reviews. Some were big adjustments, some were small mistakes. But as we got to know our sections better, our ability to anticipate and adjust grew quickly. Plus, we all worked on each others’ sections and therefore learned so many diverse After Effects skills from each other.