How we created our product video

We had talked about why we decided to create video to present GrexIt to visitors to our site in this post we had done some time back. We have, since, been asked a lot how we created this video, being programmers, and not artists or animators. So here’s the story.

We started with looking at our options. If you have a product that you want to present with a video, we think you have the following options:

1. A product screen-cast with a voice-over, like this. This is usually easy to create with a screen-capture tool like Camtasia, which can also help you edit the video, add effects and combine a voice-over. You can also do the voice-over yourself, with a good quality microphone in a very quiet room. And if you want someone to do it all for you, talk to Demogirl. These ladies do a real neat job on this.

Why we did not do this for grexit: This is usually a good way to show a product’s features to users. But with GrexIt, we had to do more. We had to first state the user’s problem, present the basic idea about grexit and then show how grexit effectively solves the problem for the user. Really, we needed more than a product screen-cast.

2. An animated video with human-like characters, like this: It’s a video with animated human characters, with the characters talking and using gestures. This is a great idea if you want to present a story or concept through conversations between two or more characters. There are many tools online which can help you create and just such a video. Try GoAnimate and Xtranormal .

Why we did not do this for GrexIt: We could not really explain our story without a third person account being presented by a voice-over. Just the characters talking was not enough for us. Also, we wanted something very minimal.

3. A video that combines pictures/animations, a voice-over and product screen-shots, like the one on Dropbox. This can do a great job explaining hard ideas using pictures, simple animations and a voice.talking in the background. It is hard to create, but good at explaining hard concepts. We figured this is what we needed for GrexIt. And we started our efforts on figuring out how we can get one. Turns out there are agencies like Switch Marketing which can build such a video for you. The problem – they are astronomically expensive for a bootstrapped startup like ours. So, we figured if we wanted a great video, it was time to take matters into our hands.

In my previous life, I (Niraj) have been interested in sketching. I tried some doodling, and saw I could still draw pictures with some effort. I needed to use the eraser more than the pencil, but with some hard work, I could still make simple pictures. And Nitesh, in his previous life, knew some action-script.  He was never an animator – he did not know how to work on an animation time-line like flash animators would. But he could write code to move things on the screen.

And so we had the basic ingredients.

We first started with writing a script for the voice-over. We would write a script, quickly record it on the computer, and evaluate it for ‘impact’ and duration. We observed other videos to understand what is the right speed to narrate at. And we finalized the script when we brought down the duration to little over two minutes, and the impact to maximum.

After finalizing the voice-over script, we needed someone to record it – Santosh, a tech enthusiast from Bangalore, did it free of cost for us! Then, we worked on a screen-by-screen description of the video we wanted to build. Excerpts:

–
scene 3:
audio: He gets no information, and it turns out to be a pretty frustrating experience for him.scene: Ray throwing up his hands, frustrated.

scene 4:
audio: Ray has absolutely no idea that 10 months back, Simon and Ahhi, who also worked at WeCanSolve had discussed the same issue on email!
scene: Simon and Abhi roll in, and arrows shown between their mailboxes
–

Then, it was time to create the sketches according to what was needed by the scenes. We drew simple characters, often using simple character illustrations as references. We then scanned these sketches, and adjusted the white balance on Photoshop to make the backgrounds appear “exactly” whilte.

See the full gallery on Posterous

The sketches were then imported into Flash CS4 as images and then converted to movieclips. We used an as3 tweener library TweenMax. It is an easy to use library with which you can do a lot of good looking transitions very easily. So we placed the movieclips on different layers and worked out the animations for each of them. Syncing with audio was the hardest part and had to be done manually mostly. We embedded the mp3 audio file in the flash file and corrected the audio video syncing manually. This was painstaking, but we knew no other way.

Importing the video from flash was tricky. Since the complete animation was done in actionscript the “Import to Video” option in Flash CS4 did not work. Camtasia came to our rescue here!  We ran the swf animation file and did a screen video capture in camtasia with audio running in the background. Over the capture, we added a couple of zoom effects that can be done easily with Camtasia.

And voila! We had our shiny new product video. View below.