Video animation for Times Square Nasdaq screen

Live feed of Nasdaq screen in Times Square
Still from live feed of CMM video on Nasdaq screen in Times Square 6-25-09.

A client of ours, Sarah Fey, came to us with a rush video animation job. When we found out the video would be displayed on the huge Nasdaq video billboard in Time Square, we couldn’t pass it up. To watch the final video and footage from the live feed, click here. To learn more about the process of producing the video, read on…

The video was for a new company called Medidata. The client gave me approved storyboards that showed frames from the animation and approximate time codes of when animations would happen. I set up a new After Effects project and got to work. This video was a little different than other videos I have worked on due to the quirks of the Nasdaq billboard. For one thing, the video is taller than it is wide, unusual for a video. Even stranger, the video needed to be submitted to Nasdaq as 1280×720 HD video, a completely different aspect ratio than the actual screen. To account for this, Nasdaq recommends first building the video in the middle area of a 1280×720 comp. Then, scale the width of this comp 237% to make the edges of your comp go to the edges of the screen. This video will look very distorted but when it is put in the Nasdaq system, it will be re-scaled to appear correctly.

The other issue is that 3/4 of the video is partly covered by a series of windows. On the final output, these windows are masked out, so whatever is in those places on the video will be blank. This presents a challenge to text, because you want to make sure that your text is large enough to be readable even if parts are masked out by the windows. Nasdaq provided me with a handy template that you can use to see where the windows will be in the final output, and adjust your text accordingly.

The first thing I did after setting up the comp at the correct size and putting in the window overlay was to bring in all of the elements. The client provided me with the images of the doctor and their logo to use. For the text, I decided to do that within After Effects instead of using images for two reasons: 1) Text will appear sharper and can be scaled without loss in resolution and 2) Will be much easier to change in case the client decides to change to wording partway through.

From there, I began to lay out of the elements at their proper entry points on the timeline. Once that was done, I took stills from different points in the video and put them up on an HTML page so that the client could see how the video was looking. Once those were approved, I went to work on the actual animation (having done most of my recent animations via Actionscript in Flash, it was interesting to go back to timeline animation). So I got to work keyframing all of the elements, previewing them, tweaking etc. Although I had an idea of when the animations should start and stop, I always find they change slightly when you start watching the animation and get into the flow of it. My favorite part was doing the cascading wall of “data”, in which instances of the word “data” will fall from the top of the screen and eventually fill the entire screen. I used a particle effects generator to give it a random feel, and adjusted the settings until it looked like I wanted.

After a couple of revisions and some more timing adjustments, the video was completed, rendered and sent to Nasdaq. We were able to capture some of the live stream of it running in Times Square, very exciting to see it at its full size. You can check out the full video and the Nasdaq capture here. Thanks for reading!

About Curious Minds
We are a web development firm in New York and Chicago, providing development resources and consulting for websites and mobile apps since 2004.