Show the product and it will sell itself

This video demonstrates that complex products are sometimes best explained by simply showing them at work – a technique Apple has successfully employed in much of their marketing. The video shows the concept of a product which is designed to bridge the divide between the digital and the real world. It works by printing your selected digital entity (for example, a web page, song, video or document) to a card in two forms: as a human-significant image and as a hidden machine-readable code. The card’s unique code is read by another device when it comes into contact with the card using Near Field Communication technology. This enables the original entity to be identified and retrieved.

Posted in Inspiration, Uncategorized | Tagged , , | Leave a comment

Creating an Animation: Part 3 – Animating a Falling, Bouncing Object

My first attempt at animation was disappointing.

I started on the easiest scene, or so I thought. Three blocks and a pound sign were to drop from the sky, one after another, to form a stack.
I imported the first image of a red block into Adobe Flash and successfully animating it using a motion tween which simply involves setting the object’s start and end positions and letting Adobe Flash take care of the frames in-between.
So, with my image happily moving from the top of the screen just out of the camera’s view to the bottom, where i imagined the ground would be, surely my task was complete? Well, not quite. The problem was that although the image of a block did unmistakably progress down the screen there was nothing remotely natural about its motion. It just didn’t look like it was really falling. Falling objects don’t move at a steady rate, and they don’t just stop dead when they hit the ground. They accelerate from when they are released until they reach terminal velocity or hit the ground, whichever comes first. Here’s a video I took of a 10cm Angry Bird being dropped 80cm onto a hard wooden floor to illustrate:

When we look at the movement in slow motion this effect becomes obvious:

I’ve annotated each frame with a measure, split into 10cm sections, to allow the acceleration of the bird to be clearly seen. It takes almost four frames (133ms) to clear the first 10cm marker but less than two frames (67ms) to clear the next one. When the ball hits the ground it abruptly stops, reverses direction and accelerates upwards, slowing as gravity exerts itself until gravity wins and the bird returns to the floor to bounce again. With each bounce, some energy is lost which causes the next bounce to be lower. This continues until there is no energy left and the bird comes to a rest. Different objects will have a different elasticity, and lose a different amount of energy on each bounce, but they all follow this general pattern:

Motion of falling, bouncing bird

With this knowledge, I modified my motion tween in the motion editor by adding a custom ease that mirrored the movement of the bird and applied this to the motion of the Y-axis:

Adobe Flash CS6 Motion Editor - falling, bouncing movement

This results in a more natural motion:

Below, you can see the result in the finished video. I had to suppress the bounce a little to fit in with the timing of the audio but you should still see a small but noticeable effect.

In my next post I’ll discuss another technique I picked up which helps enhance the bounce effect further.

Posted in Techniques | Tagged , | Leave a comment

Grumo Media

Shortly after describing my experience drafting a script for my first explanation video, I stumbled upon an excellent article by Grumo media which describes their video production process in detail, presented as a How-To guide. The article contains invaluable advice such as the importance of finalising the script, storyboards and list of assets prior to beginning animation, and pragmatic tips like using a blanket and iPhone microphone to record the voiceover as a low-budget alternative to using professional studio equipment. When I recorded the audio for my video I stood in the centre of the most furnished room of my house and used the iPad’s built-in microphone, but despite my best efforts a faint but perceptible echo can still be heard on the final video.

Below is an example of a video produced by Grumo Media. The animation has an exceptionally polished feel and the video did such a good job in explaining the PadMapper service that by the end, I felt fully conversant with its user interface and fully confident that, should I need to, I could use it to locate the perfect apartment.

Posted in Inspiration, Tools | Leave a comment


A really cleanly presented video which describes the crowd-sourced book publishing model offered by Unbound

The video is competently constructed and although overall it is not particularly innovative, i was very impressed by one scene and the manner in which they chose to represent it. Go to [1:04] and watch the animation corresponding to the phrase “tools for recommending unbound titles to friends”.

Posted in Inspiration | Leave a comment

Creating an Animation: Part 2 – The Script

In part 1, I described how I experimented with several drawing and animation tools until I settled on the ones that suited me. The next step was writing the script.

Having viewed a number of explanation videos produced by professional companies I began to develop a feel for their general structure and the things that worked. Most videos are around 90 seconds in length which is sufficiently long to communicate a core message but not too long that the audience becomes bored and switches off before they reach the end.
Although there is some variation in their narrative structure, a common technique is to split the video into three parts:

  1. State Problem (45%) Introduce a problem with which your audience will identify. Demonstrate how traditional attempts to solve this problem fall short.
  2. Introduce Solution (45%) Introduce an elegant solution that would solve the problem the audience now accepts they have. Demonstrate how your particular service or product is an unparallelled reification of this solution.
  3. Call to Action (10%) Politely instruct your audience to take action. The action may be as simple as visiting a website or signing up for a newsletter but it must be simple and tangible and it should take your viewer one step closer to forming a meaningful relationship with your product or service.

With this structure in mind, I set about writing a 1500 word brief which expanded on each of the points above as they applied to the service we were hoping to publicize. I initiated this primarily for my own benefit to help structure my thoughts but it also became a very useful tool for communicating with the other members of the project team and helped to invite their feedback.

The next task was to begin writing the script. Unfortunately, my natural tendency for verbosity – using ten syllables when one would suffice – became very apparent when I read through my initial draft. 90 seconds isn’t a long time so the choice of every single word is critical. After a great deal of editing and many readings I succeeded in removing all unnecessarily complex words and any that felt clumsy when spoken, leaving the finished script with just 14 sentences and less than 240 words to fill 100 seconds of video.

The script did undergo minor changes during recording. I dropped a couple of redundant words and swapped one or two that didn’t feel natural when spoken but generally the script remained intact after the initial drafting and editing process and I was pleased with the result.

Posted in Techniques | Leave a comment


A tool we seriously considered using to produce our explanation video was Xtranormal. This free tool allows you to generate a two minute video in a few minutes by selecting a backdrop and choosing from a list of 3 dimensional, rendered characters to read your script. A speech-synthesised voice is used to read your words and gestures can be added to emphasise or punctuate your characters’ conversation.
The basic, free service offers a selection of around twenty example sets with a choice of characters to play your roles. Premium services are provided which offer more choice and control over the look and behaviour of your actors.

Although, I think it is an excellent idea in principle, the videos produced using Xtranormal have a tendency to have the same distinctive look which makes it difficult to differentiate your service with your own style. And whilst being technically impressive, the speech-synthesised voice of the actors is very robotic and lacks emotion. Forget about incorporating jokes into your dialogue – the character’s sense of comedic timing is non-existent!

It is worth considering this tool if you have a low budget and a simple message to communicate but for complex concepts, that are better conveyed using diagrams or illustrations a whiteboard scribing style may be a better option. If you do choose to use Xtranormal I’d suggest using humans to voice your script, rather than the built-in voices. This will give you a a unique, living dialogue that is interesting and engaging to listen to.

Here’s a lighthearted example of a video created with Xtranormal:

Posted in Tools | Leave a comment

Prezi – zooming presentation software

This is an example of an explanation video created using a very interesting tool called Prezi which would appear to be an inexpensive way of producing an explanation video that is more dynamic than a simple PowerPoint presentation.

A Prezi is created by adding text and images, in a similar way that you would create a PowerPoint presentation but the difference is that everything is placed on a giant canvas, rather than individual slides. Transitions from one key point to the next is controlled by panning, zooming and rotating around the canvas rather than flipping from slide to slide. When these transitions are utilised thoughtfully it can assist with orientating the viewer, allowing them to see the context of the current point within the whole.

Posted in Inspiration, Tools | Leave a comment