Making of Kufanya promotion video

kufanya-text

Kufanya is a to-do application we released for Android tablet. To promote the application we created a small video using stop motion techniques in Blender. It is the second video we did this way and both times we used the Blender compositor for it. Why? Well not because we know the system, as we have developed it, but also it really fits the job. The making of the video took us a single day. If we had more time we could fix some glitches in the animation.

Why did we use stop motion?

The first idea was to use screen capturing on the tablet itself, but you need to root the device in order to get that done. And as it is a new device we didn’t want to do that. The other option is to use Android SDK Android emulator and use a desktop-recorder. But that failed big time as the Java based android emulator is just too slow, making the video unusable. The last idea was to use stop motion and use the compositor to add details to the video.

Controlling the images

We created 15 screen-shots of the application in sequence and used the new clamp function of the compositor to control which frame to show. The clamp function will clamp the output value  between 0.0 and 1.0. The Frame node handles what image will be shown.

  • 0: show image 1
  • 0.5: mix image 1 and 2
  • 1: show image 2
  • 1.5 mix image 2 and 3

Using key-frames the images are controlled in the time-line.

Adding the keyboard

Only using stop motion would result in a boring video. We added a sliding keyboard to make the video more fancy. The sliding of the keyboard can be controlled and key-framed making it really easy to use.

The second input socket of the node group (see below) is used to control the sliding (0.0 = keyboard not visible, 0.5 = keyboard half visible, 1.0 = keyboard fully visible)

Adding the mouse

By adding a mouse we could demonstrate how easy the application works. You don’t operate the application with a mouse, but use your hand/finger. But most people can relate with the mouse cursor so we used it.

The mouse position and button needed to be controlled and should behave like a real mouse cursor. We created a node group that will composite the mouse on top of the rest of the animation and could control the position and mouse click. The mouse click influenced the shadow sharpness and position relative to the hand-icon.

This really did the trick. We could move the mouse, click the mouse-button and simulate a drag and drop motion with it.

Adding the status bar

In all screen-shots the status bar displayed different times, notices and icons.. We created a dummy status bar from one of the images and placed that on top of all the other screen-shots using a node group. We could modify all the images but we used the compositor for the flexibility.

Controlling the animation

The animation is controlled by 5 value nodes. each node handled a different part of the animation and was key-framed accordingly.

  • KeyboardOut: handled the sliding effect of the keyboard
  • MouseX: the absolute X position from the center of the image
  • MouseY: the absolute Y position from the center of the image
  • MouseClick: influenced the shadow of the mouse cursor
  • Frame: selected the image of the stop motion to show


The complete compositor node tree looks like this

Comments are closed.